/*  
Theme Name: Objects are People too
Theme URI: http://wordpress.org/
Description: One-page Personal Bio Theme
Version: 1.0
Author: Michael Parler
Author URI: http://michaelparler.com/

	One Page
	 http://michaelparler.com

	This theme was designed and built by Michael Parler,
	who can be found at http://michaelparler.com

*/

/* --- Desktop ---*/

*
{
    margin:			0;
    padding:		0;
}

html
{
	background:					url('images/michaelparler.jpg') no-repeat top center fixed; 
	font-family:				Helvetica, Arial, serif;
 	-webkit-background-size: 	cover;
 	-moz-background-size: 		cover;
 	-o-background-size: 		cover;
 	background-size: 			cover;
}

body
{
    width:			800px;
    margin:			0 auto;
	padding:		50px;
}

div
{
	padding: 		0 0 20px 0;
}

h1
{
    color:			#FFF;
	line-height:	1em;
    font-size:		3em;
    font-weight:	bold;
}

h2
{
    color:			#FFF;
    font-size:		1.5em;
    font-weight:	normal;
    font-style:		italic;
	opacity:		0.7;
    padding:		10px 0 0 0;
	line-height:	1em;
}

h3
{
    border-bottom:	1px solid #DDD;
    color:			#999;
    font-size:		0.8em;
    font-weight:	bold;
	line-height:	2em;
    margin:			0 0 14px 0;
	text-transform:	uppercase;
}

p, ul
{
    color:			#888;
    font-size:		0.8em;
    line-height:	22px;
    margin:			0 0 18px 0;
}

ul
{
	list-style:		square;
	padding:		0 0 0 20px;
}

a					{ color: #555; }

a:hover				{ color: #000 }

img
{
    border:			1px solid #DDD;
    padding:		4px;
}



.left
{
    float:			left;
    width:			540px;
}

.right
{
    float:			right;
    width:			200px;
}


#mast
{
    border-bottom:	3px double #a82f24;
    overflow:		hidden;
    margin:			0 0 40px 0;
	width:			420px;
}

#content
{
	background: 			#FFF;
	opacity:				0.8;
	overflow:				hidden;
	padding:				10px;
	position:				relative;
	width:					400px;
	-webkit-border-radius:	15px;
	-moz-border-radius: 	15px;
	border-radius: 			15px;
}

#nav
{
	font-size:				18px;
	font-weight:			bold;
	list-style:				none;
	margin:					0 0 40px 0;
	padding:				0;
	width:					400px;
	overflow:				hidden;
}

#nav li
{
	color:					#FFF;
	display:				inline;
}

#nav li a
{
	background-size:		35px 35px;
	color:					#FFF;
	height:					35px;
	display:				block;
	float:					left;
	margin:					0 20px 0 0;
	text-indent:			-100000000em;
	width:					35px;
	background-color:		#FFF;
	padding:				10px;
	-webkit-border-radius:	15px;
	-moz-border-radius: 	15px;
	border-radius: 			15px;
}

#nav li a:hover
{
	background-color:		#a82f24;
	opacity:				0.9;
}

#trades
{
	overflow:				hidden;
}

#trades ul
{
	float:					left;
	width:					45%;
}

#link_prpl			{ background: url(images/prpl.svg) center center no-repeat }
#link_linkedin		{ background: url(images/linkedin-rect.svg) center center no-repeat }
#link_twitter		{ background: url(images/twitter-bird.svg) center center no-repeat }
#link_facebook		{ background: url(images/facebook.svg) center center no-repeat }
#link_google		{ background: url(images/googleplus-rect.svg) center center no-repeat }


#footer
{
	color:			#FFF;
    font-size:		0.7em;
    padding:		10px;
	text-align:		center;
	width:			400px;
}

#footer a		{ color: #EEE; }

#footer a:hover	{ color: #FFF; }

#profile-mobile	{display:none; }



/* --- Mobile ---*/


@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	
	html
	{
		background: url('images/michaelparler.jpg') no-repeat top center fixed;
	}

	body
	{
		margin:		0 auto;
		padding:		50px;
	}

	#mast
	{
		margin-bottom:	200px;
	}
	
	#mast, #nav
	{
		width:	100%;
	}
	
	#content
	{
		padding:	30px;
		width:	auto;
	}
	
	h1	{ font-size: 7em; width: 70%}

	h2	{ font-size: 3.2em; line-height: 1.25em; opacity: 1; width: 60%}

	h3, p, dl, ul
	{
		font-size:		3em;
		line-height:	1.5em;
	}

	
	#nav li a
	{
		background-size:		100px 100px;
		height:				80px;
		margin:				0 20px 0 0;
		width:				80px;
		padding:				20px;

	}
	
	#trades ul
	{
		display:	block;
		float:		none;
		margin:		0 0 0 30px;
		width:		auto;
	}
	
	.section
	{
		margin-bottom:	50px;
		position:		relative;
	}

	
	#footer
	{
		color:		#888;
		font-size:		2em;
		padding:		10px;
		width:		auto;
	}

	#footer a
	{
		color:	#888;
	}
	
	
}