/**************** ********************************************************************************************************* Project: Climb for Care Level: Global Styles Author: Rob McKenzie Date: 2nd September 2009 Company: Grow Media Website: http://www.growmedia.ca Contents 01 - GENERAL 02 - HEADER 03 - TOP NAVIGATION 04 - MAIN NAVIGATION 05 - BODY Colors Used Blue : #336699 Orange : #ff6600 *************** ********************************************************************************************************* 01 - GENERAL ********************************************************************************************************* *************** */ *{margin:0;padding:0} html{background-color:#369} body{background-color:#FFF;font-family:Verdana, Helvetica, Arial, Sans-serif;font-size:62.5%;margin:0 auto;position:relative;width:800px} h3{margin-bottom:18px} h4{margin-bottom:18px} .hiddenImage{display:none} div#header{height:172px;position:relative} div#header_fr{height:172px;position:relative} div#header h1{background:url(_images/climb-logo-master_en.jpg) no-repeat 0 0;font-size:10px;height:142px;position:relative;text-indent:-999em;top:30px;width:800px} div#header_fr h1{background:url(_images/climb-logo-master_fr.jpg) no-repeat 0 0;font-size:10px;height:142px;position:relative;text-indent:-999em;top:30px;width:800px} a#home-link{height:142px;left:0;position:absolute;text-indent:-999em;top:30px;width:800px;outline:none} /**************** ********************************************************************************************************* 03 - TOP NAVIGATION ********************************************************************************************************* ****************/ ul#topNavigation{background-color:#369;font-size:1.1em;height:22px;list-style:none;padding-top:8px;position:absolute;text-align:right;top:0;width:800px} ul#topNavigation li{border-left:1px solid #fff;display:inline;margin-left:10px;padding-left:10px} ul#topNavigation li.first{border:none} ul#topNavigation li a{color:#fff;text-decoration:none} ul#topNavigation li a:hover{text-decoration:underline} ul#mainNavigation{background-color:#f60;list-style:none;position:relative} ul#mainNavigation_fr{background-color:#f60;list-style:none;position:relative} ul#mainNavigation li{border-bottom:1px solid #fff;border-left:1px solid #fff;border-top:1px solid #fff;float:left;text-align:right} ul#mainNavigation_fr li{border-bottom:1px solid #fff;border-left:1px solid #fff;border-top:1px solid #fff;float:left;text-align:right} ul#mainNavigation li.first{border-left:none} ul#mainNavigation_fr li.first{border-left:none} ul#mainNavigation li a{background-color:#f90;color:#fff;display:block;font-size:1.3em;height:50px;padding:30px 10px 20px 0;text-decoration:none;text-transform:uppercase;width:89px} ul#mainNavigation_fr li a{background-color:#f90;color:#fff;display:block;font-size:1.1em;height:50px;padding:30px 10px 20px 0;text-decoration:none;text-transform:uppercase;width:89px} ul#mainNavigation li a.first{width:90px} ul#mainNavigation_fr li a.first{width:90px} ul#mainNavigation li a:hover{background-color:red} ul#mainNavigation li a.active{background-color:red} ul#mainNavigation_fr li a:hover{background-color:red} ul#mainNavigation_fr li a.active{background-color:red} /**************** ********************************************************************************************************* 04.1 - HOME NAVIGATION ********************************************************************************************************* *************** */ div#pageDescription{background-color:#f60;border-bottom:1px solid #fff;color:#fff;height:40px} div#pageDescription h2{font-size:1.4em;font-weight:400;padding:10px 0 0 20px} ul#homeNavigation{height:201px;list-style:none;position:relative} ul#homeNavigation_fr{height:201px;list-style:none;position:relative} ul#homeNavigation li{float:left;text-align:right} ul#homeNavigation_fr li{float:left;text-align:right} ul#homeNavigation li#nav01{left:0;position:absolute;top:0} ul#homeNavigation_fr li#nav01{left:0;position:absolute;top:0} ul#homeNavigation li#nav02{left:101px;position:absolute;top:0} ul#homeNavigation_fr li#nav02{left:101px;position:absolute;top:0} ul#homeNavigation li#nav03{left:101px;position:absolute;top:101px} ul#homeNavigation_fr li#nav03{left:101px;position:absolute;top:101px} ul#homeNavigation li#nav04{background:url(_images/home-nav-hill.jpg) 0 0 no-repeat;height:201px;left:201px;position:absolute;top:0;width:200px} ul#homeNavigation_fr li#nav04{background:url(_images/home-nav-hill.jpg) 0 0 no-repeat;height:201px;left:201px;position:absolute;top:0;width:200px} ul#homeNavigation li#nav05{left:401px;position:absolute;top:0} ul#homeNavigation_fr li#nav05{left:401px;position:absolute;top:0} ul#homeNavigation li#nav06{left:401px;position:absolute;top:101px} ul#homeNavigation_fr li#nav06{left:401px;position:absolute;top:101px} ul#homeNavigation li#nav07{left:501px;position:absolute;top:0} ul#homeNavigation_fr li#nav07{left:501px;position:absolute;top:0} ul#homeNavigation li#nav08{left:501px;position:absolute;top:101px} ul#homeNavigation_fr li#nav08{left:501px;position:absolute;top:101px} ul#homeNavigation li#nav09{left:601px;position:absolute;top:0} ul#homeNavigation_fr li#nav09{left:601px;position:absolute;top:0} ul#homeNavigation li#nav10{left:601px;position:absolute;top:101px} ul#homeNavigation_fr li#nav10{left:601px;position:absolute;top:101px} ul#homeNavigation li#nav11{left:701px;position:absolute;top:101px} ul#homeNavigation_fr li#nav11{left:701px;position:absolute;top:101px} ul#homeNavigation li a{background-color:#f90;color:#fff;display:block;font-size:1.3em;height:40px;padding:30px 10px 30px 0;text-decoration:none;text-transform:uppercase;width:89px} ul#homeNavigation_fr li a{background-color:#f90;color:#fff;display:block;font-size:1.1em;height:40px;padding:30px 10px 30px 0;text-decoration:none;text-transform:uppercase;width:89px} ul#homeNavigation li a:hover{background-color:red} ul#homeNavigation_fr li a:hover{background-color:red} ul#homeNavigation li#nav02 a{background-color:#f60} ul#homeNavigation li#nav03 a{background-color:#f60} ul#homeNavigation li#nav11 a{background-color:#f60} ul#homeNavigation_fr li#nav02 a{background-color:#f60} ul#homeNavigation_fr li#nav03 a{background-color:#f60} ul#homeNavigation_fr li#nav11 a{background-color:#f60} ul#homeNavigation li#nav02 a:hover{background-color:red} ul#homeNavigation li#nav03 a:hover{background-color:red} ul#homeNavigation li#nav11 a:hover{background-color:red} ul#homeNavigation_fr li#nav02 a:hover{background-color:red} ul#homeNavigation_fr li#nav03 a:hover{background-color:red} ul#homeNavigation_fr li#nav11 a:hover{background-color:red} /**************** ********************************************************************************************************* 05 - BODY ********************************************************************************************************* *************** */ ul#body{clear:left;padding-bottom:50px;position:relative} ul#body a:hover{text-decoration:none} ul#body li{list-style:none} ul#body li#subHeading{background-color:#f60;height:100px;position:relative;text-transform:uppercase} ul#body li#subHeading_fr{background-color:#f60;height:100px;position:relative;text-transform:uppercase} ul#body li#subHeading h2{background:url(_images/kili-silouhette-white.png) no-repeat 0 0;color:#fff;font-size:2em;height:50px;margin-left:40px;padding-left:320px;padding-top:50px} ul#body li#subHeading_fr h2{background:url(_images/kili-silouhette-white.png) no-repeat 0 0;color:#fff;font-size:2em;height:50px;margin-left:40px;padding-left:320px;padding-top:50px} /**************** ********************************************************************************************************* 05.1 - MAIN CONTENT ********************************************************************************************************* *************** */ ul#body li#mainContent{border-right:1px solid #bbb;font-size:1.2em;line-height:1.5em;margin-top:40px;padding:0 60px 0 40px;width:450px} ul#body li#mainContent p{margin-bottom:18px} ul#body li#mainContent ul{margin-bottom:18px} ul#body li#homeContent ul{margin-bottom:18px} ul#body li#mainContent ul li{list-style:disc;list-style-position:inside} ul#body li#homeContent ul li{list-style:disc;list-style-position:inside} ul#body li#mainContent h4{clear:both} ul#body li#mainContent img.floatLeft{float:left;margin:0 20px 20px 0} ul#body li#mainContent img.floatRight{float:right;margin:0 0 20px 20px} /**************** ********************************************************************************************************* 05.1.1 - HOME CONTENT ********************************************************************************************************* *************** */ ul#body li#homeContent{font-size:1.2em;line-height:1.5em;margin-top:40px;padding:0 40px} ul#body li#homeContent p{margin-bottom:18px} /**************** ********************************************************************************************************* 05.1.2 - MAIN CONTENT OL ********************************************************************************************************* ****************/ ul#body li#mainContent ol{margin:0 0 12px 20px} ul#body li#mainContent ol li{list-style:decimal;margin-bottom:12px;} ul#body li#mainContent ol li ul{list-style:disc;margin-left:30px;margin-bottom:0} ul#body li#mainContent ol li ul li{margin-bottom:0} /**************** ********************************************************************************************************* 05.2 - SIDE BAR ********************************************************************************************************* *************** */ ul#body li#sidebar{font-size:1.2em;font-weight:700;line-height:1.5em;position:absolute;right:30px;top:140px;width:190px} ul#body li#sidebar a{text-decoration:none} ul#body li#sidebar a:hover{text-decoration:underline} ul#body li#sidebar p{font-weight:400;padding:12px 0 12px} ul#body li#sidebar ul{margin-bottom:24px} /**************** ********************************************************************************************************* 05 - FOOTER ********************************************************************************************************* *************** */ div#footer{background-color:#369;border-top:10px solid #f60;color:#fff;font-size:1.2em;height:100px;padding-top:10px;text-align:right}