/*
Responsive Gray
Jorge Torregrosa Lloret
http://jorgetorregrosa.blogspot.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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

body {
line-height:1;
background-color:#DDD;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#333;
background-image:url(bgpat.jpg);
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

a {
color:#AA0;
font-weight:700;
text-decoration:none;
}

a:hover {
color:#AA0;
font-weight:700;
text-decoration:underline;
}

#contenedor {
width:960px;
background-color:#FFF;
box-shadow:0 0 6px 0 #888;
margin:0 auto 20px;
}


#titulo {
height:109px;
width:300px;
text-indent:-99999px;
background-image:url(logo.png);
z-index:1;
position:relative;
margin-left:40px;
}

#resumen {
background-color:#EEE;
border-radius:5px;
margin-top:-10px;
z-index:0;
margin-left:20px;
margin-right:20px;
border-color:#DDD;
padding:20px;
}

#resumen p {
margin:10px;
}

#resumen ul {
margin-left:40px;
list-style:circle;
}

#comentario {
font-size:.7em;
width:600px;
text-align:center;
position:static;
bottom:0;
margin:20px auto;
}

#apartados {
width:650px;
border:1px solid #DDD;
float:right;
line-height:1.5em;
padding:30px;
}

#apartados p {
margin-top:20px;
}

#apartados h3 {
font-size:1.3em;
font-variant:small-caps;
font-weight:700;
margin-bottom:5px;
background-color:#CCC;
}

#apartados h3:before {
content:">> ";
margin-left:10px;
}

#apartados div {
margin-bottom:40px;
}

#contenidos ul li {
margin-left:20px;
list-style:disc;
}

#contenidos ul li ul li {
list-style:circle;
margin-leftt:40px;
font-weight:400;
}

#profesores dl dt:before {
display:inline-block;
vertical-align:middle;
width:127px;
height:127px;
border-radius:5px;
box-shadow:3px 0 2px 0 #BBB;
}

#profesores dl dt:nth-of-type(1):before {
content:" ";
background-image:url(slujan.jpg);
}

#profesores dl dt:nth-of-type(2):before {
content:" ";
background-image:url(jaragones.jpg);
}

#profesores dl dt:nth-of-type(3):before {
content:" ";
background-image:url(imingot.jpg);
}

#profesores dl dd {
margin-bottom:20px;
display:block;
}

#profesores dl dd:before {
content:"* ";
color:red;
margin-left:10px;
}

#profesores dl dt {
background-color:#EEE;
display:inline-block;
border-radius:5px;
}

#profesores dl a {
font-variant:small-caps;
font-weight:700;
color:#333;
text-decoration:underline;
margin:20px;
}

#bibliografia dl dd {
margin-left:20px;
margin-bottom:30px;
}

#bibliografia dl dd span {
display:block;
}

#bibliografia .autores:before {
content:"Autor: ";
}

#enlacesintra {
float:right;
margin-right:50px;
}

#enlacesintra h3 {
visibility:hidden;
}

#enlacesintra li {
background-color:#666;
font-variant:small-caps;
margin-top:3px;
width:170px;
border-right:3px solid #888;
}

#enlacesintra li a {
color:#EEE;
text-decoration:none;
display:block;
transition:padding .5s;
padding:5px;
}

#enlacesintra li:hover {
border-right:3px solid #AA0;
}

#enlacesintra li a:hover {
color:#EEE;
text-decoration:underline;
background-color:#888;
padding-left:10px;
}

#enlaces {
clear:right;
border-top:1px solid #999;
display:inline-block;
width:960px;
margin-top:40px;
}

#enlaces div {
display:inline-block;
vertical-align:top;
margin:15px 35px;
}

#enlaces div ul li {
list-style:disc;
margin-left:30px;
}

#enlacesversiones {
position:absolute;
top:0;
margin-left:700px;
margin-top:10px;
width:250px;
}

#enlacesversiones ul li {
display:inline-block;
margin:7px 5px;
}

#contenidos ul > li,#bibliografia dl dt {
font-weight:700;
}

#profesores .p1,#enlaces div h3 {
margin-bottom:10px;
}


@media screen and (max-width:960px) {
#titulo {
height:109px;
width:300px;
text-indent:-99999px;
background-image:url(logo.png);
z-index:1;
position:relative;
margin-left:40px;
}

#resumen {
background-color:#EEE;
border-radius:5px;
margin-top:-10px;
z-index:0;
margin-left:20px;
margin-right:20px;
border-color:#DDD;
padding:20px;
}

#resumen p {
margin:10px;
}

#resumen ul {
margin-left:40px;
list-style:circle;
}

#comentario {
font-size:.7em;
width:600px;
text-align:center;
position:static;
bottom:0;
margin:20px auto;
}

#contenedor {
width:100%;
position:relative;
border:0;
margin:0;
padding:0;
}

#enlacesintra {
width:100%;
float:none;
}

#enlacesintra h3 {
visibility:hidden;
}

#enlacesintra li {
background-color:#666;
font-variant:small-caps;
margin-top:3px;
width:170px;
border-top:3px solid #888;
display:inline-block;
border-right:none;
}

#enlacesintra li a {
color:#EEE;
text-decoration:none;
display:block;
padding:5px;
}

#enlacesintra li:hover {
border-top:3px solid #AA0;
border-right:none;
}

#enlacesintra li a:hover {
color:#EEE;
text-decoration:underline;
background-color:#888;
}

#apartados {
border:1px solid #DDD;
line-height:1.5em;
padding:0;
width:100%;
}

#apartados p {
margin-top:20px;
padding:0 30px;
}

#apartados ul,#apartados dl {
padding:0 30px;
}

#apartados h3 {
font-size:1.3em;
font-variant:small-caps;
font-weight:700;
margin-bottom:5px;
background-color:#CCC;
}

#apartados h3:before {
content:">> ";
margin-left:10px;
}

#apartados div {
margin-bottom:40px;
width:100%;
}

#contenidos ul li {
margin-left:20px;
list-style:disc;
}

#contenidos ul li ul li {
list-style:circle;
margin-leftt:40px;
font-weight:400;
}

#profesores dl dt:before {
display:inline-block;
vertical-align:middle;
width:127px;
height:127px;
border-radius:5px;
box-shadow:3px 0 2px 0 #BBB;
}

#profesores dl dt:nth-of-type(1):before {
content:" ";
background-image:url(slujan.jpg);
}

#profesores dl dt:nth-of-type(2):before {
content:" ";
background-image:url(jaragones.jpg);
}

#profesores dl dt:nth-of-type(3):before {
content:" ";
background-image:url(imingot.jpg);
}

#profesores dl dd {
margin-bottom:20px;
display:block;
}

#profesores dl dd:before {
content:"* ";
color:red;
margin-left:10px;
}

#profesores dl dt {
background-color:#EEE;
display:inline-block;
border-radius:5px;
}

#profesores dl a {
font-variant:small-caps;
font-weight:700;
color:#333;
text-decoration:underline;
margin:20px;
}

#bibliografia dl dd {
margin-left:20px;
margin-bottom:30px;
}

#bibliografia dl dd span {
display:block;
}

#bibliografia .autores:before {
content:"Autor: ";
}

#enlaces {
clear:right;
border-top:1px solid #999;
display:inline-block;
width:100%;
margin-top:40px;
}

#enlaces div ul li {
list-style:disc;
margin-left:30px;
}

#enlacesversiones ul li {
display:inline-block;
margin:7px 5px;
}

#contenidos ul > li,#bibliografia dl dt {
font-weight:700;
}

#profesores .p1,#enlaces div h3 {
margin-bottom:10px;
}

#enlaces div {
display:block;
vertical-align:top;
margin:15px 35px;
}

#enlaces div,#enlacesversiones {
display:block;
vertical-align:top;
margin:15px 35px;
position:relative;
}
}

@media screen and (max-width:700px) {
#titulo {
height:109px;
width:300px;
text-indent:-99999px;
background-image:url(logo.png);
z-index:1;
position:relative;
margin:0 auto;
}

#resumen {
background-color:#EEE;
border-radius:5px;
margin-top:-10px;
z-index:0;
margin-left:20px;
margin-right:20px;
border-color:#DDD;
padding:20px;
}

#resumen p {
margin:10px;
}

#resumen ul {
margin-left:40px;
list-style:circle;
}

#comentario {
font-size:.7em;
width:80%;
text-align:center;
position:static;
bottom:0;
margin:20px auto;
}

#enlacesintra {
width:100%;
float:none;
}

#enlacesintra h3 {
visibility:hidden;
}

#enlacesintra li {
background-color:#666;
font-variant:small-caps;
margin-top:3px;
width:49%;
height:60px;
border-top:3px solid #888;
display:inline-block;
border-right:none;
overflow:hidden;
}
#enlacesintra ul {
	overflow:hidden;
}


#enlacesintra li a {
color:#EEE;
text-decoration:none;
display:block;
padding:5px;
height:100%;
}

#enlacesintra li:hover {
border-top:3px solid #AA0;
}

#enlacesintra li a:hover {
color:#EEE;
text-decoration:underline;
background-color:#888;
}
}
@media screen and (max-width:400px) {
	#titulo {
height:28px;
width:243px;
text-indent:-99999px;
background-image:url(logoresponsive.png);
z-index:1;
position:relative;
margin:0 auto;
margin-bottom:20px;
}

#profesores dl dt:before {
display:block;
vertical-align:middle;
width:127px;
height:127px;
border-radius:5px;
box-shadow:3px 0 2px 0 #BBB;
}
}