/*

 CSS Documentation for Snapper Communications 
 
 Author: Brad Koehler [ brad.koehler@soup.co.uk ]
 
 Contents; 
 	1. Generic Styles
	2. Frame Work (Main Structural Div)
	3. Header / Nav
	4. Content div (body of the document)
	5. Editorial Panels
	6. Footer Styles 
	7. Misc Styles
 
 */

/******************************************************************************************************
1. Generic Styles */

* {
		padding:				0;
		margin:					0;
		}
		
body {
		background:				url(/media/site/images/front-end/img_bg_body.gif) top left repeat-x;
		padding:				0;
		margin:					0;
		font-family:			Verdana, Arial, Helvetica, sans-serif;
		font-size:				11px;
		line-height:15px;
		}

p {
		margin:					0 0 1em 0;
		width:					350px;
		}

ul {
		margin:					0 0 10px 15px;
		}

img {
		border:					none;
		}

h1 {
		color:					#fff;
		font-size:				2.5em;
		margin:					0 0 14px 0;
		/*IF THIS IS STILL HERE WHEN LIVE DELETE
		font-weight:600; 	
		font-family:"Courier New", Courier, monospace;
		margin: 				0 0 3px 0;
		letter-spacing:-2px;*/
		}
		
h2 {
		color:					#c00;
		margin: 				0 0 6px 0;
		font-weight:			normal;
		font-size:				1.7em;
		letter-spacing:			-1px;
		}
			
h2 img {
		font-size:				1em;
}

h3 {
		color:					#c00;
		font-size:				1.1em;
		}

option {
		padding-right:			0.6em;
}
		
/******************************************************************************************************
2. Frame Work (Main Structural Div) */

#FrameWork {
		width:					760px;
		margin:					auto;
		}

/******************************************************************************************************
3. Header / Nav */

#header {
		margin:					0 0 0 120px;
		}

#header img {
		clear:					both;
		margin:					0;
		}

#nav {
		margin:					0;
		padding:				0;
		}

#nav img {
		border:					none;
		}

#nav ul {
		list-style:				none;
		margin:					0;
		padding:				0;
		}
		
#nav ul li{
		display:				inline;
		float:					left;
		padding:				0 18px 0 0;
		height:					35px
		}
		
#nav:after { /* A Way to clear after the panel without putting in a clearing element */
		display:				block;
		content: 				".";
		height: 				0;
		font-size:				0;
		clear: 					both;
		visibility:				hidden;
}

* html #nav {
		height:					1%;
}

/* Rollovers */
#nav a {
		display:				block;
		height:					35px	
}

#nav a strong{
		position:				absolute;
		left:					-999px;
}

#header #nav a:hover {
		background-position:	bottom left;
		}
		
/*******/

#nav a#Home {
		background:				url(/media/site/images/front-end/nav/btn_home.gif) 0 0 no-repeat;
		width:					34px;
		}
		
#nav a#HomeSelected {
		background:				url(/media/site/images/front-end/nav/btn_home.gif) bottom left no-repeat;
		width:					34px;
		}
/*******/	

#nav a#Biography{
		background:				url(/media/site/images/front-end/nav/btn_biography.gif) 0 0 no-repeat;
		width:					69px;
		}
				
#nav a#BiographySelected{
		background:				url(/media/site/images/front-end/nav/btn_biography.gif) bottom left no-repeat;
		width:					69px;
		}	
/*******/		

#nav a#WhatIdo{
		background:				url(/media/site/images/front-end/nav/btn_what_i_do.gif) 0 0 no-repeat;
		width:					59px;
		}
		
#nav a#WhatIdoSelected{
		background:				url(/media/site/images/front-end/nav/btn_what_i_do.gif) bottom left no-repeat;
		width:					59px;
		}	
/*******/	
		
#nav a#Testimonials{
		background:				url(/media/site/images/front-end/nav/btn_testimonials.gif) 0 0 no-repeat;
		width:					85px;
		}
		
#nav a#TestimonialsSelected{
		background:				url(/media/site/images/front-end/nav/btn_testimonials.gif) bottom left no-repeat;
		width:					85px;
		}
/*******/	
	
#nav a#Snapshots{
		background:				url(/media/site/images/front-end/nav/btn_snapshots.gif) 0 0 no-repeat;
		width:					68px;
		}
		
#nav a#SnapshotsSelected{
		background:				url(/media/site/images/front-end/nav/btn_snapshots.gif) bottom left no-repeat;
		width:					68px;
		}
/*******/
			
#nav a#CaseStudies{
		background:				url(/media/site/images/front-end/nav/btn_case_studies.gif) 0 0 no-repeat;
		width:					82px;
		}	
		
#nav a#CaseStudiesSelected{
		background:				url(/media/site/images/front-end/nav/btn_case_studies.gif) bottom left no-repeat;
		width:					82px;
		}	


/******************************************************************************************************
4. Content - Body of the page, holds Editorial Panels*/	

#content {
		padding-bottom:			1px;
		background:				url(/media/site/images/front-end/img_bg_content.gif) bottom left no-repeat;
		}

/******************************************************************************************************
5. Editorial Panels - Hold Actual Content. */

.EditorialPanel {
		width:					760px;
		margin:					0 0 5px 0;
		padding:				0 0 6px 0;	
		position:				relative;
		}

.EditorialLeft {
		float:					left;
		width:					186px;
		padding:				20px 20px 0 120px;
		}	
.EditorialLeft h1 img {
		margin-bottom:10px;
		}
.EditorialRight {
		float:					right;
		width:					410px;
		padding:				20px 0 0 14px;
		}
	
.EditorialRight ul {
		margin:					0 0 10px 0;
		padding:				0 0 0 0;
}			

.EditorialRight ul li{
		list-style-type:		none;
		background:				url(/media/site/images/front-end/img_bullet.gif) 0 0.5em no-repeat;
		width:					350px;
		padding:				0 0 0 7px;
		margin:					0 0 6px 0;	
}

.EditTop {
		background:				url(/media/site/images/front-end/img_bg_edit_top.jpg) 0 0 repeat-y;
		color:					#fff;
		margin:					0 0 13px 0;
		padding-bottom:15px;
		}

.EditTop h2{
		color:					#fff;
		}
		
.EditTop a.HeadLink{
		color:					#c00;
		background:				#fff url(/media/site/images/front-end/img_link_arrow_red.gif) 2% 50% no-repeat;
		text-decoration:		none;
		padding:				0 0 0 10px;
		}
.EditTop a.HeadLink:hover {
		background:				#000 url(/media/site/images/front-end/img_link_arrow_white_left.gif) 2% 50% no-repeat;
		color:#fff;
		}
		
.EditTop ul li{	
		list-style-type:		disc;
		background:				none;
		padding:				0;
		margin:					0 0 0 12px;
}
	
.EditTop img{	
		margin:					0 0 -15px 0;
		}
		
.EditorialPanel:after { /* A Way to clear after the panel without putting in a clearing element */
		display:				block;
		content: 				".";
		height: 				0;
		font-size:				0;
		clear: 					both;
		visibility:				hidden;
}

* html .EditorialPanel {
		height:					1%;
}

/******************************************************************************************************
6. Footer Styles */

#footer {
		background:				url(/media/site/images/front-end/footer_bg.jpg) 0 0 no-repeat;
		margin:					0;
		padding:				0;
		font-size:				0.9em;
		height:113px;
		}
		
#footer p {
		width:					193px;
		padding-left:			1px;
		margin:					0 0 3px 0;
		}
		
#footer a {
		text-decoration:		none;
		color:					#fff;
		}

#FootTel {
		color:					#fff;
		background-color		:#000;
		}
		
#FootEmail{
		color:					#fff;
		background-color:		#c00;
		}

#FootEmail:hover {
		background-color:		#000;
		}
		
/*******************************************************************************************************
7. Misc Styles */

.Toggle {
		display:				block;
		}
		
.hidden {
		display:				none;
		}

.bold {
		font-weight:			bold;
		}
		
.UnderH2 {
		margin-top:				5px;
		font-size:				0.9em;
}
		
/* Biography Specific Styles */

.BiogImage {
		float:					right;
		position:				absolute;
		left:					580px;
		top:					13px;
		}

.BiogHeader  {
		width: 					230px;
		}
		
.BiogHeader p{
		width:					230px;	
		}
	
/* Snapshot / Case study Specific Styles */
.snapshot, .CaseStudy {
		margin-bottom:			20px;
		}
		
.snapshot a, .CaseStudy a {
		color:					#fff;
		text-decoration:		none;
		background:#000;
		}

a.right {
		background:				#000 url(/media/site/images/front-end/img_link_arrow_white_right.gif) 98% 0.45em no-repeat;
		padding:			    0 10px 0 0;
		}

a.left {
		background:				#000 url(/media/site/images/front-end/img_link_arrow_white_left.gif) 2% 0.45em no-repeat;
		padding:			    0 0 0 10px;
		}
		
a.BackTop {
		background:				#000 url(/media/site/images/front-end/img_link_arrow_white_up.gif) 98% 0.45em no-repeat;
		padding:			    0 10px 0 0;
		}
		
a.right:hover, a.left:hover, a.BackTop:hover {
		background-color:		#c00;
		}
		

/* Case Study Form Styles */ 
.CaseStudy h1 {
		margin:					0 0 15px 0;
		}
form {
		padding:				4px 0 0 0;
}

.submit {
		margin:				 	5px 0 0 120px;
		}
		
.clear {
		clear:					both;
		}