*, body { margin: 0; padding: 0; }
body { background: #fff; color: #777; font: 11px/1.6em 'Lucida Grande', Verdana, sans-serif; }

p.clear { clear: both; margin: 0; padding: 0; }

a { text-decoration: none; color: #000; border-bottom: 1px #009fd2 dotted; }
a:hover { color: #009fd2; border-bottom: 1px #009fd2 solid; }

img { border: none; }
img.left { float: left; margin: 0 10px 10px 0; }
img.right { float: right; margin: 0 0 10px 10px; }
img.border { padding: 4px; border: 1px #ddd solid; }

ul { list-style: none; }

.cargando { text-indent: -9999px; }

#menu { text-align: center; letter-spacing: 1px; background: #222; padding: 5px 0; border-bottom: 5px #009fd2 solid; }
	#menu li { display: inline; padding: 0 10px; border-right: 1px #999 dotted; }
	#menu li.ultimo { border: none; }
		#menu li a { color: #ddd; border: none; }
		#menu li a:hover { color: #fff; }

#header {}
	#header h1 { text-indent: -9999px; height: 55px; background: url(img/logo.gif) no-repeat; }
		#header h1 a { display: block; height: 55px; outline: none; border: none; }

#contenedor { width: 950px; margin: 50px auto 10px auto; }

#content { position: relative; margin: 50px 0 0 0; background: #ddd; padding: 10px; height: 377px; }
	#content .cargando { height: 377px; background: url(img/cargando-grey.gif) center center no-repeat; }
	#anterior, #siguiente { outline: none; border: none; position: absolute; display: block; width: 50px; height: 50px; text-indent: -9999px; top: 50%; margin-top: -25px; }
	#anterior { float: left; left: -50px; background: url(img/bg-anterior.gif) top center no-repeat; }
	#siguiente { float: right;  right: -50px; background: url(img/bg-siguiente.gif) top center no-repeat; }
	#anterior:hover, #siguiente:hover { background-position: bottom; }
	
	#content #preview { width: 500px; height: 375px; float: left; background: #fff; padding: 1px; }
		#content #preview img { width: 500px; height: 375px; }
		#content #preview .cargando { height: 375px; background: url(img/cargando-white.gif) center center no-repeat; }
		
	#content #detalles { width: 400px; float: right; }
		#content #detalles h2 { font: 25px sans-serif; }
		#content #detalles h3, #content #detalles p { padding: 5px 0; border-bottom: 1px #bbb dotted; }
			#content #detalles h3 { font-weight: normal; color: #333; font-size: 1em; }
			#content #detalles p strong { float: left; width: 60px; font: 9px/20px sans-serif; text-transform: uppercase; color: #004463; }
		#content #detalles .thumbnails { width: 400px; position: absolute; text-align: right; bottom: 10px; right: 10px; }
			#content #detalles .thumbnails a {border: none; outline: none; }
				#content #detalles .thumbnails a img { width: 90px; height: 90px; margin-left: 8px; padding: 1px; background: #fff url(img/cargando-white.gif) center center no-repeat; }
				#content #detalles .thumbnails a:hover img { background: #009fd2; }
				
#projects { background: #888; }
	#projects h3 { background: #333; font-size: 1em; padding: 5px;  color: #fff; border: #fff solid; border-width: 1px 0; }
	#projects a { display: block; width: 90px; padding: 10px 0; margin-left: 12px; float: left; border: none; outline: none; }
			#projects a img { width: 90px; height: 90px; padding: 1px; background: #fff url(img/cargando-white.gif) center center no-repeat; }
			#projects a:hover img { background: #009fd2; }
				
#footer { margin-top: 100px; color: #aaa; text-align: center; font: 10px sans-serif; }
	#footer li { display: inline; padding: 0 5px; border-right: 1px #ccc solid; }
	#footer li.ultimo { border: none; }
		#footer li a { color: #999; border-color: #999; }
		#footer li.ultimo a { border: none; }
		#footer li img { vertical-align: middle; }