/******************************************************

project:    guterrez(tm)
file:       main.css
date:       21/03/2008

copyright (c) 2007 by Guterrez.com all rights reserved

developed by Vaste Fou, alps republic

******************************************************/

/******************************************************
* basics
******************************************************/
html[xmlns^="http"] { overflow-y: scroll; }

::-moz-selection {
	background: #202020; 
	color: #dadada; 
	text-shadow: 0 0 0 #555; 
}

::selection {
	background: #202020; 
	color: #dadada; 
	text-shadow: 0 0 0 #555; 
}

* {
	margin: 0; 
	padding: 0; 
}

html {
	font-size: 100.1%; 
}

html,body,a,abbr,acronym,fieldset,hr,img {
	border: none; 
}

body {
	color: #666; /* #dadada */
	font: 400 normal 62.5%/1.5 Georgia,serif; 
	text-shadow: 0 0 0 #555; 
}

body {
	background-color: #000;
}

li {
	list-style: none; 
}

a {
	outline: none; 
}


/******************************************************
* global
******************************************************/
#container, #containerFable {
	background: url(../img/planky.jpg) no-repeat; 
	margin: 8% auto 4%; 
	min-height: 482px; 
	width: 992px;
}

#containerFable {
	background: url(../img/flanky.jpg) no-repeat; 
}

/* ------------------------------------------------- */
/* main page splash */

#splashy {
	background: url(../img/splashy.jpg) no-repeat; 
	margin: 8% auto 4%; 
	height: 482px; 
	width: 992px; 
}

#splashy p a {
	display: block; 
	height: 482px; 
	text-indent: -1000em; 
	width: 992px; 
}

#progress.loading {
	background: transparent url(../img/loading-dots.gif) no-repeat; 
	display: block; 
	height: 109px; 
	margin: 266px auto 0 450px; /* 311px auto 0 444px  286px auto 0 450px */
	width: 106px; 
}

#progress.loaded {
	display: none; 
}

#badges img {
	bottom: 3%;
	left: 3%;
	height: 110px;  
	position: fixed;
	width: 90px; 
}

/* fin main page */
/* ------------------------------------------------- */

.cleanup {
	clear: both; 
}

.vanish {
	display: none; 
}


/******************************************************
* the statement's and heroes' box overlap
******************************************************/
#statement li, .heroes li {
	float: left; 
}

#statement span, #statement a span, .heroes a span, #lbCloseLink span {
	display: block; 
	text-indent: -1000em; 
}


/******************************************************
* the statement
******************************************************/
#statement {
	background: transparent url(../img/dotty.gif) no-repeat center top; 
	height: 114px; 
	width: 992px; 
}

#statement ul {
	padding: 26px 0 0 282px; 
}

#statement li, #statement a span {
	background: transparent url(../img/statement.gif) no-repeat; 
	height: 47px; 
	/* overflow: hidden; For nested divs in Safari */
}

li#koils, #koils a span {
	width: 78px; 
}

li#digital, #digital a span {
	width: 81px; 
}

li#fineart, #fineart a span {
	width: 94px; 
}

li#pencil, #pencil a span {
	width: 74px; 
}

li#chronicle, #chronicle a span {
	width: 103px; 
}

li#koils { background-position: 0 0; }
li#digital { background-position: -78px 0; }
li#fineart { background-position: -159px 0; }
li#pencil { background-position: -253px 0; }
li#chronicle { background-position: -327px 0; }

#koils a span { background-position: 0 -88px; visibility: hidden; }
#digital a span { background-position: -78px -88px; visibility: hidden; }
#fineart a span { background-position: -159px -88px; visibility: hidden; }
#pencil a span { background-position: -253px -88px; visibility: hidden; }
#chronicle a span { background-position: -327px -88px; visibility: hidden; }

li#koils.selected { background: transparent url(../img/koils-select.png) no-repeat; }
li#digital.selected { background: transparent url(../img/digital-select.png) no-repeat; }


/******************************************************
* the heroes
******************************************************/
.heroes {
	margin: 17px 55px 0 55px; 
	text-align: center; 
}

.phantom {
	display: block; 
	height: 130px; 
	margin: 0; 
	padding: 0; 
	width: 126px; 
}

/*
.emptyHero {
	margin-left: 126px; 
	position: relative;
}

.emptyNewRow {
	clear: both; 
	display: block; 
	margin-left: 378px; 
}
*/

/* ------------------------------------------------- */
/* digital */

.heroes#digital1 li, .heroes#digital1 a span, .heroes#digital2 li, .heroes#digital2 a span {
	background: url(../img/diggy1.gif) no-repeat; 
	height: 130px; 
	width: 126px; 
}

.heroes#digital1 a span {
	background: url(../img/diggy1c.gif) no-repeat; 
}

.heroes#digital2 li, .heroes#digital2 a span {
	background: url(../img/diggy2.gif) no-repeat; 
}

/* fin digital */
/* ------------------------------------------------- */
/* fine art */

.heroes#fineart li, .heroes#fineart a span {
	background: url(../img/figgy.gif) no-repeat; 
	height: 130px; 
	width: 126px; 
}

/* fin fine art */
/* ------------------------------------------------- */
/* pencil */

.heroes#pencil li, .heroes#pencil a span {
	background: url(../img/piggy.gif) no-repeat; 
	height: 130px; 
	width: 126px; 
}

/* fin pencil */
/* ------------------------------------------------- */

.heroes li#h01 { background-position: 0 0; }
.heroes li#h02 { background-position: -126px 0; }
.heroes li#h03 { background-position: -252px 0; }
.heroes li#h04 { background-position: -378px 0; }
.heroes li#h05 { background-position: -504px 0; }
.heroes li#h06 { background-position: -630px 0; }
.heroes li#h07 { background-position: -756px 0; }
.heroes li#h08 { background-position: 0 -130px; }
.heroes li#h09 { background-position: -126px -130px; }
.heroes li#h10 { background-position: -252px -130px; }
.heroes li#h11 { background-position: -378px -130px; }
.heroes li#h12 { background-position: -504px -130px; }
.heroes li#h13 { background-position: -630px -130px; }
.heroes li#h14 { background-position: -756px -130px; }
.heroes li#h15 { background-position: 0 -260px; }
.heroes li#h16 { background-position: -126px -260px; }
.heroes li#h17 { background-position: -252px -260px; }
.heroes li#h18 { background-position: -378px -260px; }
.heroes li#h19 { background-position: -504px -260px; }
.heroes li#h20 { background-position: -630px -260px; }
.heroes li#h21 { background-position: -756px -260px; }
.heroes li#h22 { background-position: 0 -390px; }
.heroes li#h23 { background-position: -126px -390px; }
.heroes li#h24 { background-position: -252px -390px; }
.heroes li#h25 { background-position: -378px -390px; }
.heroes li#h26 { background-position: -504px -390px; }
.heroes li#h27 { background-position: -630px -390px; }
.heroes li#h28 { background-position: -756px -390px; }

.heroes #h01 a span { background-position: -882px 0; visibility: hidden; }
.heroes #h02 a span { background-position: -1008px 0; visibility: hidden; }
.heroes #h03 a span { background-position: -1134px 0; visibility: hidden; }
.heroes #h04 a span { background-position: -1260px 0; visibility: hidden; }
.heroes #h05 a span { background-position: -1386px 0; visibility: hidden; }
.heroes #h06 a span { background-position: -1512px 0; visibility: hidden; }
.heroes #h07 a span { background-position: -1638px -0; visibility: hidden; }
.heroes #h08 a span { background-position: -882px -130px; visibility: hidden; }
.heroes #h09 a span { background-position: -1008px -130px; visibility: hidden; }
.heroes #h10 a span { background-position: -1134px -130px; visibility: hidden; }
.heroes #h11 a span { background-position: -1260px -130px; visibility: hidden; }
.heroes #h12 a span { background-position: -1386px -130px; visibility: hidden; }
.heroes #h13 a span { background-position: -1512px -130px; visibility: hidden; }
.heroes #h14 a span { background-position: -1638px -130px; visibility: hidden; }
.heroes #h15 a span { background-position: -882px -260px; visibility: hidden; }
.heroes #h16 a span { background-position: -1008px -260px; visibility: hidden; }
.heroes #h17 a span { background-position: -1134px -260px; visibility: hidden; }
.heroes #h18 a span { background-position: -1260px -260px; visibility: hidden; }
.heroes #h19 a span { background-position: -1386px -260px; visibility: hidden; }
.heroes #h20 a span { background-position: -1512px -260px; visibility: hidden; }
.heroes #h21 a span { background-position: -1638px -260px; visibility: hidden; }
.heroes #h22 a span { background-position: -882px -390px; visibility: hidden; }
.heroes #h23 a span { background-position: -1008px -390px; visibility: hidden; }
.heroes #h24 a span { background-position: -1134px -390px; visibility: hidden; }
.heroes #h25 a span { background-position: -1260px -390px; visibility: hidden; }
.heroes #h26 a span { background-position: -1386px -390px; visibility: hidden; }
.heroes #h27 a span { background-position: -1512px -390px; visibility: hidden; }
.heroes #h28 a span { background-position: -1638px -390px; visibility: hidden; }

/* ------------------------------------------------- */
/* the heroes box */

#lbOverlay {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #060606;
	cursor: pointer;
}

#lbOverlay:hover {
	background-color: #000;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	left: 50%;
	overflow: hidden;
/* 	background: transparent url(../img/box/loading-bg.gif) top left repeat; */
	background-color: #060606;
}

.lbLoading {
	background: #060606 url(../img/box/loading-spin.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #060606;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../img/box/prevlabel.png) no-repeat 0% 27%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../img/box/nextlabel.png) no-repeat 100% 27%;
}

#lbBottom {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1.1em;
	color: #dadada;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #060606;
	border-top-style: none;
	text-shadow: 0 0 0 #555;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 30px;
	background: transparent url(../img/box/closelabel.gif) no-repeat; 
	background-position: 0 0; 
	margin: 5px 0;
}


#lbCloseLink span {
	background: transparent url(../img/box/closelabel.gif) no-repeat; 
	background-position: 0 -30px;
	height: 30px; 
	visibility: hidden; 
	width: 66px; 
	/* -_- me's the close link's shady fade effect */
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}

/* fin the heroes box */
/* ------------------------------------------------- */


/******************************************************
* chronicle
******************************************************/
#fable {
	margin: 17px auto 0 auto; 
	text-align: left; 
	width: 756px; 
}

#fable #leftColumn {
	display: block; 
	float: left; 
	padding-left: 18px; 
	/* -_- invisibel drop-shadow effectively lightens the weight of type - especially for light text on dark background */
	text-shadow: 0 0 0 #202020; 
	width: 486px; 
}

#fable #rightColumn {
	display: block; 
	float: right; 
	padding-right: 4px; 
	/* -_- invisibel drop-shadow effectively lightens the weight of type - especially for light text on dark background */
	text-shadow: 0 0 0 #202020; 
	width: 248px; 
}

/*
#fableFooter {
	background: #3cc;
	clear: both;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 756px;
}
*/



#fable #leftColumn i span { color: #404040; }


#fable p {
	font: 400 normal 1.4em/1.5 Georgia,serif;
	padding: 0.5em 0.9em 0.7em;
}

#fable h1 {
	font: 400 normal 2em/1.5 Georgia,serif;
/* 	letter-spacing: -1pt; */
	padding: 0.5em 0.6em 0;
}

#fable h3 {
	font: 400 italic 1.8em/1.5 Georgia,serif;
	padding: 0.1em 0.9em;
}

#fable h3#top {
	margin-top: 2.3em;
}

#fable h1 span, #fable h3 span, #fable p span {
	background: #060606;
	padding: 0.1em 0 0.2em;
}



#fable ol {
	margin: 0 0 1.8em;
}

#fable ol li {
	font-size: 1.286em; 
	line-height: 1.5; 
}



#fable a, #fable a:link {
	border-bottom: 1px solid #444; 
	color: #666; 
	text-decoration: none; 
}

#fable a:visited {
	color: #484848; 
	border-color: #383838; 
}

#fable a:focus, #fable a:hover, #fable a:active {
	color: #999; 
	border-color: #777; 
	text-decoration: none; 
}



abbr,acronym { border-bottom: 1px dotted #cdcdcd; cursor: help; }
em { font-style: italic; }

p { font-size: 1.6em; margin: 0 0 .25em; padding: 0 0 .9em; }



/* h2 { font: 400 normal 2em/1.5 Georgia,serif; margin: .5em 0 .5em; } */
/* -_- or margin: .2em 0 .5em; */



/* blockquote p { margin-left: 2em; margin-right: 2em; background: #fff; } */


/******************************************************
* warnings and tips
******************************************************/
#jswarning, #iewarning {
	margin: 0 auto 0; 
	width: 400px; 
}

#jswarning img, #iewarning img {
	height: 76px; 
	position: absolute; 
	text-align: center; 
	top: 16px; 
}

#jswarning img {
	z-index: 100; 
}

#iewarning img {
	z-index: 99; 
}

/* ------------------------------------------------- */
/* not the heroes'superhero, but a tip */

.super-tip {
	color: #686868; 
	text-align: left; 
	text-shadow: none; 
	width: 186px; 
}

.super-text {
	background: url(../img/bubble.png) top left; 
	font: 400 italic 1.4em/1.5 Helvetica,Arial,sans-serif; 
	min-height: 22px; 
	padding: 22px 18px 4px 24px; 
}

.super-title {
	background: url(../img/bubble.png) bottom right; 
	color: #ddfdfd; 
	font: 400 normal 6px/1 Helvetica,Arial,sans-serif; 
	height: 24px; 
	padding-left: 20px; 
}

/* fin tip */
/* ------------------------------------------------- */


/******************************************************
* legal
******************************************************/
#footer {
	height: 36px; 
	margin: 0 auto 0; 
	padding-bottom: 20px; 
	width: 992px; 
}

#legal {
	background: transparent url(../img/guterrez.png) top left no-repeat; 
	color: #393939; 
	font: 400 normal 1em/1.5 "HelveticaNeue-Light",Helvetica,Arial,sans-serif; 
	height: 36px; 
	margin-left: 260px; 
	padding-left: 133px; 
	padding-top: 2px; 
	width: 370px; 
	text-align: left; 
	text-transform: uppercase; 
}

/*
img[alt~="Copyright"]:hover {
	background: #060606; 
}
*/