/*--- ERIC MEYER reset - http://meyerweb.com/ ---*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
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;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

/* CSS Document */
html, body{
	width:100%;
	height:100%;
}
body{
	font:8pt "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	color:#fff;
	background:#101010 url(../img/bgpage.gif) center fixed;
}
a{
	color:#08b;
	text-decoration:none;
	border-bottom:1px dotted #08b;
}
a:link{
	color:#08b;
}
a:active{
	color:#366;
}
a:hover{
	border-bottom-color:#0cf;
	color:#0cf;
}
a:visited{
	color:#069;
}
.clear{
	clear:both;
}

#page{
	margin:0 auto;
	width:972px;
	height:100%;
	height:auto !important;
	min-height:100%;
	background:#1a1a1a url(../img/bg.png) 0 1px repeat-y;
}

/*== NAVIGATION */
#nav{
	position:fixed;
	width:119px;
	height:100%;
	overflow:hidden;
	background:url(../img/logotipo.png) 1px 0 no-repeat;
}
#nav-int{
	height:100%;
}
#nav-cover{
	display:block;
	width:120px;
	height:120px;
	text-indent:-9999px;
	border-bottom:none;
	background:url(../img/sprite.gif) 5px -400px no-repeat;
}
#nav-cover:hover{
	background-position:5px 109px;
}
#nav ul{
	width:120px;
	margin-top:20px;
}
#nav li{
	text-align:right;
	font:12pt Cambria, "Times New Roman", Times, serif;
	margin-bottom:5px;
}
#nav li a{
	display:block;
	height:22px;
	padding-top:8px;
	padding-right:5px;
	text-decoration:none;
	font-weight:lighter;
	border-bottom:none;
	color:#fff;
}
#nav #nav-contact,
#nav #nav-about{
	color:#445d63;
}
#nav li a:hover{
	color:#fff;
	background-color:#333;
	border-left:2px solid #ff0;
}
#nav li a:active{
	color:#333;
	background-color:#ff0;
}
#print #nav-print,
#web #nav-web,
#typography #nav-typography,
#contact #nav-contact,
#about #nav-about{
	border-left:5px solid #666;
	background:#fff;
	color:#aaa;
	cursor:default;
}

/*== COPYRIGHT*/
#copy{
	position:absolute;
	bottom:0;
	width:118px;
	height:33px;
	padding-top:4px;
	border:1px solid #222;
	border-right:none;
	background:#000;
}
#copy p{
	width:88px;
	padding-left:29px;
	font:9px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#444;
	background:url(../img/sprite.gif) 10px -9px no-repeat;
}

/*== CONTENT */
#content{
	width:850px;
	padding-left:120px;
	background:url(../img/bgdeg.jpg) 100% 120px no-repeat;
}
#content h1{
	width:850px;
	height:120px;
	background:url(../img/logotipo.png) -120px 0 no-repeat;
}
#content h1 a{
	display:block;
	width:850px;
	height:120px;
	border-bottom:none;
}
#content h1 a span{
	display:none;
}
#projects{
	width:802px;
	padding:20px 28px 200px 20px;
}
.prj{
	clear:both;
}
.prj h2{
	padding-top:2px;
	font:20pt "Times New Roman", Times, serif;
	color:#666;
	background:#666 url(../img/bgtit.gif);
	border-right:2px solid #666;
}
.prj h2 span{
	background:#1a1a1a;
	padding:0 5px 1px 3px;
}
.prj h2 sup{
	font:10px "Courier New", Courier, monospace;
	padding:1px 2px 1px 10px;
	background:#1a1a1a;
}
.prj img{
	display:block;
	border-right:2px solid #666;
}
.prj .link{
	font:10px Georgia, "Times New Roman", Times, serif;
	color:#666;
	text-align:right;
	padding:3px 10px 5px 0;
	margin-bottom:5px;
	border-bottom:1px dotted #333;
	border-right:2px solid #666;
	background:#131313;
}
.prj .link a{
	text-decoration:none;
	/*color:#803;*/
	/*border-bottom:1px solid #803;*/
}
.prj .link a:hover{
	/*color:#C03;*/
	/*border-bottom:1px solid #C03;*/
}
.prj .eng, .prj .esp{
	width:350px;
	padding:5px 0 0 15px;
	background:url(../img/sprite.gif) -120px -7px no-repeat;
}
.prj .eng{
	color:#999;
	float:left;
}
.prj .esp{
	color:#666;
	float:right;
}
div.sep{
	height:60px;
	background:url(../img/cross.gif) 50% 50% repeat-x;
}
hr{
	display:none;	
}

/*to top*/
div.top{
	text-align:right;
}
div.top a{
	display:block;
	float:right;
	width:25px;
	height:16px;
	padding-right:15px;
	font:7.5pt Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
	border-left:1px solid #666;
	border-bottom:none;
	color:#666;
	background:url(../img/sprite.gif) 30px -34px no-repeat;
}
div.top a:hover{
	color:#ccc;
	background-position:30px -55px;
}

/*===================================================================*/
/*cover*/
#cover #content{
	background:none;
}
#cover-int{
	position:relative;
}
#cover-int img{
	border-bottom:1px solid #666;
}
#morecovers{
	position:absolute;
	z-index:2;
	left:770px;
	top:10px;
	width:80px;
	height:22px;
	background:#000;
}
#num{
	float:left;
	display:block;
	padding:6px 0;
	width:30px;
	height:8px;
	text-align:center;
	font:9px Tahoma, Arial, Helvetica, sans-serif;
	letter-spacing:1px;
	color:#666;
}
#coverant, #coversig{
	float:left;
	display:block;
	margin-right:5px;
	width:20px;
	height:20px;
	border:none;
	background:url(../img/sprite.gif) no-repeat;
}
#coverant{
	background-position:0 -130px;
}
#coverant span, #coversig span{
	display:none;
}
#coverant:hover{
	background-position:0 -150px;
}
#coversig{
	background-position:-20px -130px;
}
#coversig:hover{
	background-position:-20px -150px;
}

/*crisis*/
#cover-int a {
	padding: 0;
	border: 0;
}

#crisis {
	padding: 5px 0;
	text-align:center;
	line-height: 200%;
}

/*===================================================================*/
/*== COLOR seccion*/
/*cover*/
#cover #nav-int{
	background:url(../img/bgnav01.gif) bottom no-repeat;
}

/*===================================================================*/
/*== print*/
#print #nav-int{
	background:url(../img/bgnav03.gif) bottom no-repeat;
}
#print #nav-print{
	border-left-color:#778221;
	color:#778221;
}
#print h2{
	color:#778221;
	background-color:#778221;
	border-right-color:#778221;
}
#print .prj img,
#print .prj .link{
	border-right-color:#778221;
}
#print #projects{
	background:url(../img/bgbot04.png) bottom no-repeat;
}
/*=======================*/
/*== web*/
#web #nav-int{
	background:url(../img/bgnav06.gif) bottom no-repeat;
}
#web #nav-web{
	border-left-color:#216382;
	color:#216382;
}
#web h2{
	color:#216382;
	background-color:#216382;
	border-right-color:#216382;
}
#web .prj img,
#web .prj .link{
	border-right-color:#216382;
}
#web #projects{
	background:url(../img/bgbot05.png) bottom no-repeat;
}

/*===================================================================*/
/*== typography*/
#typography #nav-int{
	background:url(../img/bgnav06.gif) bottom no-repeat;
}
#typography #nav-typography{
	border-left-color:#753785;
	color:#753785;
}
#typography h2{
	color:#753785;
	background-color:#753785;
	border-right-color:#753785;
}
#typography .prj img,
#typography .prj .link{
	border-right-color#753785;
}
#typography #projects{
	background:url(../img/bgbot03.png) bottom no-repeat;
}

/*===================================================================*/
/*== contact and about*/
#contact #nav-int{
	background:url(../img/bgnav00.gif) bottom no-repeat;
}
#about #nav-int{
	background:url(../img/bgnav01.gif) bottom no-repeat;
}
#contact #nav-contact,
#about #nav-about{
	color:#445d63;
	border-left-color:#445d63;
}

/*===================================================================*/
/*contact*/
#contact-int{
	width:810px;
	height:420px;
	padding:20px;
	font:8pt "Lucida Sans", "Lucida Console", Arial, sans-serif;
	background:url(../img/tiger.png) 100% 10px no-repeat;
}
#contact-int #intro{
	width:385px;
	height:50px;
	padding-bottom:10px;
	margin:0 0 10px 10px;
	color:#666;
}
#formcontact{
	margin-top:15px;
	width:430px;
}
#formcontact legend{
	display:none;
}
#formcontact label{
	display:block;
	font:7.5pt "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#666;
}
#formcontact input, #formcontact textarea{
	width:400px;
	margin-bottom:7px;
	padding-left:4px;
	font:8pt "Courier New", Courier, monospace;
	border:1px solid #333;
	color:#bbb;
	background-color:transparent;
}
#formcontact textarea{
	height:200px;
	overflow:auto;
}
#formcontact #send{
	margin-left:306px;
	width:100px;
	height:20px;
	text-align:center;
	font:7.5pt "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	border:none;
	background:url(../img/btsend.gif) no-repeat;
	color:#fff;
	cursor:pointer;
}
#formcontact #send:hover{
	background-position:0 -20px;
}
#formcontact #send:focus{
	outline: 1px solid #ff0;
}

/*===================================================================*/
/*about*/
#about-wrap{
	padding-bottom:180px;
	background:url(../img/bgabout.png) 0 100% no-repeat;
}
#about-int{
	padding:20px;
	background:url(../img/cp-members.png) 100% 0 no-repeat;
}
#about-eng, #about-esp{
	float:left;
	width:300px;
	margin-right:20px;
	color:#ccc;
}
#about-esp{
	color:#999;
}
#about-eng p, #about-esp p{
	line-height:175%;
	margin:0.8em 0;
}
#about-int p .big{
	font-size:1.5em;
	color:#b9b900;
}
#friends{
	float:left;
	margin:220px 0 0 0;
	padding:10px 0 10px 10px;
	width:155px;
	font:7.5pt Georgia, "Times New Roman", Times, serif;
	border-top:1px solid #333;
	border-left:1px solid #333;
}
#about-int dt{
	color:#ccc;
	border-bottom:1px solid #333;
}
#about-int dt span{
	color:#999;
}
#friends dd{
	margin:4px 0;
}
#friends dd a{
	display:block;
	padding:2px 0 2px 10px;
	width:145px;
	border-bottom:none;
	text-decoration:none;
}
#friends dd a:hover{
	background:#000 url(../img/sprite.gif) 0 -70px no-repeat;
}
#friends dd a:active{
	background-color:#333;
}
#press{
	padding-bottom:20px;
	color:#999;
}
#press h2{
	font-size:15pt;
	color:#9c0;
}
#press p span{
	font-size:7.5pt;
	color:#666;
}
#thumbs{
	margin-top:10px;
}
#thumbs a{
	display:block;
	float:left;
	margin-right:3px;
	padding:2px;
	width:160px;
	height:120px;
	border:1px solid #333;
}
#thumbs a:hover{
	border-color:#ccc;
	background-color:#fff;
}