/* 	Shane Seminole Mielke
	Layout CSS
*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Body - General Layout Structure	
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
	margin: 0px;
	padding:0px;
	background-color: #945101;
	font-family: Verdana, Arial, geneva, sans-serif;
	font-size: 9px;
	color: #000000;
	text-align: center;
	background-image: url(/graphics_06/bg_wood.jpg);
	/*background-repeat: repeat-x; */
	}	

img {
	border: 0px;
	padding: 0px;
	border-style: none;
	}

A {font-size: 10px;}
A:link {color: #006699; font-weight: bold; text-decoration: none;}
A:active {color:#006699; font-weight: bold; text-decoration: none;}
A:visited {color: #006699; font-weight: bold; text-decoration: none;}
A:hover {color: #FFFFFF; font-weight: bold; text-decoration: none; background-color: #006699;}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CONTAINER ELEMENTS
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#fHeader {
	float:none;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:100%;
	}
	#mHeader,
	#mFooter {
		display: none;
		}

#fFooter {
	float:none;
	margin: 30px auto 0px auto;
	text-align:center;
	width:460px;
	}

#wrapper {
	float:none;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:980px;
	}

	#sideNav {
		float:left;
		}
	#sideNavMenu {
		position:absolute;
		width:215px;
		z-index:1;
		}
	
	#sideContent {
		width: 760px;
		padding: 0px;
		float: right;
		}
	
	.pContainer {
		margin: 0px 0px 0px 0px;
		padding: 10px 10px 0px 10px;
		background-color: #e8e8e8;
		/*
		*/
		float: none;
		vertical-align:top;
		text-align: left;
		font-family: Verdana, Arial, geneva, sans-serif;
		font-size: 9px;
		width: 750px;
		voice-family: "\"}\""; 
		voice-family: inherit;
		width: 730px;
		
		-moz-border-radius: 5px;
		border-radius: 5px;
		
		/*
		background-image: url(/graphics_06/tab_bottom.png), url(/graphics_06/tab_top.png);
		background-repeat: no-repeat, no-repeat;
		background-size: cover, auto;
		background-position: 0px 50px, 0px 0px;
		background-color: transparent;
		*/
		}
		
	.pBox {
		width: 730px;
		overflow: hidden;
		}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PROJECT ELEMENTS	
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
	.pHeader {
		margin: 10px 0px 0px 0px;
		padding: 0px;
		width: 480px;
		height: 40px;
		overflow: hidden;
		}
	
		.pMetainfo {
			display: block;
			margin: 5px 0px 0px 0px;
			padding: 0px;
			font: 10px pragmatica-web-condensed, FontSiteSansBoldCondensed, Verdana, Helvetica, Arial, sans-serif;
			font-weight: 400;
			text-transform:uppercase;
			letter-spacing: 1px;
			color: #a2a2a2;
			}
		.pName {
			display: block;
			margin: -5px 0px 0px 0px;
			padding: 0px;
			font: 17px pragmatica-web-condensed, FontSiteSansBoldCondensed, Verdana, Helvetica, Arial, sans-serif;
			font-weight: 900;
			text-transform:uppercase;
			color: #5d5d5d;
			}
	.pDate {
		margin: 0px;
		padding: 30px 0px 0px 0px;
		float: right;
		color: #999999;
		text-align: right;
		}
	
	.pImage {
		margin: 0px;
		padding: 10px;
		background-color: #d0d0d0;
		line-height: 0;
		
		-moz-border-radius: 5px;
		border-radius: 5px;
		}
	
		.pInterview {
		margin: 0px 0px 10px 0px;
		padding: 10px;
		background-color: #d0d0d0;
		
		-moz-border-radius: 5px;
		border-radius: 5px;
		}
	
	.pContent {
		margin: 0px 0px 10px 0px;
		padding: 10px;
		background-color: #D0D0D0;
		/* box model hack */
		width: 730px;
		voice-family: "\"}\""; 
		voice-family: inherit;
		width: 710px;
		
		-moz-border-radius: 5px;
		border-radius: 5px;
		}
		
	.pFeature {
		margin: 0px 0px 10px 0px;
		padding: 0px;
		background-color: #000000;
		width: 730px;
		height: 230px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		overflow: hidden;
		}
	
	.pText {
		margin: 0px;
		padding: 0px;
		text-align: left;
		color: #000000;
		/* box model hack */
		voice-family: "\"}\""; 
		voice-family: inherit;
		width: 710px;
		}
	
	.pIcon {
		margin: 10px 0px 0px 0px;
		padding: 0px;
		float: left;
		width: 100px;
		}
	
	.pRole {
		margin: 10px 210px 0px 110px;
		padding: 0px;
		color: #666666;
		}
	
	.pLinks {
		margin: 10px 0px 0px 0px;
		padding: 0px;
		float: right;
		color: #666666;
		/* box model hack */
		width: 180px;
		voice-family: "\"}\""; 
		voice-family: inherit;
		width: 170px;
		}
	
	.dotSpacer {color: #D0D0D0}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	THUMBNAIL GRID ELEMENTS	
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


	.pGrid {
		border-spacing: 0px;
		border-collapse: collapse;
		overflow: auto;
		width: 740px;
		}
	
	.pGrid div {
		margin: 0px 10px 20px 0px;
		padding: 10px 10px 20px 10px;
		text-align: left;
		background-color: #d0d0d0;
		font-family: Verdana, Arial, geneva, sans-serif;
		font-size: 9px;
		color: #000000;
		float: left;
		/* box model hack */
		width: 175px;
		voice-family: "\"}\""; 
		voice-family: inherit;
		width: 155px;
		
		-moz-border-radius: 5px;
		border-radius: 5px;
		}
	
	.pGrid div img {
		border: 0px;
		padding: 0px;
		}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BOLDED NON-LINKED ELEMENTS
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
   
	.pTitle {
		font-size: 10px;
		font-weight: bold;
		color: #000000;
		}
			
	ul,li {
		list-style: none;
		margin-left: 0;
		padding-left: 1em;
		text-indent: -1em;
		}
		
		li {
			margin-left: 0;
			padding-left: 0;
			list-style-position:outside;
			}
			li:before { content: "- " };
	

		ul {
			display: block;
			}
				
			.imgBooks,
			.imgMagazines {
				display: block;
				margin: 0px 0px 0px -25px;
				float: right;
			}
			
			
/**********************************************************************************
TABLET
**********************************************************************************/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	html body{
		}
}		
				

/**********************************************************************************
IPHONE
**********************************************************************************/
@media screen and (max-device-width: 480px) {
	html {
		width: 480px;
		-webkit-text-size-adjust:none;
		}
	html body{
		background-color: #000;
		background-image: url(/graphics_06/bg_mobile.jpg);
		height: 100%;
		}
		
	/**********************************************************************************
	CONTENT AREA
	**********************************************************************************/
	#sideNav,
	#fHeader {
		display: none;
		}
	#mHeader {
		display: block;
		width: 100%;
		height: 120px;
		margin: 0px;
		font: 18px pragmatica-web-condensed, FontSiteSansBoldCondensed, Verdana, Helvetica, Arial, sans-serif;
		font-weight: 400;
		text-transform:uppercase;
		letter-spacing: 2px;
		color: #666666;
		position:fixed;
		top:0;
		z-index:55;
		background: transparent url(/graphics_06/header_mobile.png) no-repeat 0 0;
		}
		
		#mLogo {
			display: block;
			float: left;
			margin: 0px;
			}
			#mLogo a {
				display: block;
				width: 125px;
				height: 80px;
				text-indent: -9999px;
				}
		#mNav {
			display: block;
			width: 320px;
			float: right;
			text-align: left;
			margin: 20px 15px 0px 0px;
			}
		#mNav a {
			font: 24px pragmatica-web-condensed, FontSiteSansBoldCondensed, Verdana, Helvetica, Arial, sans-serif;
			font-weight: 400;
			text-transform:uppercase;
			letter-spacing: 1px;
			color: #0099ff;
			color: #fff;
			margin: 10px;
			}
	#mFooter {
		display: block;
		width: 100%;
		height: 120px;
		margin: 0px;
		position:fixed;
		top: 507px;
		z-index:12;
		background: transparent url(/graphics_06/footer_mobile.png) no-repeat 0 0;
		}
		
		#iconEmail {
			margin: 60px 0px 0px 10px;
			padding: 0px;
			float: left;
			text-indent: -9999px;
			background: transparent url(/graphics_06/icon_email.png) no-repeat 0 0;
			}
			
		#iconTop {
			margin: 70px 0px 0px 130px;
			padding: 0px;
			float: left;
			text-indent: -9999px;
			background: transparent url(/graphics_06/icon_backtotop.png) no-repeat 0 0;
			opacity: 0;
			}
			
		#iconTwitter {
			margin: 60px 10px 0px 0px;
			padding: 0px;
			float: right;
			text-indent: -9999px;
			background: transparent url(/graphics_06/icon_twitter.png) no-repeat 0 0;
			}
			
		#iconTwitter a,
		#iconEmail a{
			display: block;
			width: 75px;
			height: 50px;
			}
		#iconTop a{
			display: block;
			width: 50px;
			height: 50px;
			}
			
		#mNav a,
		#mLogo a,
		#iconTwitter a:hover ,
		#iconEmail a:hover, 
		#iconTop a:hover {
			background-color: transparent;
			}
			
		
	#wrapper {
		width:480px;
		float: none;
		margin: 100px 0px 0px 0px;
		}
		
		#sideContent {
			width: 480px;
			float: none;
			margin: 0px;
			padding: 0px;
			}
			.pContainer {
				width: 440px;
				float: none;
				margin: 0px auto 0px auto;
				
				-moz-border-radius: 5px;
				border-radius: 5px;
				
				/*
				background-image: url(/graphics_06/tab_bottom.png), url(/graphics_06/tab_top-mobile.png);
				*/
				}	
				.pBox {
					width: 440px;
					}
					
				.pHeader {
					margin: 0px;
					padding: 0px;
					width: 325px;
					height: auto;
					overflow: hidden;
					}
					.pMetainfo {
						margin: 0px;
						}
					.pName {
						/*line-height: 2;*/
						height: 26px;
						overflow: hidden;
						}
					
					.pDate {
						padding: 15px 0px 0px 0px;
						font-size: 11px;
						overflow: auto;
						}
					.pRole {
						margin-bottom: 10px;
						}
					.pLinks {
						width: 125px;
						font-size: 11px;
						}
					.pRole {
						width: 200px;
						font-size: 11px;
						}
						
					
				.pShadow {
					width: 440px;
					}
			.pGrid {
				width: 450px;
				}
			.pGrid div {
				width: 195px;
				}
			
			.pGrid div img {
				width: 195px;
				border: 0px;
				padding: 0px;
				}
	.pText,
	.pContent {
		width: 420px;
		}
		.pContent .clients,
		.pImage img {
			width: 420px;
			}
			
			.pdficon {
				width: 10px;
			}
			.imgBooks,
			.imgMagazines {
				width: 350px;
				margin-left: 25px;
				float: none;
			}
			
	#fFooter {
		margin: 0px auto 0px auto;
		}
		
		html body,
		.pContainer,
		.pGrid div,
		.pGrid div a,
		.pText a,
		A {font-size: 12px;}
}