/* CSS Document */ /* Copyright 2008 Christopher Taylor, Stephen Dupree & Diva Creative */ /* Reproduction of this Design is strictly prohibited */ /* -------------------------------------------------------------------------------------------------------------------- =IMPORT SEPERATE STYLE SHEETS -------------------------------------------------------------------------------------------------------------------- */ @import url("reset_css.css"); @import url("print.css"); @import url("typography.css"); @import url("fixes.css"); /* -------------------------------------------------------------------------------------------------------------------- =LAYOUT -------------------------------------------------------------------------------------------------------------------- */ /* =html */ html { background-color:#FFF; min-width:820px; } /* background :url(../images/html_bg.png) repeat-x; min-width:900px; */ /* =body */ body { position : relative; margin:0px auto; background:url(../images/bg_wrap.png) repeat-y center top; } /* body.normal { background: transparent url(../images/bg_normal.png) no-repeat center top; } */ #blank { background:none; background-color:#FFF; } /* Clear fix */ #feature:after, #container:after { content: "."; display: block; height: 0; clear: both; line-height: 0; visibility: hidden; } /* General structure -------------------------------------------------- */ /* Content Wrapper */ #content-wrap { clear:both; width: 820px; margin: 0px auto; position: relative; } /* Image at Bottom of main content area */ /* #bottom-bg { background: url(images/bottom-bg.jpg) no-repeat right bottom; } */ /* Header */ /* #header { height: 256px; width: 900px; margin: 0 auto; position: relative; } */ /* Main Navigation */ /* Sidebar Content - Left Column */ #sidebar { float:left; position:relative; width: 165px; height:800px; padding: 0px; } /* Main page content - Right Column */ #content { float:left; position:relative; width: 630px; margin: 0px; } /* Footer */ #footer { position:relative; background: url(../images/bg_footer.png) no-repeat center top; width: 820px; height: 70px; margin: 0px auto; clear:both; } /* =main elements */ #masthead { width:100%; } #home div#masthead { position:relative; width: 820px; margin:0px auto; background:url(../images/masts/mast_home.png) no-repeat top center; height:180px; } /* -------------------------------------------------------------------------------------------------------------------- =NAVIGATION -------------------------------------------------------------------------------------------------------------------- */ /* =main navigation ----------------------------------------------------------------------------------------------------- */ #main_nav { position: relative; width: 155px; height:440px; left:0px; } #main_nav ul { height:40px; margin: 0px 0px 0px 0px; list-style: none; padding: 0px 0px 0px 10px; } #main_nav li { float:left; display: inline; height:40px; color:#FFFFFF; margin:0px 0px 0px 0px; padding:0px; text-indent:-99999px; } #main_nav li a { display: block; height: 100%; overflow: hidden; width: 100%; } #nav_home { width:155px; height:40px; } #nav_model { width:155px; height:40px; } #nav_training { width:155px; height:40px; } #nav_resourcepack { width:155px; height:40px; } #nav_resources { width:155px; height:40px; } #nav_awards { width:155px; height:40px; } #nav_gallery { width:155px; height:40px; } #nav_healthy { width:155px; height:40px; } #nav_celebrations { width:155px; height:40px; } #nav_links { width:155px; height:40px; } #nav_contact { width:155px; height:40px; } #nav_home a { background:url(../images/mainNav/nav_btns.png); } #nav_model a { background:url(../images/mainNav/nav_btns.png); } #nav_training a { background:url(../images/mainNav/nav_btns.png); } #nav_resourcepack a { background:url(../images/mainNav/nav_btns.png); } #nav_resources a { background:url(../images/mainNav/nav_btns.png); } #nav_awards a { background:url(../images/mainNav/nav_btns.png); } #nav_gallery a { background:url(../images/mainNav/nav_btns.png); } #nav_healthy a { background:url(../images/mainNav/nav_btns.png); } #nav_celebrations a { background:url(../images/mainNav/nav_btns.png); } #nav_links a { background:url(../images/mainNav/nav_btns.png); } #nav_contact a { background:url(../images/mainNav/nav_btns.png); } /* Cuurent page */ #nav_home.current a { background-position: 155px 0px; } #nav_model.current a { background-position: 155px -40px;} #nav_training.current a { background-position: 155px -80px; } #nav_resourcepack.current a { background-position: 155px -120px; } #nav_resources.current a { background-position: 155px -160px; } #nav_awards.current a { background-position: 155px -200px; } #nav_gallery.current a { background-position: 155px -240px; } #nav_healthy.current a { background-position: 155px -280px; } #nav_celebrations.current a { background-position: 155px -320px; } #nav_links.current a { background-position: 155px -360px; } #nav_contact.current a { background-position: 155px -400px; } /* Rollover */ #nav_home a { background-position: 0px 0px; } #nav_home a:hover { background-position: 155px 0px; } #nav_model a { background-position: 0px -40px; } #nav_model a:hover { background-position: 155px -40px; } #nav_training a { background-position: 0px -80px; } #nav_training a:hover { background-position: 155px -80px; } #nav_resourcepack a { background-position: 0px -120px; } #nav_resourcepack a:hover { background-position: 155px -120px; } #nav_resources a { background-position: 0px -160px; } #nav_resources a:hover { background-position: 155px -160px; } #nav_awards a { background-position: 0px -200px; } #nav_awards a:hover { background-position: 155px -200px; } #nav_gallery a { background-position: 0px -240px; } #nav_gallery a:hover { background-position: 155px -240px; } #nav_healthy a { background-position: 0px -280px; } #nav_healthy a:hover { background-position: 155px -280px; } #nav_celebrations a { background-position: 0px -320px; } #nav_celebrations a:hover { background-position: 155px -320px; } #nav_links a { background-position: 0px -360px; } #nav_links a:hover { background-position: 155px -360px; } #nav_contact a { background-position: 0px -400px; } #nav_contact a:hover { background-position: 155px -400px; } /* =dropdown menu ----------------------------------------------------------------------------------------------------- */ /* Misc -------------------------------------------------- */ /* Buttons -------------------------------------------------- */ /* Tab Boxes -------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------- =HEADER -------------------------------------------------------------------------------------------------------------------- */ h1#logo { position:absolute; left:580px; top:60px; background: url(../images/logo-trans.png) no-repeat; width:275px; height:100px; text-indent:-9999px; overflow:hidden; margin:0px; } div#twilight_note { position:absolute; left:-50px; top:20px; background: url(../images/training_note-trans.png) no-repeat; width:172px; height:159px; text-indent:-9999px; overflow:hidden; margin:0px; } div#twilight_note a { display:block; width:172px; height:159px; } /* -------------------------------------------------------------------------------------------------------------------- =CONTENT -------------------------------------------------------------------------------------------------------------------- */ /* Main content area Top positioned bg image -------------------------------------------------- #bgImage_top { background: url(../images/top-bg.jpg) no-repeat right top; height: 440px; position: absolute; width: 820px; top: 0; right: 0; z-index: 2; } Left Column -------------------------------------------------- */ div.hr { height: 3px; background: #fff url('../images/hr.gif') repeat-x scroll center; } div.hr hr { display: none; } div.hrBlue { height: 1px; background-color: #0faccc; margin: 5px 0; } div.hrBlue hr { display: none; } #mainCopy { padding:0px 0px 0px 13px; } #nav_logocross { background:url(../images/cross_logo.jpg) top center no-repeat; position: relative; width: 162px; height: 360px; background-position: -1px -1px; display:block; } /* Main Content Area Elements -------------------------------------------------- */ #welcome { float: left; background :url(../images/home/1.gif) top left no-repeat; height: 340px; width: 385px; } #latestnews { float: left; background: url(../images/home/newsbg.png) bottom right no-repeat; height: 340px; width: 224px; margin-left: 5px; } #newsbox { height: 275px; background-color: #e8d8c8; padding: 5px 10px 5px 10px; overflow: auto; } #titlebar { height: 30px; width: 620px; margin-bottom: 5px; } #music { float: left; height: 110px; width: 190px; margin-top: 5px; } #waterbottle { float: left; height: 110px; width: 190px; margin: 5px 0 0 5px; } #teenlifecheck { float: left; height: 100px; width: 70px; margin: 1px 3px 3px 0px; } #teenlifecheck2 { float: left; height: 110px; width: 190px; margin-top: 5px; } #allnews { float: left; background: url(../images/home/btn_allnews-off.jpg) no-repeat; height: 110px; width: 224px; margin: 5px 0px 0px 5px; } #newsletters { float: left; background: url(../images/home/btn_allnews-off.jpg) no-repeat; height: 110px; width: 224px; margin: 5px 0px 0px 5px; } #getinvolved { float: left; background: url(../images/home/getinvolved_tile.gif) no-repeat; height: 110px; width: 224px; margin: 10px 0px 0px 5px; } #maintextarea { float:left; width: 615px; margin-top: 10px; } .imagesleft { float:left; margin: 5px 20px 10px 0px; border: thick double #999999; clear: both; } .imagesright { float:right; margin: 5px 0px 10px 20px; border: thick double #999999; clear: both; } .floatLeft { float:left; margin: 0px 5px 0px 0px;} .floatRight { float:right; margin: 0px 0px 0px 5px;;} .imageslogos { float:left; margin: 10px 6px 20px 0px; border: none; } #gallery_training img { margin: 2px; padding: 2px; border: 2px solid #999999; } #gallery_celebrations img { margin: 2px; padding: 2px; border: 2px solid #999999; } #gallery_reviewday img { margin: 2px; padding: 2px; border: 2px solid #999999; } .pullquote { float:right; width: 180px; font-size: 1.2em; color: #169CAB; text-align: right; margin: 0px 0px 10px 10px; } #timeline { float:right; width: 210px; margin-left: 50px; } #dateblock { margin-bottom: 20px; clear: both; } .dateimage { float:left; margin-right: 10px; } div.clear { clear: both; } /* Back to top -------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------- =SIDEBAR CONTENT -------------------------------------------------------------------------------------------------------------------- #pledge { background: url(../images/sidebar/bg_pledge.png) no-repeat; padding: 44px 10px 10px 85px; } #poll { background: url(../images/sidebar/bg_poll.png) no-repeat; padding: 44px 10px 10px 85px; } #latestNews { background-color:#FFFFFF; padding: 0px 15px 0px 15px; height:250px; width:270px; } .sidebarFooter { height:1px; width:300px; margin: 0 0 10px 0; padding: 0; background: url(../images/sidebar/sidebar_footer.png); } -------------------------------------------------------------------------------------------------------------------- =FOOTER -------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------------------------------- =IMAGES -------------------------------------------------------------------------------------------------------------------- .clear { clear: both; } .left { float: left; } .right { float: right; } .center { text-align: center; margin: auto; } p.left { margin: 5px 15px 0px 0px; } p.right { margin: 5px 0px 0px 5px; } p.both { clear: both; margin-top: 10px; } p.image img { padding: 3px; border: 1px solid #D9D9D9; } p.image a:hover img { border: 1px solid #666; } p.image a, p.image a:visited { background: none !important; border: none !important; padding: 0 !important; } p.image a:hover { text-decoration: underline; } img.left { float: left; margin-right: 3px; } img.right { float: right; margin-left: 3px; } img.image { padding: 3px; border: 1px solid #D9D9D9; } -------------------------------------------------------------------------------------------------------------------- =BUTTONS -------------------------------------------------------------------------------------------------------------------- */