/*////////////////////////////////////////////////////////////////////////*/ /*Farmore 2010*/ /*Allan Paterson 2010*/ /*////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////*/ /*Reset*/ /*////////////////////////////////////////////////////////////////////////*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;vertical-align: baseline; background: transparent;} body { line-height: 1;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;} /* remember to define focus styles! */ :focus { outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0; font-size:10px;} iframe{border:0px;} :focus { -moz-outline-style:none;} * {margin:0; padding:0;} /*////////////////////////////////////////////////////////////////////////*/ /*body Section*/ /*////////////////////////////////////////////////////////////////////////*/ body,html { background:#fff url(../graphics/bg.jpg) no-repeat;font-size: 12px;color: #333333;min-width:1020px;height: 100%; width: 100%;font-family: Arial, Verdana, sans-serif;} #wrap { margin:0 auto;width:1020px; position:relative;} /*////////////////////////////////////////////////////////////////////////*/ /*Head Section*/ /*////////////////////////////////////////////////////////////////////////*/ #header {width:1020px; height: 120px;position:relative; } #logo{margin:15px 0 0 10px; position:relative; float:left; width:170px; } #contact_details{position:relative;float:right; width:170px; height:55px; padding:25px 7px 0 3px; background:url(../graphics/contact_details.jpg) top left no-repeat; font-size:14px; font-weight:400; color:#fff; text-align:center; } #contact_details a:link,#contact_details a:visited {color: #fff; text-decoration:none;} #contact_details a:hover,#contact_details a:active {color: #ccc; text-decoration:none; } /*////////////////////////////////////////////////////////////////////////*/ /*links*/ /*////////////////////////////////////////////////////////////////////////*/ a:link {color: #222; text-decoration:none;} a:visited{ color: #222; text-decoration:none; } a:hover{color: #666; text-decoration:none; } a:active {color: #666; text-decoration:none; } /*////////////////////////////////////////////////////////////////////////*/ /*Menu*/ /*////////////////////////////////////////////////////////////////////////*/ #menu {position:relative; float:right; margin:4px 0 0 0 ; width:700px; } #menu ul {margin:0;padding:10px 10px 0;list-style:none; float:right; } #menu li {float:left;display:inline;background:url(../graphics/right.png) no-repeat right top;margin:0 2px 0 9px;padding:0;} #menu a {float:left;display:block;position:relative;left:-9px;margin-right:-9px;width:.1em;background:url(../graphics/left.png) no-repeat left top; padding:12px 20px;text-decoration:none;font-weight:bold;color:#222;} #menu > ul a {width:auto;}/* Commented Backslash Hack hides rule from IE5-Mac \*/ #menu a {float:none;}/* End IE5-Mac hack */ #menu a:hover {color:#444;} .menu_item{background-position:100% -150px;} .menu_item a{background-position:0 -150px;padding-bottom:5px;color:#444;}/* not for IE5.x or IE6 */ #menu li:hover, #menu li:hover a {background-position:100% -150px;color:#444;} #menu li:hover a {background-position:0 -150px;} #menu li.selected {color:#444;margin:0 2px 0 9px;padding:0;float:left;display:inline;background:url(../graphics/right.png) no-repeat right top;background-position:100% -150px;} #menu .selected a{background-position:0 -150px;color:#444;} /*////////////////////////////////////////////////////////////////////////*/ /*center*/ /*////////////////////////////////////////////////////////////////////////*/ #content_top{width: 1020px;height:40px;background:transparent url(../graphics/content_top.png) top left no-repeat; } #content_bottom{width: 1020px;height:30px;background:transparent url(../graphics/content_bottom.png) bottom left no-repeat ;position:relative; float:left;} #content_centre{width: 1020px;background:transparent url(../graphics/content_centre.png) repeat-y;position:relative;float:left;} /*/////////////////////////////////*/ #fade{position:relative;float:left; margin:0 0 0 28px; width:965px; height:160px;} /*/////////////////////////////////*/ #left {position:relative;float:left; width:470px; margin:20px 0 0 28px;} #left h1{background:#787258;color:#fff; height:25px; padding:11px 0 0 6px;margin:0 0 12px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:15px; position:relative; } #left strong{color:#787258; } #left h1 a:link, #left h1 a:visited, #left h1 a:active {color:#fff;} #left h1 a:hover{color:#ccc;} /*/////////////////////////////////*/ #it_left {position:relative;float:left; width:720px; margin:20px 0 0 28px; } #it_left .column{width:340px; margin:0 20px 14px 0; float:left;} #it_left h2{font-size:13px; background:#787258;color:#fff; height:20px; padding:7px 0 0 6px;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #it_left p{width:320px; position:relative; float:left; background:#F6F2F1;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;padding:10px; line-height:1.5;} #it_left h1{background:#787258;color:#fff; height:25px; padding:11px 0 0 6px;margin:0 0 0 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:15px; width:694px;} #it_left h1 a:link, #it_left h1 a:visited, #it_left h1 a:active {color:#fff;} #it_left h1 a:hover{color:#ccc;} /*/////////////////////////////////*/ .it_holder{position:relative; float:left; width:454px; background:url(../graphics/it_features_bg.jpg) top left repeat-x;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;padding:8px; margin:0 0 12px 0;} .it_image{position:relative; float:left;} .it_text{position:relative; float:left; color:#444; margin:0 0 0 16px; width:395px;} .it_text h2{color:#787258; font-size:13px; } .it_text p{padding:8px 0 0 0;} .it_text .toggle p{padding:0 0 10px 0;} .it_text a:link, .it_text a:visited, .it_text a:active {color:#787258;} .it_text a:hover{color:#333;} /*/////////////////////////////////*/ #right {position:relative;float:left; width:470px; margin:20px 0 0 28px;} #right h1, #it_right h1{background:#D1357A;color:#fff; height:25px; padding:11px 0 0 6px;margin:0 0 12px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:15px;} #right strong{ color:#D1357A; } #right h1 a:link, #right h1 a:visited, #right h1 a:active {color:#fff;} #right h1 a:hover{color:#ccc;} /*/////////////////////////////////*/ #it_right {position:relative;float:left; width:220px; margin:0 0 0 20px; } /*////////////////////////////////////////////////////////////////////////*/ /*it menu*/ /*////////////////////////////////////////////////////////////////////////*/ .it_menu {text-decoration:none; } .it_menu ul {list-style: none; margin: 20px 0 20px 0; } .it_menu ul li a:link, .it_menu ul li a:visited { display: block; padding: 8px 0 8px 6px; text-decoration: none; background:#787258 ;color: #fff;width:220px; margin:0 0 2px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .it_menu ul li a:hover, .it_menu ul li a:focus, .it_menu ul li a:active { color: #787258; background:#fff; } /*/////////////////////////////////*/ .web_holder{position:relative; float:left; width:454px; background:url(../graphics/web_features_bg.jpg) top left repeat-x;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;padding:8px; margin:0 0 12px 0;} .web_image{position:relative; float:left;} .web_text{position:relative; float:left; color:#D1357A; margin:0 0 0 16px;width:395px;} .web_text h2{color:#D1357A; font-size:13px;} .web_text p{padding:8px 0 0 0;} .web_text .toggle p{padding:0 0 10px 0;} .web_text a:link, .web_text a:visited, .web_text a:active {color:#D1357A;} .web_text a:hover{color:#333;} /*/////////////////////////////////*/ #web_left {position:relative;float:left; width:720px; margin:20px 0 0 28px; } #web_left .column{width:340px; margin:0 20px 14px 0; float:left;} #web_left h2{font-size:13px; background:#D1357A;color:#fff; height:20px; padding:7px 0 0 6px;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #web_left p{width:320px; position:relative; float:left; background:#F6F2F1;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;padding:10px; line-height:1.5;} #web_left h1{background:#D1357A;color:#fff; height:25px; padding:11px 0 0 6px;margin:0 0 0 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:15px; width:694px;} #web_left h1 a:link, #web_left h1 a:visited, #web_left h1 a:active {color:#fff;} #web_left h1 a:hover{color:#ccc;} /*////////////////////////////////////////////////////////////////////////*/ /*web menu*/ /*////////////////////////////////////////////////////////////////////////*/ .web_menu {text-decoration:none; } .web_menu ul {list-style: none; margin: 20px 0 20px 0; } .web_menu ul li a:link, .web_menu ul li a:visited { display: block; padding: 8px 0 8px 6px; text-decoration: none; background:#D1357A;color: #fff;width:220px; margin:0 0 2px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .web_menu ul li a:hover, .web_menu ul li a:focus, .web_menu ul li a:active { color: #D1357A; background:#fff; } /*////////////////////////////////////////////////////////////////////////*/ /*H1 image replacement*/ /*////////////////////////////////////////////////////////////////////////*/ h1.it_support_logo, h1.disaster_recovery_logo, h1.flexible_working_logo, h1.web_design_logo,h1.website_optimisation_logo,h1.internet_marketing_logo ,h1.help_logo , h1.about_us_logo, h1.find_us_logo,h1.jobs_logo,h1.offers_logo {float:left; margin:0 0 0 28px; width: 965px; height:160px; position: relative;} h1.it_support_logo span, h1.disaster_recovery_logo span, h1.flexible_working_logo span, h1.web_design_logo span,h1.website_optimisation_logo span,h1.internet_marketing_logo span,h1.help_logo span,h1.about_us_logo span , h1.find_us_logo span ,h1.jobs_logo span,h1.offers_logo span {position: absolute;width: 100%;height: 100%; } h1.it_support_logo span {background: url(../graphics/it_support_1.jpg) no-repeat; } h1.disaster_recovery_logo span {background: url(../graphics/it_support_3.jpg) no-repeat; } h1.flexible_working_logo span {background: url(../graphics/it_support_2.jpg) no-repeat; } h1.web_design_logo span {background: url(../graphics/web_development_2.jpg) no-repeat; } h1.website_optimisation_logo span {background: url(../graphics/web_development_3.jpg) no-repeat; } h1.internet_marketing_logo span {background: url(../graphics/web_development_1.jpg) no-repeat; } h1.help_logo span {background: url(../graphics/it_support_4.jpg) no-repeat; } h1.about_us_logo span {background: url(../graphics/web_development_4.jpg) no-repeat; } h1.find_us_logo span {background: url(../graphics/web_development_5.jpg) no-repeat; } h1.jobs_logo span {background: url(../graphics/web_development_6.jpg) no-repeat; } h1.offers_logo span {background: url(../graphics/web_development_7.jpg) no-repeat; } h1.news_logo {background: url(../graphics/web_development_8.jpg) no-repeat; width: 965px; height:160px; position: relative; font-size:28px; padding:50px 0 0 15px;float:left; margin:0 0 0 28px; color:#fff;} /*////////////////////////////////////////////////////////////////////////*/ /*about*/ /*////////////////////////////////////////////////////////////////////////*/ #about_left {position:relative;float:left; width:980px; margin:20px 0 0 28px; } #about_left .column{width:300px; margin:0 20px 14px 0; float:left;} #about_left h2{font-size:13px; background:#D1357A;color:#fff; height:20px; padding:7px 0 0 6px;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #about_left p{width:280px; position:relative; float:left; background:#F6F2F1;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;padding:10px; line-height:1.5;} #about_left h1{background:#D1357A;color:#fff; height:25px; padding:11px 0 0 6px;margin:0 0 0 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:15px; } #about_left h1 a:link, #about_left h1 a:visited, #about_left h1 a:active {color:#fff;} #about_left h1 a:hover{color:#ccc;} /*////////////////////////////////////////////////////////////////////////*/ /*jobs, offers, news, twitter*/ /*////////////////////////////////////////////////////////////////////////*/ .news{ width:220px; margin:20px 30px 0 0; position:relative; float:left;} .jobs{ width:220px; margin:20px 0 0 0; position:relative; float:left;} .offers{ width:220px; margin:20px 30px 0 0; position:relative; float:left;} .twitter{ width:220px; margin:20px 0 0 0; position:relative; float:left;} .news h3{background:#461089; padding:8px; font-size:16px; font-weight:600; color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .jobs h3{background:#E9982C; padding:8px; font-size:16px; font-weight:600; color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .offers h3{background:#78AF2E; padding:8px; font-size:16px; font-weight:600; color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .twitter h3{background:#38C8FF; padding:8px; font-size:16px; font-weight:600; color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .news ul{background:#EFEAF4; padding:4px; font-size:12px; color:#461089;} .jobs ul{background:#FDF6ED; padding:4px; font-size:12px; color:#E9982C;} .offers ul{background:#F7FBF2; padding:4px; font-size:12px; color:#78AF2E;} .twitter ul{background:#EFFBFF; padding:4px; font-size:12px; color:#38C8FF;} .news li, .jobs li, .offers li, .twitter li {padding:4px; margin:3px 0 3px 0;} .news a:link, .news a:active{ color:#461089;} .jobs a:link, .jobs a:active{color:#E9982C;} .offers a:link, .offers a:active{color:#78AF2E;} .twitter a:link, .twitter a:active{color:#38C8FF;} .news a:hover,.jobs a:hover,.offers a:hover,.twitter a:hover{ color:#333;} .twitter h3 a:link, .twitter h3 a:visited, .twitter h3 a:active {color:#fff;} .twitter h3 a:hover{color:#ccc;} .news h3 a:link, .news h3 a:visited, .news h3 a:active {color:#fff;} .news h3 a:hover{color:#ccc;} /*////////////////////////////////////////////////////////////////////////*/ /*Footer*/ /*////////////////////////////////////////////////////////////////////////*/ #footer{width:1020px; position:relative; float:left; color:#333333; font-size:11px;} .footer_left{float:left; margin:20px 0 20px 28px; } /*////////////////////////////////////////////////////////////////////////*/ /*Footer Menu*/ /*////////////////////////////////////////////////////////////////////////*/ #footer_menu {position:relative; float:right; margin:-10px 10px 0 0 ; width:500px; } #footer_menu ul {list-style:none; float:right; } #footer_menu li {float:left;display:inline;background:url(../graphics/fm_right.png) no-repeat right top;margin:0 2px 0 9px;padding:0;} #footer_menu a {float:left;display:block;position:relative;left:-9px;margin-right:-9px;width:.1em;background:url(../graphics/fm_left.png) no-repeat left top; padding:12px 20px;text-decoration:none;font-weight:bold;color:#222;} #footer_menu > ul a {width:auto;}/* Commented Backslash Hack hides rule from IE5-Mac \*/ #footer_menu a {float:none;}/* End IE5-Mac hack */ #footer_menu a:hover {color:#444;} .footer_menu_item{background-position:100% -150px;} .footer_menu_item a{background-position:0 -150px;padding-bottom:5px;color:#444;}/* not for IE5.x or IE6 */ #footer_menu li:hover, #footer_menu li:hover a {background-position:100% -150px;color:#444;} #footer_menu li:hover a {background-position:0 -150px;} #footer_menu li.selected {color:#444;margin:0 2px 0 9px;padding:0;float:left;display:inline;background:url(../graphics/fm_right.png) no-repeat right top;background-position:100% -150px;} #footer_menu .selected a{background-position:0 -150px;color:#444;} /*////////////////////////////////////////////////////////////////////////*/ /*news*/ /*////////////////////////////////////////////////////////////////////////*/ .news_image{ width:224px; margin:0px 30px 15px 0px; float:left;} .news_image .img{width:220px; margin:0 0 10px 0 ; padding:2px; border:1px solid #461089;} .news_content{ margin:0px 0px 0px 0px;} .social_links{ text-align:center;} .news_extras h3{margin:20px 0 0 0;background:#461089; padding:8px; font-size:13px; font-weight:600; color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .td_1{background:#efefef; padding:3px; font-size:11px; width:714px;} .td_2{background:#fff; padding:3px; font-size:11px;width:714px;} .news_menu {text-decoration:none; } .news_menu ul {list-style: none; margin: 0px 0 20px 0; } .news_menu ul li a:link, .news_menu ul li a:visited { display: block; padding: 7px 0px 7px 6px; text-decoration: none; background:#F0F0F0;color: #222;width:214px; margin:0 0 2px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .news_menu ul li a:hover, .news_menu ul li a:focus, .news_menu ul li a:active { color: #461089; background:#fff; } .pright{margin:10px 0 0 260px;text-align:right; width:128px; height:12px;} /*////////////////////////////////////////////////////////////////////////*/ /*clearer*/ /*////////////////////////////////////////////////////////////////////////*/ .clearer{clear: both; height: 0px; overflow: hidden;} /*////////////////////////////////////////////////////////////////////////*/ /*others*/ /*////////////////////////////////////////////////////////////////////////*/ .input {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;font-family: Arial, Verdana, sans-serif; width:400px; border:1px solid #D1357A ; padding:5px; margin:0px 0px 12px 0; background:#F6F2F1; color:#222; } .submit {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border:1px solid #333333; background:#fff; width:100px; color:#333333; font-size:13px; padding:4px; margin:0px 0px 0px 2px; font-weight:700;} #map{width:960px; height:320px;border:2px solid #ccc; margin:30px 0 20px 28px; position:relative; float:left;} /*////////////////////////////////////////////////////////////////////////*/ /*validation*/ /*////////////////////////////////////////////////////////////////////////*/ #msg {display:none; position:absolute; z-index:200; background:url(../graphics/msg_arrow.jpg) left center no-repeat; padding-left:7px} #msgcontent {display:block; background:#fff; border:2px solid #FF0000; color:#FF0000;border-left:none; padding:5px;} /*////////////////////////////////////////////////////////////////////////*/ /*accordion*/ /*////////////////////////////////////////////////////////////////////////*/ #options {margin:5px auto; text-align:right; color:#9ac1c9} #options a {text-decoration:none;} #options a:hover {color:#033} #acc {list-style:none; margin:0 auto ; } #acc h3 {display: block;padding: 7px 0px 7px 6px; text-decoration: none; background: #F0F0F0; color: #333; width:214px;margin:0px 0px 2px 0px; cursor:pointer; } #acc .acc-section {overflow:hidden;} #acc .acc-content {padding:0px 0px 10px 10px; } /*////////////////////////////////////////////////////////////////////////*/ /*slider*/ /*////////////////////////////////////////////////////////////////////////*/ #slider{margin:20px 0 30px 0; border:2px solid #ccc;} #slider ul, #slider li{ margin:0; padding:0; list-style:none;width:696px; height:288px; } #slider li{ width:696px; height:288px; overflow:hidden; } #slider img{width:696px;} #nextBtn{ width:50px; height:20px; } #prevBtn{ width:50px; height:20px; } #prevBtn a{ display:inline; padding:0px; margin:0px; width:80px; height:20px;background:url(../graphics/prev.jpg) no-repeat 0 0; } #nextBtn a{ display:inline; padding:610px 0px; width:50px; height:20px; margin:0px; background:url(../graphics/next.jpg) no-repeat 0 0; } p.toggle{display:none;}