/********************************************************************************************** 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); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { font-family: Arial, Helvetica, sans-serif; background:#000 url(../images/body-img.jpg) 50% 0 no-repeat; } h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; } span.quotes { font: 30px "Times New Roman", Times, serif; } a { color:#d90000; text-decoration:none; } a:hover { text-decoration: underline; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:1000px; margin:0 auto; padding-top:16px; } /*---- Header ----*/ div#header { background:url(../images/header/header-bg.png) 0 0 repeat-x; height:65px; margin-bottom:8px; } /*---- Main Navigation ----*/ div#main-navigation { float:right; margin-top:22px;} /*---- Content ----*/ div#content { } /*---- Main ----*/ div#main { float:right; width:580px; padding:10px; background:#9c9; } /*---- Sidebar ----*/ div#sidebar { float:left; width:340px; padding:10px; background:#99c; } /*---- Footer ----*/ div#footer { padding:12px 0px; margin-bottom:20px; border-top:1px solid #565656} /*------------------------------------------ // 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 //------------------------------------------*/ /*---- Header - Logo ----*/ div#header div.logo{ float:left; width:165px; margin:20px 0 0 22px;} div#header div.logo h1 a { background:url(../images/header/logo.png) 0 0 no-repeat; width:165px; padding-top:24px; height:0px; overflow:hidden; display:block;} /*---- Main Navigation ----*/ div#main-navigation ul li{ float:left; font-size:140%; margin-right:49px;} div#main-navigation ul li a { float:left; text-decoration:none; color:#FFF; padding-bottom:7px; } div#main-navigation ul li a:hover, div#main-navigation ul li a.active{ background:url(../images/header/nav-hover.jpg) 0 100% repeat-x;} /*---- Banner ----*/ div#banner{ margin-bottom:7px;} div#banner div.slide{ z-index:2; position:relative; width:1000px; height:387px; } div#banner div.slide img { width:1000px; } /*div#banner div.controls{ background:url(../images/content/controls-shadow.jpg) 0 0 no-repeat; height:71px; margin:-27px 0px 0 -98px; width:1206px; position:relative; z-index:1;}*/ div#banner div.controls{ height:71px; margin:-52px 0px 0 -98px; position:relative; z-index:1;} div#banner div.controls div.inner{ padding-top:35px; margin-left:572px;} div#banner div.controls a{ background:url(../images/content/control-bg.gif) 0 0 no-repeat; height:6px; width:6px; display:block; float:left; margin-right:5px;} div#banner div.controls a:hover, div#banner div.controls a.activeSlide{ background:url(../images/content/control-hover.gif) 0 0 no-repeat;} div#artificeVid { text-align:center;} div#artificeVid div.thumbnail a { cursor:pointer; } /*---- two-column ----*/ div.two-column{ background:url(../images/content/two-column-bg.jpg) 100% 0 repeat-y;} div.two-column div.statement{ float:left; width:650px; padding-bottom:50px;} div.two-column div.post h2{ font-size:260%; color:#FFF; margin-bottom:5px;} div.two-column div.post p{ font-size:160%; line-height:20px;} div.two-column div.post p a.more-link{ font-size:70%; color:#d90000; background:url(../images/content/more.gif) 100% 3px no-repeat; padding-right:10px;} div.two-column div#testimonials{ float:right; width:268px; padding:30px 0 0 30px;} div.two-column div#testimonials div.testimonial blockquote{ margin-bottom:15px;} div.two-column div#testimonials div.testimonial blockquote p{ font-size:160%; color:#fefefe; line-height:20px; margin-bottom:16px;} div.two-column div#testimonials div.testimonial blockquote p cite{ font-size:75%; color:#626262; font-style:normal; line-height:14px;} div.two-column div#testimonials div.testimonial blockquote p cite span{ display:block; } /*---- dashboard ----*/ div#dashboard{ padding-bottom:15px;margin-top:10px; } div#dashboard h2{ background:url(../../assets/images/headings/what-we-saying.jpg) 0 0 no-repeat; height:0px; padding-top:25px; overflow:hidden; width:100%; border-bottom:#565656 1px solid; margin-bottom:20px;} div#dashboard div.post{ float:left; width:300px; margin-right:50px;} div#dashboard div.post span.timestamp{ font-size:110%; color:#626262; display:block; margin-bottom:5px; text-transform: uppercase; } div#dashboard div.last{ margin:0;} div#dashboard span.readblog{ font-size:110%; color:#d90000; float:right; background:url(../images/content/more.gif) 100% 1px no-repeat; padding-right:10px; } /*---- Post ---*/ div.post h1 { font-size:240%; margin-bottom:10px; color:#FFF;} div.post h2 { font-size:220%; margin-bottom:10px; color:#FFF;} div.post h3 { font-size:200%; margin-bottom:8px; color:#FFF;} div.post h3 a{color:#FFF;} div.post h4 { font-size:180%; margin-bottom:10px; color:#FFF;} div.post h5 { font-size:160%; margin-bottom:10px; color:#FFF;} div.post p { color:#868686; line-height:16px; font-size:120%; margin-bottom:10px; display:block; } div.post p a { color:#868686; } div.post blockquote { margin-bottom:10px; } 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 img { max-width:100%; } div.post img.alignleft{ float:left; margin:0 10px 10px 0; display: inline;} div.post img.alignright{ float:right; margin:0 0px 10px 10px; display: inline;} div.post 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 { line-height:1.2em; font-size:120%; color:#868686; } div.post li ul, div.post li ol { margin-bottom:0px; } div.post li li, 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; } /*---- footer ----*/ div#footer p{ font-size:100%; color:#3c3c3c;} div#footer p a{color:#3c3c3c;} /*---- Footer - sociable ---*/ div#footer div#sociable{ float:right; } div#footer div#sociable a{ font-size:100%; color:#d90000;} div#footer div#sociable span{color:#535353; margin:0 5px;} /*---- Common Boxes & Containers ----*/ /*---- Buttons ----*/ /*---- Lists ----*/ /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ /*------------------------------------------ // 4.2 ABOUT PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- heading1 ----*/ div#content h2.heading1{ margin-top:25px; border-bottom:#565656 1px solid;} div#content h2.heading1 span.inner{ background:url(../../assets/images/headings/about.jpg) 0 0 no-repeat; padding-top:25px; height:0px; overflow:hidden; display:block; width:400px;} div#content h2.heading1 span.nav-bar{ float:right; color:#FFF; font-size:110%; margin-top:8px;} div#content h2.heading1 span.nav-bar a{ color:#d90000; background:url(../images/content/more.gif) 100% 3px no-repeat; padding-right:10px; font-weight:normal; margin-left:5px;} /*---- two-column2 ----*/ div.two-column-2{ background:#000; padding-top:49px; margin-bottom:32px;} div.two-column-2 div.inner-column{ background: url(../images/content/two-column.gif) 100% 0 repeat-y;} div.two-column-2 div.column1{ float:left; width:565px; padding:0 40px 0 45px;} div.two-column-2 div.column1 h1{ font-size:470%; color:#FFF; margin-bottom:17px; line-height:43px;} div.two-column-2 div.column1 p{ font-size:160%; color:#868686; line-height:21px; margin-bottom:10px;} div.two-column-2 div.column2{ float:right; width:250px; padding:70px 50px 0;} div.two-column-2 div.column2 h2{ color:#6e6e6e; font-size:150%; font-weight:normal; margin-bottom:6px;} div.two-column-2 div.column2 p{ font-size:190%; color:#FFF; line-height:20px; margin-bottom:5px;} /*---- services ----*/ div#services{ margin-bottom:0px;} div#services h2{ font-size:110%; color:#808080; font-weight:normal; background:url(../images/content/h2-bg.gif) 0 50% repeat-x; margin-bottom:28px; padding-left:40px;} div#services h2 span{ background:#000 url(../images/content/arrow.gif) 100% 4px no-repeat; padding:0 15px 0 5px;} div#services div.section{ float:left; width:300px; margin-right:42px;margin-bottom:19px;} div#services div.section img{ float:left;} div#services div.section h2{ background:none; padding:0; font-size:220%; color:#fff; margin-bottom:6px; line-height:17px;} div#services div.section div.entry{ margin-left:114px;} div#services div.section p{ font-size:130%; color:#868686; line-height:16px; margin-bottom:5px;} div#services div.section p a.more-link{ color:#d90000; font-size:85%; background:url(../images/content/arrow2.gif) 100% 3px no-repeat; padding-right:10px;} div#services div.last{ margin:0;} /*---- team ----*/ div#team{ margin-bottom:40px;} div#team h2{ font-size:110%; color:#808080; font-weight:normal; background:url(../images/content/h2-bg.gif) 0 50% repeat-x; margin-bottom:6px; padding-left:40px;} div#team h2 span{ background:#000 url(../images/content/arrow.gif) 100% 4px no-repeat; padding:0 15px 0 5px;} div#team ul li{ float:left; width:494px; margin-right:12px; position:relative; height:338px;} div#team ul li img{ vertical-align:top;} div#team ul li div.description{ position:absolute; left:3px; bottom:2px; width: 468px; padding:10px; background:url(../images/content/description-bg.png) 0 0 repeat;} div#team ul li div.description h1{ font-size:265%; color:#fff; margin-bottom:4px;} div#team ul li div.description p{ font-size:120%; color:#868686; line-height:16px; margin-bottom:11px;} div#team ul li div.description a.more-link{ color:#d90000; font-size:110%; } div#team ul li div.description a.close-btn{ background:url(../images/content/close-btn.gif) 0 0 no-repeat; width:9px; height:9px; position:absolute; right:5px; top:5px; display:none;} div#team ul li.last{ margin:0;} div#team ul li div.full-info{ display:none;} div#team ul li div.active div.full-info{ display:block; height:255px;} div#team ul li div.active div.full-info p strong { display:block; color:white; } /*------------------------------------------ // 4.3 CONTACT PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- heading1 ----*/ div#content h2.contact-us span.inner{ background:url(../../assets/images/headings/contact-us.jpg) 0 0 no-repeat; padding-top:25px; height:0px; overflow:hidden; display:block; width:400px;} /*---- contact-form ----*/ div.two-column-2 div#contact-form{padding:0 35px 42px 45px; width:570px;min-height:400px;} div.two-column-2 div#contact-form h1{ margin-bottom:11px;} div#contact-form fieldset{ padding-left:4px;} div#contact-form p{ margin-bottom:45px;} div#contact-form fieldset p{ margin-bottom:7px;} div#contact-form p label{ color:#FFF; font-size:90%; width:121px; display:block; float:left;height:24px;} div#contact-form p input.textbox{ border:#cccccc 1px solid;font-size:75%; padding:5px; width:400px;} div#contact-form p textarea{ font-family:Arial,Helvetica,sans-serif;font-size:75%;border:#cccccc 1px solid; padding:3px 5px 7px; width:400px; height:145px;} div#contact-form p input.submit-btn{ background:#333333; border:#4c4c4c 1px solid; width:59px; height:29px; color:#FFF; font-size:95%; margin-left:120px; text-align:center;} /*---- contact ----*/ div#contact{ padding-top:1px;} /*---- contact contact-details----*/ div#contact div.contact-details{ margin-bottom:39px;} div#contact div.contact-details p a{ color:#fff;} /*---- contact tweet----*/ div#contact div.tweet{ margin-bottom:28px;} div#contact div.tweet p a{ font-size:65%; color:#d90000; background:url(../images/content/more.gif) 100% 3px no-repeat; padding-right:8px;} /*---- contact sociable----*/ div#contact div.sociable ul li{ font-size:190%; color:#FFF; float:left; width:125px; margin-bottom:8px;} div#contact div.sociable ul li a{ color:#FFF;} div#contact-form span.redtext { color:#d90000 !important;font-size: 140% !important;display:block;margin-bottom:10px; } /*------------------------------------------ // 4.4 WORK PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- heading1 ----*/ div#content h2.work span.inner{ background:url(../../assets/images/headings/our-work.jpg) 0 0 no-repeat; padding-top:25px; height:0px; overflow:hidden; display:block; width:400px;} div#content h3.subheading { background-color:#000;color:#FFF;font-size:250%; } /*---- two-column 3----*/ div.two-column-3{ background:#000; padding:34px 0 38px; border-bottom:#242424 1px solid; overflow: hidden; } div.two-column-3 div.inner-column{ background:url(../images/content/two-column3-bg.gif) 100% 0 repeat-y;} div.last-column{ border:0; margin-bottom:32px;} div.two-column-3 div.column1{ float:left; width:560px; padding-left:25px;} div.two-column-3 div.column2{ float:right; width:355px; padding:37px 25px 0;} div.two-column-3 div.column2 h2{ font-size:240%; margin-bottom:4px;} div.two-column-3 div.column2 p.timestamp{ font-size:110%; color:#626262;} div.two-column-3 div.column2 p a.more-link{ font-size:95%; color:#d90000; background:url(../images/content/more.gif) 100% 3px no-repeat; padding-right:10px;} /*---- case studies css ----*/ div.case-study-content { color: #FFF; float: left; width: 635px; font-size: 12pt; padding-left: 25px; padding-top: 20px; border-right: 5px solid #131313; padding-right: 25px; } div.case-study-content h1 { font-size: 27px; letter-spacing: -2px; color: #FFF; font-weight: bold; font-style: normal; margin-bottom: 8px; } div.case-study-content h2 { margin-bottom: 25px; color: #666; font-size: 20px; line-height: 21px; font-weight: bold; letter-spacing: -1px; } div.case-study-content h5 { margin-bottom: 5px; text-transform: uppercase; font-size: 14px; color: #FFF; } div.case-study-content p { line-height: 18px; margin-bottom: 20px; font-size: 13px; color: #CCC; } div.case-study-content ul { list-style:decimal outside;font-size:14px;margin-left:19px; } div.case-study-misc { float: right; width: 260px; color: #FFF; padding-right: 25px; padding-top: 20px; } div.case-study-misc p { font-size: 12px; line-height: 17px; padding-bottom: 20px; color: #999; } div.case-study-misc p.visitsite { font-size: 16px; font-style: italic; background: url(../images/content/more.gif) no-repeat 0px 4px; padding-left: 10px; } div.case-study-misc p.visitsite a { color: #D00000; } div.case-study-misc p.visitsite a:hover { color: #FFF; text-decoration: none; } div.case-study-misc p span.label { display: block; font-weight: bold; color: #FFF; text-transform: uppercase; } div.case-study-misc dl { font-size: 12px; margin-bottom: 20px; } div.case-study-misc dl dt { font-weight: bold; margin-bottom: 10px; text-transform: uppercase; color: #FFF; } div.case-study-misc dl dd { margin-bottom: 5px; background: url(../images/content/tick.png) no-repeat; display: block; height: 16px; padding-left: 19px; padding-top: 2px; color: #999; } div.case-study-misc p.quote { font: italic 17px/22px Georgia, "Times New Roman", Times, serif; color: #FFF; padding-top: 15px; } div.case-study-misc p.quote span.author { display: block; font: normal 13px Arial, Helvetica, sans-serif; color: #999; margin-top: 3px; } div.case-study-gallery { padding-right: 25px; padding-left: 25px; margin-left: 25px; } div.case-study-gallery-controls{ height:50px; margin:-27px 0px 0 -98px; width:950px; position:relative; z-index:1;} div.case-study-gallery-controls div.inner{ padding-top:35px; margin-left:572px;} div.case-study-gallery-controls a{ background:url(../images/content/control-bg.gif) 0 0 no-repeat; height:6px; width:6px; display:block; float:left; margin-right:5px;} div.case-study-gallery-controls a:hover, div.case-study-gallery-controls a.activeSlide{ background:url(../images/content/control-hover.gif) 0 0 no-repeat;text-decoration:none;} /*---- other work we've done ----*/ div#otherwork{ padding-bottom:15px; margin-top:10px; overflow: hidden; } div#otherwork h2{ background:url(../../assets/images/headings/otherwork.gif) 0 0 no-repeat; height:0px; padding-top:25px; overflow:hidden; width:100%; border-bottom:#565656 1px solid; margin-bottom:20px;} div#otherwork div.post{ float:left; width:300px; margin-right:50px;} div#otherwork div.post span.timestamp{ font-size:110%; color:#626262; display:block; margin-bottom:5px; text-transform: uppercase; } div#otherwork div.last{ margin:0;} div#otherwork span.readblog{ font-size:110%; color:#d90000; float:right; background:url(../images/content/more.gif) 100% 1px no-repeat; padding-right:10px; } div#otherwork ul li { float: left; padding-right: 28px; } div#otherwork ul li.last { padding-right: 0px !important } div#otherwork ul li img { margin-bottom: 10px; } div#otherwork ul li p.title { font-size: 150%; color:#FFF; font-weight:bold; margin-bottom: 5px; } div#otherwork ul li p a.more-link{ font-size:100% !important; color:#d90000; background:url(../images/content/more.gif) 100% 3px no-repeat; padding-right:10px;}