@charset "UTF-8";
/* Main Components */

html, body {
	height: 100%;
	margin: 0px;
	padding:0px;
	font-size:10px;
	font-family: sans-serif; 
	text-align:left;
}


.wallop_font {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:14px;
	letter-spacing:0px;
	}
	
.wallop_font_frontpage {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:64px;
	letter-spacing:0px;
	line-height:64px;
	color:#25aae1;
	}
	
.wallop_font_frontpage_punch {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:64px;
	letter-spacing:0px;
	line-height:64px;
	color:#224095;
	}
	
.wallop_font_headline {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:38px;
	letter-spacing:0px;
	color:#25aae1;
	}
	
.wallop_font_headline_punch {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:38px;
	letter-spacing:0px;
	color:#224095;
	}
	
.wallop_font_header {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:28px;
	letter-spacing:0px;
	color:#25aae1;
	}
	
.wallop_font_header  A:link			{ text-decoration: none; color:#25aae1; }
.wallop_font_header  A:active 		{ text-decoration: none; color:#25aae1; }
.wallop_font_header  A:visited 		{ text-decoration: none; color:#25aae1; }
.wallop_font_header  A:hover 		{ text-decoration: none; color:#224095; }

.wallop_font_header_sml {
	font-family: 'wallopingregular', Arial, sans-serif;
	font-size:20px;
	letter-spacing:0px;
	color:#25aae1;
	}
	
.wallop_font_header_sml  A:link			{ text-decoration: none; color:#25aae1; }
.wallop_font_header_sml  A:active 		{ text-decoration: none; color:#25aae1; }
.wallop_font_header_sml  A:visited 		{ text-decoration: none; color:#25aae1; }
.wallop_font_header_sml  A:hover 		{ text-decoration: none; color:#224095; }

	
.wallop_font_body {
	font-family: 'Muli', sans-serif;
	font-size:17px;
	letter-spacing:-1px;
	color:#95a2ad;
	}
	
.wallop_font_body  A:link			{ text-decoration: none; color:#25aae1; }
.wallop_font_body  A:active 		{ text-decoration: none; color:#25aae1; }
.wallop_font_body  A:visited 		{ text-decoration: none; color:#25aae1; }
.wallop_font_body  A:hover 			{ text-decoration:underline; color:#25aae1; }
	
#top_padding{ 
	height:80px;
	}

#centered {
	width: 900px;
	margin-left: auto ; /* centre the div, this and the next line... */
	margin-right: auto ;
	padding-left:20px;
	padding-right:20px;
	height:auto;
	z-index: 0;
	}

#navigation{ 
	width:100%;
	height:86px;
	}

#content { 
	background-color:#eceaea;  /* FULL WIDTH COLOUR STRIPE */
	min-height:380px; /* for modern browsers */
	height:auto !important; /* for modern browsers */
	height:380px; /* for IE5.x and IE6 */
	}

#footer { 
	clear:both;
	height:58px;
	float:inherit;
	position:relative;
	padding-bottom:20px;
}


/* Font */

@font-face {
    font-family: 'wallopingregular';
    src: url('fonts/walloping_font-webfont.eot');
    src: url('fonts/walloping_font-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/walloping_font-webfont.woff') format('woff'),
         url('fonts/walloping_font-webfont.ttf') format('truetype'),
         url('fonts/walloping_font-webfont.svg#wallopingregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* HEADER */

#Wallop_Logo_Panel {
	width:205px;
	height:76px;
	position: absolute;
	z-index:100;
	}
	
#Floating_Nav_Holder {
	width:400px;
	height:76px;
	position:relative;
	float:right;
	z-index:100;
	}
	
#Contact_Nav_Holder {
	width:97px;
	height:76px;
	position:absolute;
	right:0px;
	z-index:200;
	}
	
#Work_Nav_Holder {
	width:66px;
	height:76px;
	position:absolute;
	right:117px;
	z-index:200;
	}
	
#Clients_Nav_Holder {
	width:78px;
	height:76px;
	position:absolute;
	right:203px;
	z-index:200;
	}
	
#About_Nav_Holder {
	width:73px;
	height:76px;
	position:absolute;
	right:301px;
	z-index:200;
	}
	
.fade_nav {
   opacity: 0.7;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade_nav:hover {
      opacity: 1;
      }

/* FOOTER */

#Floating_Footer_Holder {
	width:400px;
	height:58px;
	position:relative;
	float:right;
/*	top: 600px;*/
	z-index:100;
	}
	
#LinkedIn_Footer_Holder {
	width:38px;
	height:58px;
	position:absolute;
	right:0px;
	z-index:200;
	}
	
#Twitter_Footer_Holder {
	width:38px;
	height:58px;
	position:absolute;
	right:48px;
	z-index:200;
	}
	
#Facebook_Footer_Holder {
	width:38px;
	height:58px;
	position:absolute;
	right:96px;
	z-index:200;
	}
	
#Contact_Footer_Holder {
	width:38px;
	height:58px;
	position:absolute;
	right:144px;
	z-index:200;
	}

.fade_footer {
   opacity: 0.3;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade_footer:hover {
      opacity: 1;
      }
	  
	  
/* HOMEPAGE */
/* Demo CSS - You do not need this css in your own slider */

#banner-overlay {
	width: 900px;
	height: 380px;
	position:absolute;
	top:166px;
	z-index:1000;	
	}

#banner-fade,
#banner-slide{
	z-index:100;
}

ul.bjqs-controls.v-centered li a{
	display:block;
	padding:10px;
	background:#fff;
	color:#000;
	text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
	background:#000;
	color:#fff;
}

ol.bjqs-markers li a{
	padding:5px 10px;
	background:#000;
	color:#fff;
	margin:5px;
	text-decoration: none;
}

ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
	background: #999;
}

p.bjqs-caption{
	background: rgba(255,255,255,0.5);
}

/* Basic jQuery Slider essential styles */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}


/* ABOUT */

#About {
	width: 900px;
	background-color:#eceaea;
	overflow:hidden;
	z-index:100;
	}
	
#About_Wrapper {
	width: 500px;
	background-color:#eceaea;
	float:left;
	padding-top:20px;
	padding-bottom:20px;
	z-index:100;
	}
	
	
/* WORK */

#Work {
	width:900px;
	background-color:#eceaea;
	z-index:100;
	}
	
#Work_Wrapper {
	width: 900px;
	background-color:#eceaea;
	padding-top:20px;
	padding-bottom:20px;
	z-index:100;
	}
	
#Work_Panel {
	width: 900px;
	height:380px;
	background-color:#eceaea;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}

.accordionButton {	
	width: 900px;
	_float: none;  /* Float works in all browsers but IE6 */
	background-color:#eceaea;
	padding-top:10px;
	padding-bottom:5px;
	cursor: pointer;
	}
	
.accordionContent {	
	width: 900px;
	background-color:#eceaea;
	}
	
#Brand_Management_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Brand_Management_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Work_Text {
	width: 350px;
	height:450px;
	float:left;	
	z-index:120;
	}
	
#Digital_Publishing_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Digital_Publishing_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Media_Management_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Media_Management_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Online_Advertising_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Online_Advertising_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Onsite_Marketing_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}

#Onsite_Marketing_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Photography_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Photography_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Print_Advertising_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Print_Advertising_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Printed_Publications_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Printed_Publications_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Retail_Promotions_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Retail_Promotions_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	
#Web_Design_Dev_Panel {
	width: 900px;
	height:450px;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	}
	
#Web_Design_Dev_Holder {
	width: 900px;
	height:450px;
	z-index:110;	
	}
	

	

/* CLIENTS */

#Clients {
	width:900px;
	background-color:#eceaea;
	z-index:100;
	}
	
#Clients_Intro {
	width:900px;
	background-color:#eceaea;
	overflow:hidden;
	z-index:100;
	}
	
#Clients_Intro_Header {
	width:600px;
	background-color:#eceaea;
	float:left;
	padding-top:30px;
	z-index:100;
	}
	
#Clients_Intro_Text {
	width:450px;
	background-color:#eceaea;
	float:right;
	z-index:100;
	}
	
#Clients_Wrapper {
	width: 900px;
	background-color:#eceaea;
	overflow:hidden;
	z-index:100;
	}
	
#Clients_Logo_Left {
	width: 164px;
	height: 75px;
	padding-right: 20px;
	padding-top: 20px;
	float:left;
	z-index:150;
	}
	
#Clients_Logo_Right {
	width: 164px;
	height: 75px;
	padding-top: 20px;
	float:left;
	z-index:150;
	}
	
#Clients_Logo_Bottom_Right {
	width: 164px;
	height: 75px;
	padding-top: 20px;
	padding-bottom: 40px;
	float:left;
	z-index:150;
	}



/* CONTACT */

#Contact_Wrapper {
	width: 900px;
	background-color:#eceaea;
	overflow:hidden;
	z-index:100;
	}


#contact_form {
	width:390px;
	height:640px;
	background-color:#eceaea;
	float:left;
	padding-top:30px;
	padding-right:60px;
	}
	
#map_canvas {
	width:450px;
	height:700px;
	float:right;
	}


/* EXAMPLES */

#Examples {
	width:900px;
	background-color:#eceaea;
	z-index:100;
	}
	
#Examples_Intro {
	width:900px;
	background-color:#eceaea;
	overflow:hidden;
	z-index:100;
	}
	
#Examples_Intro_Header {
	width:600px;
	background-color:#eceaea;
	float:left;
	padding-top:30px;
	z-index:100;
	}
	
#Examples_Intro_Text {
	width:900px;
	background-color:#eceaea;

	padding-bottom:10px;
	float:left;
	z-index:100;
	}
	
#Examples_Wrapper {
	width: 900px;
	background-color:#eceaea;
	z-index:100;
	}
	
#Examples_Left {
	width: 450px;
	height:auto;
	background-color:#eceaea;
	float:left;
	z-index:100;
	}
	
#Examples_Right {
	width: 450px;
	height:auto;
	background-color:#eceaea;
	float:left;
	z-index:100;
	}
	
#Examples_Text {
	width:430px;
	float:left;
	z-index:100;
	}
	
#Examples_Holder {
	width: 900px;
	height:auto;
	z-index:110;	
	}
	
#CaseStudy_Text {
	width: 350px;
	height:auto;
	padding-top:20px;
	float:left;	
	z-index:120;
	}
	
#examples_slideshow { 
    margin: 10px auto; 
    position: relative; 
    width: 775px; 
    height: 435px; 
    padding: 0px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#examples_slideshow > div { 
    position: absolute; 

}