/* ---------------------------------------------------------------- * Filename: style.css * Version: 1.0.0 (2010-03-29) YYYY-MM-DD * Website: http://www.44gallons.com/ * Author: Aravind Ajith aravind@thedesignsuperhero.com * Description: Global CSS == STRUCTURE: ================================== * Page width: 1000px * Number of columns: 2 ================================================ == SECTIONS: =================================== _general_reset _global_classes _wrapper _header _content _home_page _navigation _footer =============================================== */ @font-face { /*font-family: nevis;*/ font-family:arial; src: url('fonts/nevis.ttf'); } /* _general_reset ================================================= */ *{ margin:0; padding:0 } body { font: 12px 'Helvetica Neue', arial, sans-serif; color:#636363; } p { margin:10px 0} a { text-decoration:none;} img{ border:none;} /* _global_classes ================================================= */ .left{ float:left;} .right{ float:right;} .form-fields{ padding-bottom:8px; position:relative} .container {width:1000px; margin:0 auto; position:relative; /*container relative position, up and down position */ /*height:160px;*/ /*border:1px #000 solid; */ } .clear{ clear:both;} ul.nostyle li{ list-style-type:none;} a.readmore{ background:url(../images/readmore.png) no-repeat 0 0; width:72px; height:20px; display:block; text-indent:-9999px;} body{ background:#BCC4C6 url(../images/main_bg.jpg) repeat-x 0 -90px;} body#booknow, body#jobs{ background:#BCC4C6 url(../images/main_bg_f.jpg) repeat-x 0 -90px; } body#location-p{background:#BCC4C6 url(../images/main_bg.jpg) repeat-x 0 0px} /* _header ================================================= */ #header{ height:260px; clear:both; /*border:2px #f00 solid;*/ } #space { width:20px; height:50px; background:#666; border:1px solid #f00; } #header #logo{ position:absolute; left:0px; top:0px;} #header-content{ float:left; margin-top:25px; float:right; width:787px; /*border:2px #f00 dotted;*/ } #head-msg{ padding:35px 0px 0 20px;} #header h1 a{ display:block; width:240px; margin-top:12px; height:205px; text-indent:-9999px; background:url(../images/logo_44gallons.png) no-repeat 0 0; /*border:#f00 1px solid; */ } #header #logohome h1 a{ display:block; width:240px; margin-top:12px; height:205px; text-indent:-9999px; background:url(../images/logo_44gallonshome.PNG) no-repeat 0 0; /*border:#f00 1px solid; */ } #navigation{ background:url(../images/navigation.png) no-repeat 0 0; height:40px; position:relative; padding-left:20px; width:766px} #navigation li{ float:left;} #navigation li.login{ float:right; margin-right:13px} #navigation li a{ display:block; padding:10px 0; text-indent:-9999px; margin-right:1px;} #navigation li.home a{ width:78px;} #navigation li.course a{ width:78px;} #navigation li.location a{ width:164px;} #navigation li.about a{ width:86px;} #navigation li.employment a{ width:110px;} #navigation li.contact a{ width:102px} #navigation li.login a{ width:59px} #navigation li.home a:hover, #navigation li.home a.active{ background:url(../images/navigation.png) no-repeat scroll -20px -53px;} #navigation li.course a:hover, #navigation li.course a.active{ background:url(../images/navigation.png) no-repeat scroll -99px -53px;} #navigation li.location a:hover, #navigation li.location a.active{ background:url(../images/navigation.png) no-repeat scroll -178px -53px;} #navigation li.about a:hover, #navigation li.about a.active{ background:url(../images/navigation.png) no-repeat scroll -343px -53px;} #navigation li.employment a:hover, #navigation li.employment a.active{ background:url(../images/navigation.png) no-repeat scroll -430px -53px;} #navigation li.contact a:hover, #navigation li.contact a.active{ background:url(../images/navigation.png) no-repeat scroll -541px -53px;} #navigation li.login a:hover, #navigation li.login a.active{ background:url(../images/navigation.png) no-repeat scroll -713px -53px;} h2.ausind{ background:url(../images/ausie.png) no-repeat 0 0; width:164px; height:105px; text-indent:-9999px; float:right} #content{ clear:both;} #content h2{ font-size:22px; text-transform:uppercase} /* _home ================================================= */ /* add charles */ #home #content { margin-top:75px; /* margin-left:auto; margin-right:auto; */ /*border:1px #f00 solid;*/ height:100px; } /* #content img{ margin:0 auto; } */ .big-head #header{ height:auto !important;} /*.ad-mac{ background:url(../images/mac.png) no-repeat 0 0; width:475px; height:400px; float:right; }*/ .ad-mac{ background:url(../images/video.png) no-repeat 0 0; width:300px; height:231px; float:right; } /*.ad-mac .ad-premium{ margin:25px 0 0 28px }*/ .ad-mac .ad-premium{ margin:0px auto; } .big-head #head-msg{padding:80px 0px 0} #head-msg h2.home-aus{ background:url(../images/aus.png) no-repeat 0 0; width:216px; height:108px; text-indent:-9999px; position:absolute; top:345px;} /* border.gif is a virtal line. */ .big-head #header .container, #about .block1{ /*background:url(../images/border.gif) repeat-x bottom;*/ padding-bottom:15px; overflow:hidden} #rec-ads{ clear:both; overflow:hidden} /*#rec-ads li{ width:235px; height:125px; margin-right:15px; float:left; }*/ #rec-ads li{ width:235px; height:125px; margin:0 auto; } #rec-ads li a.available{ padding:45px 0; } a.available{ background:#e1e1e1; color:#c1c0c0; font-size:13px; font-weight:bold; text-align:center; display:block;} #home #content .left{ width:200px; float:left; margin-top:150px; } #home #content .left>div{ margin-bottom:10px;} #home #content .right{ width:750px; margin-top:150px;} #home #content .right .block1{ width:525px; clear:both; background:url(../images/border1111.gif) 0 bottom repeat-x ; padding-top:20px} #home #content .right .block1 ul{padding:15px 0;} #home #content .right .block1 h2{ font-size:18px; text-transform:uppercase; color:#7d7d7d; text-shadow:1px 0px 0px #f4f6f7;} #home #content .right .block1 h3{ font-size:18px; color:#323232; text-transform:uppercase;} #home #content .right .block1 p{ font-size:13px; color:#000;} #home #content .right .block1 li{ padding:18px 0 3px 135px; height:105px} #home #content .right .block1 li.grow{ background:url(../images/icn_workshop.png) no-repeat 0 0;} #home #content .right .block1 li.learn{ background:url(../images/icn_learn.png) no-repeat 0 0;} #home #content .right .block1 li.event{ background:url(../images/icn_event.png) no-repeat 0 0;} #home #content .right .block2{ overflow:hidden; padding:30px 0} #home #content .right .block2 .cols{ width:155px; margin-right:50px; float:left} #home #content .right .block2 h3{ font-size:15px; color:#323232; } #home #content .right .block2 p{ font-size:11px; line-height:17px;} /*changed by charles, let picture has more space.*/ ul li {margin-bottom:60px;} #homepage li{ margin:0 auto; } .ad-platinum, .ad-platinum a{ width:200px; height:560px;} .ad-silver, .ad-silver a{width:200px; height:125px;} /* #home-promo{ position:absolute; top:230px; width:380px;} */ #home-promo{ position:absolute; top:250px; width:380px;} #home-promo *{ font-family:'Helvetica Neue', Helvetica, Arial; font-weight:bold; text-transform:uppercase;} #home-promo h3{ font-size:23px; color:#323232; text-transform:uppercase } #home-promo h3 span{ color:#ff0000;} #home-promo p{ font-size:20px; color:#323232;} .home-booknow{ background:url(../images/btn_booknow_small.png) no-repeat 0 0; width:206px; height:123px; position:relative; float:right; top:-30px} .home-booknow a{ position:absolute; height:100px; width:100px; right:0px; text-indent:-9999px;} /* _about_page ================================================= */ #theteam{ padding:20px 10px; width:790px;} #theteam h3{ font-size:25px; color:#868585; font-weight:bold; text-transform:uppercase} #theteam h4{ font-size:19px; font-weight:bold; color:#323232; text-transform:uppercase } #theteam .left img{ background:url(../images/photoframe.png) no-repeat 0 0; padding:9px 26px 50px 10px} #theteam .right{ width:590px;} #theteam .role{ font-size:14px; color:#636363; text-transform:uppercase} #theteam .right p{font-size:12px; color:#636363;} #theteam .team-member { padding:15px 0; overflow:hidden} #theteam .left{ position:relative} .tape{ background:url(../images/tape.png) no-repeat 0 0; width:100px; height:30px; display:block; position:absolute; top:-10px; left:26px;} /* _course_page ================================================= */ #course #content h2{ font-size:18px; text-transform:uppercase; color:#6f7274; text-shadow:1px 0px 0px #f4f6f7; margin-top:35px;} #course #content{ padding-top:40px; padding-bottom:40px; /*border:1px #000 solid;*/ } .course-des li{ margin-bottom:20px; line-height:18px;} .course-des{ position:relative} .course-des .booknow-btn{ position:absolute; background:url(../images/btn_booknow.png) no-repeat 0 0; width:207px; height:202px; top:58px; left:295px} .course-des .booknow-btn a{ position:absolute; display:block; height:78px; right:26px; top:30px; width:91px; text-indent:-9999px;} p.quote{ color:#c01111; font-weight:bold; font-size:15px; padding:15px 30px;} ul.list{ padding:10px 15px;} ul.list li{ background: url(../images/bullet_list.png) no-repeat 0 center; padding:3px 0 3px 18px; list-style-type:none} .course-booknow{ background:url(../images/btn_booknow_big.png) no-repeat 0 0; width:161px; height:160px; display:block; text-indent:-9999px; position:absolute; left:30px; /*top:245px;*/ top:215px; } body#course #head-msg h2.home-aus{ right:0px; /*top:280px;*/ top:250px; } body#course .ad-mac{margin-right:245px} /* _location ================================================= */ #location{ background:#ececec; position:relative; z-index:5} /* #location-in{ background:#f1f1f1; padding:22px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;} */ #loc-map{ height:545px; border:1px solid #dcdcdc} #location h3{ padding:0px 15px 15px} body#location-p #header{ height:340px} #loc-map .left{ width:260px; overflow-y:scroll; overflow-x:hidden; border-right:1px solid #dcdcdc; height:545px; background:#fff} #loc-map .left h4{ background:#eee; border-bottom:1px solid #dcdcdc; padding:10px;} #loc-map .left li{border-bottom:1px solid #dcdcdc;} #loc-map .left li a{ padding:10px; color:#969696; display:block} #loc-map .left li a:hover{ background:#fae5e5;} #loc-map .left li.active a{ background:#f0b5b5} #location-p #head-msg{ color:#fff; padding:31px 40px 0 140px} #location-p #head-msg h2{ text-transform:uppercase; font-size:20px;} #location-p #head-msg h3{ font-size:21px; margin:20px 0px 5px} #location-p #head-msg p{ font-size:16px; font-family:Arial, Helvetica, sans-serif} #location-p h2.page-title{ font-family:Myriad Pro, Lucida Grande, Calibri, Arial; color:#7d7d7d; text-shadow:1px 0px 0px #f4f6f7; font-weight:normal; font-size:25px; border-bottom:1px dotted #a9afb1; padding-bottom:17px; margin-bottom:40px; } /* .round-shadow{-moz-border-radius:10px; -webkit-border-radius: 10px; border-radius: 10px; padding:22px; -moz-box-shadow: 0 0 24px #BBBBBB; -webkit-box-shadow: 0 0 24px #BBBBBB; box-shadow: 0 0 24px #BBBBBB} */ #workshops{background:#ececec; position:relative; z-index:3; top:-30px; overflow:hidden} #workshops h4{ font-size:14px; color:#cb0000; text-transform:uppercase} #workshops h5{ font-size:16px; color:#7d7d7d} #workshops-in{ margin-top:30px; background:#fff; padding: 0 0 0 40px; height:200px;} #workshops-in .left{ width:215px; padding-top:40px;} #workshops-in .right{ width:638px; padding-top:55px; height:145px; overflow-y:scroll; overflow-x:hidden;} #workshops-in .right li{ width:145px; float:left; margin-right:60px; margin-bottom:40px; height:135px;} a.booknow{ background:url(../images/btn_booknow_s.png) no-repeat 0 0; width:73px; height:23px; text-indent:-9999px; display:block;} span.nav-icn{ background:url(../images/navig.png) no-repeat 0 0; width:234px; height:206px; position:absolute; right:0px; top:205px; z-index:10; } /* _faq ================================================= */ .faq-cont{ width:600px; padding:0px 0px 40px 100px;} h2, h3{ font-family:nevis;} #faq h3{ color:#323232; font-size:18px; margin:30px 0 10px} #policies #content p{ margin:15px 0; line-height:25px;} #policies #content h2, #policies #content h3{ text-transform:uppercase} #policies #content h3{ font-size:17px; color:#898989; margin:40px 0px 20px } /* _contact ================================================= */ label{ color:#959595; font-size:13px; display:block; width:85px; float:left; position:relative; margin-right:17px;} label span{ position:absolute; right:0px; } .form-text{ background:#fff; padding:5px; font-size:13px; width:248px;} textarea{ padding:5px; font-size:14px; font-family:Arial, Helvetica, sans-serif; width:248px; height:130px;} .form-fields{ margin:5px 0; overflow:hidden} .contact .block1{ background:none} .form-submit{ background:url(../images/btn_submit.png) no-repeat 0 0; width:73px; height:25px; text-indent:-9999px; border:none; float:right} .left-in{} .left-in h2{ font-size:22px; text-transform:uppercase; margin-bottom:20px;} #contact #content .right{ width:500px; margin-top:30px;} #contact #content .right h3{ margin-bottom:15px;} #g-map{ border:7px solid #fff;} /* _footer ================================================= */ #footer{ background:url(../images/footer_bg.png) repeat-x 0 0; overflow:hidden; clear:both} #footer h2{ background:url(../images/aus_xs.png) no-repeat 0 0; width:131px; height:83px; text-indent:-9999px; float:right} #footer .container{padding-top:40px; } #footer .left{ padding-top:15px;} #footer ul{ clear:both} #footer a{ color:#fff; text-shadow:1px 1px 0px #002941; font-size:9px; font-weight:bold; display:block; padding:3px 14px 5px 3px} #footer li{ float:left; padding-left:10px;} #footer li:hover, #footer li.active{ background:url(../images/active_l.png) no-repeat 0 0;} #footer li:hover a, #footer li.active a{ background:url(../images/active_r.png) no-repeat right 0; } div.copyright{ clear:both; color:#707070; text-shadow:1px 1px 0 #31302d; font-size:9px; padding:9px;} /*================================================= */ /* SETTINGS */ /* The container */ /* Total carousel width #boutique{ width: 900px; height:500px; } */