/*================================================================
NOMBRE: M1ML
FECHA: 05/11/2007
DESCRIPCIÓN: Interface M1ML - Paisaje Sensorial
AUTOR: Simon Madrid
====================================================================*/


/*standar*/
body{
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
}


p{
	padding: 5px;
	margin: 0;
	font: normal 0.68em "Trebuchet MS", Arial, Helvetica, sans-serif;
	float: left;
	width: 505px;
	color: #fff;
	background-color: inherit;
}

h1 span, h2 span, h3 span, h4 span{
	display: none;
}

h2{
	margin: 0;
	padding: 0 0 5px 355px;
	font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #760000;
	background-color: inherit;
}

img{
	border: 0;
}



/*layout*/
#wrapper{
	margin: 0 auto;
	width: 1000px;
	height: auto;
}

#container1{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 55px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#container1b{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 35px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#container2{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 35px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base2_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#container3{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 270px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base3_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#container4{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 35px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base4_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#container5{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 270px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base5_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#container6{
	float: left;
	position: relative;
	margin: 0 auto;
	padding: 35px 0 5px 0;
	width: 1000px;
	background-image: url(../i/base6_bg.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}



#inferior{
	background: transparent url(../i/bg_inferior.gif) repeat-y 0 0;
	float: left;
	margin-top: 18px;
	padding: 7px 0 7px 0;
	width: 100%;
}

#pie{
	clear: both;
	display: block;
	position: relative;
}


/*Otros*/
#fechalugar{
	left: 20px;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #404040;
	background-color: inherit;
	padding: 0 0 0 355px;
}

#validation{
	position: absolute;
	right: 118px;
	top: 0;
}

#captionhome{
	position: relative;
	float: left;
	padding-left: 355px;
}

#caption{
	position: relative;
	float: left;
	padding-left: 355px;
}

#captionsend{
	position: relative;
	float: left;
	padding-left: 355px;

}

#captionsend2{
	position: relative;
	float: left;
	margin: 0 0 0 0px;
        border-right: 1px solid #777777;
        border-left: 1px solid #777777;
        border-top: 1px solid #777777;
        border-bottom: 1px solid #777777;
        background-color: white;


}

#caption span{
	font: normal 0.75em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #959595;
	background-color: inherit;
}

#captionsend span{
	font: normal 0.75em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #959595;
	background-color: inherit;
}

#gallery, #credits{
	position: relative;
	padding-left: 355px;
	margin: 0;
}

#credits p{
	color: #404040 !important;
	background-color: inherit;
}

#credits a{
	color: #760000;
	background-color: inherit;
	text-decoration: none;
}

#credits a:hover{
	color: #000;
	background-color: inherit;
	text-decoration: underline;
}

#datehour{
	position: absolute;
	top: 9px;
	right:13px;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif;
}

#namecaption{
	position: absolute;
	top: 9px;
	left:368px;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #959595;
	background-color: inherit;
}

#botonera{
        float: left;
        margin: 0;
        padding: 0;
        padding-left: 355px;
}

#gray{
	color: #760000;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif !important;
	float: left;
	background: #DCDCDC url(../i/bg_gray.gif) no-repeat 5px -2px;
	padding: 0.4em;
	margin-right: 11px;
	width: 335px;
	height: 125px;
	position: relative;
}

#gray span{
	display: none;
}

#gray3{
	color: #760000;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif !important;
	float: left;
	background: #DCDCDC url(../i/bg_gray_none.gif) no-repeat 5px -2px;
	padding: 0.4em;
	margin-right: 11px;
	width: 335px;
	height: 125px;
	position: relative;
}

#gray3 span{
	display: none;
}


#memoria, #paisaje, #sube, #audio{
	float: left;
	padding: 0.2em;
	height: 120px;
}

#red{
	float: right;
	background-color: inherit;
	color: #fff;
	height: 125px;
	width: 107px;
}

#gray2{
	position: absolute;
	left: 8px;
	bottom: 0px;
	width: 330px;
}

#visitas, #postales{
	position: absolute;
	border-right: 30px solid #760000;
	text-transform: uppercase;
	color: #760000;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif;
	background-color: inherit;
	padding-right: 3px;
	width: 200px;
	text-align: right;
}

#visitas{
	top: 352px;
	left: 545px;
}

#postales{
	top: 368px;
	left: 545px;
}


/*images*/
#captionhome img{
	border-style: solid;
	border-color: #FDFDFD;
	padding: 13px;
	background: transparent url(../i/bg_caption.gif) no-repeat 0 0;
}

#caption img{
	border-style: solid;
	border-color: #FDFDFD;
	padding: 13px;
	background: transparent url(../i/bg_caption.gif) no-repeat 0 0;
}

#captionsend img{
	border-style: solid;
	border-color: #FDFDFD;
	padding: 13px;
	background-color: inherit;
}

/*lists*/
#red ul{
	float: right;
	margin: 0;
	padding: 0 10px 7px 5px;
	list-style: none;
}

#red ul li{
	display: block;
	text-align: right;
}

#caption ul{
	float: left;
	width: 400px;
	margin: 0;
	padding: 15px 0 15px 0;
	list-style: none;
}

#caption ul li{
	background-image: url(../i/bullet_audio.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: inherit;
	padding: 0 0 10px 20px;
	margin: 0;
	float: left;
	width: 100%;
	font: normal 0.75em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #760000;
}

#caption ul li span{
	clear: both;
	display: block;
	color: #959595;
	background-color: inherit;
	margin: 0;
	padding: 0;
	
}

#captionsend ul{
	float: left;
	width: 400px;
	margin: 0;
	padding: 15px 0 15px 0;
	list-style: none;
}

#captionsend ul li{
	background-image: url(../i/bullet_audio.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: inherit;
	padding: 0 0 10px 20px;
	margin: 0;
	float: left;
	width: 100%;
	font: normal 0.75em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #760000;
}

#captionsend ul li span{
	clear: both;
	display: block;
	color: #959595;
	background-color: inherit;
	margin: 0;
	padding: 0;
	
}

/*links*/
#red ul li a{
	color: #fff;
	background-color: #760000;
	text-decoration: none;
	font: normal 0.55em "Lucida Sans", Arial, Helvetica, sans-serif;
}

#red ul li a:hover{
	background-color: #DCDCDC;
	color: #434343;
}

#gray2 a{
	color: #636060;
	background-color: inherit;
	text-decoration: none;
}

#gray2 a:hover{
    color: #222020;
	background-color: inherit;
	text-decoration: none;
}

#pie2 a:hover{
	color: #760000;
	background-color: inherit;
	text-decoration: underline;
}

#caption ul li a{
	color: #760000;
	background-color: inherit;
	text-decoration: none;
}

#caption ul li a:hover{
	color: #760000;
	background-color: inherit;
	text-decoration: underline;
}

#captionsend ul li a{
	color: #760000;
	background-color: inherit;
	text-decoration: none;
}

#captionsend ul li a:hover{
	color: #760000;
	background-color: inherit;
	text-decoration: underline;
}


/*headers*/
h1 {
	position: absolute;
	background: url(../i/h1.gif) no-repeat 0 0;
	top: 0;
	left: 50px;
	width: 112px;
	height: 238px;
	margin: 0;
	padding: 0;
   z-index: 1000;
}

h1 a{
	display: block;
	width: 112px;
	height: 238px;
}

#memoria h3{
	background: #000 url(../i/h3_memoria.gif) no-repeat 3px 0; 
	color: #fff;
	width: 225px;
	height: 15px;
	padding: 3px;
	margin: 0;
}

#paisaje h3{
	background: #000 url(../i/h3_paisaje.gif) no-repeat 3px 0; 
	color: #fff;
	width: 300px;
	height: 15px;
	padding: 3px;
	margin: 0;
}


#sube h3{
	background: #000 url(../i/h3_sube.gif) no-repeat 3px 0; 
	color: #fff;
	width: 300px;
	height: 15px;
	padding: 3px;
	margin: 0;
}

#audio h3{
	background: #000 url(../i/h3_audio.gif) no-repeat 3px 0; 
	color: #fff;
	width: 146px;
	height: 15px;
	padding: 3px;
	margin: 0;
}

#comment h4{
	color: #000;
	background: #fff url(../i/h4_comentario.gif) no-repeat 0 0;
	margin: 0;
	padding: 0 0 7px 0;
	width: 76px;
	height: 15px;
	clear: both;
	display: block;
}


/*navigation*/
.mail span, .audio span, .photo span, .flicker span{
	display: none;
}

.mail, .audio, .photo, .flicker{
	width: 37px;
	height: 27px;
	float: left;
	margin-right: 5px;
}

.mail{
	background: url(../i/bot_mail.gif) no-repeat 0 0;
	}
.mail:hover{
	background: url(../i/bot_mail.gif) no-repeat 0 -27px;
}

.audio{
	background: url(../i/bot_audio.gif) no-repeat 0 0;
}
.audio:hover{
	background: url(../i/bot_audio.gif) no-repeat 0 -27px;
}

.photo{
	background: url(../i/bot_photo.gif) no-repeat 0 0;
}
.photo:hover{
	background: url(../i/bot_photo.gif) no-repeat 0 -27px;
}

.flicker{
	background: url(../i/bot_flicker.gif) no-repeat 0 0;
}
.flicker:hover{
	background: url(../i/bot_flicker.gif) no-repeat 0 -27px;
}

/*gallery*/
.thumbnail a{
	float: left;
	width: 120px;
	border: 1px solid #999;
	margin: 0 15px 15px 0;
	padding: 5px;
	background-color: #fff;
	display: block;
	text-decoration: none;
	color: #760000;
	font: normal 0.7em "Lucida Sans", Arial, Helvetica, sans-serif;
}

.thumbnail a:hover{
	background-color: #000;
	color: #fff;
}

.clearboth { clear: both; }



/*paginacion*/
#paginacion{
	float: right;
	margin: 0;
	padding: 0 66px 0 0;
}

#paginacion ul{
	list-style: none;
	margin: 0;
	padding: 0;

}

#paginacion li{
	float: left;
}

#paginacion li a, #paginacion li a.activo{
	font: normal 0.7em "Lucida Sans", Arial, Helvetica, sans-serif;
	display: block;
	padding: 2px 5px;
	margin: 2px;
	text-decoration: none;
}

#paginacion li a{
	background-color: #E5E5E5;
	color: #000;
}

#paginacion li a.activo{
	background-color: #760000;
	color: #fff;
}

#paginacion li a:hover{
	background-color: #000;
	color: #fff;
}

/*formularios*/
form{
	display: inline;
}

label{
	clear: both;
	display: block;
	width: 390px;
	font: normal 0.7em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #959595;
	background-color: inherit;
	margin-top: 7px;
}


#comment{
	float: left;
	margin: 0;
	padding: 0 0 15px 354px;
}

#comment p{
	font: normal 0.7em "Lucida Sans", Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0 0 5px 0;
	clear: both;
	color: #959595;
	background-color: inherit;
}

#comment img{
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}

#comment input{
	border: 1px solid #DCDCDC;
	width: 120px;
	height: auto;
	margin: 0;
	padding: 0.4em;
	font: normal 0.65em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #760000;
	background-color: #F8F5F5;
	clear: both;
}

#comment textarea{
	border: 1px solid #DCDCDC;
	overflow: auto;
	width: 385px;
	height: 60px;
	margin: 0;
	padding: 0.4em;
	font: normal 0.65em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #760000;
	background-color: #F8F5F5;
}

#comment .enviar, .enviar{
	display: block;
	color: #000;
	background: #fff url(../i/bot_submit.gif) no-repeat 0 0;
	width: 53px;
	height: 21px;
	border: 0;
	font: bold 0.7em "Lucida Sans", Arial, Helvetica, sans-serif;
	margin: 7px 0 5px 0;
	padding: 0.2em;
}

#comment .code{
	width: 30px !important;
}

#file{
	display: block;
	border: 1px solid #DCDCDC;
	font: normal 0.65em "Lucida Sans", Arial, Helvetica, sans-serif;
	color: #760000;
	background-color: #fff;
	padding: 0.4em;
	
}