/* Site Name: www.webeasy.com.au Version: 0.1 [Table Of Contents] 0 - Reset 1 - Global 2 - Typography 3 - Header 4 - Navigation 5 - Forms 6 - Page Specific Styles 7 - Footer 8 - Other Stuff [Colours] Blue: #0E53B1 Dark Green: #7B970C Light Green: #92B117 Dark Gray: #666 /* =0 Reset –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ @import url('reset.css'); /* 1 - Global –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ html, body, #wrapper { height: 100% } body > #wrapper { height: auto; min-height: 100% } body { background-color:#E9E9E9; text-align:center } #wrapper { text-align:left } #titleBar { height:55px; line-height: 50px; background:#123564 url(/images/BGTitleBar.png) repeat-x top center } #content { background:transparent url(/images/BGContent.png) repeat-x; padding:20px 0 50px 0 } #mainContentFull { width: 940px; display:inline; position:relative } #mainContent { width: 620px; padding-right:10px; float:left; display:inline; position:relative } #sideBar { width: 300px; padding-left:10px; float:right; display:inline; position:relative } .container { width:940px; margin:auto; position:relative; overflow:hidden } .floatRight { float:right; clear:right; display:inline } .floatLeft { float:left; clear:left; display:inline } .clear { clear:both } .green{color:#8FB017;} .divider { border-top:1px solid #C0C0C0; height:1px; line-height:1px; clear:both; } /* 2 - Typography –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ body { font: 13px "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif; color:#333; } .intro{ font-size:10px;} /* --- Headings --- */ h1, h2, h3, h4 { color:#123564; padding:0 0 0.8em 0 } h1 { font-size:20px; color:#fff; padding: 0 } h2 { font-size:18px } h3 { font-size:14px } h4 { font-size:12px } /* ---Lists & Paragraphs --- */ #content ul, #content ol, #content p { padding-bottom:1.5em; } #content li { padding-left:15px; margin-left:15px; background:url(/images/bullet.png) no-repeat left top; position:relative } #sideBar li { padding:0; margin:0; background-image:none } #content ol {list-style:decimal;} #content ol ol{ list-style:decimal; } #content ol li {background:none; margin-bottom:8px; padding-left:0; margin-left:0;} #content ol ol li {background:none; margin-top:8px; padding-left:2px; margin-left:15px;} /* ----- Links ----- */ #content a { text-decoration:none; color:#0E53B1 } #content a:visited { color:#0E53B1} #content a:hover, #content a:active, #content a:focus { text-decoration:underline; color:#7B970C} a.skip { color: #FFFFFF; position:absolute; top:-2000px; left:50% } a.skip:focus { top:0; z-index:9999 } a.skip:hover { color: #666; text-decoration:underline } /* 3 - Header –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ #header { height:67px; background:url(/images/BGHeader.png) no-repeat center top; overflow:hidden; position:relative } #header h1 { width:150px; text-indent:-9999px; padding: 0 } #header h1 a { height:67px; display:block; } /* ----- Search ----- */ #header #search { position:absolute; top:15px; right:0} #header #search input { width:200px; margin-right:5px; float:left } #header #search button.btnSearch { width:54px; height:22px; text-indent:-9999px; background:url(/images/btnSearch.png)} /* 4 - Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ /* ----- Main Navigation ----- */ ul#mainNav { position: absolute; right: 0px; top: 0 } ul#mainNav li { float:left } ul#mainNav li a, ul#mainNav li a:visited { line-height:67px; padding:0 15px; font-size:14px; font-weight:bold; text-decoration:none; color:#fff; display:block} ul#mainNav li a:hover, ul#mainNav li a:active, ul#mainNav li a:focus, body.index ul#mainNav li a.home, body.howItWorks ul#mainNav li a.howItWorks, body.portfolio ul#mainNav li a.portfolio, body.byIndustry ul#mainNav li a.byIndustry, body.support ul#mainNav li a.support, body.getStarted ul#mainNav li a.getStarted, body.engineering ul#mainNav li a.byIndustry { color: #7B970C; background:url(/images/mainNavActive.png) center bottom no-repeat} ul#mainNav li a.getStarted { padding:0 !important; margin-left:64px} /* 5 - Forms –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ form { padding-bottom:1.5em } form td {vertical-align:middle;} fieldset { padding-top:10px; text-align:center} input, label, textarea { color:#666; padding:3px; text-align:left; display:block } input, textarea { width:200px; background:#fff; border: 1px solid #CCC; font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif } input:focus, textarea:focus { border:1px solid #7B970C } #content form ul { padding:50px 45px 10px 45px; } #content form li { padding:0; margin:0; background-image:none } #content form li.error { padding:2px 2px 2px 50px; background-repeat: no-repeat; background-position: 10px center; color: #D8000C; background-color: #FFBABA; background-image: url(/images/icons/error.png); text-align:left; border: 1px solid #F00; } /* -- Not sure why .error was over ridden by li so had to atach new erro directly to li. */ #content li.formButtons { padding-top:10px } /* --- Buttons --- */ a.btn, button.btn { position:relative; cursor:pointer; color:#fff !important; text-decoration:none !important; overflow:visible; text-align:center; background:transparent center top no-repeat;} a.btn{ width:125px; height:37px; line-height:35px; font-size:1.4em; background-image:url(/images/btnLarge.png); display:block } a.btn:hover { background-position:right bottom } button.btn { width:60px; height:22px; line-height:20px; font-size:1.0em; } button.submit { background-image: url(/images/btnSubmit.png) } button.reset { background-image: url(/images/btnReset.png) } /* 6 - Page Specific Styles –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ body #content .icons {text-align:right; padding-right:5px;} /* --- Home --- */ body.home #titleBar{ height:313px; background:#123564 url(/images/BGTitleBarHome.png) no-repeat top center; line-height:1.5 } body.home #content{ background-image:url(/images/BGContentHome.png); min-height:500px; height:auto !important; height:500px;} body.home #titleBar h1 { text-indent: -9999px } body.home #titleBar p { width:400px; padding:85px 0 30px; font-size:1.4em; color:#fff } body.home #titleBar ul { padding-left:5px } body.home #titleBar ul li { padding:0 15px; float:left } body.home ul#examplesThumb { height:285px;} ul#examplesThumb li, ul#whatYouGet li { width:300px; margin:0 20px 0 0; padding:0; background: url(none); float:left; display:block } ul#examplesThumb li.right, ul#whatYouGet li.right { margin-right:0 !important } ul#examplesThumb li.viewMoreExamples { padding:10px 0 0 380px;} ul#examplesThumb h3 { color:#666; font-size:1.2em } ul#examplesThumb p { color:#666; font-size:1.2em } ul#whatYouGet { padding-top:5px} ul#whatYouGet img { margin-right:15px; float:left } ul#whatYouGet p { font-size:1.0em } /* --- Portfolio --- */ body.portfolio #content{ background: transparent url(/images/BGContentPortfolio.png) no-repeat center top; } body.portfolio #sideBar ul { padding: 65px 25px 0 20px } body.portfolio #sideBar ul li{ padding:0; overflow:hidden; margin-bottom:10px;} body.portfolio #sideBar ul li img{ margin-right:15px; float:left; width:90px; height:70px; } body.portfolio #sideBar ul li p { font-size:1.0em;} body.portfolio #sideBar ul li h3 { display:inline} /* --- Get Started / How it works --- */ body.getStarted #content, body.howItWorks #content{ background: transparent url(/images/BGContentFillDetails.png) no-repeat center top; } body.howItWorks #mainContent h2.bulletHeader{ margin-left:10px; float:left;} body.howItWorks #mainContent ul{ padding-left:0; } body.howItWorks #mainContent li { padding-left:25px; margin-left:10px; margin-bottom:6px; background:url(/images/icons/tick.png) no-repeat left top; line-height:20px; font-size:12px; font-family:Tahoma, Geneva, sans-serif; } body.howItWorks #mainContent img{ float: left; margin: 0px 8px 15px 0px;} body.getStarted #mainContent img{ float: left; margin: 0px 8px 15px 0px;} /* --- Support --- */ body.support #content{ background: transparent url(/images/BGContentFillDetails.png) no-repeat center top; } /* --- Faq --- */ body.faq h3 { font-weight:bold;} body.faq #content { background:transparent url(/images/BGContentFillDetails.png) no-repeat center top; } /* --- By Industry --- */ body.byIndustry ul#examplesThumb li { width:470px; margin:0; } /* --- Industry Specific --- */ body.industry #content { background:transparent url(/images/BGContent.png) repeat-x; padding:20px 0 50px 0; } body.industry ul#examplesThumb { height:500px;} body.industry #examplesThumb li{padding-bottom:20px;} /* --- Engineer-- */ body.engineering #titleBar{ background-image:url(/images/BGTitleBarEngineering.png) } /* --- Realestate-- */ body.realestate #titleBar{ background-image:url(/images/BGTitleBarRealestate.png) } /* --- Services-- */ body.service #titleBar{ background-image:url(/images/BGTitleBarServices.png) } /* 7 - Footer –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ #footer { line-height:20px; clear:both; padding-bottom:10px; margin-top:-20px; } #footer{ font-size:11px;} #footer a, #footer a:visited{ text-decoration:none; color:#333;} #footer a:hover{color:#000; text-decoration:underline;} /* 8 - Other –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ img.normal { padding: 5px; background: #ffffff; border: 1px solid #d6d6d6; } img.right { float: right; margin: 15px 0px 15px 15px; } img.left { float: left; margin: 15px 15px 15px 0px; } /* - ALERTS */ .info, .success, .warning, .error { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px top; } .info { color: #00529B; background-color: #BDE5F8; background-image: url(/images/icons/info.png); background-position: 10px center; } .success { color: #4F8A10; background-color: #DFF2BF; background-image:url(/images/icons/sucess.png); background-position: 10px top; } .warning { color: #9F6000; background-color: #FEEFB3; background-image: url(/images/icons/warning.png); } .error { color: #D8000C; background-color: #FFBABA; background-image: url(/images/icons/error.png); clear:both; }