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

/* ----------  MUSIC DIRECTION   ---------- */
/* ------------- Invoke Media ------------- */
/* -------- Created by:Zuri Toppin -------- */

html, body {
margin:0;
padding:0;
height:100%;
font-family:Tahoma, Arial, Helvetica Condensed, Trebuchet MS, Arial,  sans-serif;
color:#ffe8d8;
/*cursor:crosshair;*/
}
a{
text-decoration:none;
color:#ffe8d8;
}
a:hover{
color:#666;
}
.backgroundcontent {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#container-page{
width:100%;
background:#DDD;
position:relative; /* VERY IMPORTANT - DO NOT REMOVE */
min-height:100%;
height:auto !important;
height:100%;
}
#container-header{
position:relative;
width:90%;
height:136px;
margin-left:1%;
}
#header{
width:100%;
height:136px;
margin-top:0px;
padding-top:1%;
}
#container-content{
position:relative;
left:50%;
margin-left:-300px;
padding-top:100px;
width:600px;
height:250px;
padding-bottom:74px; /* equivalent to the height of the footer - If left out, some of content may appear under footer */
}
#container-footer{
width:100%;
background: url(images/footerBG.png) repeat-x;
position:absolute;
bottom: 0 !important;
bottom:-1px;
height:74px; /* Height MUST be set here */
}
#footer-links{
width:22%;
float:right;
text-align:right;
margin-right:10px;
margin-top:23px;
font-size:11px;
}
#footer-links a{
text-decoration:none;
color:#FFF;
}
#footer-links a:hover{
color:#666;
}
#footerBtn-home{
width:61px;
float:left;
background:url(images/yoursoundBtn-home.gif) no-repeat;
height:74px;
}
#footerBtn-what{
width:61px;
float:left;
background:url(images/yoursoundBtn-what.gif) no-repeat;
height:74px;
}
#footerBtn-features{
width:61px;
float:left;
background:url(images/yoursoundBtn-features.gif) no-repeat;
height:74px;
}
#footerBtn-case{
width:61px;
float:left;
background:url(images/yoursoundBtn-case.gif) no-repeat;
height:74px;
}
#footerBtn-clients{
width:61px;
float:left;
background:url(images/yoursoundBtn-clients.gif) no-repeat;
height:74px;
}
#footerBtn-about{
width:61px;
float:left;
background:url(images/yoursoundBtn-about.gif) no-repeat;
height:74px;
}
#footerBtn-contact{
width:61px;
float:left;
background:url(images/yoursoundBtn-contact.gif) no-repeat;
height:74px;
}
#footer-invoke{
float:right;
text-align:right;
margin-right:10px;
margin-top:40px;
font-size:10px;
}
#footer-yoursound{
width:275px;
float:left;
text-align:left;
margin-left:20px;
margin-top:30px;
}
#yoursound a span{
display: none;
}
#yoursound a{
position: absolute;
width: 51px;
height: 51px;
margin-top:13px;
margin-left:5px;
text-decoration: none;
background: transparent url(images/transparent.png) no-repeat;
}
#yoursound a:hover{
position: absolute;
}
/*/////////////////////////////////////////////*/ 
/*///////////////// HEADER LOGO ///////////////*/ 
/*/////////////////////////////////////////////*/ 
.headerHome {
background:url(images/homeLogo.png) no-repeat;
height:136px;
width:238px;
}
.headerWhatWeDo {
background:url(images/whatwedoLogo.png) no-repeat;
padding: 0px;
margin: 0px;
text-align: center;
height:136px;
width:238px;
}
.headerFeatures {
background:url(images/featuresLogo.png) no-repeat;
padding: 0px;
margin: 0px;
text-align: center;
height:136px;
width:238px;
}
.headerCaseStudies {
background:url(images/casestudiesLogo.png) no-repeat;
padding: 0px;
margin: 0px;
text-align: center;
height:136px;
width:238px;
}
.headerClients {
background:url(images/clientsLogo.png) no-repeat;
padding: 0px;
margin: 0px;
text-align: center;
height:136px;
width:238px;
}
.headerAboutUs {
background:url(images/aboutusLogo.png) no-repeat;
padding: 0px;
margin: 0px;
text-align: center;
height:136px;
width:238px;
}
.headerContactUs {
background:url(images/contactusLogo.png) no-repeat;
padding: 0px;
margin: 0px;
text-align: center;
height:136px;
width:238px;
}
/*/////////////////////////////////////////////*/ 
/*///////////////// NAVIGATION ////////////////*/ 
/*/////////////////////////////////////////////*/ 
#nav {
padding:0px;
list-style-type:none;
width:138px;
margin-top:10px;
top:0px;
margin-left:0px;
position:absolute;
float:left;
}
#nav li{
margin:0px;
padding:0px;
list-style-type:none;
}
/*///////////////// HOME (Blue) ////////////////*/
#navHome a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navHome a:hover{
background:url(images/homeBtn.png) no-repeat;
color:#000;
}
#navHomeActive a{
background:url(images/homeBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////// WHAT WE DO (Pink) //////////////*/
#navWhatWeDo a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navWhatWeDo a:hover{
background:url(images/whatwedoBtn.png) no-repeat;
color:#000;
}
#navWhatWeDoActive a{
background:url(images/whatwedoBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////// FEATURES (Orange) //////////////*/
#navFeatures a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navFeatures a:hover{
background:url(images/featuresBtn.png) no-repeat;
color:#000;
}
#navFeaturesActive a{
background:url(images/featuresBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////// CASE STUDIES (Green) //////////////*/
#navCaseStudies a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navCaseStudies a:hover{
background:url(images/casestudiesBtn.png) no-repeat;
color:#000;
}
#navCaseStudiesActive a{
background:url(images/casestudiesBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////// CLIENTS (Purple) //////////////*/
#navClients a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navClients a:hover{
background:url(images/clientsBtn.png) no-repeat;
color:#000;
}
#navClientsActive a{
background:url(images/clientsBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////// ABOUT US (Red) //////////////*/
#navAboutUs a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navAboutUs a:hover{
background:url(images/aboutusBtn.png) no-repeat;
color:#000;
}
#navAboutUsActive a{
background:url(images/aboutusBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////// CONTACT US (Yellow) //////////////*/
#navContactUs a{
background:url(images/navBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.75;
font-size:11px;
}
#navContactUs a:hover{
background:url(images/contactusBtn.png) no-repeat;
color:#000;
}
#navContactUsActive a{
background:url(images/contactusBtn.png) no-repeat;
width:138px;
height:35px;
display:block;
color: #FFF;
text-decoration:none;
padding: 0 15px;
line-height: 3;
font-size:11px;
}
/*/////////////////////////////////////////////*/ 
/*//////////////// MAIN CONTENT ///////////////*/ 
/*/////////////////////////////////////////////*/ 
.main {
margin-left: 175px;
margin-top:-50px;
bottom:0px;
top:0px;
width:400px;
height:418px;
vertical-align:top;
position:absolute;
}
.homeTitle{
color:#11B1D9;
}
.whatwedoTitle{
color:#BB536F;
}
.featuresTitle{
color:#FF7E02;
}
.casestudiesTitle{
color:#A7B54F;
/*color:#76A562;*/
}
.clientsTitle{
color:#AA21AE;
}
.aboutusTitle{
color:#CC0101;
}
.contactTitle{
color:#EFB23B;
}
.copyBlock{
background:url(images/contentBG.png) no-repeat;
margin-left:0;
top:0px;
width:423px;
height:392px;
}
.copy{
padding-left:45px;
padding-top:10px;
width:345px;
font-size:11px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
text-align:justify;
clear:both;
}
.copy p{
margin-top:12px;
}
.contactLeft{
padding-left:45px;
padding-top:10px;
width:140px;
font-size:11px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
clear:both;
float:left;
}
.contactRight{
padding-top:10px;
width:185px;
font-size:11px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
float:right;
}
.copyHeader{
padding-left:45px;
padding-top:75px;
font-size:24px;
float:left;
width:325px;
}
.copysubHeader{
font-size:11px;
padding-left:2px;
}
.guiThumb{
background:url(images/guiThumb.jpg) no-repeat;
width:208px;
height:100px;
float:right;
margin-right:-5px;
margin-top:-15px;
}
.subLists ul{
padding-left:-25px;
list-style-type:square;
}
#clientMap{
padding-left:160px;
margin-top:-20px;
padding-top:0px;
width:314px;
height:211px;
position:relative;
background:url(images/clients-colour.png) no-repeat;
}
#clientMap a span{
display: none;
}
#clientMap a:hover{
position: absolute;
}

.calltoaction a{
width:50px;
height:50px;
}
.player{
margin-left:0px;
margin-top:-100px;
position:relative;
float:left;
}

/* ------------- LIGHTBOX ------------- */

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%	
}
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}