/********************************
  YEAHSTYLE DG / v 2.0
  Author: Alvaro Casanova / Yeahstyle
  Global Reset by Eric Meyer 
  CSS 2.1 
  Updated: January 27th 2010 
  *******************************/ 
  
  
  /** Global Reset **/
  
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, font, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td {	margin: 0; padding: 0;	border: 0;	outline: 0;	font-size: 100%; vertical-align: baseline;	background: transparent;}
	
		body {line-height: 1.5;}
		ol, ul {list-style: none;}
		blockquote, q {	quotes: none;}
		/* remember to highlight inserts somehow! */
		ins {text-decoration: none;}
		del {text-decoration: line-through;}
		table {border-collapse: collapse; border-spacing: 0;}


/** 27-07-08**/

/*** USEFUL CLASSSES ***/

.clear {clear: both;}
.right {float: right;}
.left {float: left;}
/** CLEARFIX **/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
.hide {display: none;}


/******************************************************* GENERAL *************************************************/ 
body {background: #000 url("../images/bodyback.jpg") no-repeat top center;	font: 0.625em/1.5  verdana, tahoma, arial, sans-serif; color: #bababa; text-align: center;}
a, a:link, a:visited {color: #cc00cc;	text-decoration: underline;}
a:hover {color: #ff00ff;}
blockquote {font-style: italic; margin-bottom: 0.5em;}

/** HEADERS **/
h2 {font-size: 1.6em;}
h3 {font-size: 1.2em;}

/** CONTAINER **/
#container {width: 928px; margin: 0 auto; text-align: left;}
/******************************************************* MASTHEAD *************************************************/ 
#masthead {height: 190px;}

/** LOGO **/
a#logo, a#logo:link, a#logo:visited {width: 268px; height: 50px; position: relative; left: 11px; background: url("../images/yeahstyle.gif") no-repeat 0 0;	display: block;	float: left; margin-right: 43px;}
a#logo:hover {background-position: -268px 0;}

/** NAV LINKS **/
ul#nav {float: left; }
ul#nav li {float: left;}
ul#nav li a {display: block;}
/** home link **/
a#home:link, a#home:visited {width: 83px; height: 50px;	background: url("../images/home.gif") no-repeat 0 0; margin-right: 9px;}
a#home:hover {background-position: -83px 0;}
/** illustration link **/
a#illustration:link, a#illustration:visited {width: 145px; height: 50px; background: url("../images/illustration.gif") no-repeat 0 0; margin-right: 15px; }
a#illustration:hover {background-position: -145px 0;}
/** webdesign link **/
a#webdesign:link, a#webdesign:visited {width: 131px; height: 50px;	background: url("../images/webdesign.gif") no-repeat 0 0; margin-right: 4px;}
a#webdesign:hover {background-position: -131px 0;}
/** print link **/
a#print:link, a#print:visited {width: 86px; height: 50px;	background: url("../images/print.gif") no-repeat 0 0; margin-right: 6px;}
a#print:hover {background-position: -86px 0;}			
/** contact link **/
a#contact:link, a#contact:visited {width: 110px; height: 50px;	background: url("../images/contact.gif") no-repeat 0 0;}
a#contact:hover {background-position: -110px 0;}			


	
/******************************************************* CONTENT *************************************************/
	#content {position: relative;}
 	
 	
 	/** HEADERS **/
 	
 	/** 1.Porfolio Header **/
 	h1#portfolio {width: 277px;	height: 96px;	background: url("../images/portfolioheader.gif") no-repeat; margin-bottom: 2em;}
 	
 	/** 2. Webdesign Header **/
 	h1#webdesignheader {width: 358px;	height: 96px;	background: url("../images/webdesignheader.gif") no-repeat;}
 	 	
 	/** 3. Illustration Header **/
 	h1#illustrationheader {width: 358px; height: 96px; background: url("../images/illustrationheader.gif") no-repeat;	float: left;} 
 	 	
 	/** 4. Print Design Header **/
 	h1#printheader {width: 392px;	height: 96px;	background: url("../images/printheader.gif") no-repeat;}
 	
 	/** 5. Contact Header **/
 	h1#contactheader{width: 358px; height: 96px;	background: url("../images/contactheader.gif") no-repeat;}
 	
 	
 	
 	/** SECTIONS **/
 	
 	/************************************************* HOME ****************************************************/
 	/** tags **/
 	img#entag{position: absolute;	top: 11em; left: -15px;}
 	img#estag {position: absolute; top: 11em;	left: 29em;}
 	
 	div#intro {margin-bottom: 3.2em;}
 	
 	/** WELCOME MESSAGE **/
 	/** TEXT COLOR **/
 	div#english_intro {color: #bababa}
 	div#spanish_intro, div#blog p.es, div.entry p.es, .es {color: #888888;}
 	.textcolumn {width: 28em; margin-left: 2.4em;	float: left;}
 	.textcolumn h2, .textcolumn h3 {color: #cc00cc;	font-style: italic;	margin-bottom: 0.4em;}
 	.textcolumn h3 {font-style: normal; text-transform: uppercase;}
 	.textcolumn ul {margin-bottom: 1em; list-style-type: disc; padding-left: 1.2em; font-size: 1.1em;}
 	.textcolumn ul li {margin-bottom: 0.3em;}
	.textcolumn p{font-size: 1.1em; line-height: 1.5em; margin-bottom: 1.5em;}
	.textcolumn p b {color: #cc00cc;}
	p.mail {font-size: 1.5em; color: #fff; font-weight: bold; color: #cc00cc; background: url("../images/mail.gif") no-repeat 0 0.3em; padding-left: 2.5em;}	
	span.little {font-size: 0.8em;}
	
	/** KNOWLEDGE **/
	.textcolumn li {background-position: 12em 0.3em; background-repeat: no-repeat; position: relative;}
	.textcolumn li span {color: #fff; display: none; background: #fff; padding: 0.2em 0.5em; text-align: center; position: absolute; left: 18em; z-index: 4000; top: -0.3em;}
	.textcolumn li.four_stars span, .textcolumn li.five_stars span {background: #00ab18;}
	.textcolumn li.three_stars span, .textcolumn li.two_stars span {background: #cca300;}
	.textcolumn li.one_star span {background: #cc5b00;}
	
	
	.textcolumn li.five_stars {background-image: url("../images/stars5.gif");}
	.textcolumn li.four_stars {background-image: url("../images/stars4.gif");}
	.textcolumn li.three_stars {background-image: url("../images/stars3.gif");}
	.textcolumn li.two_stars {background-image: url("../images/stars2.gif");}
	.textcolumn li.one_star {background-image: url("../images/stars1.gif");}
	
	/** SIDE BAR **/
	div#sidebar {width: 23.8em; float: left; margin-left: 5em;}
	div#sidebar h3 {color: #cc00cc;	margin-bottom: 1.4em; text-transform: uppercase;}
	div#sidebar ul {margin-bottom: 1.4em;}
	div#sidebar ul#status li a {text-decoration: none; display: block; text-transform: uppercase;  font-size: 1.1em; letter-spacing: -0.03em; background: url("../images/agenda.gif") no-repeat 1.2em center; padding: 1em 0 1em 5em; border-top: 1px solid #333; color: #BABABA;}
	div#sidebar ul#status li.es a {display: block; border-bottom: 1px solid #333; color: #888888}
	div#sidebar ul#status li a:hover {color: #fff;}
	div#sidebar ul#status li.es a:hover {color: #bababa;}
	
	div#sidebar h3#twitter_header a span {display: none;}
	div#sidebar h3#twitter_header a {display: block; width: 85px; height: 20px; background: url("../images/twitter.gif") no-repeat 0 0;}
	div#sidebar h3#twitter_header a:hover {background-position: -85px 0; }
	
	div#sidebar ul#twitter {margin-bottom: 0;}
	div#sidebar ul#twitter li {font-size: 1em; padding: 1em 0 1em 5.5em; border-top: 1px solid #4d4b4a; border-bottom: 1px solid #333; background: url("../images/comment.gif") no-repeat 0.8em 0.7em;}
	
	div#sidebar ul li#facebook_fan_page {font-size: 1em; padding: 1.2em 0 1.2em 4em; border-bottom: 1px solid #333; background: url("../images/facebook.gif") no-repeat 0.8em 0.9em;}
	div#sidebar ul li#facebook_badge {padding-top: 1.5em;}
	div#sidebar ul li#psn {padding: 1em 0 1em 0;}
	
	/****************************************** SECOND NAV ****************************************************/
	div#nav2 {clear: both; height: 84px; margin: 0 0 20px 24px; padding: 10px 0 0 70px; background: url("../images/rose.gif") no-repeat left;}
	div#nav2 h3 {font-size: 1em;	margin-bottom: 1em; text-transform: uppercase;}
	
		
		/** LINKS **/
		div#nav2 ul li {float: left;}
		
		
		/** illustration link **/
		a#illustration2, a#illustration2:link, a#illustration2:visited {width: 100px;	height: 23px;	background: url("../images/illustration2.gif") no-repeat 0 0; display: block; margin-right: 22px;}
		a#illustration2:hover {background-position: -100px 0;}
		
		/** webdesign link **/
		a#webdesign2, a#webdesign2:link, a#webdesign2:visited {width: 90px;	height: 23px;	background: url("../images/webdesign2.gif") no-repeat 0 0;	display: block; margin-right: 22px;}
		a#webdesign2:hover {background-position: -90px 0;}
		
		/** print link **/
		a#print2, a#print2:link, a#print2:visited {width: 101px;	height: 23px;	background: url("../images/print2.gif") no-repeat 0 0;	display: block; margin-right: 22px;}
		a#print2:hover {background-position: -101px 0;}
		
		/** contact link **/
		a#contact2, a#contact2:link, a#contact2:visited {width: 70px;	height: 23px;	background: url("../images/contact2.gif") no-repeat 0 0; display: block;}
		a#contact2:hover {background-position: -70px 0;}
		


/************************************************ LITTLE BLOG ****************************************/

.date {color: #666;}
div#personal {clear: both; width: 100%;	padding-left: 2.4em; margin-bottom: 10em;}
div#personal h4 {text-transform: uppercase;	font-size: 1.1em;	margin-bottom: 2em; letter-spacing: -0.1em;}
div#blog {width: 23.3em;	 position: relative;	float: left; margin-right: 5em;}
div#blog p {font-size: 1em; margin-bottom: 1.6em; line-height: 1.5em;}
a#joke:hover span#joketext {display: block; position: absolute; bottom: -2.5em; left: 0; text-decoration: none; font-weight: bold;}
span#joketext {display: none;}


/** I.. COLUMNS **/
div.list {width: 16.5em;float: left; margin-right: 2em; padding-left: 2.5em; min-height: 20em;}
div.separa {background: url("../images/separa.jpg") no-repeat left top; }
h3.gametitle {font-size: 1.5em; margin-bottom: 1.5em;}
div.list img {position: relative;	right: 0.7em;}
div.list ul li{font-size:1.1em; line-height:1.4em; margin-bottom:0.5em;}
div.list ul li a, div.list ul li a:link, div.list ul li a:visited, div.list ul li {text-transform: uppercase;	text-decoration: none; font-weight: bold;	color: #660000;	letter-spacing: -1px;} 
div.list ul li a:hover {color: #990000;}





/************************************* PORTFOLIO GENERAL LAYOUT ************************************************/

div#display {background: url("../images/displayback.jpg") no-repeat top center; padding: 2.0em 0 0 1.9em; clear: both;}
div.row {margin-bottom: 2.5em; clear: both; background: url("../images/dottedbottom.gif") no-repeat left bottom;}

/** WHEN DISPLAYING LESS THAN 3 PROYECTS IN A ROW **/
div.display2 {background-position: -30.25em bottom;}
div.display1 {background-position: -60.50em bottom;}

div.entry {width: 283px; letter-spacing: -0.5px; padding-bottom: 15px; float: left; margin-right: 20px; }

/** Thumb link **/
a.thumb, a.thumb:link, a.thumb:visited {display: block;	width: 283px;	height: 141px; background: url("../images/border.gif") no-repeat 0 0;}
a.thumb:hover {background-position: -283px 0;}
a.thumb img {position: relative; top: 5px; left: 5px;}

/** WORK TITLE **/
div.entry h2 {padding: 1.0em 0; background: url("../images/dottedline.gif") repeat-x bottom; margin-bottom: 1.0em; color: #cc00cc; font-size: 1.1em;}

/** Paragraphs **/
div.entry p, div.entry blockquote {font-size: 1em;	line-height: 1.6em; margin-bottom: 0.5em;}
div.entry strong {color: #900;}


/********************************** CONTACT *********************************************/
div#contactbox_wrapper {background: url("../images/news.gif") no-repeat 0 0;	font-size: 1.2em; margin-bottom: 2em;}
div#contactbox {min-height: 25em; padding: 5em 0 0 23em; background: url("../images/separator.gif") no-repeat center bottom;}
div#contactbox h2, div#contactbox p {margin-bottom: 1.5em;}
div#contactbox h3.contact_email {font-size: 2em; background: url("../images/lil_sep.gif") no-repeat 0 0; color: #cc00cc; letter-spacing: -0.05em; font-weight: bold; height: 2.5em; padding-top: 0.6em; margin-bottom: 0.5em;}


/*** FOOTER ***/
div#footer {color: #fff; position: relative; padding: 20px 0;	width: 100%; text-align: center;	font-size: 10px;	float: right;	margin-top: 30px;}
.last {margin-right: 0;}