/*#############################################################
Name: Shades of Gray
Date: 2006-11-05
Description: Monochrome, lightweight and totally liquid. Comes with three different layouts.
Author: Viktor Persson
URL: http://arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/

/* main structure */
body {
	/*background: #111 url(/img/bg.jpg) repeat-y center top;*/
	background-color: #000000;
	color: #BBB;
	font: normal 62.5% "Lucida Sans Unicode",sans-serif;
	text-align: center;
}

.container {
	border: 2px solid #444;
	border-top: none;
	margin: 0 auto;
	width: 800px;
	text-align: left;
	background-color: #191919;
}

.main {
	background-color: #191919;
	border-bottom: 1px solid #2A2A2A;
}
.main .left {width: 64%; height: 100%; background-color: #191919;}
.main .right {width: 36%; height: 100%; background-color: #191919;}

.content {
	border-left: 1px solid #444;
	border-top: 1px solid #444;
	padding: 16px;
	font-size: 10pt;
	background-color: #191919;
}
.content .about {width: 100%; color: #ffffff; padding-bottom: 4px; padding-top: 4px; font-weight: 500; text-align: center; font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times; }
.about .pic {width: 43%; height: 100%; float: left; text-align: center;}
.about .bio {width: 53%; height: 100%; float: right; font-size: 12pt;}
.bio .name {font-size: 14pt; }
.bio .title {font-size: 12pt; font-style: italic;}
.content h2 {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 4px;
	padding: 6px 0 4px;
}
.content .testimonial {width: 100%; color: #CCC; padding-bottom: 5px; padding-top: 10px; margin-left: 10px; margin-right: 20px;}
.testimonial .name{
	font-family: "Monotype Corsiva",Verdana,sans-serif,Times;
	font-size: 14pt;
}
.testimonial .description{
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;
	font-size: 12pt;
}	
.testimonial .customer{
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;
	font-size: 12pt;
}
.testimonial .title{
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;
	font-size: 12pt;
}
.content .sites {width: 100%; color: #CCC; padding-bottom: 5px; padding-top: 5px; margin-right: 5px;}
.sites img {vertical-align: middle; padding-top: 5px; padding-right: 3px;}
.sites .title{
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;
	font-size: 12pt;
	color: blue;
	font-weight: 600;
	letter-spacing: 2px;
}
.sites .description{
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;
	margin-top: 5px;
	font-size: 12pt;
	padding-left: 15px;
}	
.sites .link{
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;
	font-size: 12pt;
	padding-left: 15px;	
}
.content .capability {color: #ffffff; font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times; }	
.capability img {padding-top: 10px; }
.capability .desc {padding-left: 20px; padding-right: 20px; font-size: 14pt;}
/* standard elements */
* {
	margin: 0;
	padding: 0;
}

a {text-decoration: none;}

p {
	font-size: 1.2em;
	padding-bottom: 1.2em;
}

ul { font-size: 1.2em; }

blockquote{
	font-weight: normal;
	color: #777;
	font-size: 1em; 
	padding-left: 15px;
	padding-right: 15px;
	font-family: georgia,sans-serif,arial,times;}

code {
	background: #444;
	display: block;
	font-size: 12px;
	margin: 0 10px 12px;
	overflow: auto;
	padding: 8px 10px;
	white-space: pre;
}

img {border: none;}


h1 {font: normal 2.4em sans-serif;}
h2 {
	font: bold 1.6em Verdana,sans-serif;
	padding-bottom: 4px;
}

/* header */
.header {
	background: #111;
	border-bottom: 1px solid #333;
	font: normal 2em sans-serif;
	vertical-align: top;
	height: 200px;
}
.header a {
	color: #888;
	display: block;
	line-height: 120px;
	text-decoration: none;
	width: 100%;
}
.header span {padding-left: 32px;}
.header a:hover {
	background: #191919;
	color: #BBB;
}

/* footer */
.footer {
	background-color: #303030;
	border-top: 1px solid #444;
	color: #999;
	padding: 3% 3% 1%;
}
.footer ul {
	border-top: 1px solid #262626;
	margin: 0;
}
.footer li {
	border-bottom: 1px solid #262626;
	list-style: none;
}
.footer li a {
	display: block;
	line-height: 2em;
	padding-left: 4%;
	width: 96%;
}
.footer a {color: #666;}
.footer a:hover {
	color: #BBB;
	background: #222;
}

.col3,.col3center {
	float: left;
	width: 31%;
}
.col3center {margin: 0 3%;}

/* bottom */
.bottom {
	color: #666;
	clear: both;
	font-size: 1.1em;
}
.bottom a {color: #888;}

/* content elements */
.content h1 {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}
.content a {
	color: #999;
	text-decoration: underline;
}
.content a:hover {color: #CCC;}
.content .descr {margin-bottom: 5px;}

.content .header {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	font-size: 1.4em;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}

.content .header1 {
	background: url(img/bgh1.gif) repeat-x left bottom;
	color: #EEE;
	font-size: 1.4em;
	margin-bottom: 10px;
	padding: 6px 0 4px;
}
/* navigation */
.nav {background: #191919 url(img/nav.gif);}
.nav a {
	background: #191919 url(img/nav.gif);
	border-right: 1px solid #161616;
	color: #CCC;
	float: left;
	font: bold 1em Verdana,sans-serif;
	line-height: 31px;
	padding: 0 20px;
}
.nav a:hover {
	background: #191919 url(img/nav_hover.gif);
}
.header1 {width:800px; font-family: Verdana,sans-serif,arial; font-size: 1em; vertical-align:top; text-align:left;}
.header1-menu {width:800px; height:31px;  color:#CCC; font-size:1.0em; background: #191919 url(img/nav.gif); }

.nav2 {float:left; width:800px; border:none; background: #191919 url(img/nav.gif) repeat x; } /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none; }
.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #333;}
.nav2 ul li ul {display:none; border:none;}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; text-align: left; background: #191919 url(img/nav.gif);  line-height:31px; padding: 0 20px; text-decoration:none; color: #CCC;}
.nav2 ul li:hover {width:auto;}

/*Non-IE6*/
.nav2 ul li:hover a {background-color: #454545 url(img/nav_hover.gif); color:#CC0000; text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:0.05em; left:0; width:11.0em;}
.nav2 ul li:hover ul li ul {display: none;}
.nav2 ul li:hover ul li a {display:block; width:11em; color:#CCC; height:auto; line-height:16px; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); border-right: solid 1px rgb(175,175,175); text-align:left; }
.nav2 ul li:hover ul li a:hover {background: #191919 url(img/nav_hover.gif); color:#CC0000; text-decoration:none;} /*Color subcells hovering mode*/

/*IE6*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {background-color:#454545; color:#CC0000; text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; position:absolute;z-index:999; top:31px; t\op:30px; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; w\idth:11em; height:1px; color:#CCC; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); border-right: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}
.nav2 ul li a:hover ul li a:hover {background-color:#454545; color:#CCC; text-decoration:none;} /*Color subcells hovering mode*/

/* video display elements	*/
.video_thumb_home {
	padding-bottom: 5px;
	margin-bottom: 5px;
	text-align: center;
	width: 100%;
	height: 130px;
	background: url(img/bgh1.gif) repeat-x left bottom;
	font-family: arial,sans-serif,georgia,arial;	
}
.video_thumb_home img {border: 2px solid #333; padding: 1px; }
.video_thumb {
	padding-bottom: 5px;
	margin-bottom: 5px;
	height: 130px;
	background: url(img/bgh1.gif) repeat-x left bottom;
	font-family: arial,sans-serif,georgia,arial;	
}
.video_thumb .left {width: 25%; height: 100%; background-color: #191919;}
.video_thumb .right {width: 75%; height: 100%; background-color: #191919;}
.video_thumb img {border: 2px solid #333; padding: 1px; }
.video {
	padding-bottom: 5px;
	margin-bottom: 10px;
	background: url(img/bgh1.gif) repeat-x left bottom;
	font-family: arial,sans-serif,georgia,arial;
}
.video .left {width: 75%; height: 100%; background-color: #191919;}
.video .right {width: 25%; height: 100%; background-color: #191919;}
.videotitle {
	font-size: 1.2em;
	font-weight: 700;
	padding-bottom: 3px;
}
.videodesc {
	font-size: 1em;
	font-weight: 500;
	font-family: sans-serif,verdana,times;
}
/* photo elements */
.photo_thumb {
	padding: 5px;
	margin-bottom: 5px;
	font-family: arial,sans-serif,georgia,arial;	
}
.photo_thumb img {border: 2px solid #333; padding: 1px; }
.phototitle {
	font-size: 1.2em;
	font-weight: 700;
	padding-bottom: 3px;
	color: #ffffff; 
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;	
}
.photodesc {
	font-size: 1em;
	font-weight: 500;
	color: #ffffff; 
	font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;	
}
/* sub-navigation */
.subnav {
	background-color: #191919;
	border: 1px solid #1E1E1E;
	border-top-color: #444;	
	padding: 12px;
	overflow:hidden /*IE6*/;
}
.subnav h1 {padding-top: 8px; text-align: center; }
.subnav ul {margin: 0;}
.subnav li {
	background: url(img/li.gif) no-repeat left bottom;
	list-style: none;
	margin: 0;
}
.subnav li a {
	color: #777;
	line-height: 2.4em;
	padding-left: 18px;
	text-decoration: none;
}
.subnav li a:hover {color: #BBB;}

/* misc */
.red_button {background-color: #CC3300; font-size: 10pt; font-weight: 700; padding: 2px 2px 2px 2px; cursor: pointer;} 
.music_text {color:#CC0000; font-size: 1em; font-weight: 600; font-family: "Copperplate Gothic",Helvetica,Verdana,Arial,Times;}
.clearer {clear: both; background-color: #191919;}
.stripes {
	background: #333 url(img/stripe.gif);
	height: 6px;
}
.left {float: left;}
.right {float: right;}
.contactform {width:95%; margin:2.0em 0 2.0em 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:#606060;}
.contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;  background-color:#606060;}
.contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.button { width:9.0em; margin-right:20px; padding:0px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}
.contactInfo {margin-top: 2em; padding-left: 5px;}