@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/* OVERALL */
body { width: 1024px; height: 768px; margin: 0 auto; position: relative; font-family: 'Montserrat', arial, sans-serif; }
h1 { }
h2 { color: #4e8abe; font-weight: bold; font-size: 13px; margin-bottom: 6px; }
h2 a { color: #4e8abe; }
h2 a:hover { text-decoration: underline; }
a { text-decoration: none; }
section { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 580px; padding-top: 188px; display: none; }
.content section { background: url(../images/bg-content.png) repeat-y; }
aside { width: 207px; height: 580px; float: left; }
aside img { margin: 50px 0 20px 40px; }
aside h1 { font-size: 16px; line-height: 22px; color: #fff; text-transform: uppercase; margin-left: 40px;  }
section article { font-family: Verdana, Arial, sans-serif; font-size: 11px; line-height: 17px; overflow: hidden;  }
section article p { margin-bottom: 14px; }
.page { padding-left: 54px; height: 602px; overflow: hidden; }
.page ~ .page { display: none; }
.half { width: 340px; float: left; margin-top: 40px; }
.half ~ .half { margin-left: 40px; }
.half h2 ~ h2 { margin-top: 25px; }
.single { padding-top: 40px; }
.single h2 ~ h2 { margin-top: 25px; }
.page-btns { display: block; width: 40px; height: 40px; background: url(../images/sprite-page-arrows.png) no-repeat; position: absolute; }
#prev-page {  left: 20px; bottom: 20px; display: none; }
#next-page { background-position: -41px 0; right: 20px; bottom: 20px; }

/* HEADER */
header { width: 100%; position: absolute; top: 0; left: 0; z-index: 100; }
header #header-top { height: 140px; width: 100%; background: url(../images/bg-2014-main.jpg) no-repeat bottom left #00af9f; border-bottom: 7px solid #fff; }
header #header-top span { display: block; color: #80d7cf; font-size: 18px; line-height: 22px; position: absolute; left: 450px; top: 33px;  }
header #header-bottom { height: 42px; background: #4e8abe; }
header #header-bottom.expand { height: 129px; background: url(../images/bg-nav-hover.png) repeat-x bottom; }

/* MAIN NAV - HOME */
#main-nav { position: absolute; top: 323px; left: 60px; }
#main-nav li { float: left; position: relative;}
#main-nav li ~ li { margin-left: 18px; }
#main-nav li a { display: block; width: 74px; height: 59px; background: url(../images/sprite-nav-icons-vertical.png) no-repeat; }
#main-nav li a#freeway { background-position: 0 -60px; }
#main-nav li a#bus { background-position:  0 -120px; }
#main-nav li a#street { background-position: 0 -180px; }
#main-nav li a#rail { background-position: 0 -240px; }
#main-nav li a#bike { background-position: 0 -300px; }
#main-nav li a#corporate { background-position: 0 -360px; }
#main-nav li a#lrtp { background-position: 0 -420px; }
#main-nav li a#strategic-plan { background-position: 0 -480px; }
#main-nav li a#financials { background-position: 0 -540px; }
#main-nav li span { display: block; width: 200px; height: 25px; background: url(../images/graphic-nav-lines.png) no-repeat top center; text-align: center; color: #fff; font-size: 14px; line-height: 18px; padding-top: 32px; position: absolute; left: -63px; bottom: -57px; display: none; }
#main-nav li:hover span { display: block; }

/* MAIN NAV - CONTENT */
.content #main-nav { top: 112px; left: 258px; }
.content #main-nav li ~ li { margin-left: 0; }

/* HOME */
#home-top { background: url(../images/bg-2014-home.jpg) no-repeat bottom left #00af9f; height: 348px; margin-bottom: 8px; position: relative; }
#home-bottom { background: #4e8abe; height: 412px; position: relative; }
#home-logo { display: block; width: 57px; height: 71px; background: url(../images/logo-octa.jpg) no-repeat; position: absolute; right: 34px; bottom: 30px; }
#home-bottom h1 { color: #a7c5df; font-size: 30px; line-height: 34px; position: absolute; top: 190px; left: 60px; }

/* INTRO */
.intro section { background: #4e8abe; }
.intro section img { display: block; float: left; margin: 110px 30px 0 50px}
.intro section article { float: left; width: 700px; margin-top: 122px; color: #fff; font-size: 16px; line-height: 28px; }
.intro p ~ p { margin-top: 16px; }

/* FREEWAY */
.freeway aside { background: url(../images/graphic-freeway-left.png) no-repeat bottom; }
.freeway #page-2 { background: url(../images/bg-freeway.jpg) no-repeat; }
.freeway .single { width: 490px; }

/* BUS */
.bus aside { background: url(../images/graphic-bus-left.jpg) no-repeat bottom; }
.bus #page-2 { background: url(../images/bg-bus.jpg) no-repeat; }
.bus .single { width:320px; }

/* STREET */
.street aside { background: url(../images/graphic-street-left.jpg) no-repeat bottom; }
.street #page-2 { background: url(../images/bg-street.jpg) no-repeat; }

/* RAIL */
.rail aside { background: url(../images/graphic-rail-left.jpg) no-repeat bottom; }
.rail #page-2 { background: url(../images/bg-rail.jpg) no-repeat; }
.rail .single { width: 280px; }

/* BIKE */
.bike aside { background: url(../images/graphic-bike-left.jpg) no-repeat bottom; }
.bike #page-2 { background: url(../images/bg-bike.jpg) no-repeat; }
.bike .single { width: 440px; margin-top: 240px; }

/* CORPORATE */
.corporate aside { background: url(../images/graphic-corp-left.jpg) no-repeat bottom; }
.corporate #page-2 { background: url(../images/bg-corp.jpg) no-repeat; }
.corporate .single { width: 360px; }

/* LRTP */
.lrtp aside { background: url(../images/graphic-lrtp-left.jpg) no-repeat bottom; }
.lrtp #page-2 { background: url(../images/bg-lrtp.jpg) no-repeat; }
.lrtp .single { width: 360px; }

/* STRATEGIC PLAN */
.strategic-plan aside { background: url(../images/graphic-strategic-plan-left.jpg) no-repeat bottom; }
.strategic-plan #page-2 { background: url(../images/bg-strategic-plan.jpg) no-repeat; }
.strategic-plan .single { width: 360px; }

/* FINANCIALS */
.financials section { background: #005695; }
#financials-logo { display: block; width: 43px; height: 54px; background: url(../images/logo-octa-financials.jpg) no-repeat; position: absolute; left: 34px; bottom: 128px; }
#financials-info { font-size: 8px; color: #fff; font-family: Verdana, Arial, sans-serif; line-height: 14px; position: absolute; bottom: 34px; left: 34px; }
#financials-info a { color: #fff;  }
#financials-info a:hover { text-decoration: underline; }
#financials-pdf { display: block; width: 188px; height: 99px; background: url(../images/graphic-financials-pdf.jpg) no-repeat; color: #fff; font-family: Verdana, Arial, sans-serif; font-style: italic; font-size: 12px; line-height: 15px; padding: 100px 0 0 135px; position: absolute; top: 550px; left: 280px;   }

/* FOOTER */
footer {}