/*  CSS Layout Document 
    Gary Von Schilling's Portfolio */

* {
  margin:0; padding:0;
}
ul { 
  list-style:none;
}

#page {
	margin-left: 25px;	
	min-width: 47.4em;
}
#content p {
	margin: .6em 0 .6em 0;	
}
h2 {
	margin-top:2px;
	font-size: 16px;
}
	#header{
		margin-left: -2px;
		height: 90px;
		min-width: 670px;
	}
	#conten,  #footer{
		clear: both;
	}
.right {
	float: right;
}
	.right p {
		padding-right: 10px;
		width: 200px;
	}
/*******************************************
*    	Header section 
*/

#header h1{
	float: left;
	height: 70px;
	width: 38%;
	min-width: 250px;
}
	/* Horizontal Navigation */
	#header ul{
		float: left;
		height: 50px;
		overflow: hidden;
		list-style: none;
		margin-top:12px;
		width: 62%;
		min-width: 419px;
	 	background: url('images/bar.gif') repeat-x;
	}
	#header li{
		display:inline; 
	}
	#header li a span{
		float: left;
		display: block;
		padding: 14px;
		height: 22px;
		font-size: 21px;	
	}
	
	#header li span{
		
	}
	#header li span.highlight{
		margin-top:-50px;
	}
	#header li.home a, #header li.home a:hover, #header li.home a:active {
		background: url('images/nav_end.gif') no-repeat;
		position: absolute;
		left: 1.69em;
		height: 50px;
		width: 37%;
		min-width: 290px;
		background-position: 100% 0%;
	}	
	
/*******************************************
*    	Footer section
*/

#footer {
	background: black;
	margin-right: 1.6em;
}
	#footer div{
		float: left;
		padding: 22px 1em .5em 30px;
	}
	
	#footer #copyright{ 
		clear: both;}

/*******************************************
*    	Main Page content
*/
#content div {
	float:left;
	padding:0 1em 1em 30px;

	margin: 0 1.6em 1.6em 0 ;
}


#content #intro {
	width: 50%;	
	
	
	padding-bottom: .6em;
	padding-right:3em;
	margin-right:1.6em;
}
	#intro h2 {
		font-size: 20px;
		line-height: 20px;
		margin-top: 0;	
	}
#content #promotion {
	float:right;
	padding:0;
}
/*******************************************
*    	Page Specific 
*/

#webdesign #content div, #video #content div {
	width: 36em;
}
	
	#webdesign #content div.right, 
	#other #content div.right, #video #content img{
		float:right;
	}
	#webdesign #content p, #other #content p {
		width: 19em;	
	}
	#video #content p {
		width: 21em;
	}
	#webdesign #content img, #other #content img{
		margin-right: 1em;
	}

	#webdesign #content span, #other #content span, #video #content span {
		display:block;
		float: right;
		margin: 1em;
	}
#other #content img {
	margin: .3em 1em;
}

#webdesign #content p, #webdesign #content img, #other #content p, #other #content img, #video #content img, #video #content p
{
	float:left;	
}

#video #content div, div.gallery {
	clear:left;	
}
#video #content img{
	float: right;
}

#other  #content img, #video #content img {
	margin-top:.6em;	
}
/*******************************************
*    	Gallery 
*/

#content div.gallery
{
	margin-top: .8em;
}
	div.gallery li
	{
		float:left;
		margin: 15px;
		width: 100px;
		height: 100px;
	}
	div.gallery img
	{
		border: 1px solid #CCC;
	
	}
	div.gallery h2
	{
		background: url(images/gal_tab.gif) no-repeat;
		background-position:right;
		font-size: 13px;
		padding-left: 20px;
		margin-top: -.86em;
		width: 175px;
		margin-left: -1.2em;
}
	
/*******************************************
*    	Video Player
*/
#video_container
{
	position:absolute;
	z-index:101;
	left:360px;
	top: 90px;
	background: url(images/div_head.gif) #000 repeat-x;
}
	#video_player
	{	
		padding:30px 15px 15px 15px;
	}
 
	a.close 
	{
		background:url(images/close_sprite.gif) top;
		display:block;
		height: 30px;
		width: 50px;
	}
	a.close:hover
	{
		background: url(images/close_sprite.gif) bottom;
		
	}
	a.close span { display:none }

/*#overlay
{
	background-color:#000;
	opacity: .5;
	position:absolute;
	height:100%;
	width:100%;
	z-index:100;
}*/

/*******************************************
*    	Image Gallery


#picture_frame{
	background: url(images/div_head.gif) #000 repeat-x;
	display:none;
	height: 360px;
	left:310px;
	position:absolute;
	top: 90px;
	width:480px;
	z-index:101;
}

#big_picture{
	margin: 45px;	
}*/