/********************************
  YEAHSTYLE DG / v 2.0
  Author: Alvaro Casanova / Yeahstyle
  Global Reset by Eric Meyer 
  CSS 2.1 
  Updated: July 03rd 2011 
*******************************/ 
  
  
  /** 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;}
		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 *************************************************/ 
html {overflow-y : scroll;}
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 *************************************************/ 
/** NAV / TITLE **/
#masthead {margin: 0 auto; width: 247px; height: 210px; padding: 5px 5px; padding-top: 10px; position: relative; z-index: 100; background: #26010e;
	-webkit-border-bottom-right-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-moz-border-radius-bottomright: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	-moz-box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.7);
	-webkit-box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.7);
	box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.7);
margin-bottom: 40px;
}	
#masthead  h1 {width: 217px; background: url(../images/welcome.png) no-repeat 0 0; padding-top: 45px; margin: 0 auto;}
#masthead h1 a:link, #masthead h1 a:visited {display: block; width: 217px;}
#masthead h1 a:hover {background-position: -217px 0;}
a#contact:link, a#contact:visited {background: url(../images/get.png) no-repeat 0 0; width: 217px; height: 34px; margin: 0 auto; margin-bottom: 4px; display: block;}
a#contact:hover {background-position: -217px 0;}

/** NAV **/
a#home:link, a#home:visited {background: url(../images/yeahstyle.png) no-repeat 0 0; height: 42px; margin-bottom: 5px;}

ul#portfolio_menu {width: 217px; margin: 0 auto;}
a#webdesign:link, a#webdesign:visited {background: url(../images/web.png) no-repeat 0 0; height: 26px; margin-bottom: 5px; display: block; width: 217px;}
a#illustration:link, a#illustration:visited {background: url(../images/illustration.png) no-repeat 0 0; height: 36px; margin-bottom: 5px; display: block; width: 217px;}
a#webdesign:hover, a#illustration:hover {background-position: -217px 0;}

/** selected states **/
a#illustration.selected, a#webdesign.selected, a#contact.selected {background-position: -434px 0;}

li#contact {margin-right: 0; position: relative; left: 2px;}
li#contact a:link, li#contact a:visited {width: 62px;  background: url(../images/contact.png) no-repeat 0 0;  }
li#contact a:hover {background-position: -62px 0;}

/******************************************************* CONTENT *************************************************/
#content {position: relative; left: 0;}

/************************************************* HOME ****************************************************/
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.7em; 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;}

/****************************************** 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; width: 370px; float: left; margin-right: 70px;}
div#nav2 h3, div#share h3 {font-size: 1em; margin-bottom: 1em; text-transform: uppercase;}

/** LINKS **/
div#nav2 ul li {float: left;}

	/** webdesign link **/
	a#webdesign2, a#webdesign2:link, a#webdesign2:visited {display: block; margin-right: 25px; width: 124px;	height: 17px;	background: url("../images/web_2.gif") no-repeat 0 0; }
	a#webdesign2:hover {background-position: -124px 0;}

	/** illustration link **/
	a#illustration2, a#illustration2:link, a#illustration2:visited {width: 107px; height: 17px;	background: url("../images/illustration_2.gif") no-repeat 0 0; display: block; margin-right: 25px;}
	a#illustration2:hover {background-position: -107px 0;}

	/** contact link **/
	a#contact2, a#contact2:link, a#contact2:visited {width: 72px;	height: 23px;	background: url("../images/contact2.gif") no-repeat 0 0; display: block;}
	a#contact2:hover {background-position: -72px 0;}


/************************************************ SHARE **********************************************/
div#share {float: left; padding-top: 10px; }
div#share h3 {padding-left: 5px; margin-bottom: 1.1em;}

/************************************************ 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: 4.7em;}
div#blog p {font-size: 1em; margin-bottom: 1.6em; line-height: 1.5em;}

/** 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;}
a#currentgame {position: relative; left: 0.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 {padding: 1em 0 0 1.9em; clear: both;}
div.row {margin-bottom: 2.5em; clear: both; background: url("../images/dottedbottom.gif") no-repeat left bottom;}

div.entry {width: 283px; padding-bottom: 15px; float: left; margin-right: 20px; font-size: 1em;}

/** 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; text-decoration: none;}
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; width: 18em; overflow: hidden;}


/*** 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;}