@import url("reset.css");

body { background-color: #363636; font-family: Helvetica, Arial, sans-serif; color: #fff; }

h1 { width: 220px; height: 38px; margin-left: -10px;
	background: #363636 url("../img/logo.png") no-repeat top right; }

#slider { margin: 0 auto; width: 760px; margin-top: 5em; }

#side { float: left; width: 200px; padding-right: 2em; padding-top: 1em; }
#cont { float: left; width: 500px; background-color: #464646; 
		border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
		text-align: center; padding: 0.5em 0;}
		.scrollButtons { margin: 0 auto;}
#navegacion { margin-top: 180px; }
#navegacion a#s-m { display: block;
	background: #363636 url("../img/nav-sobremi-normal.png") no-repeat top right; 
	width: 100%; height: 30px;}
	
	#navegacion a#s-m:hover, #navegacion a#s-m:focus {
		background: #363636 url("../img/nav-sobremi-hover.png") no-repeat top right; 
		width: 100%; height: 30px;
	}
	
	#navegacion a#s-m.selected { 
		background: #363636 url("../img/nav-sobremi-selected.png") no-repeat top right; 
		width: 100%; height: 30px; }

#navegacion a#p { display: block;
	background: #363636 url("../img/nav-proyectos-normal.png") no-repeat top right; 
	width: 100%; height: 30px;}

		#navegacion a#p:hover, #navegacion a#p:focus {
			background: #363636 url("../img/nav-proyectos-hover.png") no-repeat top right; 
			width: 100%; height: 30px;	}

		#navegacion a#p.selected { 
			background: #363636 url("../img/nav-proyectos-selected.png") no-repeat top right; 
			width: 100%; height: 30px; }
			
#navegacion a#s { display: block;
		background: #363636 url("../img/nav-social-normal.png") no-repeat top right; 
		width: 100%; height: 30px;}

		#navegacion a#s:hover, #navegacion a#s:focus {
			background: #363636 url("../img/nav-social-hover.png") no-repeat top right; 
			width: 100%; height: 30px;	}

		#navegacion a#s.selected { 
			background: #363636 url("../img/nav-social-selected.png") no-repeat top right; 
			width: 100%; height: 30px; }
			
#navegacion a#c { display: block;
		background: #363636 url("../img/nav-contacto-normal.png") no-repeat top right; 
		width: 100%; height: 30px; margin-top: -5px;}

		#navegacion a#c:hover, #navegacion a#c:focus {
			background: #363636 url("../img/nav-contacto-hover.png") no-repeat top right; 
			width: 100%; height: 30px;	}

		#navegacion a#c.selected { 
			background: #363636 url("../img/nav-contacto-selected.png") no-repeat top right; 
			width: 100%; height: 30px; }
	
.scroll { 
	height: 350px; 
	overflow: auto;  
	background-color: #464646;
	text-align: left;
	}

	.scrollContainer div.panel { 
		padding: 20px; 
		height: 350px; 
		width: 560px;
	}
	
	div#sobre-mi h2 { background: #464646 url("../img/cont-hola.png") no-repeat top left;
	height: 27px; margin-bottom: 50px; }
	
		div#sobre-mi p { font-size: 16px; padding-right: 110px; padding-left: 10px; 
						margin-bottom: 1em;}
	
	div#social h2 { background: #464646 url("../img/cont-social.png") no-repeat top left;
	height: 27px; }
	div#social h3 { color: #898989; }
	div#social ul { padding: 30px 10px; }
		div#social ul li { margin-bottom: 10px; padding-top: 20px; margin-right: 10px;}
		div#social a { color: #ed145b; font-size: 12px; }
			
			li#facebook { width: 175px; height: 50px; float: left; padding-left: 55px;
						  background: #464646 url("../img/facebook.png") no-repeat center left; 
						}
			li#twitter { width: 175px; height: 50px; float: left; padding-left: 55px;
						background: #464646 url("../img/twitter.png") no-repeat center left; }
			li#tumblr {	width: 175px; height: 50px; float: left; padding-left: 55px;
						background: #464646 url("../img/tumblr.png") no-repeat center left; }
			li#flickr { width: 175px; height: 50px; float: left; padding-left: 55px;
						background: #464646 url("../img/flickr.png") no-repeat center left; }
			li#lastfm { width: 175px; height: 50px; float: left; padding-left: 55px;
						background: #464646 url("../img/lastfm.png") no-repeat center left;}
	
	div#proyectos h2 { background: #464646 url("../img/cont-proyectos.png") no-repeat top left;
	height: 27px;}
	
	div#contacto h2 { background: #464646 url("../img/cont-contacto.png") no-repeat top left;
	height: 27px; }
	
		dl { text-align: right; margin-right: 125px; padding-top: 100px;}
			dt { font-size: 14px; color: #898989; }
			dd { font-size: 16px; font-weight: bold; color: #ed145b; margin-bottom: 1em;}
	
	div#footer { clear: both; text-align: right; padding-right: 40px; padding-top: 10px; 
				 color: #363636; }
		div#footer a { text-decoration: none; font-size: 24px; color: #464646; }
			div#footer a:hover, div#footer a:focus, div#footer a:active { color: #ed145b;  }
	
/* utility */

.hid { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; }