/**
*	Page centering, background
**/

body { 
	background-image: url('../images/background.jpg'); 
	background-position:center 65px; 
	padding:10px 0 0 0; 
	text-align:center; 
	font: normal 12px verdana,arial,helvetica;
}
#container { 
	width:960px; margin:0 auto; 
}


/**
*	Frame specific styles
***/

#services { width:610px; height:167px; }
#services .top, #services .bottom { width:565px; }
#services .left, #services .right { height:122px; }
#services .content { background-image:url('../images/pinboard.jpg'); }

#header { height:167px; width: 935px; }
#header .top, 
#header .bottom { width: 890px; }
#header .left, 
#header .right { height: 122px; }

#aboutus { float:right; width:296px; height:300px; font-size:10px; z-index:10; }
#aboutus .top, 
#aboutus .bottom { width:251px; }
#aboutus .left, 
#aboutus .right { height: 255px; }
#aboutus .content p { margin:10px 10px 0 10px; font-family:Verdana, Helvetica, sans-serif; }
#aboutus .content img { position:relative; top:10px; left:2px; }

#servicedetails { width:610px; height:106px; }
#servicedetails .top, #servicedetails .bottom { width:565px; }
#servicedetails .left, #servicedetails .right { height:61px; }
#servicedetails .content { font-family:Verdana, Helvetica, sans-serif; font-size:10px; }
#servicedetails .content div { float:left; margin-left:6px;}
#servicedetails .content div.webdesign { margin-left:12px;}
#servicedetails ul { margin:0; list-style-type:none; padding:0 0 0 25px;}
#servicedetails h3 { margin:10px 0 0 0; font-size:12px;}

#footer { width:935px; height:45px; z-index:15;}
#footer .top, 
#footer .bottom { width:890px; }
#footer .left, 
#footer .right { height: 0px; }
#footer .content span { display:block; padding-top:17px; text-align:center; font-family:Verdana, Helvetica, sans-serif; font-size:14px; }
	

#example { 
	width:294px; 				/* width = desired width - 45px */
	height:200px; }				/* minimum height= ~ 45px	*/
#example .top, 
#example .bottom { width:249px; }		/*  = container width - 45px	*/
#example .left, 
#example .right { height: 155px; }		/*  = container height - 45px	*/

/**
*	Frame generic settings
***/

.green .content { 
	background-color:#62c79f; 
}
.white .content { 
	background-color:#ffffff; 
}
.balsa .content { 
	background-image:url('../images/balsa-backing.gif'); 
	background-repeat:repeat;
}
.cork .content { 
	background-image:url('../images/cork-backing.gif'); 
	background-repeat:repeat;
}
.framedpanel .content { 
	width:100%; height:100%; 
	text-align:left; 
	position:relative; 
	float:left;
}


/**
*	Frame element positioning
*	Width and height specifications must be done on an individual frame basis
***/

.framedpanel .topleft, .framedpanel .top, .framedpanel .topright, .framedpanel .left, .framedpanel .right, .framedpanel .bottomleft, .framedpanel .bottom, .framedpanel .bottomright { position:absolute; }
.framedpanel .topleft { width:36px; height:36px; left:-14px; top:-13px; background-position:0 0;}
.framedpanel .top { height:23px; top:-13px; left:22px; background-repeat:repeat-x;}
.framedpanel .topright { width:43px; height:36px; right:-20px; top:-13px; background-position:-36px 0; }
.framedpanel .left { width:22px; top:23px; left:-14px; background-repeat:repeat-y; }
.framedpanel .right { width:22px; top:23px; right:-21px; background-repeat:repeat-y; }
.framedpanel .bottomleft { width:36px; height:44px; bottom:-22px; left:-14px; background-position:0 -36px; }
.framedpanel .bottom { height:23px; left:22px; bottom:-22px; background-repeat:repeat-x; }
.framedpanel .bottomright { width:43px; height:44px; right:-20px; bottom:-22px;  background-position:-36px -36px;}


/**
*	Frame image sources - pixel perfect, hand constructed containers
*	for browsers that support .png background images with alpha transparency
***/

.framedpanel .topleft		{ background-image:url('../images/frame-corners.png'); 	}
.framedpanel .top		{ background-image:url('../images/frame-horiz.png'); 	}
.framedpanel .topright	{ background-image:url('../images/frame-corners.png'); 	}
.framedpanel .left		{ background-image:url('../images/frame-vert.png'); 	}
.framedpanel .right		{ background-image:url('../images/frame-vert.png'); 	}
.framedpanel .bottomleft	{ background-image:url('../images/frame-corners.png'); 	}
.framedpanel .bottom		{ background-image:url('../images/frame-horiz.png'); 	}
.framedpanel .bottomright	{ background-image:url('../images/frame-corners.png');	}


/**
*	Graphic sources & details for height variable frames
***/

.framedpanel { width:100%; margin:1px 0 -9px 0; float:left; position:relative; }
.framedpanel .middle { background-repeat:repeat-y;  }
.framedpanel .middle .content { margin:0; }

/**
*	Generic site styles
***/

div.framedpanel p a, div.framedpanel li a {
	color:#5E8F7F;
	text-decoration:none;
}
div.framedpanel p a:hover, div.framedpanel li a:hover {
	text-decoration:underline;
}


/**
*	Styles for generic page layout
***/

div#fullwidthwhitepanel .content {
	text-align: left;
}
div#fullwidthwhitepanel .content q {
	text-align: left;
}


/**
*	Styles for large image page layout
***/

body.largeimage {
	margin:0;
	padding:0;
}
.largeimage div#container {
	margin:0;
}
.largeimage img {
	margin:0;
	border: solid 1px #d6d6d6;
}


/**
*	Case study polaroid white page image and column text layout 
***/

#caseStudies #polaroidText ul {
	list-style-type:none;
}
#caseStudies #polaroidText ul ul {
	list-style-type: circle;
}
#caseStudies #polaroidText .textcols {
	float:left;
}
#caseStudies #polaroidText ul.textcolumn {
	padding-left:20px;
}
#caseStudies #polaroidText h4 {
	margin-bottom:3px;
	color:#000;
	text-decoration:none;
}
#caseStudies .polaroids {
	text-align: center;
}
#caseStudies .polaroids img {
	margin: 0 10px;
	border:0;
}


/**
*	Style for testimonial page
***/

div.testimonials {
	float:left; 
	clear:left; 
	vertical-align:middle;
	padding-top:10px;
	width:900px;
}
div.testimonials img {
	margin:-10px 0 10px 30px;
}
div.testimonials h3 {
	text-align:left;
}


/**
*	Styles for Services page
***/

.services ul {
	list-style-type: circle;
	padding-left:20px;
}
.services h3 {
	margin:0 0 6px 0;
}
.services h4 {
	margin:0 0 4px 0;
}
.services p {
	margin:0 0 10px 0;
}
.services div.webdesign {
	width:450px;
	margin-top:10px;
	float:left;
	
}
.services div.webdev {
	width:450px;
	margin-top:10px;
	float:right;
	display:inline;
}
.services div.print {
	width:450px;
	margin-top:10px;
	float:left;
	clear:both;
}
.services div.other {
	width:450px;
	margin-top:10px;
	float:right;
}
.services img {
	margin:0 10px;
}