/*  
Visualante Creative CSS document
by Thomas Prior
http://www.thomasprior.co.uk
*/

* {margin:0;padding:0;} /* Ye olde holy hack - TP */

/* MAIN STRUCTURE */

a{
color:#FFF;
}

body{
font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
background: url(../assets/texturedBg.jpg) no-repeat top center #000;
}

p, dl, ul{
font-size:1.2em;
line-height:1.8em;
}

p{
margin: 0 0 18px 0;
}

p a{
text-decoration:underline;
}

p a:hover{
text-decoration:none;
}

h1{
font-family: 'HarabaraBold', sans-serif;
font-size:4.7em;
margin:0 0 18px 0;
}

h1 a{
text-decoration:none;
background:url(../assets/logoBall.png) no-repeat top right;
padding:0 22px 0 0;
color:#00fcf3;
}

h1 a:hover{
color:#1f928e;
}

h1 a span{
opacity:0.8;
}

h1 a span:first-child{
color:#FFF;
margin-right:-0.4em;
}

h2{
width:auto;
float:right;
font-size:2.4em;
letter-spacing:0.03em;
font-family: 'HarabaraBold', sans-serif;
background:url(../assets/VC_headingsLogo.png) no-repeat left;
margin:0 0 16px 0;
padding:0 0 0 30px;
text-shadow:0 1px 0 #000;
}

#branding{
width:933px;
height:160px;
margin:0 auto;
}

#branding ul{
width:600px;
float:left;
font-family: 'HarabaraBold', sans-serif;
font-size:1.8em;
letter-spacing:0.03em;
background:url(../assets/navFadedLine.png) no-repeat top left;
text-shadow:0 1px 0 #000;
}

#branding li{
display:inline;
text-align:center;
}

#branding li a{
text-decoration:none;
width:100px;
float:left;
padding:40px 0 60px 0;
text-align:center;
background:url(../assets/navFadedLine.png) no-repeat top right;
}

#branding li a:hover{
background:url(../assets/navHoverBg.png) repeat-x top;
}

#branding .active a{
background:url(../assets/navActiveBg.png) repeat-x top;
}

#branding .vcard{
width:230px;
float:right;
text-align:right;
text-shadow:0 1px 0 #000;
}

#branding .vcard dt{
background: #74133a;
margin:0 0 10px 0;
padding:11px 9px 9px 9px;
font-size:1.3em;
letter-spacing:0.05em;
font-family: 'HarabaraBold', sans-serif;
text-align:center;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius: 5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

#branding .vcard dt a{
text-decoration:none;
}

#branding .vcard dt a:hover{
text-decoration:underline;
}

#branding .vcard dd, #branding .vcard dd a{
line-height:1.6em;
font-size:1.1em;
text-decoration:none;
color:#8c8c8c;
}

#branding .vcard dd a:hover{
text-decoration:underline;
color:#FFF;
}

#mainWrapper{
width:933px;
margin:0 auto;
}

#mainContent{
width:487px;
float:left;
}

#homeIntro{
width:435px;
padding:26px 26px 4px 26px;
float:left;
background:url(../assets/homeBox_top.png) no-repeat top left;
}

#homeServices{
width:435px;
padding:26px;
float:left;
background:url(../assets/homeBox_bottom.png) no-repeat bottom left;
color:#242424;
}

#homeServices h2{
color:#000;
text-shadow:0 1px 0 #FFF;
}

#homeIntro p, #homeServices p{
width:100%;
float:left;
text-align:right;
}

#homeServices dl{
display:block;
width:115px;
float:left;
background:#3f6260;
margin:0 12px 0 0;
padding:11px;
color:#FFF;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-top-right-radius:5px;
border-top-left-radius:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

#homeServices dl:hover{
background:#000;
}

#homeServices dl.last-child{
margin:0;
}

#homeServices dl dt{
width:110px;
background:url(../assets/ballIcon.png) no-repeat right;
margin:0 0 7px 0;
padding:5px 0 5px 0;
font-family: 'HarabaraBold', sans-serif;
font-size:1.6em;
letter-spacing:0.02em;
}

#homeServices dl dd{
text-align:right;
line-height:1.4em;
}

#homeServices dl a{
display:block;
text-decoration:none;
font-weight:bold;
padding:6px 0 0 0;
}

#homeServices dl a:hover{
text-decoration:underline;
}

#homeServices .events{
background:#46807e;
}

#homeServices .promotion{
background:#60a7a4;
}

#recentProjects{
width:415px;
height:200px;
float:right;
margin:-45px 0 0 0;
padding:0;
}

#recentProjects h2{
margin:0 0 20px 0;
}

#recentProjects blockquote p{
width:415px;
float:right;
font-family: 'HarabaraBold', sans-serif;
font-size:2.8em;
line-height:1.4em;
text-align:right;
letter-spacing:0.02em;
text-shadow:0 1px 0 #000;
}

#recentProjects a{
display:block;
width:415px;
height:173px;
float:right;
margin:0 0 24px 0;
text-decoration:none;
}

#recentProjects a:hover{
text-decoration:underline;
}

#recentProjects span{
width: auto;
float:right;
margin:127px 0 0 0;
padding:6px 12px;
font-size:1.2em;
text-align:right;
line-height:17px;
background:url(../assets/recentProjectsInfoBG.gif);
color:#FFF;
}

#recentProjects a#turningTides{
background:url(../assets/recentProjectsBox_turningTides.png) no-repeat top right;
}
#recentProjects a:hover#turningTides{
background:url(../assets/recentProjectsBox_turningTides.png) bottom right;
}

#recentProjects a#portraitsOfAMemoir{
background:url(../assets/recentProjectsBox_portraitsOfAMemoir.png) no-repeat top right;
}
#recentProjects a:hover#portraitsOfAMemoir{
background:url(../assets/recentProjectsBox_portraitsOfAMemoir.png) bottom right;
}

#recentProjects a#weddingShowcase{
background:url(../assets/recentProjectsBox_weddingShowcase.png) no-repeat top right;
}
#recentProjects a:hover#weddingShowcase{
background:url(../assets/recentProjectsBox_weddingShowcase.png) bottom right;
}

#recentProjects a#relics{
background:url(../assets/recentProjectsBox_relics.png) no-repeat top right;
}
#recentProjects a:hover#relics{
background:url(../assets/recentProjectsBox_relics.png) bottom right;
}

/* MAIN CONTENT */

#wideContainer{
width:881px;
padding:26px 26px 4px 26px;
float:left;
background: url(../assets/fullWidthGreyBG.png) no-repeat top center;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
}

#wideContainer h2{
width:100%;
float:left;
margin-bottom:20px;
}

/* PROJECTS */

.projectDetail{
width:100%;
float:left;
padding:26px 0 26px 0;
border-bottom:1px solid #6a6a6a;
}

.projectDetail .video{
width:434px;
float:left;
margin:0 0 50px 0;
border:1px solid #6a6a6a;
padding:2px;
}

.projectDetails .videoDetails{
width:450px;
float:right;
}

.projectDetail h3{
font-size:2.2em;
width:400px;
float:right;
padding:12px;
background:#74133a;
color:#FFF;
margin:0 0 14px 0;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
text-shadow:0 1px 0 #000;
}

.projectDetail p{
width:410px;
float:right;
}

.projectDetail.first-child{
padding-top:7px;
}

.projectDetail.last-child{
border:none;
}

/* SERVICES */

.serviceDetail{
width:100%;
float:left;
padding:26px 0 26px 0;
border-bottom:1px solid #6a6a6a;
}

.serviceDetail img{
width:auto;
float:left;
padding:24px 0 20px 20px;
}

.serviceDetail h3{
font-size:2.2em;
width:856px;
float:left;
padding:12px;
background:#087a76;
color:#FFF;
margin:0 0 14px 0;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
text-shadow:0 1px 0 #000;
}

.serviceDetail h4{
width:470px;
padding:22px 14px 14px 14px;
float:right;
font-size:1.6em;
}

.serviceDetail p{
width:470px;
margin:0;
padding:14px;
float:right;
}

.serviceDetail.first-child{
padding-top:7px;
}

.serviceDetail.last-child{
border:none;
}

/* ABOUT */

#aboutPage img{
width:425px;
float:right;
padding:2px;
border:1px solid #6a6a6a;
}

#aboutPage strong{
font-size:1.8em;
line-height:1.4em;
}

#aboutPage p{
width:400px;
float:left;
}

#aboutPage .contactTeam_button{
float:left !important;
}

#aboutPage ul{
width:430px;
float:right;
margin:8px 0 20px 0;
}

#aboutPage ul li{
display:inline;
float:left;
}

#aboutPage ul li a{
width:auto;
float:left;
margin:14px 11px 0 0;
background:#74133a;
padding:11px;
font-size:1.4em;
font-weight:bold;
text-decoration:none;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
color:#FFF;
}

#aboutPage ul li.last-child a{
margin:14px 0 0 0;
}

#aboutPage ul li a:hover{
background:#000;
}

/* CONTACT */

iframe{
width:374px;
float:right;
margin:12px 0 0 0;
padding:2px;
border:1px solid #6a6a6a;
}

#contactDetails{
width:380px;
font-size:1.4em;
padding: 0 0 0 30px;
margin:0 0 20px 0;
float:right;
border-left:1px solid #6a6a6a;
color:#FFF;
}

#contactDetails a:hover{
text-decoration:none;
}

/* BUTTONS */

.contactTeam_button{
width:auto;
float:left;
margin:0 0 0 32px;
background:#087a76;
padding:12px;
font-size:1.6em;
font-weight:bold;
text-decoration:none;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
color:#FFF;
}

.servicesButton{
background:#74133a;
}

.contactTeam_button:hover{
background:#000;
}

/* FORM */

#contactForm{
width:450px;
float:left;
}

#contactForm label{
	font-size:1.2em;
	font-weight:bold;
	letter-spacing:normal;
	margin:0;
	padding:0;
}

#contactForm dd{
	padding:0;
	margin:4px 0 13px 0;
}

#contactForm .textInputType input{
	width:422px;
	font-size:1.4em;
	padding:4px;
}

#contactForm .textInputType textarea{
	width:426px;
	height:294px;
	padding:4px;
	font-size:1.4em;
}

#contactForm .submit input{
width:auto;
float:left;
margin:0 0 14px 0;
background:#087a76;
padding:7px 14px;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
border:none;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
color:#FFF;
}

#contactForm .submit input:hover{
cursor:pointer;
background:#000;
}

p#success{
	width:414px;
	float:left;
	padding: 4px 10px;
	background:#16650b;
	color: #FFF;
	font-size:1.6em;
	margin: 10px 0 4px 0;
	text-align: center;
	border:1px solid #3f3f3f;
}
		
p#bademail, p#badserver{
	width:414px;
	float:left;
	padding: 3px 10px;
	background:#760101;
	border: 1px solid #591515;
	color: #FFF;
	font-weight:bold;
	margin: 10px 0 4px 0;
	text-align: center;
}

#footer{
width:933px;
height:200px;
clear:both;
margin:0 auto;
}

#footer p{
width:100%;
float:right;
background:url(../assets/fullWidthDivider.png) no-repeat top center;
color:#7b7b7b;
font-size:1.1em;
text-align:right;
margin:26px 0 0 0;
padding:20px 0 0 0;
}

#footer a{
color:#7b7b7b;
}