@charset "UTF-8";

/*-----  INITIAL STRUCTURE  -----*/
html, body {height: 100%;}

body {
	margin: 0px;
	padding: 0px;
	background-color: #d4d4d4;
	height: 100%;
	font: normal 11px 'Helvetica', Verdana, san-serif;
	line-height: 14px;
	color: #404040;
	min-width: 1025px;	
}

em{
	padding-bottom: 1px;
	border-bottom: 1px dotted #999;
}

#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -244px; /* the bottom margin is the negative value of the footer's height */
}

img {border: none}
a {outline: none}
a:active {
	position:relative;
	top: 1px;
}



.underline{border-bottom: 1px dotted black;}

.clear{
	clear: both;
	display:none;
	width: 100%;	
}
p {line-height: 17px;}

p strong{font: bold 14px 'Helvetica', Verdana, san-serif;}

p span{font: italic 11px 'Helvetica', Verdana, san-serif;}

p a{padding: 3px 3px;
	color: #000;
	text-decoration: none;
	background-color: #cbcbcb;
	margin-left: -3px;
}

p a:hover{background-color: #d7df21;}

.padding{
	padding: 0px;
	margin-top: 30px;	
}

#text{
	float: left;
	width: 555px;
}

#pic{
	padding-left: 30px;
	margin-left: 30px;
	height: 514px;
	width: 333px;
	float: left;
}

#pic img{
	border: 7px solid #999;
}

/*-----  HEADER  -----*/

#header{
	height: 115px;
	width: 100%;
	background: #5b5b5b url('http://ryansimagination.com/imgs/twitterbird.png') no-repeat 900px 10px;
	color: #d4d4d4;
}

#header-left{
	float: left;
	width: 450px;
	padding: 8px 0px 0px 40px;	
}

#header-right{
	float: left;
	margin-left: 190px;	
	width: 100px;
	padding-top: 30px;	
}

#twitter{
	line-height: 17px;
	width: 220px;
	height: 55px;
	position: absolute;
}

#twitter a{
	padding: 3px 3px;
	color: #000;
	text-decoration: none;
	background-color: #cbcbcb;
}

#twitter a:hover{
	background-color: #d7df21;
}

#twitter ul{
	list-style-type: none;
	margin: 0px !important;
	padding: 0px !important;
}



/*-----  FOOTER  -----*/

.footer, .push {
	height: 244px; /* .push must be the same height as .footer */
}


#footer{
	line-height: 30px;
	height: 250px;
	width: 1023px;
	/*background: #999 url('http://ryansimagination.com/imgs/footerroot.gif') no-repeat top left;*/
	float: left;
	position: absolute;
	z-index: 1;
	padding-left: 40px;
}

#footer-repeater{
	height: 250px;
	width: 100%;
	background:#999 url('http://ryansimagination.com/imgs/footerrepeat.gif') repeat-x top;
	float: right;
	position: absolute;
	z-index: 0;
}

#footer ul{
	list-style-type: none;
	margin: 40px 0px 0px 60px;
	padding: 0px;
}

#footer li{
	display: block;
	float: left;
	width: 250px;
	margin: 0px;
	padding: 0px;
}

#footer ul li ul{
	margin: 0;	
}


#footer a{
	padding: 3px 3px;
	color: #ddd;
	text-decoration: none;
	margin-top: 5px;
}

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


#copyright{
	color: #fff;
	position: absolute;
	bottom: 0px;
	left: 40px;
}

	#footer-phone		{background: url('http://ryansimagination.com/threespot-images/footer-phone.png') no-repeat top left;}
	#footer-email		{background: url('http://ryansimagination.com/threespot-images/footer-email.png') no-repeat top left;}
	#footer-skype		{background: url('http://ryansimagination.com/threespot-images/footer-skype.png') no-repeat top left;}
	#footer-aim			{background: url('http://ryansimagination.com/threespot-images/footer-aim.png') no-repeat top left;}
	#footer-dribbble	{background: url('http://ryansimagination.com/threespot-images/footer-dribbble.png') no-repeat top left;}
	#footer-twitter		{background: url('http://ryansimagination.com/threespot-images/footer-twitter.png') no-repeat top left;}
	#footer-linkedin	{background: url('http://ryansimagination.com/threespot-images/footer-linkedin.png') no-repeat top left;}
	#footer-facebook	{background: url('http://ryansimagination.com/threespot-images/footer-facebook.png') no-repeat top left;}
	
	.leftcontact {
			float:left;
			width: 200px;
		}
		
		.rightcontact {
			float:left;
			margin-left: 40px;
			width: 200px;
		}
		
			#footer span{
		display: inline;
		width: 50px;
		padding-left: 30px;
	}


/*-----  BODY  -----*/
#content{
	padding: 33px 0px 0px 40px;
	background-color: #d4d4d4;
	overflow: hidden;
}

.blurbholder{
	height: 185px;
	background-image: url('http://ryansimagination.com/images/bgnd-pattern.jpg');			
}

#blurb{
	margin: 0px 0px 0px 40px;
	height: 185px;
}

.blurbhome{
	background: url('http://ryansimagination.com/imgs/blurbhome.png') no-repeat center left;
}

.blurbabout{
	background: url('http://ryansimagination.com/imgs/blurbabout.png') no-repeat center left;
}

.blurbthanks{
	background: url('http://ryansimagination.com/imgs/blurbthanks.png') no-repeat center left;
}

.blurbportfolio{
	background: url('http://ryansimagination.com/imgs/blurbportfolio.png') no-repeat center left;
}

.blurbjournal{
	background: url('http://ryansimagination.com/imgs/blurbjournal.png') no-repeat center left;
}

/*-----  NAVIGATION  -----*/
#links{
	font: normal 12px 'Helvetica', verdana, sans-serif;
	color: #fff;
	padding-top: 5px;
}

#links ul{
	text-decoration: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#links li{
	display: inline;
	height: 25px;
	margin: 0px;
}


#links li a{
	padding: 3px 3px;
	color: #fff;
	text-decoration: none;
}

#links li a:hover{
	color: #000;
	background-color: #d7df21;
}

/*-----  HEADINGS  -----*/
h1 {
	color: #404041;
	clear: both;
	font: bold 20px 'Helvetica', verdana, san-serif;
}


h2 {
	color: #404041;
	clear: both;
	font: normal 30px 'Helvetica', verdana, san-serif;
}

h3{
	font: normal 14px 'Helvetica', verdana, san-serif;
	color: #fff;
}

h4{
	border-bottom: 1px solid #404041;
	font: normal 14px 'Helvetica', verdana, san-serif;
	color: #404041;
	width: 100%;
}


h5 {
	color: #404041;
	clear: both;
	font: normal 20px 'Helvetica', verdana, san-serif;
}

/*-----  HOME  -----*/

#feature{
	float: left;
}

#random{
	float: left;
	margin-left: 20px;
	width: 300px;	
}

#random p{
	width: 300px;
}


#random strong{
	font: bold 14px 'Helvetica', Verdana, san-serif;
}

#random span{
	font: italic 11px 'Helvetica', Verdana, san-serif;
}


#random a{
	padding: 3px 3px;
	color: #000;
	text-decoration: none;
	background-color: #cbcbcb;
}

#random a:hover{
	background-color: #d7df21;
}


/*-----  PORTFOLIO  -----*/
#portfolio-text{
	float: left;
	width: 555px;
}

#portfolio-text img{
	border: 3px solid #d4d4d4;	
}

#portfolio-text img:hover{
	border: 3px solid #d7df21;	
}

#portfolio-text ul{
	list-style-type: none;	
}

#portfolio-text li{
	display: inline;
	height: 60px;
	width: 50px;	
}

#portfolio-text a{
	padding: 3px;
	text-decoration: none;	
}

#portfolio-pic{
	padding-left: 30px;
	margin-left: 30px;
	height: 514px;
	width: 333px;
	float: left;
}

#portfolio-pic img{
	border: 7px solid #999;
}

.left-column{
	width: 640px;
	float: left;	
}

.left-column img{
	margin-bottom: 40px;	
}

.right-column{
	width: 300px;
	float: left;
	margin-left: 40px;
}

.right-column-sect{
	margin-bottom: 40px;
}


#folio-subnav{
	text-align: left;
	font: normal 12px 'Helvetica', Verdana, san-serif;
}

#folio-subnav ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#folio-subnav li{
	display: block;
	height: 20px;
	margin: 0px;
}

#folio-subnav li a{
	padding: 3px 3px;
	color: #5b5b5b;
	text-decoration: none;
}

#folio-subnav li a:hover{
	color: #000;
	background-color: #d7df21;
}

#folio-subnav li a:visited{
	color: #adadad;
	background-color: #c7c7c7;
}

/*-----  RESUME  -----*/
#edu_conf{
	height: 180px;	
}

#education {
	float: left;
	padding-right: 40px;
	border-right: 1px dotted black;
}

#conferences {
	float: left;
	margin-left: 40px;
}

/*-----  SKETCHBOOK  -----*/
#doodles{
	float: left;
}

#drawings{
	float: right;
}

#sketchbook{
	width: 1000px;
}

#theChoice{
	width: 300px;
	float: left;
	text-align: center;
}

#theChoice h2{
	font: normal 25px 'Helvetica', verdana, san-serif;
	padding-top: 100px;
}

#theChoice a{
	padding: 3px 3px;
	color: #000;
	text-decoration: none;
	background-color: #cbcbcb;
}

#theChoice a:hover{background-color: #d7df21;}

#sketchbook img{
	border: 7px solid #999;
}

#theChoice-sub h2{
	font: normal 20px 'Helvetica', verdana, san-serif;
}

#theChoice-sub a{
	padding: 3px 3px;
	color: #000;
	text-decoration: none;
	background-color: #cbcbcb;
}

#theChoice-sub a:hover{background-color: #d7df21;}