/*********************** Mark Till Online Main Style Sheet CSS Document: Version 5 Developer: Mark Till URL: http://www.mark-till-online.co.uk/ Created 17 October 2009 - Copyright Mark Till ***********************/ /*------------------------------------------------------------------------------*/ /* --> WEBSITE BODY */ /*------------------------------------------------------------------------------*/ body {margin:0; padding:0; width:100%; background:#171717; font-family:Arial, Helvetica, sans-serif;} img{border:0;} /*------------------------------------------------------------------------------*/ /* --> TOP & NAVIGATION DIVS AND CLASSES */ /*------------------------------------------------------------------------------*/ #top_body{margin:0; padding:0; width:100%; background:url(../images/bg_top.gif) repeat-x;} #top_container{width:900px; margin:0 auto; height:116px;} #top_container img{border:0;} #top_col_1{width:290px; float:left; display:inline;} #top_col_2{width:605px; float:left; display:inline;} #navigation{height:52px; width:403px; margin:29px 0 0 207px; padding:0;} #navigation ul{margin:0; padding:0; list-style-type:none;} #navigation li{margin:0; padding:0; float:left;} #navigation li.home a{width:69px; height:52px; background: url(../images/nav/nav_01.gif) 0px -52px no-repeat; display:block; text-indent: -9999px;} #navigation li.home a:hover{background:url(../images/nav/nav_01.gif) 0px 0px no-repeat; display: block;} #navigation li.home a.current{background: url(../images/nav/nav_01.gif) 0px -104px no-repeat; display:block;} #navigation li.about a{width:85px; height:52px; background: url(../images/nav/nav_02.gif) 0px -52px no-repeat; display:block; text-indent: -9999px;} #navigation li.about a:hover{background:url(../images/nav/nav_02.gif) 0px 0px no-repeat; display: block;} #navigation li.about a.current{background: url(../images/nav/nav_02.gif) 0px -104px no-repeat; display:block;} #navigation li.service a{width:91px; height:52px; background: url(../images/nav/nav_03.gif) 0px -52px no-repeat; display:block; text-indent: -9999px;} #navigation li.service a:hover{background:url(../images/nav/nav_03.gif) 0px 0px no-repeat; display: block;} #navigation li.service a.current{background: url(../images/nav/nav_03.gif) 0px -104px no-repeat; display:block;} #navigation li.work a{width:76px; height:52px; background: url(../images/nav/nav_04.gif) 0px -52px no-repeat; display:block; text-indent: -9999px;} #navigation li.work a:hover{background:url(../images/nav/nav_04.gif) 0px 0px no-repeat; display: block;} #navigation li.work a.current{background: url(../images/nav/nav_04.gif) 0px -104px no-repeat; display:block;} #navigation li.contact a{width:82px; height:52px; background: url(../images/nav/nav_05.gif) 0px -52px no-repeat; display:block; text-indent: -9999px;} #navigation li.contact a:hover{background:url(../images/nav/nav_05.gif) 0px 0px no-repeat; display: block;} #navigation li.contact a.current{background: url(../images/nav/nav_05.gif) 0px -104px no-repeat; display:block;} /*------------------------------------------------------------------------------*/ /* --> FEATURED DIVS AND CLASSES */ /*------------------------------------------------------------------------------*/ #glider_body{width:100%; background:url(../images/bg_main.gif) top repeat-x #ffffff;} #glider_container{width:900px; height:242px; margin:0 auto; padding:29px 0 0; position:relative;} #slide_placer{width:900px; height:242px; position:absolute; left:0; z-index:99;} #slide_placer a{background:url(../images/bg_slider.png) no-repeat; width:900px; height:242px; display:block; text-indent: -9999px;} div.scroller{width:900px; height:242px; overflow: hidden; border:0;} #portfolio{width:900px; height:242px; margin:0; padding:0; position: absolute; z-index:1; overflow: hidden;} #portfolio ul{ margin:0; padding:0;} #portfolio ul li{margin:0; padding:0; list-style:none;} #glider_body h1.home{width:900px; height:110px; background: url(../images/h1_home.gif) 0px 0px no-repeat; display:block; text-indent: -9999px; margin:0 auto; padding:0;} /*------------------------------------------------------------------------------*/ /* --> HOME PAGE CONTENT DIVS AND CLASSES */ /*------------------------------------------------------------------------------*/ #home_body{margin:0; padding:0; width:100%; background:#f8f8f8; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;} #home_container{width:900px; margin: 29px auto; background:url(../images/bg_three_col.gif) repeat-y;} #home_col_1{width:290px; float:left; display:inline;} #home_col_2{width:290px; float:left; display:inline; margin-left:55px;} #home_col_3{width:210px; float:left; display:inline; margin-left:55px;} #home_container .who{width:290px; height:47px; background: url(../images/title_who.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_container .why{width:290px; height:47px; background: url(../images/title_why.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_container h2,#home_container h3{font-size:16px; line-height:26px; margin:0; padding:6px 0 8px; font-weight:bold; color:#6c6c6c; word-spacing:-1px;} #home_container p{font-size:12px; color:#787878; line-height:22px; margin:0; padding:0; word-spacing:1px;} #home_container p a{color:#787878;} #home_container p a:hover{color:#535353;} #home_container .read_more{padding:17px 0 0;} #home_container .read_more a{background:url(../images/read_more.gif) no-repeat 0px 0px; width:290px; height:49px; display:block; text-indent: -9999px;} #home_container .read_more a:hover{background:url(../images/read_more.gif) no-repeat -290px 0px; display:block;} #home_col_3 ul{margin:0; padding:0; list-style-type:none;} #home_col_3 li{margin:0; padding:0;} #home_col_3 li.web a{width:210px; height:68px; background: url(../images/right_web.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_col_3 li.web a:hover{background:url(../images/right_web.gif) -210px 0px no-repeat; display: block;} #home_col_3 li.seo a{width:210px; height:75px; background: url(../images/right_seo.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_col_3 li.seo a:hover{background:url(../images/right_seo.gif) -210px 0px no-repeat; display: block;} #home_col_3 li.branding a{width:210px; height:74px; background: url(../images/right_branding.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_col_3 li.branding a:hover{background:url(../images/right_branding.gif) -210px 0px no-repeat; display: block;} #home_col_3 li.blog a{width:210px; height:75px; background: url(../images/right_blog.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_col_3 li.blog a:hover{background:url(../images/right_blog.gif) -210px 0px no-repeat; display: block;} #home_col_3 li.ecommerce a{width:210px; height:67px; background: url(../images/right_ecommerce.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #home_col_3 li.ecommerce a:hover{background:url(../images/right_ecommerce.gif) -210px 0px no-repeat; display: block;} #testimonials_body{width:100%; background:#ffffff;} #testimonials_container{width:900px; margin:0 auto; padding:28px 0;} #testimonials_container h4.clients{width:239px; height:25px; background: url(../images/h4_clients.gif) 0px 0px no-repeat; display:block; text-indent: -9999px; margin:0; padding:0;} #testimonials_container p{font-size:15px; color:#535353; line-height:24px;} #testimonials_container p strong.apos{font-family:Georgia, "Times New Roman", Times, serif; font-size:20px;} #testimonials_container p a{color:#96bf0d; font-weight:bold; text-decoration:none;} #testimonials_container p a:hover{color:#799b09; font-weight:bold;} /*------------------------------------------------------------------------------*/ /* --> MAIN CONTENT DIVS AND CLASSES */ /*------------------------------------------------------------------------------*/ #main_body{margin:0; padding:0; width:100%; background:url(../images/bg_main.gif) top repeat-x #ffffff;} #main_container{width:900px; margin: 0 auto; padding:29px 0 0;} #my_work{width:900px; margin: 0 auto; padding:0;} #main_col_1{width:635px; float:left; display:inline;} #main_col_2{width:265px; float:left; display:inline;} #main_col_2 .fade{width:240px; margin-left:25px;} #main_col_2 h3.clients{width:265px; height:25px; background: url(../images/h4_clients.gif) top right no-repeat; display:block; text-indent: -9999px; margin:0; padding:0;} #main_col_2 .fade p{font-size:14px; color:#787878; line-height:24px;} #main_col_2 .fade p strong.apos{font-family:Georgia, "Times New Roman", Times, serif; font-size:20px;} #main_col_2 .fade p a{color:#96bf0d; font-weight:bold; text-decoration:none;} #main_col_2 .fade p a:hover{color:#799b09; font-weight:bold;} /*Font Styles*/ #main_col_1 p, #my_work p{font-size:15px; color:#535353; line-height:24px; padding:0 0 16px; margin:0;} #main_col_1 p a, #my_work p a{color:#84a907; text-decoration:none;} #main_col_1 p a:hover, #my_work p a:hover{color:#637e06;} #main_col_1 h2{font-size:18px; line-height:normal; margin:0; padding:0; font-weight:normal; color:#535353;} #main_col_1 p.about_quote {margin:0; padding:0 0 16px; width:635px; height:37px; background: url(../images/p_about_quote.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} /*Header Styles*/ #main_col_1 h1.about {margin:0; padding:0 0 16px; width:226px; height:47px; background: url(../images/h1_about.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h1.service {margin:0; padding:0 0 16px; width:170px; height:47px; background: url(../images/h1_service.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h1.contact {margin:0; padding:0 0 16px; width:267px; height:47px; background: url(../images/h1_contact.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h1.resource {margin:0; padding:0 0 16px; width:267px; height:47px; background: url(../images/h1_resource.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #my_work h1.work {margin:0; padding:0 0 16px; width:206px; height:47px; background: url(../images/h1_work.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h2.web_design {margin:0; padding:0; width:314px; height:20px; background: url(../images/h2_web_design.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h2.seo {margin:0; padding:0; width:314px; height:20px; background: url(../images/h2_seo.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h2.branding {margin:0; padding:0; width:314px; height:20px; background: url(../images/h2_branding.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h2.blog_design {margin:0; padding:0; width:314px; height:20px; background: url(../images/h2_blog_design.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} #main_col_1 h2.ecommerce {margin:0; padding:0; width:314px; height:20px; background: url(../images/h2_ecommerce.gif) 0px 0px no-repeat; display:block; text-indent: -9999px;} /*Image Styles*/ #main_col_1 p img{float:right; padding:0 10px 0 0;} #main_col_2 .fade p img{padding:5px; border:1px solid #dddddd; margin-bottom:5px; background:#ffffff;} #my_work li img{padding:0; border:1px solid #dddddd; background:#ffffff;} /*List Styles*/ #main_col_1 ul{margin:0 0 16px; } #main_col_1 ul li{color:#535353; line-height:24px; padding-bottom:5px; font-size:15px;} #main_col_1 ul li a{color:#84a907; text-decoration:none;} #main_col_1 ul li a:hover{color:#637e06; text-decoration:underline;} #my_work ul{ margin:0; padding:0; list-style:none; } #my_work li{margin:0 21px 20px 0; padding:0; float:left;} #my_work li.no_pad{margin-right:0;} #my_work li span{display:block;} #my_work li span.work_title{width: 207px; margin:10px 0 0; font-size:16px; font-weight:bold; line-height:normal; color:#96bf0d;} #my_work li span.work_title a{color:#535353; text-decoration:none;} #my_work li span.work_title a:hover{color:#171717;} #my_work li span.work_desc{width: 207px; color:#808080; margin:2px 0 0; font-size:11px; line-height:16px;} #my_work li span.work_desc a{color:#96c000; text-decoration:underline;} #my_work li span.work_desc a:hover{color:#769700;} #my_work li span.preview{float:left; padding-left:25px;} #my_work li span.preview a{background:#a8aaa3; padding:4px 6px; display:block; font-size:11px; color:#FFFFFF; text-decoration:none;} #my_work li span.preview a:hover{background:#96bf0d;} #my_work li span.launch{float:left; margin-left:5px;} #my_work li span.launch a{background:#a8aaa3; padding:4px 6px; display:block; font-size:11px; color:#FFFFFF; text-decoration:none;} #my_work li span.launch a:hover{background:#96bf0d;} #my_work h2 {margin:0 0 20px; padding:0 0 5px; width:900px; height:20px; display:block; text-indent: -9999px; border-bottom:1px solid #dddddd;} #my_work h2.web_design {background: url(../images/h2_web_design.gif) 0px 0px no-repeat;} #my_work h2.branding {background: url(../images/h2_branding.gif) 0px 0px no-repeat;} #my_work h2.blog_design {background: url(../images/h2_blog_design.gif) 0px 0px no-repeat;} #my_work h2.ecommerce {background: url(../images/h2_ecommerce.gif) 0px 0px no-repeat;} #my_work h2.additional {background: url(../images/h2_additional.gif) 0px 0px no-repeat;} /*Enquiry Form*/ #main_col_1 table{font-size:16px; color:#ffffff; margin-top:10px;} #main_col_1 tr{height: 30px;} #main_col_1 td strong{color:#000000;} #form{margin:16px 0 0; padding:15px; background:#ffffff; width:605px; } #form table{font-size:15px; color:#535353; } #form tr.bg{ background:#f0f0f0;} #form .enq_form{background-color:#ffffff; border: #dbdbdb 1px solid; font-family:Arial, Helvetica; font-size:14px; color:#000000; padding:3px; width:283px;} #form .enq_form_button{height:49px; width:130px; background:url(../images/send_button.gif) no-repeat; border:0; cursor:pointer; margin:0; padding:0;} /*------------------------------------------------------------------------------*/ /* --> FOOTER DIVS AND CLASSES */ /*------------------------------------------------------------------------------*/ #footer_body{width:100%; margin-bottom:10px; background:url(../images/bg_footer_container.gif) repeat-x top center; padding-top:45px;} #footer_container{background:url(../images/bg_footer.gif) no-repeat; width:900px; height:200px; padding-top:43px; margin:0 auto;} #footer_col_1{width:110px; float:left; display:inline; padding-left:3px;} #footer_col_2{width:150px; float:left; display:inline; padding-left:42px;} #footer_col_3{width:230px; float:left; display:inline; padding-left:49px;} #footer_col_4{width:268px; float:left; display:inline; padding-left:47px;} #footer_col_1 ul, #footer_col_2 ul{font-size:14px; color:#ffffff; margin:0; padding:0 0 0 13px;} #footer_col_1 li, #footer_col_2 li {line-height:26px; list-style-image:url(../images/bg_footer_li.gif);} #footer_col_1 li a, #footer_col_2 li a{color:#ffffff; text-decoration:none;} #footer_col_1 li a:hover, #footer_col_2 li a:hover{color:#ffffff; text-decoration:underline;} #footer_col_1 li a:hover, #footer_col_21 li a:hover{color:#ffffff; text-decoration:underline;} #footer_col_3 p{ color:#FFFFFF; font-size:14px; margin:0 0 10px 0; padding:0; line-height:26px;} #footer_col_3 .valid_xhtml, #footer_col_3 .valid_css{margin:0; float:left;} #footer_col_3 .valid_xhtml a {background:url(../images/footer_xhtml.gif) no-repeat; width:103px; height:26px; display:block; text-indent: -9999px;} #footer_col_3 .valid_xhtml a:hover{background:url(../images/footer_xhtml.gif) no-repeat -103px 0px; display:block;} #footer_col_3 .valid_css a {background:url(../images/footer_css.gif) no-repeat; width:81px; height:26px; display:block; text-indent: -9999px; margin-left:5px;} #footer_col_3 .valid_css a:hover{background:url(../images/footer_css.gif) no-repeat -81px 0px; display:block;} #twitter_div{margin:0; padding:0; color:#ffffff; width:268px; line-height:26px;} #twitter_update_list{margin:0; padding:0; font-size:14px; list-style-type:none; font-weight:bold;} #twitter_update_list a{font-style:normal; font-size:14px; text-decoration:none; color:#96bf0d;} #twitter_update_list a:hover{text-decoration:underline; color:#96bf0d;} #twitter-link{font-style:normal; font-size:14px;} #twitter-link a{text-decoration:none; color:#ffffff;} #twitter-link a:hover{text-decoration:underline; color:#ffffff;} #footer_container .design{text-align:right; padding:30px 0 0; font-size:11px; color:#646464;} #footer_container .design a{color:#646464; text-decoration:none;} #footer_container .design a:hover{color:#ffffff; text-decoration:underline;} /*------------------------------------------------------------------------------*/ /* --> MISC VALUES, DIVS AND CLASSES */ /*------------------------------------------------------------------------------*/ .clearcols{clear:both; height:1px;}