@charset "UTF-8";
/* CSS Document */
/*******************************************************/
/* Painting with Vertices 
/* design & code by Toyo (c) 2010
/*******************************************************/

/*******************************************************
use to troubleshoot
*******************************************************/
/*div {border:solid 1px red;}
span {border:solid 1px red;}*/
/*******************************************************/

html,
body {
	margin:0;
	padding:0;
	height:100%;
	font-family: 'Droid Sans', arial, serif;
	background: #1d1d1d;
	color:#999999;
	background-image:url(images/side.gif);
	background-position:left;
	background-repeat:repeat-y;
}
		
/* -------------- classes for different background styles --------------- */

.bg1 { background: url(images/side.gif) repeat-y; background-color: #FFF; color:#333;}
.bg2 { background: url(images/side.gif) repeat-y; background-color: #CCC; color:#000;}
.bg3 { background: url(images/side.gif) repeat-y; background-color: #1d1d1d; color:#BBB;}
.bg4 { background: url(images/side.gif) repeat-y; background-color: #000; color:#BBB;}

/* ---------------------------------------------------------------------- */

#outer_wrapper {
	width:100%;
	height:100%;
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	/*float:left;	*/	/* width of whole page */
	overflow:visible;
}

#container {
	width: 100%;
	min-width:960px;
	text-align:right;
}

/* ---------------------------------------------------------------------- */

#header {  }
ul#icons { margin:0px 0px 0px 0px; }
ul#icons li { list-style: none; }
ul#icons li.zero { float:right; font-size:10px; color:#666666; margin:2px 5px 0px 0px; }
ul#icons li.one { float:right; margin:0px 5px 0px 0px;}
ul#icons li.two { float:right; margin:0px 5px 0px 0px;}
ul#icons li.three { float:right; margin:0px 5px 0px 0px;}
ul#icons li.four { float:right; margin:0px 5px 0px 0px;}
.boxColor1 { width:10px; height:10px; border:solid 1px #666; background-color:#FFF;}
.boxColor2 { width:10px; height:10px; border:solid 1px #FFF; background-color:#CCC;}
.boxColor3 { width:10px; height:10px; border:solid 1px #FFF; background-color:#1d1d1d;}
.boxColor4 { width:10px; height:10px; border:solid 1px #FFF; background-color:#000;}

/* ---------------------------------------------------------------------- */

#main {
	margin-left: 320px;
	text-align:center;
}

#mainInside{
	max-width:700px;
	margin: 20px auto;
	text-align:left;
}

#main .headline1{ font-size:24px; text-transform:uppercase; margin:70px 0px 0px 0px;}
#main .headline2{ font-size:18px; margin:35px 0px 0px 0px;}
#main p{ font-size:12px; line-height:18px;}
#main .buffer{ height:30px; max-width:700px;}
#main  a { text-decoration:underline; background-color:#1d1d1d; color:#FFF; padding:4px; }
#main  a:hover { text-decoration:none; background-color:#036;  color:#FFF;  padding:4px;}


#videoWrapper{
/*640x360*/
	margin:20px 0px 0px 0px;
	border:solid 1px #333333;
	width:640px;
	height:360px;
}



#main2 {
	margin-left: 320px;
	text-align:center;
}
#main2 .headline1{ font-size:24px; text-transform:uppercase; margin:70px 0px 0px 0px;}
#main2 .headline2{ font-size:18px; margin:35px 0px 0px 0px;}
#main2 p{ font-size:12px; line-height:18px;}
#main2 .buffer{ height:30px; max-width:700px;}


/* ---------------------------------------------------------------------- */

#navigationBox {
	width: 300px;
	float: left;
	margin:0px 0px 0px 20px;
	text-align:left;
}

#Title 	
{ 
	font-family: 'Josefin Sans Std Light', arial, serif;
	font-size:32px;
	margin:20px 0px 0px 5px;
}

#Title .color1{color:#3366cc;}
#Title .color2{}

#Title2A
{ 
	font-family: 'Josefin Sans Std Light', arial, serif;
	font-size:16px;
	margin:5px 0px 0px 5px;
	
}
#Title2B
{ 
	font-family: 'Josefin Sans Std Light', arial, serif;
	font-size:16px;
	margin:5px 0px 0px 5px;
	color:#3366cc;
}
#hide {
	position:absolute;
	top: 0px;
	left:-50px;
}

ul#sliding-navigation
{
	list-style: none;
	font-size: 14px;
	margin: 30px 0px 0px 0px;
	padding: 0;
}

ul#sliding-navigation li.sliding-element h4,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 175px;
	padding: 5px 20px;
	margin: 0;
	margin-bottom: 5px;
	font-size: 14px;
}

ul#sliding-navigation li.sliding-element h4
{
	width: 185px;
	color: #fff; 
	background:#036 repeat-y;
	border: 1px solid #999;
	border-left:none;
}

ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#333  repeat-y;
	border: 1px solid #1a1a1a;
	border-left:none;
	text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { 
	color: #fff; 
	background:#036 repeat-y;
	border: 1px solid #999;
	border-left:none;
}

/* ---------------------------------------------------------------------- */

#footer {
	position: absolute; /* Needed for Safari */
	width:100%;
	min-width:760px;
	height:100px;   
	background-color:#000000;
	background-image:url(images/footerBG.gif);
	background-repeat:repeat;
	
}
/*body>div#footer{ position: fixed; }*/

.footer1 {margin:20px 20px 0px 20px; float:left;}
.footer2 {float:left; color:#FFF; line-height:16px; font-size:10px; margin:20px 0px 0px 0px; height:60px;}
.footer3 {float:right; color:#999; line-height:16px; font-size:10px; margin:20px 10px 0px 0px; height:60px; text-align:right;}
.footer2 a { text-decoration:underline; color:#FFF; }
.footer3 a { text-decoration:underline; color:#999; }
#footer a:hover { text-decoration:none; background-color:#036;  color:#FFF; }