html, body {
	background-color: #000;
	color: #fff;
	font-family: verdana, sans-serif, non-serif;
	font-size: 94%;
	margin: 0;
	padding: 0;
	}

/* page divisions */

#topline {
	padding:0;

	text-align: right;
	line-height: 3.5;
	margin:0;
	}
	
p.ieIssue {
	padding: 2px;
	float:right;
	text-align: right;
	height: 100%;
	line-height: 3.5;
	margin:0 1em 0;
	background-color:#000;
	width:34%;
	color:#fff;
	}
	
p.ieIssue a:link,#topline p a:visited  {
text-decoration:underline;
	color:#fff;
	}	
	
p.ieIssue a:hover{color:#67a;}

#decorativeline {
	padding: 0;
	margin:0;
	background: #000 url(/images/t_head.jpg);
}	
	

h1 {
	font-size:220%;
	line-height: 1.2;	
	letter-spacing:1em;	
	border:0;
	padding:0;
	margin:0 0 0 .4em;
	color:#fff;
	text-shadow:2px 2px 2px #d2f8fb;
	font-family: "edding-780-1","edding-780-2",cursive;
	width:50%;
	text-align:left;
	}	

	#visitor  { width:60%;margin:1em auto; padding:1em; overflow-x: hidden;	 }
		#visitor  p { line-height:2; -moz-column-count: 2;
			-moz-column-gap: 2em;
			-webkit-column-count: 2;
			-webkit-column-gap: 2em;
			column-count: 2;
			column-gap: 2em;
			line-height: 1.5em;
			color:#FFFFCC;font-size:88%;margin-bottom:.6em;;
}
	#visitor  p:first-child{
			font-size: 90%;
			font-style: italic;
			-moz-column-count: 1;
			-webkit-column-count: 1;
			column-count: 1;
			letter-spacing: 0.1em;
			color:#FFCC66;
		}
	#visitor  p:first-child:first-line{
			font-weight: bold;
		}
	#visitor p a {  color:#DADADA; text-decoration:underline; }
#menu {
	float: right;
	padding: 0;
	margin: 0 3% 3px 1px;
	background: #486d72;
	border: 2px solid #000;
	width: 16%; 
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 14%;
	}
	

#content {
	padding: 0 0 2px 2px;
	margin: 0 auto;
	width: 76%;
	}	
	
.contentright {
	float: right;
	padding: 0 6px 6px 6px;
	margin: 0 0 0 4px;
	text-align:left;	
	background:#fff;
	color:#000;	
	font-size:85%;		
	width: 62%; 
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 60%;
	}
	
.narr {
	padding: 4px 0 0 8px;
	margin: 4px 0 10px 8px;	
	text-align:left;	
	}
		
img {
	border:0;
	}		
.contentleft {
	padding: 2px 6px 2px 4px;
	margin:  0 8px 8px 6px;	
	width: 32%; 
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 30%;
	}	
#main {
	padding:0;
	margin:0 auto;
	width:96%;
	}	
#footer {
	padding: 0;
	background: #486d72 url(/images/b_head.jpg) repeat-x;
	}
	
/* top line navigation */


	
/* menu navigation */ 

#menu ul {
	padding: 0 4px 0 0;
	margin:0 4px 20px 0;
	font-size:75%;
	}	
#menu li {
	padding:0 6px;
	margin:0 0 6px 4px;
	list-style:none;
	}
		

	
/* content navigation */



/* basic */

image {
	border:0;
	}
	

h2 {
	font-size:140%;
	font-weight: bold;
	border:0;
	padding:0 2px;
	background: #486d72 url(/images/b_head.jpg) repeat-x;
	}
h3 {
	font-size:120%;
	font-weight: bold;
	border:0;
	padding:0;
	margin:0 0 20px 0;
	text-align:center;
	}	
	
.hometext {
	margin:8px 0 0 4px;
	vertical-align:top;
	}	
	
image.home {
	padding: 0 6px 0 0;
	}
	
.initial {
	letter-spacing:2px;	
	}

.pagetitle {
	float:right;
	color:#66ccff;
	padding:4px 20px 0 0;
	margin:0;
	font-size:140%;
	font-weight:bold;
	}
	
.clear {
	clear:both;
	}
	
.right {
	float:right;
	}	
	
#wrapper {width:100%;margin:0px auto;padding:0}


#container {
  background:url(../images/gradient.jpg);
  position:relative;
  width:99%px;
  height:43px;
}

#overlay {
  position:absolute;
  top:0;
  left;0;
   width:99%;
  height:43px;
  background:url(../images/overlay.png);
}


ul.display li {
	width: 80px;
}
ul.display li img{ float:none; }

ul.display li span { display:none; }


ul.other li{ width: 190px;overflow:hidden; }
ul.other li img{ float:left; }
ul.other li span { font-size:64%;color:#fff;display:inline-block;padding:1em .1em .2em;float:left; }
ul.other li.active span { background-color:#4f643b;widht:100%;height:100%; padding-right:.6em;}

a.switch_thumb {
    width: 122px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    display: block;
    background: url(/images/switch.gif) no-repeat;
    outline: none;
    text-indent: -9999px;
	color:#fff;
	margin:2em auto;
}
a.swap { background-position: left bottom;	color:#fff; }
a:hover.other {
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}


#webitect {
	margin: 1em;
	padding: .6em;background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #CCF 10%, #99F 70%);
		background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#CCF), to(#99F));
		-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	-webkit-box-shadow: #284549 .6em .6em .9em;
	-moz-box-shadow: #284549 .9em .9em .9em;
	box-shadow: #284549 .9em .9em .9em;
}

#webitect li {
	margin: 0 0 2em .5em;
	line-height:2;
	font-size: 80%;
		color:#fff;
}

body:nth-of-type(1) #webitect li{
	list-style-type:none;
	padding: 0 0 0 3.2em;
	position:relative;
		color:#fff;
}

body:nth-of-type(1) #webitect li:before{
	/*fill it with a blank space*/
	content:"\00a0";

	/*make it a block element*/
	display: block;
	color:#fff;
	
	/*adding an 8px round border to a 0x0 element creates an 8px circle*/
	border: solid 9px #000;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	height: 0;
	width: 0;

	/*Now position it on the left of the list item, and center it vertically
	(so that it will work with multiple line list-items)*/
	position: absolute;
	left: 7px;
	top: 40%;
	margin-top: -8px;
}


body:nth-of-type(1) #webitect li:after{
	/*Add another block-level blank space*/
	content:"\00a0";
	display:block;
	color:#fff;

	/*Make it a small rectangle so the border will create an L-shape*/
	width: 3px;
	height: 6px; 

	/*Add a white border on the bottom and left, creating that 'L' */
	border: solid #fff;
	border-width: 0 2px 2px 0;

	/*Position it on top of the circle*/
	position:absolute;
	left: 14px;
	top: 40%;
	margin-top: -4px;  

	/*Rotate the L 45 degrees to turn it into a checkmark*/
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);transform: rotate(45deg);
}


.playing {
   width: 20px;
   height: 20px;
   margin: 10px;
   padding: 0;
   background: #6fb2e5;
   box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -o-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -webkit-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   -moz-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
   outline: solid 1px #CCC;
	outline-offset: 1px;

}
/*  http://trentwalton.com/bgclip/   thanks  */

.masked{
background: url(/images/paint.png) repeat, white;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation-name: masked-animation;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
float:left;width:20%;font-size:200%;margin-left:.7em;
}

@-webkit-keyframes masked-animation {
0% {background-position: left bottom;}
100% {background-position: right bottom;}
}


#trans { width:644px;margin:1em auto;background:none;background-image:none; }

#trans p { font-size:80%; margin-bottom:-.2em;text-align:center; }
.images{
	-webkit-transform:scale(0.6);
	-moz-transform:scale(0.6);
	-o-transform:scale(0.6);
	float:left;
	margin-left:-20px;
	margin-right:-20px;
	margin-top:-20px;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	}

.images:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #999;
	-moz-transform:scale(0.8);
	-moz-box-shadow:0px 0px 30px #ccc;	
	-o-transform:scale(0.8);
	-o-box-shadow:0px 0px 30px #ccc;
}	 
.images .layer{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%; 
	opacity:0.4;
	cursor:pointer;
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration:0.5s;
}
#image1:hover .layer{
	width:0%;	
}
#image2:hover .layer{
	
		height:0%;
	z-index:10;
}
#image4:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
}
#image3:hover .layer {
height:0%;	
	margin-top:150px;
}

#image5:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
	-webkit-transform: rotateY(360deg);
}
#image6:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}