/* 	###################
	## Main Sections ##
	###################*/
html {
	background-color:#000;
	height:100%;
	padding:0px;
	background:url('bg.jpg');
}
a, a:visited, a:active{
	color:white;
	transition: color 1s linear;
	-webkit-transition: color 1s linear; -moz-transition: color 1s linear; -o-transition:color 1s linear;
}
a:hover{
	color:lightblue;
}

a.main, a.main:visited, a.main:active{
	display:block;
	position:relative;
	width:140px;
	height:40px;
	padding-top:23%;
	border: solid 1px #eee;
	border-radius: 0px 15px 0px 0px;
		-webkit-border-radius:0px 15px 0px 0px; -moz-border-radius:0px 15px 0px 0px; -o-border-radius:0px 15px 0px 0px;
	background-image:url('linkStill.jpg');
	background-position: 0px 0;
	text-decoration:none;
	text-align:center;
	font-size:x-large;
	font-weight:bold;
	text-transform:uppercase;
	transition: transform 1s linear, box-shadow 1s ease-in-out, color 3s linear;
		-webkit-transition: -webkit-transform 1s linear, -webkit-box-shadow 1s ease-in-out, color 3s linear;
		-moz-transition: -moz-transform 1s linear, -moz-box-shadow 1s ease-in-out, color 3s linear;
		-o-transition: -o-transform 1s linear, color 3s linear;
}
a.main:hover{
	background-position: -160px 0;
	transform: translate(12px) scale(1.1);
		-webkit-transform: translate(12px) scale(1.1); -moz-transform: translate(12px) scale(1.1); -o-transform: translate(12px) scale(1.1) ; 
	box-shadow: 0px 0px 10px 3px #fff;
		-webkit-box-shadow: 0px 0px 10px 3px #fff; -moz-box-shadow: 0px 0px 10px 3px #fff; 
}
/*fancy banner look*/
a.main{
	text-shadow: -3px 2px 3px rgba(0,0,0,1);
}
.about:hover{
	background-image:url('images/about.jpg');
}
.portfolio:hover{
	background-image:url('images/portfolio.jpg');
}
.service:hover{
	background-image:url('images/service.jpg');
}
.voice:hover{
	background-image:url('images/voice.jpg');
}

body{
	color:#000;
	padding:0px;
	margin:auto 0px;
	font-family: Menlo, monospace;
	height:100%;
	min-width:800px;
}
article, section, aside, hgroup, nav, header,footer, figure, figcaption {
  display: block;
}
p{
	position:relative;
	text-align:left;
	text-indent:2em;
	padding:5px;
	background-color:#000; /*ie*/
	background-color:rgba(0,0,0,.87);
	opacity:.87;
	color:#ccc;
	border:solid 1px rgba(200,200,200,.3);
	margin-right:10px;
	margin-left:10px;
	border-radius: 15px;
		-webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;
	transition: background-color 1.5s linear, opacity 1.5s linear, color 1.5s linear, border-color 1.5s linear;
		-webkit-transition:background-color 1.5s linear, opacity 1.5s linear, color 1.5s linear, border-color 1.5s linear;
		-moz-transition:background-color 1.5s linear, opacity 1.5s linear, color 1.5s linear, border-color 1.5s linear;
		-o-transition:background-color 1.5s linear, opacity 1.5s linear, color 1.5s linear, border-color 1.5s linear;
}
p:hover{
	background-color:rgba(0,0,0,1);
	opacity:1;
	color:#fff;
	border-color:#fff;
}

/* 	###############
	## Main Classes ##
	###############*/
.left, .center, .right{
	position:relative;
	float:left;
}
.left, .right{
	width:150px;
	height:100%;
	min-width:190px;
	color:lightgreen;
	height:100%;
	position:fixed;
	background-color:rgba(0,0,0,.8);
}
.center{
	position:absolute;
	left:190px; right:0px;
	top:0px; bottom:0px;
	min-width:380px;
	padding:0px;
	z-index:4;
}
.center .content{
	width:100%;
	color:#fff;
	padding-bottom:60px;
}
.center footer{
	background-color:#ccc;
	border-top:solid 1px #000;
	position:fixed;
	bottom:0px;
	left:0px; right:0px;
	opacity:.9;
	width:100%;
	text-align:center;
	font-size:9pt;
}
.center footer:hover{
	opacity:1;
	-webkit-transition: opacity 1s linear;
}
.center h1{
	width:100%;
	text-align:center;
	color:lightblue;
}
.center h1.img{
}
.center h2{
	width:100%;
	text-align:center;
	color:lightblue;
}

.left{
	left:0px;
	/* fallback image  
	background: rgba(0,0,0,.8) url('fallback-gradient-left.png') repeat-y; */
	background-position:right; 
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, right top, left top, from(#ccc), to(rgba(0,0,0,.8)), color-stop(.2, rgba(0,0,0,.8)));
	background: -o-gradient(linear, right top, left top, from(#ccc), to(rgba(0,0,0,.8)), color-stop(.2, rgba(0,0,0,.8)));
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(left center, rgb(0,0,0) 75%, rgb(204,204,204) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF000000, endColorStr=#FFFFFFFF, GradientType=1);
	z-index:2;
}
.right{
	right:0px;
	text-align:right;
	/* fallback image  
	background: rgba(0,0,0,.8) url('fallback-gradient.png') repeat-y;  */
	/* For WebKit (Safari, Google Chrome etc) */
	background: -webkit-gradient(linear, left top, right top, from(#ccc), to(rgba(0,0,0,.8)), color-stop(.2, rgba(0,0,0,.8)));
	background: -o-gradient(linear, right top, left top, from(rgba(0,0,0,.8)), to(#ccc), color-stop(.2, rgba(0,0,0,.8)));
	/* For Mozilla/Gecko (Firefox etc) */
	background: -moz-linear-gradient(left center, rgb(204,0,0) 25%, rgb(0,0,0) 100%;
	/* For Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFFFF, endColorStr=#FF000000, GradientType=1);
	z-index:1;
}

.right .content, .left .content{
	min-height:85%;
}
.leftbottom, .rightbottom{
	position:relative;
	width:100%;
	height:100px;
	/* fallback image
	background-image: url(images/fallback-gradient.gif);  */
	/*go from transparent black, to full black*/
	background-image: -webkit-gradient(
		linear, left top, left bottom, from(rgba(0,0,0,0)),
		to(rgba(0,0,0,1)), color-stop(.5,#000)
	);
	/* mozilla example - FF3.6+ */
	background-image: -moz-linear-gradient(
		rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%
	);
	/* approximately a 33% opacity on blue */
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr=#333333, endColorstr=#000000
	);
	/* IE8 uses -ms-filter for whatever reason... */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr=#333333, endColorstr=#000000
	);
}