/* 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 */

body { color: #000000; font-family: Georgia, serif; font-size: 16px; }

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; text-transform: uppercase; color: #000; line-height: 1em; }
h2 { font-size: 0.75em; font-weight: normal; padding: 0 0 8px 0; color: #3db5db; }
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: #3db5db; }


p, ol, ul { font-size: 1em; line-height: 1.6em;}
#work { font-size: 0.8em; line-height: 1.6em;}
a { text-decoration: none; color: #222; border-bottom: none; outline: none; }
a:hover { border-bottom: none; color: #3db5db; border-bottom: none; }
a.noborder, .thumbnails a { border-bottom: none; }


/* Estructura */
#header { position: fixed; width: 340px; height: 865px; top: 20px; left: 0; z-index: 99; }
#container { padding: 0 10px 0 340px; margin: 0; width: 720px;}


#four_steps { font-size: 1em; line-height: 1.2em;}


/* Secciones */
.top, #sequential, #about, #links { margin: 0; padding: 5px 0 0px 0; position: relative; }
.top .content { width: 710px; height: 1000px; background: url(../images/top.png) no-repeat left top; padding-top:0px;}

#work { margin: 0; padding: 0px 0 0px 0; position: relative; }

#work .content { background: url(../images/work.png) no-repeat right top; display: block; height: 1000px; width: 770px;  padding-top: 0px;  }
.portfolio_header {background-color:#3db5db; padding:3px; font-size:18px}

#sequential .content { text-align: left; background: url(../images/services.png) no-repeat right top; display: block; height: 1000px; width: inherit; padding-top: 0px }
#about .content { background: url(../img/about.png) no-repeat right top; display: block;  height: 1000px;  padding-top:15px;}
#links .content { background: url(../images/contact.png) no-repeat right top;  height: 1000px; display: block; padding-top: 20px; padding-left: 0px;  }
#footer .content { text-align: left; margin: 30px 0 0 50px; padding: 45px 0 70px 0; position: relative; }



/* 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(../images/about.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 }
#entry_text {font-size:3.1em; padding-top:40px; padding-left:10px; line-height:1em};
/* Libros de Sequential */
#muertopia { background: transparent url(../img/muertopia.png) no-repeat left top; position: absolute; top: 245px; 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: 315px; left: 60px; width: 307px; height: 59px; 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;
}

/* Navigation */

#nav ul {
	margin:0px 0px 0px 0px;
	padding:0;
	list-style:none;
}


#nav li {
	margin:0px 0px -8px 0px;
	height:50px;
}


#nav a {
	display:block;
	height:50px;
	text-decoration:none;
	border:none;
}



#nav a.home {
	width:140px;
}

#nav a.homecurrent {
	width:140px;
}


#nav a.salon {
	width:127px;
} 

#nav a.treatments {
	width:241px;
}

#nav a.rituals {
	width:152px;
}

#nav a.contact {
	width:166px;
}


#nav a.home:link,
#nav a.home:active,
#nav a.home:visited 
{
	background:url(../images/nav/salon_home.gif) 0 0 no-repeat;
}

#nav a.home:hover {
	background-position:0 -50px;
}


#nav a.salon:link,
#nav a.salon:active,
#nav a.salon:visited{
	background:url(../images/nav/salon_salon.gif) 0 0px no-repeat;
}

#nav a.salon:hover {
	background-position:0 -50px;
}

#nav a.treatments:link,
#nav a.treatments:active,
#nav a.treatments:visited {
	background:url(../images/nav/salon_treatments.gif) no-repeat;
	background-position:0 0;
}

#nav a.treatments:hover {
	background-position:0 -50px;
}

#nav a.rituals:link,
#nav a.rituals:active,
#nav a.rituals:visited {
	background:url(../images/nav/salon_rituals.gif) 0 0 no-repeat;
}

#nav a.rituals:hover {
	background-position:0 -50px;
}

#nav a.contact:link,
#nav a.contact:active,
#nav a.contact:visited {
	background:url(../images/nav/salon_contacts.gif) 0 0 no-repeat;
}

#nav a.contact:hover {
	background-position:0 -50px;
}


.nav-text {
	visibility:hidden;
}

.logo-margin {
	margin:0px 0px 0px 30px;
}

#form {
padding:0 40px 0 40px;
text-align:left;
}

#main div#form p {
margin:0px;
width:353px;
}

input, textarea {
font-family:Arial, Helvetica, sans-serif;
color:#404040;
font-size:11px;
}

.buttonSubmit, .buttonSubmit:hover {
width:69px;
height:26px;
color:#FFF;
font-weight:bold;
background:url(../images/button.gif) no-repeat left top;
cursor:pointer;
border:0px;
line-height:26px;
}


.buttonSubmit:hover {
background-position:left bottom;
}

.textarea, .textarea:hover {
width:336px;
height:125px;
border:0px;
padding:4px 8px;
overflow:auto;
margin-bottom:4px;
background:#fff url(../images/textarea.gif) top left no-repeat;
}
.textarea:hover {
background:#fff url(../images/textarea.gif) top right no-repeat;
}

.textinput, .textinput:hover {
width:236px;
height:16px;
border:0px;
padding:4px 8px;
margin-bottom:4px;
background:#fff url(../images/input.gif) top left;
	
}
.textinput:hover {
background:#fff url(../images/input.gif) bottom left;
}

/* MISC */

.grey {
color:#999999;
}

span.blue {
color:#70b6ce;
}

#entry_options{
padding-top:40px;
}

#entry_options a {
 padding: 5px 0 0 35px;
 margin-left: 3px;
 font-size:1.7em;
 border-bottom: none;
 text-decoration: none;
 display:block;
height:30px;
float:left;
}

.nav_text {
	visibility:hidden;
}

#entry_options a {
	width:200px;
}


#entry_options a:link,
#entry_options a:active,
#entry_options a:visited 
{
	background:url(../images/rollover_bg.gif) 0 0 no-repeat;
}

#entry_options a:hover {
	background-position:0 -43px;
}


#portfolio_options{
padding-top:10px;
}

#portfolio_options a {
 padding: 5px 0 0 35px;
 margin-left: 3px;
 font-size:1.5em;
 border-bottom: none;
 text-decoration: none;
 display:block;
height:21px;
float:left;
}

.nav_text {
	visibility:hidden;
}

#portfolio_options a {
	width:200px;
}


#portfolio_options a:link,
#portfolio_options a:active,
#portfolio_options a:visited 
{
	background:url(../images/rollover_bg_small.gif) 0 0 no-repeat;
}

#portfolio_options a:hover {
	background-position:0 -21px;
}


#log {
	width: 290px;
	margin-top: 10px;
}
 
#log_res {
	overflow: auto;
	color:#70b6ce;
}
 
#log_res.sending {
	padding: 20px 0;
	background: url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat center;
}