/*
Theme Name: Keytoon Theme
Theme URI: http://wordpress.org/
Description: Propio para Keytoon
Version: 1
Author: Carlos Garcia
Author URI: http://www.thecoder.es
Tags: keytoon, thecoder

	Keytoon Theme
	 http://www.thecoder.es

	Hecho por Carlos Garcia Gomez

*/

@charset "utf-8";
* {
	margin:0;
	padding:0;
}
body, html {

}

body {
	background: url(images/background.jpg) #000 repeat 0 0;
	color: black;
	font-family: sans-serif, Verdana;
	font-size: 12px;
}
table, textarea {
	font-family: sans-serif, Verdana;
	font-size: 12px;
}
a {
	text-decoration: none;
	color: white;
}
#wrap {
	width: 960px;
	margin: 0 auto;
}
#header {
	width: 960px;
	height: 125px;
	position: fixed;
	top: 0;
	background: url(images/background.jpg) transparent repeat 0 0;	
	z-index: 100;	
}
#logo {
	margin-top: 21px;
	width: 122px;
	height: 84px;
}

#order {
	margin-top: -15px;
	margin-left:180px;
	width: 250px;
	height: 18px;
}
#menu {
	width: 465px;
	overflow: hidden;
	float: right;
	margin-top: 78px;
}

#menu ul li {
	float: left;
	height: 29px;	
}

#menu ul li a{
	display: block;
	width: 120px;
	height: 29px;	
	background-position: top left;
}

#menu a#menu-portfolio  { background-image: url(images/menu_portfolio.png); }
#menu a#menu-clients  { background-image: url(images/menu_clientes.png); }
#menu a#menu-contact  { background-image: url(images/menu_contacto.png); }
#menu a#menu-reel  { width: 105px; background-image: url(images/menu_reel.png); }
#menu li #menu-reel  { width: 105px; background-image: url(images/menu_reel.png); }
#menu a#menu-portfolio:hover, #menu a#menu-portfolio.sel{ background-image: url(images/menu_portfolioon.png); }
#menu a#menu-clients:hover, #menu a#menu-clients.sel{ background-image: url(images/menu_clienteson.png); }
#menu a#menu-contact:hover, #menu a#menu-contact.sel { background-image: url(images/menu_contactoon.png); }
#menu a#menu-reel:hover, #menu a#menu-reel.sel{ background-image: url(images/menu_reelon.png); }

#works {
	overflow: hidden;
}

#content {
	padding-bottom: 80px;
	padding-top: 125px;
	overflow: hidden;
	z-index: 90;
}
#works {
	width: 938px;
	margin: 0 auto;
}
.work {
	width: 167px;
	height: 150px;
	margin: 5px;
	padding: 5px;
	background-color: black;
	font-size: 10px;
	float: left;
	position: relative;
	z-index: 10;
}
.work-title {
	width: 157px;
	height: 60px;
	margin: 5px;
	padding: 50px 10px;
	background-color: black;
	font-size: 11px;
	float: left;
	position: relative;
	z-index: 10;
	color: white;
	clear: left;
}
.work-title a {
	color: white;
}

#cat-12.work-title { background-color: #ff2200; }
#cat-89.work-title { background-color: #66cc33; }
#cat-69.work-title { background-color: #0094c5; }
#cat-58.work-title { background-color: #ff0066; }
#cat-78.work-title { background-color: #00ccff; }
#cat-118.work-title { background-color: #ffb600; }

.work img{
	width: 167px;
}
.work .new {
	width: auto;
	position: absolute;
	top: 0;
	right: 0;

}
.work-text {
	margin-top: 3px;
	color: white;
}

#work {
	text-align: center;
	padding-bottom: 60px;
}
#work p{
	margin-bottom: 25px;
}
#work img{
	margin-bottom: 25px;
}
#work-info {
	background: url(images/background.jpg) transparent repeat -1px -1px;	
	position: fixed;
	bottom: 80px;
	width: 938px;
	padding-top: 10px;
}
#work-info1 {
	width: 100%;
	color: #ff5a00;
}
#work-info1 #work-info-text{
	float: right;
	width: 50%;
	background-color: #ff5a00;
	color: #a01900;
	height: 25px;
	padding-left: 20px;
	padding-top: 20px;
}
#work-info1 #work-info-title {
	float: right;
	width: 382px;
	color: #ff5a00;
	font-size: 2em;
	font-weight: bold;
	text-align: right;
	height: 30px;
	padding-right: 10px;
	padding-top: 6px;
}

#work-info2-text {
	width: 100%;
	color: white;
	height: 20px;
	text-align: right;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;	
	margin-top: 5px;
}
#work-info2-text #category a {
	color: white;
}
#work-info2-text small{
	font-weight: normal;
	font-size: 8px;
	letter-spacing: 1px;
}

#work-info2-text #client { width: 300px; }
#work-info2-text #category { width: 120px; }
#work-info2-text #date { width: 110px; }
#work-info2-text #awards { width: 280px; }

#work {

}

h2 {
	color: white;
	text-align: center;
}

#centered {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 810px;
	height: 244px;	
	margin-top: -122px;
	margin-left: -410px;
}

#centered #info {
	position: relative;
	width: 370px;
	height: 214px;
	overflow: hidden;
	float: left;	
	background-color: #ff5a00;	
	color: white;
	padding: 15px;
	text-align: justify;
}
#centered #info h1{
	font-size: 30px;
	margin-bottom: 10px;
	margin-left: -2px;
}
#centered #clients {
	position: relative;
	width: 400px;
	height: 244px;
	overflow: hidden;
	float: left;
	margin-left: 10px;
	background-color: #474747;
}
#centered #clients img {
	position: absolute;
	top: 0;
	left: 50px;
}

#centered #contacto {
	position: relative;
	width: 370px;
	height: 214px;
	overflow: hidden;
	float: left;	
	background-color: #474747;
	color: white;
	margin-left: 10px;
	padding: 15px;
	text-align: justify;
}
#centered #contacto h1{
	font-size: 30px;
	margin-bottom: 10px;
	margin-left: -2px;
}
#centered #contacto td {
	padding-right: 5px;
	padding-bottom: 7px;
}
#centered #contacto input{
	width: 175px;
	padding: 3px;
	border: 0;
	font-size: 11px;
}
#centered #contacto textarea {
	border: 0;
	width: 362px;
	padding: 3px;	
	font-size: 11px;		
}
#centered #contacto #send{
	width: 60px;
	padding: 3px;
	font-size: 11px;
	background-color: #000;
	text-align: center;
	cursor:pointer;
}
#centered #contacto #send:hover{
	background-color: #ff5a00;	
}


#centered-home {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 960px;
	height: 300px;	
	margin-top: -150px;
	margin-left: -490px;
}

#centered-home #links {
	position: relative;
	width: 400px;
	height: 300px;
	overflow: hidden;
	float: left;	
	color: white;
}

#centered-home #links .link {
	color: white;
	padding: 15px;
}

#centered-home #links .home-text{
	display: block;
	font-size: 3em;
	margin-left: -2px;
}

#centered-home #videos {
	position: relative;
	width: 500px;
	margin-left: 60px;
	margin-top: -50px;
	height: 400px;
	overflow: hidden;
	float: left;	
	color: white;
	text-align: justify;
}
#centered-home #videos .video{
	position: absolute;
	top: 0;
	left: 0;
}



















#footer {
	position: fixed;
	bottom: 0;
	width: 960px;
	height: 80px;
	background: url(images/background.jpg) transparent repeat -1px -1px;
	z-index: 110;	
}
#info-footer {
	margin-top: 20px;
	width: 334px;
	margin-bottom: 10px;
}
#footer-menu {
	margin-top: 20px;	
	width: 456px;
	overflow: hidden;
	float: right;
	margin-bottom: 10px;	
}

#footer-menu ul li {
	float: left;
	width: 114px;
	height: 43px;	
}

#footer-menu ul li a, #footer-menu ul li div{
	display: block;
	width: 114px;
	height: 43px;	
	background-position: top left;

}
#search {
	border: 0;
	color: white;
	background-color: #111;
	margin-top: 12px;
	margin-left: 4px;
	padding: 1px;
	width: 100px;
	font-size: 12px;
}

#footer-menu #footer-menu-blog  { background-image: url(images/footermenu_blog.png); }
#footer-menu #footer-menu-blog:hover  { background-image: url(images/footermenu_blogon.png); }
#footer-menu #footer-menu-lang  { background-image: url(images/footermenu_en.png); }
#footer-menu #footer-menu-lang:hover  { background-image: url(images/footermenu_enon.png); }
#footer-menu #footer-menu-sound  { background-image: url(images/footermenu_sonido.png); cursor:pointer; }
#footer-menu #footer-menu-sound:hover  { background-image: url(images/footermenu_sonidoon.png); }
#footer-menu #footer-menu-search   { background-image: url(images/footermenu_buscar.png); }



/* Tools */
.none { display:none; }
.hidden { overflow:hidden; }
.left { float: left; }
.right { float: right; }
.naranja { color: #ff5a00;}