@charset "utf-8";

/* CSS Document https://416studios.co.uk/design

By:
Michael Dyer http://www.dfunkydog.com
416studios */



/* Reset styles and set basic typography
based on
http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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;

}
body {
	background-color:#0c0c0c;
	line-height: 1;
	text-align:center; /* center page */
	font-size: 62.5%; /* set 1 em to 10px */
	color:#a0a0a0;
}
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;
}


/* enf of reset, begin typography */

body {
	font-family:Tahoma, helvetica,Arial,sans-serif;
	color:#757a84;
	}


h1 {
	font-size:3.6em;
	font-weight:normal;
	letter-spacing:-0.1em;
	color:#f0f0f0;
	line-height:1.1em;
	text-transform:uppercase;
	}

h2 {
	font-size:2.4em;
	font-family:Georgia, Times, "Times New Roman", serif;
	color:#63ABC5;
	}



h3 {
	font-size:1.2em;
	font-weight:bold;
	color:#243e48;
	text-transform:uppercase;
	letter-spacing:0.15em;
	}

h4 {
	font-size:1.4em;
	font-family: Georgia, Times, "Times New Roman", serif;
	color:#63ABC5;
	}



p {
	font-size:1.3em;
	line-height:1.7;

	}

strong, .strong {font-weight: bold;}

#content, #footer{text-shadow: 1px 1px #fefefe;}

a {text-decoration:none;}

a:link  {color:#63abc5	}

a:visited {color:#b76a0e;}

a:hover {
	color:#63abc5;
	background-color:#e1e1e1;
	}
        a.no-bg:hover {background-color:transparent;}

#header , #header a:link, h3.services , #footer h3, .post h3, ul#subs li a {
	font-family:Georgia, Times, "Times New Roman", serif;
	color:#243e48;
	}
		ul#subs {
		color:#eaeaea;
		font-family:"lucida grande",  arial, Verdana, sans-serif ;
		font-size:1.4em;
		line-height:1.7;
		}

		ul#subs li h3 a{
		text-transform:uppercase;
		letter-spacing:0em;
		font-size:.833em;
		}

		ul#subs li h3 a:hover {
			color:#eaeaea;
			background:none;
			}

		#navigation ul li {
			font-size:1.2em;
			font-weight:bold;
			text-transform:uppercase;
			}

			#navigation ul li a {
				color:#243e48;
				}

			#navigation ul li a:hover, #navigation li.currentpage a {
				color:#e4e4e4;
				background:none;
				text-shadow:0px 1px 1px #487c8f;
				}



		#tagline p {
			text-transform:uppercase;
			font-size:1.8em;
			font-weight:bold;
			line-height:1.6;
			color:#243e48;
			text-shadow: 1px 1px #8fc0cc;

			}

		#subsidiary {
			font-size:3.7em;
			text-align:right;
			font-weight:bold;
			text-shadow: 1px 1px #9fc0cc;
			font-family:rockwell, Georgia, Times, "Times New Roman", serif;
			}


#sidebar {
	color:#243e48;
	}
	#sidebar a:link, #sidebar a:visited {
	color:#b4d3dd
	}

#sidebar a.download:hover {background-color:#63abc5;}

#sidebar h3 {
	font-size:1.8em;
	font-family:Georgia, Times, "Times New Roman", serif;
	margin:0 10px;
	text-transform:none;
	letter-spacing:0;
	}

a.download {
background: url(https://416studios.co.uk/design/images/download-bg.jpg) no-repeat;
height:97px;
display:block;
width:100%;
text-indent:-9999px;
}



#footer  {
	text-align:left;
	}
	#footer li {
		font-size:1.3em;
		}

	.copyright {
		font-size:1em;}

.entry li{
	font-size:1.3em;
	}

/* end of typography begin Layout*/



body{ background:#eaeaea url('https://416studios.co.uk/design/images/body_bg.jpg') repeat-x ; }


h1 a{
	background: transparent url('https://416studios.co.uk/design/images/logo.jpg') no-repeat ;
	display:block;
	height:45px;
	width:231px;
	text-indent:-9000px;
	float:left;

	}
	h1 a:hover {
		background-image:url('https://416studios.co.uk/design/images/logo.jpg');
		}


#outer_wrap {
	background: transparent url('https://416studios.co.uk/design/images/inner_wrap.jpg') no-repeat ;
	}

#wrap {
	text-align:center;
	width:960px;
	margin:0 auto;
	}


#header {
		text-align:left;
		background:transparent url('https://416studios.co.uk/design/images/header.jpg') no-repeat ;
		padding-left:10px;
		padding-top:23px;
		width:960px;
		height:244px;
		position:relative;
		}


		ul#subs {
			position:absolute;
			top:67px;
			left:5px;
			width:238px;
			height:222px;
			background: transparent url('https://416studios.co.uk/design/images/portal-ul.png') no-repeat;
			padding-top:20px;
			padding-left:10px;
                        z-index:10;
			}

			ul#subs li {
				padding:0 20px 20px 20px;
				}
			ul#subs h3 {
			border-bottom: 3px solid #253441;
			margin-right:25px;
			}



		#navigation{
			float:right;
			padding-top:11px;
			text-align:right;
			margin-right:20px;
			}

			#navigation ul li {
				display:inline;
				margin-left:57px;
				padding-bottom:18px;

				}

			#navigation ul li a {
				display:inline-block;
				height:32px;
				border-bottom:3px solid #243e48 ;
				}
				#navigation ul li a:hover {
				border-bottom:3px solid #e4e4e4 ;
				}

			#navigation li.currentpage a {
				border-bottom:3px solid #e4e4e4 ;
				}

		#tagline{
			float:left;
			width:420px;
			padding-top:30px;
			}

		#subsidiary {
			float:right;
			width:320px;
			margin-right:20px;
			padding-top:29px;
			}

#content{
	float:left;
	width:630px;
	padding-left:10px;
	text-align:left;
	margin-bottom:20px;
        position:relative;

	}
#content_wide {
	width:950px;
	}

	.post {
	background:transparent url('https://416studios.co.uk/design/images/post_side.png') repeat-y right;
	}

	.post .entry {width:540px;}
	.post  p {

		margin:15px 0;
	}

	.post-meta {
		background: transparent url('https://416studios.co.uk/design/images/post_bottom.jpg') no-repeat right;
		padding-bottom:20px;
		}

	.post-title {
		background: transparent url('https://416studios.co.uk/design/images/post_top.jpg') no-repeat right;
		margin-top:20px;
		}

	.post h3{
		border-bottom:3px solid #243e48;
		margin-top:22px;
		padding-bottom:6px;
		}
		h3.about {
			border:none;
			padding-bottom:0px;
			}

	.entry ul{
		margin:15px 0;
		}
		.entry li,  #footer li {
		border-bottom:1px solid #243e48;
		line-height:1.4;
		padding:8px 0;
		}

	#content .column_1, #footer .column_1 {
		width:220px;
		float:left;
		margin-right:90px;
		}

	.column_2 {
		float:left;
		width:220px;
		}

	.column_3 {
		float:left;
		margin-left:120px;
		width:300px;
		}

#sidebar {
	float:left;
	background-color:#63abc5;
	width:280px;
	margin-left:10px;
	text-align:left;
	padding: 30px 10px 10px;
	margin-bottom:20px;
	-moz-border-radius-bottomleft: 9px;
	-moz-border-radius-bottomright: 9px;
	-webkit-border-bottom-left-radius: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-khtml-border-bottom-left-radius: 9px; /* for old Konqueror browsers */
        -khtml-border-bottom-right-radius: 9px; /* for old Konqueror browsers */
	border-bottom-left-radius: 9px;
	border-bottom-right-radius: 9px;
        -moz-box-shadow: 0px 1px 2px #a1a1a1;
        -webkit-box-shadow: 0px 1px 2px #a1a1a1;
        box-shadow: 0px 1px 2px #a1a1a1;
	}
	#sidebar p {
		margin:15px 10px;
		}

#footer {
	padding-top:30px;
	padding-bottom:10px;
	padding-left:10px;
	clear:both;
	}

#footer h3 {
		border-bottom:3px solid #243e48;
		padding-bottom:6px;
		}

#footer ul {
	padding-bottom:30px;
	}

.copyright {
	font-size:1em;
	}

/* rounded corners */
.success, .error,  #quick_form textarea, #quick_form input, #tabContainer{
-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* future proofing */
	-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.clearfloat {clear:both;
	position:relative;
	}

.imgleft {
float:left;
margin:0 10px 0 0;
}

/* form */
#quick_form {
	padding:5px 15px 0px 10px;
	margin-top:24px;
	}

#quick_form legend {
	color:#294752;
	font-weight:bold;
	font-size:1.8em;
	padding-bottom:20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	}

#quick_form label {
	font-size:1.3em;
	color:##243E48;
	}
	#quick_form input, #quick_form textarea,#wide_form textarea, #wide_form input {
	font-family:Tahoma, helvetica,Arial,sans-serif;
	font-size:1.3em;
	color:#305360;
	padding:6px ;
	}

#quick_form input{
	width:238px;
	background-color:#99c5d5;
	border:none;
	margin:5px 0 12px 0;
	font-weight:normal;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 20%, from(#82aab9), to(#99C5D5));
	background-image:-moz-linear-gradient(center bottom, #99c5d5 80%, #82aab9 100%);
	}

 #quick_form textarea{
	width:238px;
	background-color:#99c5d5;
	border:none;
	margin:5px 0 0 0;
	font-family:Tahoma, helvetica,Arial,sans-serif;
	overflow:auto;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 7%, from(#82aab9), to(#99C5D5));
	background-image:-moz-linear-gradient(center bottom, #99c5d5 93%, #82aab9 100%);
	overflow:auto;
	}

	#wide_form textarea {
	width:460px;
	}
	#quick_form textarea:focus, #quick_form input:focus {
	border: 1px solid #80ddff;
		}

#quick_form input.submit-button {
	width:125px;
	height:22px;
	padding:0 0 5px 0;
	font-size:1.4em;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#99C5D5), to(#8BB3C1));
	background-image:-moz-linear-gradient(0% 100% 90deg,#88B3C1, #99c5d5);
	border: 1px solid #5593a9;
	}

#quick_form input.submit-button:hover {
	cursor:pointer;
	background-color:#b4d3dd;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8BB3C1), to(#99c5d5));
	background-image:-moz-linear-gradient(0% 100% 90deg,#99c5d5, #8bb3c1);
	}

#quick_form input.submit-button:focus {
	border:none;
	/* background:transparent url(https://416studios.co.uk/design/images/qsubmitclick.jpg) no-repeat; */
	}

	#response {
	display:none;
	}

.error {
	color:#b33e3e;
	border:2px solid #b33e3e;
	padding:5px;
	margin:0px;
	}
	#quick_form  textarea.field_error, #quick_form input.field_error  {
	border: 1px solid #b33e3e;
		}


.success {
	color:#025778;
	border:2px solid #1a6380;
	padding:5px;

	}

.compulsory {
color:#b33e3e;
	}
/* questionnaire */

        #quick_form form#ss-form label{
        display:block;
        }

        form#ss-form textarea {width:80%;margin-bottom:24px}
        .ss-q-title {font-weight:bold;}
        #ss-form input.ss-q-checkbox{width:24px;}

/* slider */


#cycle {
   width: 540px; /* important to be same as image width */
   height: 330px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   background:transparent url('https://416studios.co.uk/design/images/post_sisde.png') repeat-y right;

}


.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */

}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 0px;
   width: 540px;
   background-color: #000;
   filter: alpha(opacity=60); /* here you can set the opacity of box with text */
   -moz-opacity: 0.6; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.6; /* here you can set the opacity of box with text */
   opacity: 0.6; /* here you can set the opacity of box with text */
   color: #fff;
   font-weight:bold;
   text-transform:uppercase;
   font-size:1.8em;
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
#prev {
	position:absolute;
	top:-210px;
	font-size:2em;
	left:-38px;
	width:38px;
	height:76px;
	background:transparent url(https://416studios.co.uk/design/images/slide/prev.gif) no-repeat;
	text-indent:-5000px;
	}

	#next {
		position:absolute;
		top:-210px;
		right:52px;
		font-size:2em;
		width:38px;
		height:76px;
		background:transparent url(https://416studios.co.uk/design/images/slide/next.gif) no-repeat;
		text-indent:-5000px;
		}


.hidden {
display:none;
}

/* portfolio layout and typgraphy */

#portfolio #header {
	background-image:url('https://416studios.co.uk/design/images/portfolio_head.jpg');
	}

#portfolio dl {width:950px;}

#portfolio .post dt {
        float:left;
	margin-bottom:30px;
	background: transparent url('https://416studios.co.uk/design/images/portfolio_side.jpg') repeat-y right;
	width:650px;
	height:330px;
	}

#portfolio #sidebar {
	background:transparent;
	}

#portfolio .post dd {
        width:280px;
        margin-left:650px;
	height:330px;
	margin-bottom:30px;
	background: #63abc5 url('https://416studios.co.uk/design/images/folio-ul.jpg') no-repeat right;
	}

#portfolio dd h3 {
	padding-top:30px;
	padding-bottom:30px;
	margin:0 30px 0 0;
	border-bottom: 1px solid #437385  ;
	text-transform:uppercase;
	font-size:2.2em;
	line-height:1.6;
        letter-spacing:0;
	}

#portfolio dd h3, #portfolio dd h3 a {
	color:#243e48;
	text-shadow:1px 1px #9FC0CC;
	text-align:center;
	font-weight:normal;
	background-color:#63ABC5 ;
	}

 #portfolio dd h3 a:hover {
 	background-color:#63ABC5 ;
	color:#417082;
 	}

 #portfolio dd li{
        color:#243E48;
	font-size:1.6em;
	line-height:1.7;
	border-bottom: 1px solid #437385  ;
	margin-right:30px;
	font-family:Georgia, Times, "Times New Roman", serif;
	text-transform:capitalize;
	font-style:oblique;
        text-shadow:1px 1px #9FC0CC;
	}

.tabsNav {
	float:left;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-transform:uppercase;
	line-height:2.4em;
	margin-top:1.85em;
	}


.tabsNav li {
	width:169px;
        border:none;
	}
	.tabsNav li.active{
	background:#e5e5e5;
	border:solid 1px #ddd;
	border-right:none;
	-moz-border-radius-bottomleft: 9px;
	-moz-border-radius-topleft: 9px;
	-webkit-border-bottom-left-radius: 9px;
	-webkit-border-top-left-radius: 9px;
	-khtml-border-bottom-left-radius: 9px;
	-khtml-border-top-left-radius: 9px; /* for old Konqueror browsers */
	}
	.tabsNav li a {
		padding-left:12px;
		color:#63abc5;
		text-shadow:1px 1px 1px #fff;
		}

#tabContainer {
	margin-left:168px;
	background:#e5e5e5;
	border:solid 1px #ddd;
	margin-top:15px;
	}

#tabContainer h4 {
    margin:20px 13px;
    margin-top:.5em;
    font-style: italic;
    font-size: 1.6em;
    line-height: 1.5;
}

#tabContainer p {margin:7px 13px 20px;}

#tabContainer li {
    margin:0 13px;
    border:none;
    line-height:2;
    padding:0;
    margin-left:30px;
    list-style-type:disc;
}

/* styles for landing page from google */



body#landing  {background:#eaeaea url(https://416studios.co.uk/design/images/landing-html.jpg);}

body#landing h1 a, body#landing h1 a:hover {background:transparent url(https://416studios.co.uk/design/images/landing-logo.png);}


body#landing #outer_wrap {background: url('https://416studios.co.uk/design/images/landing.jpg') repeat-x;}

#landing #header {height:100%;background-image:none;}

#landing #header img {margin-top:30px;}

#landing .post {background:url(images);}

#landing #content {width:100%;}

#landing #packages {background: #d2dbde;border: 1px solid #b4c1c7;}

#packages a:hover {background:none;}

#packages>ul {float:left; margin-right:15px;width:215px; background:url(https://416studios.co.uk/design/images/pricelist-top.jpg) no-repeat top;}
#packages ul.last {margin-right:0;float:right;}

#packages ul li {line-height:2.5;border-bottom:1px solid #b0b9bc;border-top:1px solid #e2eff3;font-size:1.3em;}

#packages li a {margin:0 0 0 5px;
      color:#1a2b32;
      width:95%;
      height:100%;
      display:block;
      text-shadow:1px 1px 1px #f0fcff;
}


#packages ul h2+li {border-top:none;}

#packages ul h2 {height:85px;color:#525657;text-shadow:1px 1px 1px #f0fcff;}

    #packages ul h2 a {margin-left:5px;text-align:center; width:90%;display:block;
    color:#525657;text-shadow:1px 1px 1px #f0fcff;padding-top:10px;
    font-size: 0.91em;
    line-height: 1.4;}


#packages ul li:last-child, #packages li.no-border-bottom {border-bottom:none;}
/* populsr package */


#packages ul#popular {background: url(https://416studios.co.uk/design/images/main-package.jpg) repeat-y;width:244px;padding:0 10px;position:relative;}

ul#popular h2, ul#popular a, ul#popular h2 a  {color:#fbfbfb;text-shadow:1px 1px 1px #1b2f36;}

ul#popular li {border-bottom:1px solid #38525a;border-top:1px solid #79d0f0;font-size:1.4em;line-height: 2.333;}

ul#popular h2 {background:url(https://416studios.co.uk/design/images/main-package-top.jpg) top no-repeat;width:256px;
        margin-top: -10px;
        margin-left: -12px;
        padding-top: 10px;
        padding-left:15px;
        }

        ul#popular h2 a {margin-left:5px;text-align:center; width:90%;display:block;}


ul#popular h2.xtra  {background: url(https://416studios.co.uk/design/images/main-package-btm.jpg) bottom no-repeat;
        margin-bottom: -13px;
        height:35px;}

/* gallery */
#gallery {width:960px;}


#gallery {
        height:470px;
        margin-top:30px;
        }

#gallery .slides_container {height:400px;overflow:hidden;position:relative;}

#gallery .slides_container li {position:absolute;
                 width:960px;
height:400px;}

.slide a {
background:transparent;}

/*
	Pagination width based on number of li elements × 14px set in sandbox.js;
*/

.pagination {
	margin:26px auto 0;
	}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(https://416studios.co.uk/design/img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

.pagination a:hover{background-color:transparent;
	background-position:0 -12px;
}


.caption {
    position:absolute;
    right:0;
    top:-600px;
    width:320px;
    background-color:rgba(0,0,0,0.5);
    padding:10px 20px 10px 10px;
    /*exclude text shadows*/
    text-shadow:none;
    box-shadow:3px 3px 5px rgba(0,0,0,0.7);
    -moz-box-shadow:3px 3px 5px rgba(0,0,0,0.7);
    -webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.7);
    }

    #gallery h2{
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        margin-bottom:20px;}

    #gallery h3{
        color:#f2f2f2;
        text-transform: capitalize;
        line-height:1.4;
        font-size:1.4em;
        font-weight: normal;
        letter-spacing: normal;
    }

#landing #footer {border:none;}


/* extras */
#promotion {position:absolute;
    z-index:100;
background:transparent}
#promotion a:hover {background: transparent;}

/*  buttons  */
.btn_special {
    font-size:1.8em;;
    }

.btn_special a {
    background: #d08484 url(https://416studios.co.uk/design/images/btn_special.jpg) repeat-x;
    padding:16px;
    box-shadow:1px 1px 1px rgba(0,0,0,0.2);
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
    color:#ffe2e2
    }

    #eu {
	background-color:#243E48;
	box-shadow:3px 2px 5px #000;
   text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	display:none;
	position:absolute;
	padding:0 2em 1em 2em;
	color:#cfcfcf;
}

.button {
	width             : 100px;
	border            : 1px solid #000;
	border-radius     : 3px;
	text-shadow       : 0 1px 1px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.4);
	-moz-box-shadow   : 0 1px 1px rgba(255,255,255,0.4);
	box-shadow        : 0 1px 1px rgba(255,255,255,0.4);
	font              : bold 11px arial;
	padding           : 6px 10px;
	white-space       : nowrap;
	text-align        :center;
	vertical-align    : middle;
	color             : #cfcfcf;
	background        : transparent;
	cursor            : pointer;
	margin            : 10px auto;
}
.button:hover, .button:focus {
   background: -webkit-linear-gradient(top, #75BCD0, #4995AB);
	background: -moz-linear-gradient(top, #75BCD0, #4995AB);
	background: -o-linear-gradient(top, #75BCD0, #4995AB);
	background: -ms-linear-gradient(top, #75BCD0, #4995AB);
	background:linear-gradient(top, #75BCD0, #4995AB);
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,1), inset 0 0 3px rgba(255,255,255,0.6);
	box-shadow:0 1px 2px rgba(0,0,0,1), inset 0 0 3px rgba(255,255,255,0.6);
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6);
   background:    -moz-linear-gradient(top, #E6E6E6);
   background:     -ms-linear-gradient(top, #E6E6E6);
   background:      -o-linear-gradient(top, #E6E6E6);
}

.animated {

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-ms-transition    : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
}