/**********  HTML STYLES  ***/
@import url(screen.css);

/**********  COMMON STYLES  */
html { background-color: #000;}

body {
	margin: 0; padding: 0;
	color:#660000;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	text-align:center;
	background: #000;
}

.clear { clear: both;}
.divider { 
	clear: both; 
	width: 100%; 
	height: 16px; 
	background: url(../_img/bgDivider.gif) center center no-repeat;
	padding: 0;
	margin: 10px 0;
}

.bold {font-weight: bold;}

.alignright { float: right;	}
.alignleft { float: left; }
.aligncenter, div.aligncenter { display: block;	margin-left: auto; margin-right: auto; }

/**********  INDEX  **********/
body#index .container { background: #000; }
body#index .container p {margin: 0 0 5px; padding: 0; text-align: center;}
body#index .container p a { color: #FFFFCC; text-decoration: none; }
body#index .container p a:hover { border-bottom: 2px solid #FFFFCC;}

/**********  HOME  ***********/
body#inicio #header { height: 90px; background:url(../_img/bgHeaderHome.jpg) no-repeat; }
body#inicio #content { margin: 0; height: 455px; width: 550px; background: url(../_img/body-home.jpg) no-repeat; }
body#inicio #sidebar { width: 250px; height: 455px; background:url(../_img/lateral-home.jpg) no-repeat; }

/**********  CONTAINER  *****/
.container {
	width: 800px;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	background: url(../_img/bgBody.jpg) center top repeat-y;
	}
	
	/**********  NAVIGATION  *****/
	ul.nav {
		list-style-type: none;
		text-align: center;
		margin: 0; padding: 0;
		}
		ul.nav li {
			display: inline;
			height: 55px;
			}
			ul.nav li a { 
				color: #f8de8f;
				line-height: 55px;
				padding: 2px 0;
				margin: 0 20px;
				text-decoration: none;
				}
				ul.nav li a:hover,
				ul.nav li a:focus { text-decoration: none; color: #fff; border: none; }
	
	/**********  MENU  ***********/
	ul.nav#menu {
		width:800px;
		margin: 0 auto; padding: 0;
		background: #000 url(../_img/bgNav.jpg) no-repeat;
		color: #fff;
		}
		/**  Cuando se esta viendo una pagina, se resalta el item correspondiente en el menu  **/
		li a#novedades,
		body#inicio ul.nav#menu li a.inicio,
		body#shows ul.nav#menu li a.shows,
		body#servicios ul.nav#menu li a.servicios,
		body#curriculum ul.nav#menu li a.curriculum,
		body#multimedia ul.nav#menu li a.multimedia,
		body#contacto ul.nav#menu li a.contacto { color: #fff;}
	
	/**********  HEADER  *********/
	.container #header { width:800px; height:144px; background: url(../_img/bgHeader.jpg) no-repeat; }
		
	/**********  CONTENT  ********/
	.container #content {
		clear: both;
		float: left;
		width:530px;
		height: auto;
		min-height: 400px;
		background: url(../_img/bgContent.jpg) center top repeat-y;
		padding: 0;
		margin-left: 25px;
		}
		.container #content #contentInside { padding: 0 25px 10px; }
	
	/**********  SIDEBAR  ********/
	.container #sidebar {
		width:245px;
		float: left;	
	}
	
	/**********  FOOTER  *********/
	.container #footer {
		clear: both;
		position: relative;
		margin: 0;
		height: 55px;
		color: #f8de8f;
		background: #000 url(../_img/bgNav.jpg) no-repeat;
		}
		.container #footer a:hover,
		.container #footer a:focus {border: none;}
		#footer a#contactInfo {
			display: block;
			width: 450px;
			height: 20px;
			position: absolute;
			top: 25px;
			left: 10px;
			background: url(../_img/contactInfo.png) no-repeat;
			text-indent: -999em;
		}
		#footer a#bogardusLab {
			display: block;
			width: 15px;
			height: 15px;
			font-size: 9px;
			color: #98918f;
			text-indent: -999em;
			position: absolute;
			bottom: 5px;
			right: 5px;
			background: url(../_img/bogardusLabLogo.gif) center top no-repeat;
			}
			#footer a#bogardusLab:hover { background-position-y: -15px;}

/**********  MULTIMEDIA  *****/
ul.multimediaImg {
	list-style-type: none;
	text-align: center;
	margin: 0 auto; padding: 0;
	}
	ul.multimediaImg li {
		float: left;
		width: 81px;
		height: 95px;
		margin: 0 7px 20px;
		background: transparent url(../_img/bgPolaroid.png);
		}
		ul.multimediaImg li a {
			display: block;
			width: 63px;
			height: 63px;
			overflow: hidden;
			margin: 9px;
			}
			ul.multimediaImg li a img {
				height: 63px;
				width: auto;
				overflow: hidden;
			}
			ul.multimediaImg li a:hover,
			ul.multimediaImg li a:focus { border: none;}
	
	div.video {
		clear: both;
		width: 480px;
		height: 295px;
		margin: 0 auto 30px;
	}

/**********  FORM STYLES  ****/
form {
	width: 400px;
	margin: 10px auto;
}

fieldset {clear: both;}

form .field, form .buttons {clear: both; position: relative; margin: 0 0 1em; }
form .field label {display: block; color: #660000; font-size: 1.5em; margin-bottom: 5px; }

label, button, input.submit, input.image {cursor: pointer;}
textarea {overflow: auto;}

input.text, input.password, textarea {
	background: #cdc2b5; 
	border-top: 1px solid #aba49c; /* Darker than the Background Color */
	border-left: 1px solid #aba49c; /* Darker than the Background Color */
	border-bottom: 1px solid #e5e2de; /* Lighter than the Background Color */
	border-right: 1px solid #e5e2de; /* Lighter than the Background Color */
	width: 388px;
	padding: 5px;
}

input.text.active, textarea.active { 
	background: #ebebeb; 
	border-top: 1px solid #ccc2b6;
	border-left: 1px solid #ccc2b6;
	border-bottom: 1px solid #f6f6f6; 
	border-right: 1px solid #f6f6f6;
	}

* html button {margin: 0 .34em 0 0;}
*+html button {margin: 0 .34em 0 0;}

form .buttons { text-align: right; }
form .buttons .button {
	background: #5c4430; 
	color: #dbd4cb;
	border-top: 1px solid #968374;
	border-left: 1px solid #968374;
	border-bottom: 1px solid #47311e;
	border-right: 1px solid #47311e;
	padding: 3px 10px;
	margin-left: 10px;
	}
	form .buttons .button:hover,
	form .buttons .button:focus {
		background: #47311e; 
		color: #dbd4cb;
		border-top: 1px solid #362313;
		border-left: 1px solid #362313;
		border-bottom: 1px solid #968374;
		border-right: 1px solid #968374;
	}

/**  CSS Tricks  **/

form .field label.error {
	display: block;
	position: absolute;
	top: 10px;
	right: 0px;
	margin: 0; padding: 0;
	color: #da3939;
	font-size: 0.9em;
	text-align: right;
	font-style: italic;
	font-weight: normal;
}