@charset "utf-8";
/* CSS Document */


/********************
***   Universal   ***
********************/

body,html {margin:0;padding:0;text-align:center;}

body {
	background-color:#f6f6f6;
	font-family:Corbel, Helvetica, Arial, sans-serif;
	font-size:66.5%;
	color:#FFF;
	}
	
a {outline:none;}

img{border:none;}

b {font-weight: 100}


/********************
***   Container   ***
********************/
	
#container {
	background-color:#FFF;
	width:100%;
	clear:both;
	float:left;
	}


/********************
***    Wrapper    ***
********************/

#wrapper {
	width:900px;
	margin:0 auto 0 auto;
	background-color:#FFF;
	}
	
	
/********************
***     Header    ***
********************/
	
#header {
	width:900px;
	height:186px;
	float:left;
	clear:both;
	margin:40px 0 0 0;
	background-image:url(images/header-bg.png);
	background-repeat:no-repeat;
	background-position:left top;
	}
	
#header img.mad-dog-productions-logo {
	float:left;
	margin:28px 0 0 41px;
	}
	
#header p {
	text-align:left;
	font-size:1.6em;
	float:left;
	margin:55px 0 0 120px;
	text-shadow: 0.08em 0.08em 0 #e56100;
	}
	
#header p img {
	margin-top:4px;
	}
	
	
/********************
***    Content    ***
********************/
	
#content {
	width:900px;
	float:left;
	background-color:#ff6c00;
	clear:both;
	padding:20px 0 20px 0;
	}
	
#content-wrapper {
	width:860px;
	margin:0 auto 0 auto;
	}
	
#content h1 {
	text-align:center;
	font-size:1.9em;
	margin:0 auto 0 auto;
	padding:0 0 1.5em 0;
	font-weight:normal;
	text-shadow: 0.1em 0.1em 0 #e56100;
	}
	
#content p {
	font-size:1.9em;
	margin:0 auto 0 auto;
	padding:0 0 1.5em 0;
	font-weight:normal;
	text-shadow: 0.1em 0.1em 0 #e56100;
	}
	
#content span {font-weight:bold;font-size:1.2em;}

#content ul {
	font-size:1.9em;
	text-align:left;
	}
	
#content ul.left {
	float:left;
	width:40%;
	}
	
#content ul.right {
	float:right;
	width:40%;
	}
	
#content-wrapper img.showreel {
	margin-bottom: 20px;
}
	
	
/********************
***     Menu      ***
********************/
	
#menu-wrapper {
	background-image:url(images/menu-wrapper-bg.png);
	background-repeat:repeat-x;
	background-position:top;
	width:100%;
	height:130px;
	clear:both;
	}
	
ul#menu {
	width:900px;
	height:130px;
	margin:0 auto 0 auto;
	padding:0;
	background-image:url(images/menu-bg.png);
	background-repeat:no-repeat;
	background-position:left top;
	clear:both;
	list-style-type:none;
	}
	
ul#menu li {
	display:inline;
	float:left;
	margin:25px 35px 0 0;
	height:16px;
	background-position:top;
	background-repeat:no-repeat;
	}
	
ul#menu li:hover {
	background-position:bottom;
	}
	
ul#menu li a {
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	height:16px;
	}
	
ul#menu li.home {
	margin-left:120px;
	width:60px;
	background-image:url(images/clickables/home.png);
	}
	
ul#menu li.services {
	width:98px;
	background-image:url(images/clickables/services.png);
	}
	
ul#menu li.showreel {
	width:111px;
	background-image:url(images/clickables/showreel.png);
	}
	
ul#menu li.contact {
	width:95px;
	background-image:url(images/clickables/contact.png);
	}
	
ul#menu li.page {
	background-position:bottom;
	}
	
/********************
***    Footer     ***
********************/
#menu-wrapper .footer {
	width: 650px;
	height: 20px;
	margin: 0 auto;
}

#menu-wrapper .footer p {
	color: #666;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-size: 0.9em;
	font-family: Arial, Helvetica, sans-serif;
}

#menu-wrapper .footer a {
	text-decoration: none;
	color: #ff6c00;
}

#menu-wrapper .footer a:hover {
	text-decoration: none;
	color: #333;
}
	
	
/********************
***     Misc      ***
********************/

.left {
	width:380px;
	float:left;
	margin-left:20px;
	}
	
.left p {
	width:auto;
	text-align:left;
	}
	
.right {
	width:420px;
	float:right;
	}
	
.right p {
	width:auto;
	text-align:left;
	}
	
.clear {clear:both;}

/* Testimonials */
#content-wrapper blockquote {
	width: 800px;
	background-image: url(images/paw-print.png);
	background-position: center left;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

#content-wrapper blockquote p {
	text-align: justify;
	margin-left: 65px;
	padding-bottom: 10px;
}

#content-wrapper cite {
	text-align: left;
	margin-left: 65px;
	display: block;
	padding: 0;
	color: #000;
}

#content-wrapper cite.name, cite.company {
	font-size: 1.4em;
	font-style: normal;
	font-weight: bold;
}

#content-wrapper cite.title {
	font-size: 1.3em;
	letter-spacing: 1px;
	color: #FFF;
	font-weight: bold;
}

#content-wrapper .divider {
	width: 756px;
	height: 3px;
	margin: 15px auto;
	background-image: url(images/divider.jpg);
	background-repeat: no-repeat;
}


/* jQuery Tooltip */

#tooltip {
	position: absolute;
	z-index: 3000;
	background-color: #221e1a;
	padding: 10px;
	opacity: 0.85;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color:#FFF;
	font-size:1.2em;
}
#tooltip h3, #tooltip div { margin: 0; }

/******************************
***** Nick's Contact Form *****
******************************/

/* Validation DIV
********************/
#validation {
	width:420px;
	}
	
/* If successful */
	
.success p {
	color:#221e1a;
	font-weight:bold;
	margin:0;
	padding:0;
	text-shadow: 0.08em 0.08em 0 #221e1a;
	width:420px;
	}
	
span.cool {
	font-weight:normal;
	}

/* If unsuccessful */
	
.failure p {
	color:#221e1a;
	font-weight:bold;
	margin:0;
	padding:0;
	text-shadow: 0.08em 0.08em 0 #221e1a;
	width:420px;
	}
	
span.uncool {
	font-weight:bold;
	color:#221e1a;
	}

/* Form
********************/
form#mailer {
	width:420px;
	margin:10px 0 0 0;
	clear:both;
	}

/* Labels */
form label {
	width:100%;
	float:left;
	clear:both;
	margin:0 0 10px 0;
	text-align:left;
	font-size:1.4em;
	}
	
form label small {
	font-size:10px;
	color:#221e1a;
	}
	
form label span.captcha {
	margin:0 0 0 0;
	text-align:right;
	clear:both;
	float:left;
	width:150px;
	display:block;
	}
	
/* Input Areas */
form label input {
	float:right;
	width:200px;
	margin:0 30px 10px 0;
	border:1px solid #ff6c00;
	padding:5px;
	color:#999;
	clear:both;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}
	
form label textarea {
	float:right;
	width:220px;
	height:100px;
	margin:0 10px 10px 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border:1px solid #ff6c00;
	padding:5px;
	color:#999;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}
	
form label input#captcha {
	clear:both;
	float:right;
	width:50px;
	margin:-20px 180px 0 0;
	display:inline;
	}

/* Hover and Focus effects */	
form label input:hover, textarea:hover {
	border:1px solid #666;
	color:#000;
	}
	
form label input:focus, textarea:focus {
	border:1px solid #666;
	color:#000;
	}

/* Submit Button */
form button#submit-button {
	float:right;
	width:auto;
	margin:10px 362px 0 0;
	border:none;
	padding:5px;
	color:#221e1a;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	font-family:Corbel, Helvetica, Arial, sans-serif;
	font-size:1.9em;
	cursor:pointer;
	font-weight:bold;
	}
	
form button#submit-button:hover {
	background-color:#221e1a;
	color:#FFF;
	}