/*
########################################################
# Codename: Kriminal                                   #
# Description: Personal Website                        #
# Copyright (c) 2007 Maximiliano Kraszewski            #
# Email: dev(at)minimalart.org                         #
# Release 6.0 [build 20080724]                         #
# ==================================================== #
# @file: base.css                                      #
# @desc: base style                                    #
# @version: 1.0                                        #
# @date: 24/07/2008                                    #
########################################################


[Table of contents]

1. Main layout (body, #container, .breaks)
2. Header (#header)
3. Intro (#intro)
4. Content (#main, .columns)
4.1. Web
4.1.1. Gallery
4.2. Email
4.3. Xtend
4.4. Iconbox
4.4.1. Textbox 
4.4.2. Textinfo
4.4.3. Contact form  
5. Quote
6. Footer (#footer)
+ Addons: Modal Boxes

[Color codes]

# Grey 1		#292929 (iconbox, textbox) 
# Grey 2		#353534 (body) 
# Grey 3 		#333333 (modal text)
# Grey 4 		#555555 (gallery border, email li, textinfo border, modal border)
# Grey 5 		#666666 (form input text)
# Grey 6 		#888888 (intro span)
# Grey 7 		#BBBBBB (email ul links, xtend ul links, quote)
# Grey 8 		#CDCDCD (form inputs)
# Grey 9 		#DDDDDD (modal)
# Bronze 		#BFB683 (intro text, more, less:hover, comentarios)
# Gold			#FFD700 (more:hover, less)
# Brick			#990000 (gallery links) 
# Firebrick		#B22222 (form error)
# Orange		#FF6600 (modal) 
# Brown			#CD3333 (input error) 
# Dodger Blue	#1E90FF (email links, form input:hover) 
# Lawn Green	#7CFC00 (xtend links) 
# White smoke 	#F5F5F5 (main text) 
# White			#FFFFFF (border, gallery links)
# Black			#000000 (gallery links) 

*/

/******************
 (1) MAIN LAYOUT
*******************/
body {
	background-color: #353534;
	color: #F5F5F5;
	font: normal 62.5% Arial, Helvetica, sans-serif;
}

#container{
	margin:0 auto;
	width: 960px;
}

.break-up, .break-down{
	border:none;
	display:block;
	height:21px;
}

.break-up{
	background:url('../img/break-up.png') no-repeat top center;
}

.break-down{
	background:url('../img/break-down.png') no-repeat top center;
	clear:both;
}

.hidden{display:none}

/******************
 (2) HEADER
*******************/
#header{
	border-bottom:1px solid #888;
	float:left;
	display:block;
	margin-top:20px;
	padding-bottom:2px;
	width:100%;
}

#header .logo, #header .tagline, #header .dateline {
	height:38px;
	float:left;
}

#header .logo{ 
	background:url('../img/logo.png') no-repeat top left; 
	width:225px;
}

#header .tagline{ 
	background:url('../img/tagline.png') no-repeat top left; 
	width:250px;
}

#header .dateline{ 
	background:url('../img/dateline.png') no-repeat top left;
	float:right; 
	text-indent:-9999px;
	width:153px;
}

#header h1, #header h2 {display:none; }


/******************
 (3) INTRO
*******************/
#intro{
	clear:both;
	padding:15px 20px;
}

#intro p{
	color:#BFB683;
	font:1.8em/1.3em Georgia, "Times New Roman", Times, serif;
}

#intro p span{
	color:#888;
}

/******************
 (4) CONTENT
*******************/
#main{
	display:block;
	margin-bottom:20px;
	float:left
}

.column{
	float:left;
	padding:10px;
	width:450px;
}

.left{ padding-left:20px; }

.right{	padding-right:20px; }

/* --------------
 * (4.1) WEB
 * --------------*/

h3{
	height:36px;
	font: bold 1.9em Georgia, "Times New Roman", Times, serif;
	margin:20px 0 10px 0;
	padding-left:5px;
	text-indent:-9999px;
	text-transform:lowercase;
	width:440px;
}

h3.web{background:url('../img/title-web.png') no-repeat top left;}
h3.email{background:url('../img/title-mail.png') no-repeat top left;}
h3.xtend{background:url('../img/title-xtra.png') no-repeat top left; margin-top:40px}


h4{
	font:bold 1.2em/1.5em Arial, Helvetica, sans-serif;
	margin-left:10px;
}

h4 span{
	color:#BBB;
	font-size:0.9em;
}

#main p.introtxt{
	font:1.2em/1.4em Arial, Helvetica, sans-serif;
	margin-bottom:8px;
	color:#BBB;
}

#main p.subtxt{
	font:1.1em/1.3em Arial, Helvetica, sans-serif;
	margin:0 20px 5px 10px;
}

#main a.more{
	color:#BFB683;
	font-weight:bold;
	text-decoration:none;
}

#main a.more:hover{color:#FFD700;}

#main a.less{
	color:#FFD700;
	font-weight:bold;
	text-decoration:none;
}

#main a.less:hover{color:#BFB683;}


/* (4.1.1) GALLERY */

.gallery{
	background:url('../img/capturas.png') no-repeat 10px 13px;
	width:411px;
}

.gallery ul{
	float:right;
	margin:5px -4px 0 10px;
}

.gallery ul li{
	float:left;
	margin-left:2px;
	text-align:center;
}
.gallery ul li a{
	border:1px solid #555;
	color:#FFF;
	display:block;
	font: 0.8em Arial, Helvetica, sans-serif;
	padding:2px 4px;
	text-decoration:none;
}

.gallery ul li a:hover{
	background-color:#000;
	border:1px solid #FFF;
	color:#FFF;
}

.gallery ul li a.selected{
	background-color:#900;
	border:1px solid #FFF;
	color:#FFF;
}

.gallery div.photo{
	background:url('../img/loader.gif')  no-repeat 50% 40%;
	clear:both;
	display:none;
	height:267px;
	margin-left:10px;
	padding-top:3px;
	width:411px;
}

.gallery span{
	clear:both;
	display:block;
	text-align:right;
	margin-right:-4px;
}

.gallery span a{
	color: #BFB683;
	letter-spacing:0.2em;
	font: 0.9em Arial, Helvetica, sans-serif;
	text-decoration:none;
}

.gallery span a:hover{
	color:#FFF;
}

.subSeparator{
	border-bottom:1px solid #555;
	clear:both;
	margin:5px 0 15px 10px;
	width:405px;
	height:1px;
}

/* --------------
 * (4.2) EMAIL
 * --------------*/

ul.email, ul.xtend{
	display:block;
	margin:5px 0 15px 10px;
}

ul.email li,
ul.xtend li{
	border-bottom:1px solid #555;
	line-height:1.6em;
	width:230px;
}

ul.email li a,
ul.xtend li a{
	color:#BBB;
	text-decoration:none;
}

ul.email li a:hover{color:#1E90FF}

/* --------------
 * (4.3) EXTRA
 * --------------*/
ul.xtend li a:hover{color:#1E90FF}

/* --------------
 * (4.4) ICONBOX
 * --------------*/

#iconBox{
	float:left;
	width:430px;
}

#iconBox ul.bar{
	height:30px;
	background:url('../img/iconbox.png') no-repeat top left;
	margin-top:10px;
}

#iconBox ul.bar li{
	float:left; 
}

#iconBox ul.bar li span {display:none}

#iconBox ul.bar li a {
	display: block; 
	height: 30px; 
	position: relative; 
}

#agradecimientos a{width:175px;}
#comentarios a{width:125px;}
#contacto a{width:130px;}
#agradecimientos a:hover{ background:url('../img/iconbox.png') 0px -30px; }
#comentarios a:hover{ background:url('../img/iconbox.png') -175px -30px; }
#contacto a:hover{ background:url('../img/iconbox.png') -300px -30px; }
#agradecimientos a.active{ background:url('../img/iconbox.png') 0px -60px; }
#comentarios a.active{ background:url('../img/iconbox.png') -175px -60px; }
#contacto a.active{ background:url('../img/iconbox.png') -300px -60px; }

/* (4.4.1) TEXTBOX */
#textBox{
	background-color:#292929;
	display:none;
	height:258px;
	margin:3px 0 0 18px;
	padding:10px;
	width:374px;
}

#textBox div.content {
	display:none;
	height:243px;
}

#textBox div.content h6{
	color:#555;
	font:1.6em/1.5em Georgia, "Times New Roman", Times, serif;
}

#textBox div.content span{
	color:#BFB683;
}

#textBox div.content div.text{
	overflow:auto;
}

#textBox div.content div.text p{
	font:1.1em/1.4em Arial, Helvetica, sans-serif;
	margin:3px 0 0 5px;
}

#textBox div.content div.text ul{
	color:#BBB;
	font:1.1em/1.4em Arial, Helvetica, sans-serif;
	margin:6px 0 0 8px;
}

#textBox div.info {
	clear:both;
	display:none;
	border-top:1px solid #333;
	width:374px;
}

#textBox div.info div.cerrar{
	display:block;
	float:right;
	padding-top:3px;
}

#textBox div.info div.cerrar a{
	color: #BFB683;
	letter-spacing:0.2em;
	font: 0.9em Arial, Helvetica, sans-serif;
	text-decoration:none;
}

#textBox div.info div.cerrar a:hover{
	color:#FFF;
}

#textBox div.info div.count{
	color:#555;
	float:left;
	font:bold 1.2em Georgia, "Times New Roman", Times, serif;
	padding-top:3px;
	width:160px;
}

#textBox div.info ul{
	height:20px;
	background:url('../img/textbox.png') no-repeat 0 -20px;
	margin-top:1px;
	float:left;
	width:62px;
}

#textBox div.info li{
	float:left; 
}

#textBox div.info ul li a {
	display: block; 
	height: 20px; 
	position: relative; 
}

#first a, #last a{width:18px;}
#prev a, #next a{width:13px}

#first a:hover{ background:url('../img/textbox.png') 0 -40px; cursor:pointer;}
#prev a:hover{ background:url('../img/textbox.png') -18px -40px; cursor:pointer;}
#next a:hover{ background:url('../img/textbox.png') -31px -40px; cursor:pointer;}
#last a:hover{ background:url('../img/textbox.png') -44px -40px; cursor:pointer;}

#first a.inactive{ background:url('../img/textbox.png') 0px 0; cursor:default}
#prev a.inactive{ background:url('../img/textbox.png') -18px 0; cursor:default}
#next a.inactive{ background:url('../img/textbox.png') -31px 0; cursor:default}
#last a.inactive{ background:url('../img/textbox.png') -44px 0; cursor:default}

/* (4.4.2) CONTACT FORM */

#fm{
	float:left;
	width:200px;
}

#fm label{
	display:none;
}

#fm button,
#fm input,
#fm textarea{
	color:#666;
	background-color:#CDCDCD;
	border:1px solid #555;
	display:block;
	font:1.1em Arial, Helvetica, sans-serif;
	margin-top:5px;
	padding:2px 0 0 22px;
	width:180px;
}

#fm button{
	width:60px;
	margin:5px 0 3px 144px;
	padding:3px 5px;
}

#fm button.focus{
	background-color:#FFF;
	border:1px solid #FF6600;
	color: #FF6600;
	cursor:pointer;
}

#fm input{height:18px;}

#fm textarea{height:140px;}

#fmName{background:url('../img/contact-name.off.png') no-repeat 2px 1px;}
#fmEmail{background:url('../img/contact-email.off.png') no-repeat 2px 1px;}
#fmMensaje{background:url('../img/contact-msg.off.png') no-repeat 2px 1px;}

#fmName.focus{
	background:#FFF url('../img/contact-name.on.png') no-repeat 2px 1px;
	border:1px solid #1E90FF
}

#fmEmail.focus{
	background:#FFF url('../img/contact-email.on.png') no-repeat 2px 1px;
	border:1px solid #1E90FF
}

#fmMensaje.focus{
	background:#FFF url('../img/contact-msg.on.png') no-repeat 2px 1px;
	border:1px solid #1E90FF
}

#fmName.error{background:#FFF url('../img/contact-name.error.png') no-repeat 2px 1px; border-color:#B22222; color:#B22222}
#fmEmail.error{background:#FFF url('../img/contact-email.error.png') no-repeat 2px 1px; border-color:#B22222; color:#B22222}
#fmMensaje.error{background:#FFF url('../img/contact-msg.error.png') no-repeat 2px 1px; border-color:#B22222; color:#B22222}

#fmNotes{
	float:left;
	margin:5px 0 0 15px;
	width:155px;
}

#fmNotes p{
	border-top: 1px solid #555;
	display:block;
	padding-top:3px;
}

#fmNotes p a{
	color:#BFB683;
	text-decoration:none;
}

#sendMsg{
	display:block;
	height:138px;
	margin-bottom:7px;
	width:150px;
}

#sendMsg.sending{
	background:url('../img/loader-snd.gif') no-repeat top left;
	display:block;
	height:18px;
	margin-top:118px;
	text-indent:20px;
}

#sendMsg.error{
	background-color:#B22222;
	border:2px solid #FFF;
	color: #FFF;
	height:38px;
	margin-top:92px;
	padding:2px;
}

#sendMsg.success{
	background-color:#308014;
	border:2px solid #FFF;
	color: #FFF;
	height:38px;
	margin-top:92px;
	padding:2px;
}

/******************
 (5) QUOTE
*******************/

#quote{
	background:url('../img/quote.png') no-repeat top left;
	color:#888;
	float:left;
	font:normal 1.1em/1.6em Georgia, "Times New Roman", Times, serif;
	margin:3px 20px 5px -18px;
	padding:5px 0 0 45px;
	width:440px;
}

/******************
 (6) FOOTER
*******************/
#footer{
	border-top:1px solid #FFF;
	float:left;
	display:block;
	margin:20px 0;
	padding-top:2px;
	width:100%;
}

#footer a{
	color:#BBB;
	text-decoration:none;
}

#footer a:hover{color:#BFB683}

#footer .copy{float:left}

#footer .devinfo{float:right}


/**********************
+ ADDONS: MODAL BOXES
**********************/
#modal {
	background-color:#DDD;
	border:5px solid #555;
	color:#333;
	display: none;
	height:560px;
	left: 50%;
	margin-left: -250px;
	margin-top: -280px;
	overflow:auto;
	padding:15px;
	position: fixed;
	top: 50%;
	width: 500px;
	z-index:2000;

}
#modalOverlay {
	background-color:#000;
	display: none;
	left: 0;
	height:100%;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:1000;
	opacity:.80;
	-moz-opacity: 0.8;
}

#modal h5 {
	font-size:1.4em;
	font-weight:bold;
	border-bottom:1px solid #999;
	padding-bottom:4px
}

#modal .info {
	text-align:right;
	color:#888;
	margin-bottom:2px
}

#modal blockquote {
	text-align:right;
	color:#888;
	font-style:italic;
}

#modal p {
	font:1.1em Georgia, "Times New Roman", Times, serif;
	padding:5px 15px 10px 15px;
	line-height:1.6em;
	text-align:left;
}

#modal .text {
	height:500px;
	margin-top:3px;
	overflow:auto;
}

#modal .close {
	border-top:1px solid #CCC;
	bottom:0;
	color:#888;
	display:block;
	height:25px;
	padding-top:3px;
	position:absolute;
	text-align:right;
	width:500px;
}

a.modalClose{color:#777;text-decoration:none;}
a.modalClose:hover {color:#F60;}