body, html{
    margin:0px;
    padding:0px;
    font-family: Calibri,Arial,Helvetica,sans-serif;
    font-size:14px;
    text-align: justify;
}
img{ border:none; }

h1, h2, h3, h4, h5{ color:#1797ca; }
a, a:visited{ color:#358fea; text-decoration:none}
a:hover, a:active{ color:#2db7f7; text-decoration:none}
a:focus {border: 1px solid #FF0000; color: #FF0000; }
a:focus:hover {color: #00FFCC; }

.iconText a, .iconText a:visited, .iconText a:hover, .iconText a:active{ color: #FFF; text-decoration: none; }

#header, #main, #footer, #navigation, #navigationF #page_footer, .container, .mobContainer{
    width:100%;
    display:table;
}

#header_inner, #main_inner, #footer_inner, #navigation_inner, #navigation_innerF, #page_footer_inner, .container_inner, .mobContainer_inner{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    display:table;
    position:relative;
}

#logo{
    margin: 10px 0px 5px 0px;
    vertical-align: bottom;
}

.floatRight{float: right;}
.floatLeft{float: left;}
.asTable{display: table;}
.hr{border:none;width: 100%;}
.clear{clear: both;}
.hidden{ display: none; }

.rightHoverImg{margin: 0 0 0 4px;}
.rightIMG{margin: 0 0 8px 8px;}
.leftIMG{margin: 0 8px 8px 0;}

iframe{ border: none; }
.ytvideo{
    width: 480px;
    height: 300px;
}

.onlyMobile, .mobileOnly, .onlyTablet{
    display: none;
}

.locationalHolder{ background: #CCC; display: table; width: 100%;}
.locationalHolder img{
    width: 30%;
    height: auto;
    float: left;
    margin: 0px 1.5% 1.5% 1.5%;
}
.locationalHolder h1, .locationalHolder h2, .locationalHolder h3{
    padding: 0px;
    margin: 5px 0 5px 5px;
}

/*********************************************************  HEADER  *************************************************/
#header{
    color:#FFF;
    
    background: #00a8eb; 
    background: linear-gradient(top, #74d7fe 0%, #00a8eb 100%);  
    background: -moz-linear-gradient(top, #74d7fe 0%, #00a8eb 100%); 
    background: -webkit-linear-gradient(top, #74d7fe 0%,#00a8eb 100%);
    
    border-top: #054f6d 4px solid;
}
#portfolio{
    display: none;
}
.container{
    /*background-color: #170e09;*/
    padding: 10px 0;
}
.portfolio_container{
    background: #000;
    padding: 0px;
    margin: 0px;
}
.portfolio_inner, .portfolio_inner h1, .portfolio_inner h2, .portfolio_inner h3{
    color: #FFF;
}
#contact{
    text-align:center;
    background:#054f6d;
    color: #FFF;
    
    font-size: 20px;
    
    float: right;
    display:table;
    padding: 6px 8px 6px 8px;
    
    -moz-border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
    -moz-border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;	
}
#contact a, #contact a:visited, #contact a:hover, #contact a:active{
    color: #FFF;
}

.loginButton{
    background: #653b22;
    background: linear-gradient(top, #653b22 0%, #58321e 50%);
    background: -moz-linear-gradient(top, #653b22 0%, #58321e 50%);
    background: -webkit-linear-gradient(top, #653b22 0%,#58321e 50%);
    
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    
    color: #FFF;    
    border: none;
    
    padding: 4px 8px;
    
    cursor: pointer;
}

.loginButton:hover{
    background: #93593b;
    background: linear-gradient(top, #93593b 0%, #784428 50%);
    background: -moz-linear-gradient(top, #93593b 0%, #784428 50%);
    background: -webkit-linear-gradient(top, #93593b 0%,#784428 50%);
}

/*********************************************************  HEADER  *************************************************/

/*********************************************************NAVIGATION*************************************************/
.fullMobileMenu{
    z-index: 99;
    
    position: absolute;
    top: 0px;
    left: 0px;
}
.mobileMenu{
    width: 100%;
    line-height: normal;
    display: table;
    
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0px 1px 0px #000;
    
    background-image: url(images/80_overlay.png);
}
.mobileMenu ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    
    width: 100%;
    margin: 0px auto;
}
.mobileMenu ul li{
    text-align: center;
    width: 100%;
    border-top: #FFF 1px solid;
}
.mobileMenu ul li a{
    color: #FFF;
    display: block;
    
    padding-bottom: 16px;
    padding-top: 16px;
}
/*.mobileMenu ul li a:hover, .mobileMenu ul li a:active, .active a{
    color: #000;
    
    background: #FFF;
    background: linear-gradient(top, #FFF 0%, #DDD 40%);
    background: -moz-linear-gradient(top, #FFF 0%, #DDD 40%);
    background: -webkit-linear-gradient(top, #FFF 0%,#DDD 40%);
    
    text-shadow: 0px 1px 0px #FFF;
}*/
#nav ul, #nav ol, #nav li, #navF ul, #navF ol, #navF li {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
#nav, #navF {
    margin: 0 auto; 
    text-align: center;
    z-index: 2;
}

#nav ul ul, #navF ul ul {
    display: none;
    z-index:3;
}

    #nav ul li:hover > ul, #navF ul li:hover > ul {
	display: block;
	z-index:3;
    }


#nav ul {
    /*background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); */
    
    /*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  */
    list-style: none;
    position: relative;
    display: inline-table;
    vertical-align: middle;
    z-index:4;
}
    #nav ul:after {
	content: "";
	clear: both;
	display: block;
	z-index:5;
    }

    #nav ul li {
	float: left;
	z-index:6;
    }
	#nav ul li:hover, #active, .mobileMenu ul li a:hover, .mobileMenu ul li a:active, .active a{
	    background: #1797ca;
	    background: linear-gradient(top, #58cfff 0%, #1797ca 50%);
	    background: -moz-linear-gradient(top, #58cfff 0%, #1797ca 50%);
	    background: -webkit-linear-gradient(top, #58cfff 0%,#1797ca 50%);
	    z-index:7;	    
	}
	    #nav ul li:hover a {
		color: #FFF; /* IS THE HOVER COLOUR */
	    }
	
	    #nav ul li a {
		display: block; 
		/*padding: 25px 40px;*/
		
		padding-top: 10px;
		padding-bottom: 10px;
		
		width: 160px;
		text-decoration: none;
		
		color: #18ace8; /*NON-HOVER COLOUR*/
	    }
    
    #nav ul ul {
	background: #491751;
	border-radius: 0px;
	padding: 0px;
	position: absolute;
	top: 100%;
    }
	    #nav ul ul li {
		float: none; 
		border-top: 1px solid #842e92;
		/*border-bottom: 1px solid #575f6a;  <- NICE EFFECT WHEN LEFT IN */
		position: relative;
	    }
		    #nav ul ul li a {
			/*padding: 15px 40px;*/
			min-width: 100px;
			max-width: 160px;
			padding: 11px auto;
			color: #fff;
		    }	
			#nav ul ul li a:hover {
			    background: #5a1e64;
			    color: #f3a8ff;
			}
			
    #nav ul ul ul {
	position: absolute; left: 100%; top:0;
    }
#navigation{
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
    
    background-image: url(images/80_overlay.png);
    
    /*background: #91278f; 
    background: linear-gradient(top, #4a2c1a 0%, #23140c 100%);  
    background: -moz-linear-gradient(top, #4a2c1a 0%, #23140c 100%); 
    background: -webkit-linear-gradient(top, #4a2c1a 0%,#23140c 100%);*/
    
}
#active, #active a, #active a:visited, #active a:active, #active a:hover{
    color:#FFF;
}
/*********************************************************NAVIGATION*************************************************/

/*********************************************************   MAIN   *************************************************/
#main{
    background-color: #FFF;
    
    background-image: url(images/city.png);
    background-position: bottom center;
    background-size: 110% auto;
    background-repeat: no-repeat;
}

#main_inner{
    color:#636363;
    padding: 20px 5px 40px 5px;
    width: 950px;
    
    background: #FFF;
    
    box-shadow: 6px 0px 10px -7px #000, -6px 0px 10px -7px #000;
}
.main_ticker{
  position: relative;
  display: table;
}
.portfolio_home{
  width: 960px;
  height: 260px;
}

.inactiveInputLogin{
    color:#999999;
    width: 85px;
}
.activeInputLogin{
    color:#333333;
    width: 85px;
}

/* CONTACT FORM */
.contactTable{
    width: 100%;
    
}
.contactForm{
    width: 475px;
    float: left;
}
.contactFormR{
    width: 475px;
    float: right;
}
.lightText{
    color: #898989;
}
.inactiveInput, .txtArea{
    color:#999999;
    /*width: 300px;*/
    width: 95%;
}
.txtArea{
    color: #000000;
    height: 150px;
}
.activeInput{
    /*width: 300px;*/
    width: 95%;
    color:#000000;
}
.inactiveInput, .activeInput{
    padding: 4px 6px;
    /*width: 288px;*/
    width: 95%;
}

.code{
    float:left; padding: 9px 4px; /*width: 185px;*/ margin: 0 0 0 10px; width: 55%;
}
.codeImg{
    vertical-align:middle; float:left;
}
.map{
    width: 100%;
    height: 500px;
    border: 0px;
}

#formComplete, #formError{
    padding: 2% 5%;
    width:90%;
    
    margin: 15px auto 15px auto;
    
    background-color: #0b9644;
    
    font-size:14px;
    font-weight:bold;
    
    color:#FFFFFF;
    text-align:center;
}
#formError{
    background-color: #960b0b;
}
/* CONTACT FORM */

.border-top{
    border-top: 8px solid;
}
.colorH{
    color: #FFF;
}
.h1Img{
    background: #FFF;
    margin-right: 5px;
    padding-right: 5px;
}
.about{
    border-top-color: #794522;
    background: #794522;
}
.web-design{
    border-top-color: #6eb80e;
    background: #6eb80e;
}
.web-design-bespoke{
    border-top-color: #01a9e9;
    background: #01a9e9;
}
.web-design-premould{
    border-top-color: #dd9719;
    background: #dd9719;
}
.web-design-ecommerce{
    border-top-color: #943ab4;
    background: #943ab4;
}
.web-design-mobile{
    border-top-color: #f36604;
    background: #f36604;
}
.web-design-tablet{
    border-top-color: #c92474;
    background: #c92474;
}

.seo{
    border-top-color: #3262bd;
    background: #3262bd;
}
.seo-onsite{
    border-top-color: #601981;
    background: #601981;
}
.seo-offsite{
    border-top-color: #3ac02e;
    background: #3ac02e;
}
.video-marketing{
    border-top-color: #c91e23;
    background: #c91e23;
}
.print-design{
    border-top-color: #12a196;
    background: #12a196;
}
.social-media{
    border-top-color: #0b9644;
    background: #0b9644;
}
/*********************************************************   MAIN   *************************************************/

/***********************************************************FOOTER***************************************************/

body, #footer{
    background-color:#054f6d;
}
#footer{
    /*border-top: 1px #CCC solid;*/
}
.footerContent{
    float:left;
    display:table;
    padding: 10px 10px 10px 0;
    height:100%;
    
    color: #FFF;
}
#footer{font-size:12px; }
#footer, #footer a{ color:#217cbe; }
#footer a:hover{ text-decoration: underline; }

.designBy{
    vertical-align:middle;
}
.footer_vr{
    float:left;
    margin-left:4px;
    margin-right:14px;
    height:100px;
}

.rightFooter{
    float:right;
    border-right:none;
}
.socialHolder{
    float: left;
    display: table;
    
    margin: 12px 0 0 0;
}
.socialIcon{
    float: left;
    margin: 5px;
}
#fb_twitter{
   
}
/***********************************************************FOOTER***************************************************/



/*********************************************************  INDEX  *************************************************/

.iconHolder{
    width: 100%; display: table; margin: 10px 0 0 0; padding: 10px 0; background-image: url(images/80_overlay.png);
    position: relative;
}
.iconInner{
    width: 220px; margin: 0 10px; display: table; float:left;
    z-index: 5;
}
.iconImage{
    vertical-align: middle;
    z-index: 4;
}
.iconText{
    vertical-align: middle; margin-left: 8px; text-transform: uppercase;
    z-index: 3;
}

.dubblinStopper{
    width: 240px; height: 85px; display: table; z-index:6; position: absolute; top:0; cursor: pointer;
}
.ds-web{
    left:0px;
}
.ds-seo{
    left: 240px;
}
.ds-eco{
    left: 480px;
}
.ds-vim{
    left: 720px;
}

.hoverContent{
    width: 960px; height: 270px; max-height: 270px; display: table; position: absolute; top: 0px; left: 0px; z-index: 2; display:none;
}
.innerHoverContent{
    width: 940px; height:240px; display: table; background: #000; padding: 10px;
}

.hoverIdentifier{
    width: 240px; height: 10px; display: table; 
}

.hi-web{
    margin: 0;
    background: #6ab10e;
}
.hi-seo{
    margin: 0 0 0 240px;
    background: #3161bb;
}
.hi-eco{
    margin: 0 0 0 480px;
    background: #943ab3;
}
.hi-vim{
    margin: 0 0 0 720px;
    background: #c81e23;
}

.webH, .seoH, .ecoH,  .vimH{
    margin: 0px;
    padding: 0px;
}
.webH{
    color: #6ab10e;
}
.seoH{
    color: #3161bb;
}
.ecoH{
    color: #943ab3;
}
.vimH{
    color: #c81e23;
}

.footer_container{
    background-image: none;
    background: #3a2215;
    color: #FFF;
}
.footer_container h1, .footer_container h2, .footer_container h3, .footer_container h4, .footer_container h5{
    color: #FFF;
}

.portfolioH1{
    text-align: center;
}
.portfolioGrid{
    width: 285px; display: table; margin: 10px; float: left;
    cursor: pointer;
}
.hoverText { 
    display: none;
    position: absolute;
    z-index: 2;
}
.hoverText p{
    display: table;
    width: 200px;
    height: 100%;
    
    margin: 80px 0 0 42px;
    padding: 4px 0;
    text-align: center;
    
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    
    font-weight: bold;
    
    background: #000;
    color: #FFF;
}
/*********************************************************  INDEX  *************************************************/


/***************************************************  QUICK QUOTE FORM  *******************************************/
#qqForm{
    float:right; display: table; width:300px; margin: 0 0 20px 20px; background: #333; color: #FFF; text-shadow: 1px 1px 0px #000; min-height: 310px;
}
#qqFormInner, #qqSuccessInner{
    width: 260px; display: table; margin: 5px 20px 5px 20px;
}
#qqSuccessInner{
    background: #04ac1e;
    
    background: #5a970c;
    background: linear-gradient(top, #8ada21 0%, #4c8109 100%);
    background: -moz-linear-gradient(top, #8ada21 0%, #4c8109 100%);
    background: -webkit-linear-gradient(top, #8ada21 0%,#4c8109 100%);
    
    width: 240px;
    padding: 10px;
    display: none;
}
.qqHead{
    font-weight: bold; font-size: 16px;
}
.qqText{
    font-weight:normal;
}
.qqSubHead{
    text-transform: uppercase; font-size: 14px; font-weight:bold;
}

.qqName_Inactive, .qqName_Active{
    width: 250px; padding: 3px 5px; color: #666;
}
.qqName_Active{
    color: #000;
}
.qq_Inactive, .qq_Active{
    width: 150px; padding: 3px 5px; color: #666;
}
.qq_Active{
    color: #000;
}
.qq_Submit{
    float:right;
    width:90px;
    height: 56px;
    margin-top: 2px;
    background: #f87c03;
    border: none;
    
    color: #FFF;
    text-shadow: 1px 1px 0px #af5600;
    
    font-size: 14px;
    
    cursor: pointer;
}
.qq_Submit:hover{
    background: #ce6600;
}
.cursorPointer{cursor: pointer;}
/***************************************************  QUICK QUOTE FORM  *******************************************/


/*********************************************************SLIDE SHOW*************************************************/
/******************************************************ORIGINAL SRIPT************************************************/
/*
Slidebox jQuery banner rotator and image slideshow plugin styling
*/

/* basic/minimum styling */
.slidebox{position:relative; overflow:hidden;}
.slidebox,.slidebox .slideboxSlide{width:600px;}
.slidebox,.slidebox .slideboxSlides,.slidebox .slideboxSlide{/*height:300px;*/}
.slidebox ul{position:relative; overflow:hidden; margin:0px; padding:0px; border:0; list-style-type:none;}
.slidebox ul li{float:left;}
.slidebox ul li .slideboxCaption{padding:0px; font-family:Verdana,Geneva,sans-serif; font-size:13px;}
.slideboxContainer{position:relative; margin: auto;}
.slideboxContainer .slideboxNext,.slideboxContainer .slideboxPrevious{position:absolute; display:block; width:21px; height:21px; top:50%; margin-top:-11px;}
.slideboxContainer .slideboxNext{right:0; margin-right:10px; background:url(images/slidebox_next.png) no-repeat;}
.slideboxContainer .slideboxNext:hover{background:url(images/slidebox_next_hover.png) no-repeat;}
.slideboxContainer .slideboxPrevious{margin-left:10px; background:url(images/slidebox_previous.png) no-repeat;}
.slideboxContainer .slideboxPrevious:hover{background:url(images/slidebox_previous_hover.png) no-repeat;}
.slideboxContainer .slideboxThumbs{position:absolute; bottom:10px; right:10px; text-align:center;}
.slideboxContainer .slideboxThumbs .slideboxThumb{display:inline-block; margin:0 3px; background:#666; min-width:10px; min-height:10px; text-decoration:none; font-size:12px; color:#fff;}
.slideboxContainer .slideboxThumbs .slideboxThumb:hover,.slideboxContainer .slideboxThumbs .selectedSlideboxThumb{background:#fff; color:#666;}

/* classic/additional styling */
#slidebox_1{border:5px solid #fff; background:#eee; box-shadow:0 0 40px rgba(0,0,0,0.3); border-radius:6px;}
#slidebox_1 ul li .slideboxCaption{display:block; position:relative; padding:0; width:600px; height:300px; color:#666; text-decoration:none;}
#slidebox_1 ul li .slideboxCaption span{display:block; position:absolute; padding:5px 10px; background:#fff; border-radius:4px;}
#slidebox_1 ul .slideboxSlide_1 .slideboxCaption span,#slidebox_1 ul .slideboxSlide_5 .slideboxCaption span{left:20px; bottom:20px;}
#slidebox_1 ul .slideboxSlide_2 .slideboxCaption span{left:20px; top:20px;}
#slidebox_1 ul .slideboxSlide_3 .slideboxCaption span{right:20px; top:20px;}
#slidebox_1 ul .slideboxSlide_4 .slideboxCaption span{right:20px; bottom:20px;}
.slideboxContainer #slidebox_1+.slideboxThumbs{position:relative; margin-top:30px;}
.slideboxContainer #slidebox_1+.slideboxThumbs .slideboxThumb{border-radius:10px; background:#ccc; box-shadow:inset 0 0 5px rgba(0,0,0,0.3);}
.slideboxContainer #slidebox_1+.slideboxThumbs .slideboxThumb:hover,.slideboxContainer #slidebox_1+.slideboxThumbs .selectedSlideboxThumb{background:#fff; box-shadow:inset 0 0 4px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.2);}
.slideboxContainer #slidebox_1+.slideboxThumbs .slideboxThumb:active{background:#eee;}
.slideboxContainer #slidebox_1~.slideboxNext,.slideboxContainer #slidebox_1~.slideboxPrevious{width:30px; height:30px; border-radius:21px; margin:-35px 0 0 0; background-color:#ccc; background-image:url(images/slidebox_icons.png); background-repeat:no-repeat; background-position:0px 0px; box-shadow:inset 0 0 10px rgba(0,0,0,0.2);}
.slideboxContainer #slidebox_1~.slideboxNext{background-position:-30px 0px;}
.slideboxContainer #slidebox_1~.slideboxPrevious:hover,.slideboxContainer #slidebox_1~.slideboxNext:hover{background-color:#fff; background-position:0px -30px; box-shadow:inset 0 0 10px rgba(0,0,0,0.2),0 0 3px rgba(0,0,0,0.2);}
.slideboxContainer #slidebox_1~.slideboxNext:hover{background-position:-30px -30px;}
.slideboxContainer #slidebox_1~.slideboxPrevious:active,.slideboxContainer #slidebox_1~.slideboxNext:active{background-color:#eee;}
/******************************************************ORIGINAL SRIPT************************************************/


.mySlide, .mySlide .slideboxSlide{
    width:960px;
    height:260px;
    margin:0px;
}
.footerSlide{
    background: #054f6d;
    color: #FFF;
    /*float: left;
    margin: 20px 0px 20px 6px;*/
}

/*THUMB RE_WRITE FOR NEW STYLE*//* THUMB POSITION */
.slideboxContainer .slideboxThumbs{position:absolute; bottom:5px; right:34px; text-align:center; display: none;} 

/*.slideboxContainer .slideboxThumbs .slideboxThumb{ width: 16px; height: 16px; background-color: none; background: none; }
.slideboxContainer .slideboxThumbs .slideboxThumb{background: url(images/dots.png) -16px 0; background-color: none;}
.slideboxContainer .slideboxThumbs .slideboxThumb:hover, .slideboxContainer .slideboxThumbs .selectedSlideboxThumb{ background: none; background: url(images/dots.png) 0 0; background-color: none;}*/

.main_ticker .slideboxContainer .slideboxNext, .main_ticker .slideboxContainer .slideboxNext{position:absolute; display:block; width:25px; height:250px; top:16px;}
.main_ticker .slideboxContainer .slideboxNext, .main_ticker .slideboxContainer .slideboxPrevious{position:absolute; display:block; width:25px; height:250px; top:16px;}

.main_ticker .slideboxContainer .slideboxNext{right:0; margin-right:5px; background:url(images/ticker_buttons.png) -25px 0;}
.main_ticker .slideboxContainer .slideboxNext:hover{background:url(images/ticker_buttons.png) -25px -250px;}

.main_ticker .slideboxContainer .slideboxPrevious{left:0; margin-left:5px; background:url(images/ticker_buttons.png) 0 0;}
.main_ticker .slideboxContainer .slideboxPrevious:hover{background:url(images/ticker_buttons.png) 0 -250px;}

/*********************************************************SLIDE SHOW*************************************************/


/*********************************************************COOKIES*************************************************/

#cookiewarning{
    position: fixed;
    bottom:0;
    width:100%;
    z-index:99999;
    border-top:1px #000 solid;
    background: #000;
}
.cookiewarning_inner{
    text-align:center;
    margin:0px;
    padding:10px;
    width:auto;
    color:#fff;
    font-size:90%;
}
/*********************************************************COOKIES*************************************************/

.onlyMobile, .mobileOnly, .loadHidden{
  display: none;
}


/*********************************************************GALLERY*************************************************/

.gallery {
    text-align: center;
}
.gallery_inner {
    margin: 0 auto;
}
.gallery img {
    margin-right: 1em;
}
.gallery_inner:last-child img {
    margin-right: 0;
}