/******************************************************************************
 *      Web:            MRSORIANO.COM                                         *   
 *      Autor:          Jorge Soriano Aguilera - correo@mrsoriano.com         *
 *      Hoja:           estilos.css                                           *
 *      Descripcion:    Estilos CSS para el website mrsoriano.com             * 
 *      Fecha:          Diciembre de 2009                                     *
 *****************************************************************************/
@import url("reset.css");

/*********************
	GENÉRICOS
**********************/

body{ color: #36393A; font-family: Georgia, "Times New Roman", Times, serif; font-size: x-small; background:#F9F9F9; line-height:2em; border-bottom:20em solid #36393A;}

acronym { outline:auto; cursor:help;}

a:link { text-decoration:none; color:#36393A;}
a:visited { text-decoration:none; color:#36393A;}
a:hover { text-decoration:underline; color:#36393A;}
a:active { text-decoration:none; color:#36393A;}

#header { background:#1C1C1C; height:12em; width:100%; margin:0 auto;}
#container { width:89em; margin:4em auto 0 auto; padding:0 0 4em 0; overflow:hidden;}

h1 { height:12em; left:50%; margin:0 0 0 -44.5em; overflow:hidden; position:absolute; width:25em;}
h1 strong, h1 small { display:block; position:absolute; margin:-99em 0 0 0;}
	h1 img { width:16em; height:8em; padding:4em 0 0 0;}

ul#menu { float:left; height:12em; left:50%; margin:0 0 0 -19.5em; overflow:hidden; position:absolute;}
	ul#menu li { width:16em; height:12em; float:left; overflow:hidden; text-align:center; line-height:12em; text-transform:uppercase;}
		ul#menu li a:link { color:#FFF; display:block; height:100%; line-height:13em;}
		ul#menu li a:visited { color:#FFF; display:block; height:100%; line-height:13em;}
		ul#menu li a:hover { color:#FFF; display:block; height:100%; background:#525252 url(../img/template/arrow-menu.gif) no-repeat top center; text-decoration:none; line-height:13em;}
		ul#menu li a:active { color:#FFF; display:block; height:100%; line-height:13.3em;}

		ul#menu li a:link span { display:block; height:100%; font-size:1.2em;text-shadow: #000 0px 0px 5px; cursor:pointer;}	
		ul#menu li a:visited span { display:block; height:100%; font-size:1.2em;text-shadow: #000 0px 0px 5px; cursor:pointer;}	
		ul#menu li a:hover span { display:block; height:100%; font-size:1.2em; background:transparent url(../img/template/puntitos-menu.gif) no-repeat bottom center;text-shadow : #000 0px 0px 5px; cursor:pointer;}	
		ul#menu li a:active span { display:block; height:100%; font-size:1.2em;text-shadow: #000 0px 0px 5px; cursor:pointer;}	

		ul#menu li.activo { color:#FFF; display:block; height:100%; background:#36393A url(../img/template/arrow-menu.gif) no-repeat top center; text-decoration:none; line-height:13em;}
			ul#menu li.activo span { display:block; height:100%; font-size:1.2em; background:transparent url(../img/template/puntitos-menu.gif) no-repeat bottom center;text-shadow : #000 0px 0px 5px;}	

#container.sobre_mi h2, #container.contacto h2, #container.trabajos h2 { font-size:2em; text-transform:uppercase;height:1.2em; line-height:1.3em;}
p#subh2 { font-size:1.4em; font-style:italic; width:35em; float:left; overflow:hidden; padding:0 0 1.78em 0;}
p#entradillah2 { font-size:1.6em; font-style:italic; color:#B0B1B1; height:2.6em; border-bottom:0.3125em solid #E6E6E6; margin:0 0 1.9em 0;}


/****** CLASSES DE RECURSO *************/
.oculto, hr { display:block; position:absolute;top:-999em; left:-999em;}

/* ******************************
 *	HOLA 
 * ***************************/

#container.hola h2 {font-size:4em; line-height:1em; text-transform:none; text-align:center; border-bottom:0.125em solid #e6e6e6; padding:0 0 1em 0;}
	#container.hola h2 strong { border-bottom:0.05em solid #e6e6e6; display:block; font-size:2.5em; height:1.4em; line-height:1.3em;}
	#container.hola h2 span { display:block; margin:1.05em 0 0 0;}

#container.hola p {font-size:2em; line-height:1.5em; padding:1.3em 0 0; text-align:center;}
	#container.hola p span { display:block;}

#container.hola a:link { text-decoration:underline;}
#container.hola a:visited { text-decoration:underline;}
#container.hola a:hover { text-decoration:none; border-bottom:0.05em solid #36393A;}
#container.hola a:active { text-decoration:underline;}

/*****************************
 * 	SOBRE MI
 * ***************************/

#container.sobre_mi { background:url(../img/template/yo.gif) no-repeat top right; padding:0 0 10em 0;}
#container.sobre_mi p#entradillah2 { margin:0 0 2.1em;}
#container.sobre_mi p#subh2 { border-bottom:0.4em solid #E6E6E6; padding:0 0 1.6em; width:100%; margin:0 0 2.2em;}



p.aboutme { font-size:1.4em; color:#7C7E7F; width:34.3em; margin:0 0 1.42em 0;}
ul#mylinks { width:28em; padding:1.9em 0 1.9em 3em; border-top: 0.1em solid #E6E6E6; border-bottom: 0.1em solid #E6E6E6;}
	ul#mylinks li {height:2em;line-height:2.4em;}
	ul#mylinks li a:link { font-size:1.1em; padding:0 0 0 1.81em; background:url(../img/template/arrow.gif) no-repeat center left;}
	ul#mylinks li a:visited { font-size:1.1em; padding:0 0 0 1.81em; background:url(../img/template/arrow.gif) no-repeat center left;}
	ul#mylinks li a:hover { font-size:1.1em; padding:0 0 0 1.81em; background:url(../img/template/arrow.gif) no-repeat center left;}
	ul#mylinks li a:active { font-size:1.1em; padding:0 0 0 1.81em; background:url(../img/template/arrow.gif) no-repeat center left;}

a#mylinks_ct:link { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4.16em; display:block; border-bottom:0.08em solid #E6E6E6; width:24.18em;}
a#mylinks_ct:visited { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4.16em; display:block; border-bottom:0.08em solid #E6E6E6; width:24.18em;}
a#mylinks_ct:hover { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4.16em; display:block; border-bottom:0.08em solid #E6E6E6; width:24.18em;}
a#mylinks_ct:active { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4.16em; display:block; border-bottom:0.08em solid #E6E6E6; width:24.18em;}

/*****************************
 * 	CONTACTA CONMIGO
 * ***************************/
 
#container.contacto {height:42em;}
#container.contacto p#subh2 { border-bottom:0.4em solid #E6E6E6; padding:0 0 1.6em; width:100%; margin:0 0 2.2em;}


p#name { height:6.9em; width:41em; float:left; line-height:2.3em;}
	p#name strong { font-size:2em; display:block;}
	p#name small { font-size:1.1em;}

dl#contact_modes { border-bottom:0.1em solid #E6E6E6; border-top:0.1em solid #E6E6E6; width:27em; padding:1.5em 2em 1.4em 2em; float:left; clear:left;}
dl#contact_modes dt {font-size:1.1em; width:4.1em; padding:0 0 0 1.81em; background:url(../img/template/arrow.gif) no-repeat center left; float:left;clear:left;}
   dl#contact_modes dd {font-size:1.1em;;}

h3.respuesta {font-size:2em; line-height:1.2em; margin:0 0 1.42em 0;}
p.error {color:#A60000; font-size:1.4em; line-height:1.62em; margin:0 0 1.42em 0;}
	p.error span { text-transform:uppercase;}

form { width:48em; margin:7.7em 0 0 41em; position:absolute;z-index:2; }
	form.activo input, form.activo textarea {background:#EFEFEF;}
	form.activo input.activo, form.activo textarea.activo {background:#FFF;}
	legend { display:none;display:block; position:absolute; margin-top:-9999em;}
	label span { display:block; position:absolute; top:-9999em;}
	input { background:#E6E6E6; border:none; display:block; text-indent:0.92em; width:34.3em; font-size:1.4em; padding:0.8em 0; margin:0 0 1.42em 0;}

	form label.error input { background:#E6E6E6 url(../img/template/input_bad.gif) no-repeat center right;}
	form label.error textarea { background:#E6E6E6 url(../img/template/input_bad.gif) no-repeat top right;}
	form label.valid input { background:#E6E6E6 url(../img/template/input_good.gif) no-repeat center right;}
	form label.valid textarea { background:#E6E6E6 url(../img/template/input_good.gif) no-repeat top right;}
	textarea { background:#E6E6E6; font-family:Georgia, "Times New Roman", Times, serif; border:none; display:block; width:33.4em; font-size:1.4em; padding:0.8em 0 0.5em 0.92em;}
	button { background:#36393A; color:#E6E6E6; font-size:1.4em; width:11.42em; text-align:center; display:block; height:2.85em; line-height:2.85em; float:right; margin:1.42em 0 0 0;-moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
	form.activo button { box-shadow: -10px -10px 3px #FFF; -moz-box-shadow: 0px 0px 5px #FFFFFF; color:#FFF;}
		button:hover { text-shadow: 0 -1px 1px rgba(256,256,256,0.55);}

/*************************************/
div#overlay {background:#36393A; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 1; cursor:pointer;}


/******************************
 * 		TRABAJOS
 * ****************************/


ul#works_list li.parent { overflow:hidden; padding:0 0 4em 0; border-bottom:0.1em solid #E6E6E6; margin:0 0 3.9em 0;}
	ul#works_list li.parent:last-child { margin:0; border-bottom: none;} 
ul#works_list li h3 { height:5.9em;line-height:2.3em; width:40em; float:right; overflow:hidden;}
	ul#works_list li h3 strong { font-size:2em; display:block;}
	ul#works_list li h3 small { font-size:1.1em;}

dl.datoswork { border-bottom:0.1em solid #E6E6E6; border-top:0.1em solid #E6E6E6; width:26em; padding:1.5em 2em 1.5em 2em; margin:0 10em 0 0; float:right; clear:right;}
dl.datoswork dt {font-size:1.1em; width:5.45em; padding:0 0 0 1.81em; background:url(../img/template/arrow.gif) no-repeat center left; float:left;clear:left;}
   dl.datoswork dd {font-size:1.1em;white-space:nowrap;}

ul.pj_imgs { overflow:hidden; width:45em;}	
		ul.pj_imgs li img { border:0.1em solid #E6E6E6; width:44.8em; height:28.8em;}

ul.pagina_pj_imgs {overflow:hidden; position:absolute; margin:-3em 0 0 0.5em;}		
	ul.pagina_pj_imgs li { float:left; overflow:hidden; height:2em; width:2em; margin:0 0 0 0.5em; text-align:center;}		
		ul.pagina_pj_imgs li span{ display:block; font-size:1.4em; background:#36393A; color:#F9F9F9; height:100%; cursor:pointer;}		
		ul.pagina_pj_imgs li span:hover{ background:#DEDEDE; color:#36393A;}		
		ul.pagina_pj_imgs li span.activo{ background:#DEDEDE; color:#36393A; cursor:default;}		
		
		
p.descripcion { color:#7C7E7F; font-size:1.1em; float:right; clear:right; width:27.27em; margin:0 9.09em 0 0; padding:1.36em 0; height:5.3em; border-bottom:0.1em solid #E6E6E6;}

ul.other_pj_links { float:right;clear:right; overflow:hidden; width:40em;}

li.toworkurl { width:28em;}
	li.toworkurl a:link { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4em; display:block; border-bottom:0.08em solid #E6E6E6; float:left; width:100%;}
	li.toworkurl a:visited { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4em; display:block; border-bottom:0.08em solid #E6E6E6; float:left; width:100%;}
	li.toworkurl a:hover { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4em; display:block; border-bottom:0.08em solid #E6E6E6; float:left; width:100%;}
	li.toworkurl a:active { font-size:1.2em; text-transform:uppercase;background:url(../img/template/arrow.gif) no-repeat center left; padding:0 0 0 1.66em; height:4.083em; line-height:4em; display:block; border-bottom:0.08em solid #E6E6E6; float:left; width:100%;}

li.totop { float:left; height:3.5em; padding:1.5em 0 0 8em;}
	li.totop a:link { display:block; background:#DEDEDE url(../img/template/arrow-totop.gif) no-repeat center center; height:2em; width:2em; text-indent:999em; overflow:hidden;}
	li.totop a:visited { display:block; background:#DEDEDE url(../img/template/arrow-totop.gif) no-repeat center center; height:2em; width:2em; text-indent:999em; overflow:hidden;}
	li.totop a:hover { display:block; background:#36393A url(../img/template/arrow-totop-on.gif) no-repeat center center; height:2em; width:2em; text-indent:999em; overflow:hidden;}
	li.totop a:active { display:block; background:#36393A url(../img/template/arrow-totop-on.gif) no-repeat center center; height:2em; width:2em; text-indent:999em; overflow:hidden;}


/******* paginación de trabajos *******/

ul#pagination { overflow:hidden; padding:4em 0 0 0;border-top: 0.5em solid #E6E6E6;}
ul#pagination li { float:left; overflow:hidden; margin:0 0.5em 0 0; width:2em; text-align:center;}
	ul#pagination li.nextprev { width: auto;}
	ul#pagination li.nextprev a { padding:0 0.82em;}
	ul#pagination li.activo { font-size:1.2em; font-weight:bold; font-style:italic;}	

ul#pagination li a:link { font-size:1.2em; display:block; background:#DEDEDE; }
ul#pagination li a:visited { font-size:1.2em; display:block; background:#DEDEDE; }
ul#pagination li a:hover { font-size:1.2em; display:block; background:#36393A; color:#FFF; text-decoration:none;}
ul#pagination li a:active { font-size:1.2em; display:block; background:#DEDEDE; }


/*****************************
 * 	ERROR
 * ***************************/
#container.error {padding:0 0 8em 0;}
	#container.error h3 { font-size:8em;line-height:1.3em;height:1.42em;}
	p.error_dsc { font-size:1.4em; line-height:1.42em;}