/**/
/* style.css : BobbyRoe.com © 2012 */
/**/

body {	
	font: 100% Arial, Helvetica, sans-serif; 
	color:#E0E0E0;
	background: url(images/bg1.jpg) no-repeat center top #202020;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#wrapper {
	width: 994px;
	margin: 15px auto 0;
	padding: 0;
}
#nav { 
	margin-bottom: 10px; 
	height:20px;
}
#header {
	padding:50px 0 0 50px;
	height: 250px;
	background: url(images/bg-head1.png) no-repeat right top #191919;
	background-size:320px 300px;
}
#content {
	width: 660px;
	padding:0 0 0 10px;
	float: left;
}
#content .project { margin:20px 0 20px; }

#sidebar {
	width: 310px;
	padding: 0;
	float: right;
}
/* jQuery Tweets */
#jstwitter {
	padding: 0 10px;
	overflow: hidden;
	font-size: 0.8em;
	color: #B0B0B0;
}
#jstwitter .tweet {
	padding: 0 0 15px 0;
	margin: 0 auto 15px auto;
}
#jstwitter .tweetAlt {
	padding: 0 0 15px 0;
	margin: 0 auto 15px auto;
	color: #E0E0E0;
}
/* /end jQuery Tweets */
#about {
	padding:0 10px;
	margin: 0;
	height:150px;
	clear: both; /* no floating elements on either side of me, thanks */
	background: url(images/BobbyHead2.png) no-repeat 20px top;
}
#footer {
	text-align:right;
	margin: 0;
	color:#808080;
	clear: both;
}
#nav, #footer, #about { padding: 10px; }
/************************************************************************************
CONTENT
*************************************************************************************/
strong { 
	text-transform:uppercase; 
	letter-spacing:1px; 
	font-size:0.85em; 
	font-family: 'Armata', sans-serif; 
	color:#E0E0E0;
}
#header h2 { 
	margin: 0; 
	font-size:1.6em; font-weight:normal; 
	font-family: 'Armata', sans-serif; 
	color:#606060; 
	clear:both;
}
#header img#title { margin:60px 0 0 400px; } /* Bobby Roe image */

#nav ul {
	padding: 0; 
	margin:0;
	list-style:none;
}
#nav li {
	margin:0 1.7em 0 0;
	float:left;
}
#nav li a {
	text-transform:uppercase;  
	text-decoration: none;
	letter-spacing:1px;
	font-size:0.85em; 
	font-family: 'Armata', sans-serif;
	color:#0099FF;
}
#nav li a:hover {
	text-decoration:none;
	color:#0000FF; 
}
#nav li#home a{ color:#00F; }

#content h2#head {
	margin:10px 0 0px 0;
	font-weight:normal;
	font-family: 'Armata', sans-serif; font-size:1.4em; 
	color:#505050;
}

#content .project h4 {
	padding:3px; 
	font-weight: normal;
	font-size:0.8em;
	font-family: 'Armata', sans-serif;   
	display:inline;
	color:#808080;
	background-color: #000;
}
#content .project h2 { 
	margin:10px 0 0 0;
	font-weight:normal; 
	font-size:1.2em; 
	font-family: 'Armata', sans-serif;
	color:#B0B0B0; 
}
#content .project p { 
	margin: 5px 0 10px 0;
	font-size:0.8em;
	color:#909090;
}
#content .project img {
	width:650px;
	height:365px; 
	border:none;
}
#sidebar h2 {
	margin:10px 0 30px 0;
	font-weight:normal;
	font-size:1.6em; 
	font-family: 'Armata', sans-serif; 
	color:#606060; 
}
/* jQuery Tweets */
#jstwitter .tweet a {
	text-decoration: none;
	color: #13c9d0;
}
#jstwitter .tweetAlt a {
	text-decoration: none;
	color: #09F;
}
#jstwitter a:hover { text-decoration: underline; }

#jstwitter .time {
	font-style: italic;
	font-size: 10px;
	color: #666666;
}
/* /end jQuery Tweets */
#about h2 {
	margin: 20px 0 0 120px;
	font-weight:normal;
	font-size:1.6em; 
	font-family: 'Armata', sans-serif; 
	color:#606060; 
}
#about p {
	margin: 10px 0 10px 120px;
	font-size:0.9em;
	color:#B0B0B0; 
}
#about p#foot {
	padding:3px; 
	font-weight: normal;
	font-family: 'Armata', sans-serif; font-size:0.85em; 
	float:right;
	display:inline;
	color:#808080; 
	background-color: #000;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* less than 1024px: iPad Portrait!!! */
@media screen and (max-width: 1023px) {
	
	#wrapper {
		width: 738px;
	}
	#header { 
		padding:50px 0 0 0; 
		background: url(images/bg-head1.png) no-repeat 500px top #191919; 
	}
	#content { width: 465px; }

	#content .project img { 
		width:465px; 
		height:262px;
	}
	#sidebar { width: 250px; }
	/**/
	#header img#title { margin:30px 0 0 280px; } /* Bobby Roe image */
	#header h2 {
		margin:0 0 0 20px;
		font-size:1.5em;
	}
}

/* less than 768px  iPhone Landscape!!! */
@media screen and (max-width: 767px) {

	#wrapper { width: 450px; }

	#header { 
		padding:20px 0 0 0;
		background: url(images/bg-head1.png) no-repeat 275px top  #191919;
	}
	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}
	/**/
	#header img#title { margin:15px 0 0 95px; } /* Bobby Roe image */
	#header h2 { 
		width:250px; 
		margin:0 0 0 20px;
	}
	#content .project img { 
		width:435px; 
		height:245px;
	}
	#content .project p { font-size:0.7em }
}

/* less than 480px  iPhone Portrait!!! */
@media screen and (max-width: 479px) {
	#wrapper { width: 290px; }
	
	#header {
		padding:20px 0 0 10px; 
		height:210px; 
		background:url(images/bg-head1.png) no-repeat 150px 75px  #191919; 
	}
	#content {
		width: auto;
		float: none;
	}
	#sidebar { display: none; }
	/**/
	#nav li { margin:0 0.9em 0 0;}
	#nav li a {
		letter-spacing:1px;
		font-size:0.8em;
	}
	#header h2 {
		margin:0 0 0 15px; 
		font-size:1.3em
	}
	#header img#title { /* Bobby Roe image */
		width:150px;
		margin:0px 0 0 8px;
		height:105px;
	}
	#content .project img { 
		width:280px; 
		height:157px;
	}
	#content .project p { font-size:1em }

}

/* less than 320px ... unused? */
/*
@media screen and (max-width: 319px) {
	#wrapper { width: auto; }
	#nav li { margin:0 0.7em 0 0;}
	#nav li a {font-size:0.71em; letter-spacing:0;}
	#header { height:300px; background: url(images/bg-head1.png) no-repeat 140px 20px; padding:0;}
	#header h2 { width:270px }
	#header img#title { margin:80px 0 0 0;}
	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		display: none;
	}
}
*/		
/* em = size in px / default size in px --> "target / context = result" */