/* Reset */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, img, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border: 0 none; }
a img { border: 0 none; }


/* General Style */
#message { position: absolute; width: 300px; height: 170px; padding: 50px; color: white; font-size: 16px; top: 200px; left: 430px; margin: 0 auto; z-index: 99999; background: black url(../images/lightview/close_small.png) no-repeat 10px 10px; cursor: pointer; display: none; }

body { background: url(../img/bg.jpg) repeat left top; color: #333; font-family: Georgia, serif; font-size: 100%; }

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; text-transform: uppercase; color: #000; line-height: 1em; }
h2 { font-size: 0.85em; font-weight: normal; padding: 0 0 8px 0; color: #8E2800; }
h3 { padding: 16px 0 8px 0; font-family: Georgia; font-weight: normal; text-transform: none; font-style: italic; }
h4 { font-size: 0.7em; font-weight: normal; padding: 0 0 8px 0; margin: 0 0 8px 0; }
p { margin: 0 0 16px 0; }
strong { color: #8E2800; }

p, ol, ul { font-size: 0.85em; line-height: 1.6em;}
a { text-decoration: none; color: #222; border-bottom: 1px dotted #444; outline: none; }
a:hover { border-bottom: none; color: #8E2800; border-bottom: none; }
a.noborder, .thumbnails a { border-bottom: none; }


/* Estructura */
#header { position: fixed; width: 325px; height: 865px; top: 20px; left: 0; z-index: 99; background: url(../img/header.png) no-repeat left top; }
#container { padding: 0 10px 0 310px; margin: 0; width: 720px; text-align: right; }


/* Objetos */
#coffee { background: transparent url(../img/coffee.png) no-repeat left top; position: absolute; right: 0; top: 0; width: 374px; height: 239px; z-index: 1; }
#nespresso { background: transparent url(../img/nespresso.png) no-repeat left top; position: absolute; right: 0; top: 900px; width: 87px; height: 175px; z-index: 1; }
#polaroids { background: transparent url(../img/polaroids.png) no-repeat left top; position: absolute; right: 0; top: 2400px; width: 129px; height: 497px; z-index: 1; }
/* #cigarette { background: transparent url(../img/cigarette.png) no-repeat left top; position: absolute; right: 0; top: 3470px; width: 218px; height: 74px; z-index: 7; } */
#simbolo { background: transparent url(../img/simbolo.png) no-repeat left top; position: absolute; left: 0; top: 0; width: 98px; height: 123px; z-index: 1; }
#firefox { background: transparent url(../img/firefox.png) no-repeat left top; position: absolute; right: 0; top: 0; width: 159px; height: 137px; z-index: 1; }


/* Secciones */
.top, #work, #sequential, #about, #links { margin: 0; padding: 20px 0 200px 0; position: relative; }
.top .content { width: 710px; height: 719px; background: url(../img/top.png) no-repeat left top; }
#work .content { background: url(../img/work.png) no-repeat right top; display: block; height: 721px; width: inherit; }
#sequential .content { background: url(../img/sequential.png) no-repeat right top; display: block; height: 721px; width: inherit; }
#about .content { background: url(../img/about.png) no-repeat right top; display: block; padding-top: 132px }
#links .content { background: url(../img/links.png) no-repeat right top; display: block; padding-top: 235px; padding-left: 50px;  }
#footer .content { text-align: left; margin: 30px 0 0 50px; padding: 45px 0 70px 0; position: relative; }


/*Maquetacion en columnas */
.col60 { float:left; width: 410px; margin: 0; padding: 8px 0; }
.col40 { float:left; width: 307px; margin: 0; padding: 8px 0; }
.col20 { float:left; width: 120px; margin: 0 0 0 13px; padding: 8px 0; }


/* Clases especiales */
.clear { clear: both; }
.right { text-align: right; }
.box { padding: 8px 0; margin: 5px 0 20px 0; }
.diego { text-align: left; padding: 0 0 0 400px; background: url(../img/diego.png) no-repeat 45px top; height: 540px; }
ul.links { line-height: 2em; }
ul.links a { margin: 5px 0; }
ul.links .name { font-weight: normal; letter-spacing: 1px; text-transform: uppercase; padding: 0 0 3px 0; margin: 0 0 10px 0; color: #8E2800; border-bottom: 1px solid #8E2800 }
#thumbnails { padding: 220px 0 0 70px; margin: 0; line-height: 1em; }
.thumbnails { padding: 0; margin: 0; line-height: 1em; }
.thumbnails a { margin: 0; padding: 0; }
.thumbnails img { float: left; }
.thumbnails img { padding: 5px; margin: 0 10px 10px 0; background: #eaeaea; border: 1px solid #ccc; }
.thumbnails img:hover { background: #dadada; }

/* Libros de Sequential */
#muertopia { background: transparent url(../img/muertopia.png) no-repeat left top; position: absolute; top: 225px; right: 50px; width: 277px; height: 94px; z-index: 8; }
#vision-thing { background: transparent url(../img/vision-thing.png) no-repeat left top; position: absolute; top: 338px; right: 50px; width: 307px; height: 59px; z-index: 9; }
#hulk { background: transparent url(../img/hulk.png) no-repeat left top; position: absolute; top: 300px; left: 75px; width: 245px; height: 71px; z-index: 9; }

/* Galeria */
.photo {
	margin: 0 12px 12px 0;
	position: relative;
	width: 170px;
	height: 120px;
	float: left;
}
.photo img { border: none; }
.photo span {}
.photo a { text-decoration: none; border: none; }


/* Page Navigation
------------------------------ */
ul.pagelist {
	clear: both;
	padding: 0;
	margin: 10px 0 20px 0;
	list-style-type: none;
	text-align: center;
}
ul.pagelist li {
	display: inline;
}
ul.pagelist li a, ul.pagelist span.disabledlink {
	padding: 5px 8px !important;
	color: #555;
	border-bottom: none;
}
ul.pagelist li.current a {
	font-weight: bold;
	text-decoration: none;
	cursor: default;
	color: #000 !important;
	background: url(../img/bg-counterpages.gif) no-repeat center;
}
ul.pagelist li.prev {
	margin-right: 10px;
}
ul.pagelist li.next {
	margin-left: 10px;
}
.disabledlink {
	color: #999 !important;
	cursor: default;
}
