/********************************************************************************************** Main Sections in CSS: 1. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 2. LAYOUT Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site 3. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 4. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /* import core styles */ @import url(base.css); /* Museo a wonderfull font by Jos Buivenga: http://exljbris.nl */ /*@font-face { font-family:"MuseoThree"; src: url('/Users/olivermckeown/Library/Fonts/Museo300-Regular.otf') format("opentype"); }*/ @font-face { font-family:"MuseoThree"; src: url("http://fullfat.zserver.co.uk/assets/fonts/Museo300-Regular.otf") format("opentype"); } /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#000; font-family: Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { background:url(../images/top-bg.jpg) 0 0 repeat-x; } /*---- Container ----*/ .quote { top:0; right:0; position:absolute; z-index:200; } /*---- page ----*/ div.page{ background:url(../images/container-bg.jpg) 0 0 repeat; } /*---- wrapper ----*/ div.wrapper{width:960px; margin:0 auto; } /*---- Header ----*/ div#header { padding:5px 0 40px 0; position:relative; } /*---- Main Navigation ----*/ div#main-navigation { float:right; width:350px; margin-top:60px; } /*---- Dashboard ----*/ div#dashboard { font-family:Helvetica, Arial, sans-serif; } /*---- Content ----*/ div#content { margin-bottom:15px; } /*---- Footer ----*/ div#footer { padding:10px 0px; background:#fff; } div#footer din.wrapper{ width:909px;} /*------------------------------------------ // 3. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Signup-form ----*/ div#signup-form{ position:absolute; left:0; top:0; background:#000; width:100%; z-index:2;} div#signup-form div.outer-wrapper{position:relative; width:960px; margin:0 auto; padding:3px 0;} div#signup-form div.wrapper{ height:113px; display:none;} div#signup-form a.signup-button{ position:absolute; right:0; bottom:-23px;} div#signup-form div.form{ float:right; width:650px; padding-top:20px;} div#signup-form p{ padding:0 0 0 22px;} div#signup-form p input.submit-button{ width:77px; margin-left:10px;} /*---- Header - Logo ----*/ div#signup-form div.logo{ margin:22px 0 0px 37px; width:180px; float:left;} div#signup-form div.logo h1 a {width:142px; height:0px; padding-top:68px; overflow:hidden; display:block; background:url(../images/header/light-logo.png) 0 0 no-repeat; } /*---- Header - Logo ----*/ div#header div.logo{ margin:22px 0 0px 37px; width:180px; float:left;} div#header div.logo h1 a {width:180px; height:0px; padding-top:68px; overflow:hidden; display:block; background:url(../images/header/logo.png) 0 0 no-repeat; } /*---- Header - signup-button ----*/ a.signup-button{ background:url(../images/header/login-left.png) 0 0 no-repeat; display:block; float:right; padding-left:20px; color:#FFF; text-decoration:none; font-size:110%; width:211px;} a.signup-button span.right{ background:url(../images/header/login-right.png) 100% 0 no-repeat; padding-right:10px; display:block;} a.signup-button span.center{ background:#000; display:block; height:23px; line-height:20px; padding:0 20px 0 31px;} /*---- Header-right ----*/ div#header div.header-right{ float:right; width:400px;} /*---- Main Navigation ----*/ div#main-navigation ul li{ float:left; color:#BF44D0; line-height:16px;} div#main-navigation ul li.devider{ margin:0 20px; color:#fff; line-height:5px; font-weight:bold; font-size:200%; width:2px;} div#main-navigation ul li a { float:left; text-decoration:none; font-size:160%; color:#BF44D0; } div#main-navigation ul li a.active, div#main-navigation ul li a:hover { color:#fff; } /*---- banner ----*/ div#banner { margin-bottom:11px; } /*----enquiry form ----*/ div#enquiry-form{ float:left; width:558px; padding-bottom:12px;} div#enquiry-form input.submit-button{ margin-right:30px;} /*---- content ----*/ div#content h2{ font-size:200%; margin-bottom:30px; font-weight:normal;} div#content p{ font-size:130%; color:#737373; line-height:22px;} /*---- content about ----*/ div#content div#about{ float:left; width:420px;} div#content div#about h2{ color:#1A1A1A; padding-left:4px;} div#content div#contact-us{ float:right; width:446px;} div#content div#contact-us h2{ color:#1A1A1A;} div#content div#contact-us div.section{ float:left; padding-right:16px; width:132px;} div#content div#contact-us div.section h4{ font-size:110%; color:#737373; margin-bottom:3px;} div#content div#contact-us div.social-links h4{ margin-bottom:22px;} div#content div#contact-us div.social-links img{ margin-right:8px;} /*---- dashboard ----*/ div#dashboard { background:#000; } div#dashboard div.wrapper{ width:905px; padding:34px 20px 2px;} div#dashboard h2{ font-size:200%; color:#FFF; font-weight:normal; margin-bottom:34px;} /*---- dashboard services----*/ div#dashboard div#services{ float:right; width:296px;} div#dashboard div#services h2{ margin-bottom:37px;} div#dashboard div#services p{ font-size:120%; color:#999999; line-height:16px; margin-bottom:20px;} /*---- content ----*/ div#content div.middle{ padding:7px 15px 0px 22px;} div#content div.column{ width:435px;} div#content div.column h4{ font-size:130%; color:#852C92; margin-bottom:4px; font-weight:bold;} /*---- footer----*/ div#footer p{ font-size:120%; color:#999999; line-height:32px;} /*---- Footer - Navigation ---*/ div#footer div#footer-navigation { float:right;} div#footer div#footer-navigation ul li { float:left; font-size:120%; margin-right:20px; line-height:32px; } div#footer div#footer-navigation ul li a{ color:#999999;} div#footer div#footer-navigation ul li.enviroment{ background:url(../images/footer/enviroment.gif) 100% 0 no-repeat; padding-right:40px;} /*---- Post ---*/ div.post h1 { font-size:240%; margin-bottom:10px; font-weight:normal;} div.post h2 { font-size:200%; margin-bottom:10px; font-weight:normal;} div.post h3 { font-size:160%; margin-bottom:10px; font-weight:normal;} div.post h4 { font-size:140%; margin-bottom:10px; font-weight:normal;} div.post p { color:#737373; line-height:22px; font-size:130%; margin-bottom:20px; display:block; } div.post p:after { content: "."; display: block; font-size:0; height: 0; clear: both; visibility: hidden;} div.post p a { color:#000; } div.post blockquote { margin-bottom:20px; } div.post blockquote p{ margin-bottom:5px; font-style:italic;} div.post blockquote p cite{ font-weight:bold; text-align:right; display:block;} div.post p img { max-width:100%; } div.post p img.alignleft{ float:left; margin:0 10px 10px 0; display: inline;} div.post p img.alignright{ float:right; margin:0 0px 10px 10px; display: inline;} div.post p img.aligncenter{ display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;} div.post ul { margin:0 0 20px 14px; list-style:disc; } div.post ol { margin:0 0 20px 18px; list-style:decimal; } div.post li { font-size:130%; color:#737373; line-height:22px;} div.post li ul, div.post li ol { margin-bottom:0px; } div#content div.post li li, div#content div.post li p { font-size:100%; margin-bottom:0px; } /*---- Post - Custom Lists ---*/ div.post ul.list1 { margin:0; padding:0; } div.post ul.list1 li { margin:0; padding:0; } div.post ol.list2 { margin:0; padding:0; } div.post ol.list2 li { margin:0; padding:0; } /*---- Common Boxes & Containers ----*/ /*---- form ----*/ div#enquiry-form p{ margin-bottom:12px; } div.form p{ float:left; padding-right:22px;} div.form p label{ font-size:100%; color:#FFF; width:60px; float:left; display:block; line-height:22px;} div.form p input.textbox, div.form p textarea{border:#212121 1px solid; padding:5px 8px 6px; background:#000; width:174px; color:#666666; font-size:90%;} div.form p textarea{ width:450px; height:130px; font-size:120%;} div.form input.submit-button{ color:#CCCCCC; border:#212121 1px solid; width:104px; height:24px; background:#000; font-size:90%; padding-bottom:4px; cursor:pointer;} /*---- box1 ----*/ div.box1{ margin-bottom:20px;} div.box1 div.top{ background:url(../images/content/box1-top-left.png) 0 0 no-repeat; padding-left:3px; height:3px; line-height:3px;} div.box1 div.top div.right{ background:url(../images/content/box1-top-right.png) 100% 0 no-repeat; padding-right:3px; height:3px; line-height:3px; overflow:hidden; width:954px;} div.box1 div.top div.center{ background:#000; height:3px; line-height:3px;} div.box1 div.middle{ background:#000; padding:5px 15px;} div.box1 div.bottom{ background:url(../images/content/box1-bottom-left.png) 0 0 no-repeat; padding-left:3px;} div.box1 div.bottom div.right{ background:url(../images/content/box1-bottom-right.png) 100% 0 no-repeat; padding-right:3px;} div.box1 div.bottom div.center{ background:#000; height:3px; line-height:3px;} /*---- box2 ----*/ div.box2{ margin-bottom:20px;} div.box2 div.top{ background:url(../images/content/box2-top-left.png) 0 0 no-repeat; padding-left:6px;} div.box2 div.top div.right{ background:url(../images/content/box2-top-right.png) 100% 0 no-repeat; padding-right:6px;} div.box2 div.top div.center{ background:#fff; height:6px; line-height:6px;} div.box2 div.middle{ background:#fff; padding:5px 15px; position:relative;} div.box2 div.bottom{ background:url(../images/content/box2-bottom-left.png) 0 0 no-repeat; padding-left:6px;} div.box2 div.bottom div.right{ background:url(../images/content/box2-bottom-right.png) 100% 0 no-repeat; padding-right:6px;} div.box2 div.bottom div.center{ background:#fff; height:6px; line-height:6px;} /*---- Buttons ----*/ /*---- Button1 ----*/ a.button1{ background:url(../images/content/button1.jpg) 0 0 no-repeat; padding-left:5px; float:left; display:block; color:#CCCCCC;} a.button1 span{ background:url(../images/content/button1.jpg) 100% 0 no-repeat; display:block; line-height:27px; height:27px; padding:0 10px 0 5px; float:left;} a.button1:hover{ text-decoration:none;} /*---- Lists ----*/ /*---- List1 ----*/ div#container ul.list1{ margin-bottom:20px;} div#container ul.list1 li{ background:url(../images/content/arrow.jpg) 0 4px no-repeat; padding-left:10px; font-size:100%; color:#747573; line-height:12px; float:none;} /*---- List2 ----*/ ul.list2 li{ font-size:120%; color:#666666; line-height:22px; float:left; width:136px; background:url(../images/content/desh.gif) 0 11px no-repeat; padding-left:7px;} ul.list2 li a { color:#666666; } /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- work ----*/ div#work{ margin-bottom:15px;} div#work div.middle{ padding:16px 5px 23px 25px;} div#work h2{ font-size:200%; color:#fff; margin-bottom:23px; font-weight:normal; padding-right:15px;} div#work h2 a.button1{ float:right; font-size:50%;} div#work ul li{ float:left; padding-right:16px;} div#work ul li.featured{ width:460px;} div#work ul li.featured img{ float:left; margin-right:10px;} div#work ul li.featured div.details{ margin-left:225px; padding-top:3px;} div#work ul li h3{ font-size:160%; color:#FFF; font-family:Verdana, Geneva, sans-serif; margin-bottom:12px; font-weight:normal;} div#work ul li h2 a.button3{ float:right;} div#work p{ font-size:120%; color:#999999; line-height:15px; margin-bottom:12px;} /*------------------------------------------ // 4.2 Portfolio PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Portfolio----*/ div#portfolio h2{ font-size:200%; font-weight:normal; color:#000; margin-bottom:20px;} div#portfolio ul li{ float:left; width:310px; } div#portfolio ul li img{ margin-bottom:10px; margin-right:10px; } div#portfolio a.previous-button{ position:absolute; right:55px; top:10px;} div#portfolio a.next-button{ position:absolute; right:20px; top:10px;} div#portfolio ul li a{ position:relative; display:block;} div#portfolio ul li a img.overlay{ width:300px; height:200px; position:absolute; left:0; top:0; } /*------------------------------------------ // 4.1 CONTACT FORM //------------------------------------------*/ /*#contact { display: block; width: 45px; margin: 0px auto; padding: 0px; border: 0px solid #cbcbcb; background-color: #222222; -moz-border-radius: 5px; -webkit-border-radius:5px; float:left; }*/ /*Form style */ /*label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 250px; font-size: 1.3em; } input, textarea, select { margin: 0; padding: 5px; color: #666; background: #F1F1F1; border: 1px solid #ccc; margin: 5px 0; font:1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; -moz-border-radius: 5px; -webkit-border-radius:5px; } input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; } input.submit { cursor: pointer; border: 1px solid #222; background:#333; color:#fff; -moz-border-radius: 5px; -webkit-border-radius:5px; } input.submit:hover { background:#444; } fieldset { padding:20px; border:1px solid #333; -moz-border-radius: 5px; -webkit-border-radius:5px; } legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -moz-border-radius: 5px; -webkit-border-radius:5px; } span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */ /* Style for the error message */ /*.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('contact_form/assets/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; margin: 10px 0; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; } #succsess_page h1 { background: url('contact_form/assets/success.gif') left no-repeat; padding-left:0px; } */*