/* -------------------------------------------------------------- 

	Theme Name: WPESP - Portfolio Theme Coda
	Theme URI: http://www.wpesp.com/portfolio
	Description: A Portfolio Theme by WPESP.
	Author: Víctor García Cuenllas.
	Author URI: http://wpesp.com
	Version: 0.1
	Tags: portfolio, theme, wpesp
	General comments/License Statement if any.

-------------------------------------------------------------- */

@import "style/css/reset.css";
/*@import "style/css/diagnostic.css"; Just use for developing tests */

/* -------------------------------- 
	 WordPress.com Stats - I hide the smiley (http://wordpress.org/extend/plugins/stats/faq/)
-------------------------------- */

img#wpstats{display:none;}



/* -------------------------------------------------------------- 

	TYPOGRAPHY
	
	Font families:
		- Sans-serif: Arial, Helvetica, sans-serif
		- Serif: Georgia,"Times New Roman",Times,serif
	
	Font size:
		28px -> 2.333em
		24px -> 2em
		20px -> 1.666em
		16px -> 1.333em
		14px -> 1.166em
		12px -> Deafult (body{font-size: 75%})
	
	Colors:
		- Darker: #000
		- Dark: #333
		- Midel-light: #666
		- Light: #999

-------------------------------------------------------------- */


/* --------------------------------------------------------------

	DEFAULT
	
-------------------------------------------------------------- */


body{font: 75%/1.5em Arial, Helvetica, sans-serif;} /* font-size: 12px; line-height: 18px; */


/* -------------------------------- 
	Links
-------------------------------- */

a{color: #000; text-decoration: underline;}
a:hover{color: #666; text-decoration: underline;}
a:focus{background-color: #ccc;}


/* -------------------------------- 
	Heading
-------------------------------- */

h1, h3, h5, h5, h6 {font-weight:bold; }

h2 {color: #333; font-size: 2.333em; letter-spacing: -.02em; line-height: 0.852857em; margin: .1em 0 1.385714em;}
	h2 a{color: #333; text-decoration: none;}
	h2 a:hover, h2 a:focus{color: #666; text-decoration: none;}
	
h3{color: #333;font-size:1.666667em; letter-spacing: -.01em; line-height: .9em; margin: 1.8em 0 .9em;}


/* -------------------------------- 
	Blocks
-------------------------------- */

p, dl, ul, ol{color: #333;}

p{margin-bottom: 18px;text-align: justify;}

abbr, acronym {border-bottom: 1px dotted #666; cursor: help;}


/* --------------------------------------------------------------

	TOP (header) CAMBIO
	
-------------------------------------------------------------- */


/* -------------------------------- 
	Header
-------------------------------- */

div#header p{color: #666;font: 1.2em/1.5em Georgia,"Times New Roman",Times,serif; font-style: italic; margin: 0;text-align: justify;}

/* -------------------------------- 
	Navigation
-------------------------------- */

div#navigation ol{margin: 0;}

	/* Vertical centring with line-height */
	div#navigation ol li a{color: #fff; font-weight: bold; letter-spacing: .05em; line-height: 45px; text-decoration: none;}
	div#navigation ol li a:focus{background: 0;}
	div#navigation ol li a:hover.active{color: #fff;}
		div#navigation ol li a small{color: #666; font-size: .85em; font-weight: normal; letter-spacing: 0;}
		div#navigation ol li a:hover small{color: #fff;}
		div#navigation ol li a.active small{color: #ccc;}
		div#navigation ol li a:hover.active small{color: #ccc;}


/* --------------------------------------------------------------

	WORK & CATEGORY PAGES
	
-------------------------------------------------------------- */


/* -------------------------------- 
	Featured
-------------------------------- */

div.featured dl, div.panel dl {margin-bottom: 1.5em;}


/* -------------------------------- 
	Works
-------------------------------- */

div#works div.thumb {}


/* -------------------------------------------------------------- 

	CONTENT

-------------------------------------------------------------- */


/* -------------------------------------------------------------- 
	CASE STUDY & ABOUT PAGES
-------------------------------------------------------------- */

	/* -------------------------------- 
		Ct-Info
	-------------------------------- */

	div#content div#ct-info ul, div#content div#ct-info ol{color: #333;}
		div#content div#ct-info ul {list-style-position:outside; list-style-type:circle;}
			div#content div#ct-info ul li, div#content div#ct-info ol li{margin-bottom: 1.5em;}
		div#content div#ct-info ol {list-style-position:outside;list-style-type:decimal;}

	div#content div#ct-info blockquote, div#content div#ct-info q{color: #333; font-style: italic; margin: 36px 66px; padding: 0 14px; text-align: justify;}
		div#content div#ct-info blockquote p {color: #333;}


		/* -------------------------------------------------------------- 
			CONTACT
		-------------------------------------------------------------- */

		div#content div#ct-info div#contact div#usermessageb{color: #333; font-weight: bold;}

		div#content div#ct-info div#contact p.linklove{display: none;}

		div#content div#ct-info div#contact form{font-size: 1em;}
		
			div#content div#ct-info div#contact form legend{color: #333; font-size:1.666667em; font-weight: bold; letter-spacing: -.01em; line-height: .9em; padding-bottom: .9em; }

			div#content div#ct-info div#contact form p{color: #333;}

			div#content div#ct-info div#contact form fieldset label{color: #333; font-weight: bold;}
			
				div#content div#ct-info div#contact form fieldset span.reqtxt, div#content div#ct-info div#contact form fieldset span.emailreqtxt{color: #666; font-weight: normal; padding-left: 4px;}

				div#content div#ct-info div#contact form fieldset ol li.textonly{color: #333;margin-bottom: 18px; text-align: justify;}
					div#content div#ct-info div#contact form fieldset ol li input, div#content div#contact form fieldset ol li textarea {font-size: 1em; font-family: Arial, Helvetica, sans-serif;}


		/* -------------------------------------------------------------- 
			404
		-------------------------------------------------------------- */

		div#content div#error h2{background: none; padding-left: 0;}
		div#content div#error h3{font-weight: normal;}


	/* -------------------------------- 
		SIDEBAR
	-------------------------------- */

	div#content div#sidebar h2, div#content div#sidebar h3 {font-size:1.666667em; letter-spacing: -.01em; line-height: .9em;}
	div#content div#sidebar h2{margin: 0 0 .9em; padding: 0;}
	
	div#content div#sidebar h3 {margin-top: 1.6em;}
	
	div#content div#sidebar dl dd{margin-bottom:8px; padding-bottom:0.75em;} /* we have change margin-bottom:18px; by 8px (margin-bottom:18px-border-bottom:1px-padding-bottom:9px) */


/* -------------------------------------------------------------- 
	FOOTER
-------------------------------------------------------------- */

	div#footer div#foot ol#footnav li{color: #666; font-size: .9em;}
		div#footer div#foot ol#footnav li a{color:#ccc; text-decoration: none;}
		div#footer div#foot ol#footnav li a.active{color: #999;}
		div#footer div#foot ol#footnav li a:focus{color: #666;}
		
	div#footer div#foot p{color: #666; clear:left; font-size: .9em; margin: 0;}
		div#footer div#foot p a{color: #ccc; text-decoration: none;}








div#slider {margin: 30px auto 28px; position: relative; width: 946px;}

	div#slider img.scrollButtons {position: absolute; top: 200px; cursor: pointer}

		div#slider img.scrollButtons.left {left: -26px;}

		div#slider img.scrollButtons.right {right: -26px}
	
	/* .SCROLL */
	div#slider div.scroll {clear: left;height: 301px; overflow: auto; overflow-x: hidden; padding:0px 0 0; position: relative; /* fix for IE to respect overflow */width: 965px;}
		
		/* .PANEL */
		/* DIV.PANEL is close to DIV.FEATURED style from layout.css  */
		div#slider div.scroll div.scrollContainer div.panel {height: 301px; overflow: hidden; padding: 0 1px 0; width: 945px;} /* 1px padding for a good view */
			div#slider div.scroll div.scrollContainer div.panel div.info{float: left; width: 505px; position: absolute;}

.info h2 {
      font-weight:normal;
      font-size:180%;
      }

#slider h2 {
      font-weight:normal;
      }

				div#slider div.scroll div.scrollContainer div.panel div.info dl dt{float: left; display: inline;}

			div#slider div.scroll div.scrollContainer div.panel ul.view{margin-top: 285px; position: absolute; width: 505px;}
				div#slider div.scroll div.scrollContainer div.panel ul.view li{display: inline; margin-right: 7px;}
				
			div#slider div.scroll div.scrollContainer div.panel div.stick img.new{float: right; top: 241px; position: relative; z-index: 1000;}
			div#slider div.scroll div.scrollContainer div.panel div.stick a.afternew{background-color: #fff;border: 1px solid #333; float: right; height: 269px; right: -66px;padding: 14px; position: relative; width: 359px;}
			
			div#slider div.scroll div.scrollContainer div.panel div.stick a{background-color: #fff;border: 1px solid #333; float: right; height: 269px; padding: 14px; position: relative; width: 359px;}
			div#slider div.scroll div.scrollContainer div.panel div.stick a:hover{border: 1px solid #999;}
				
				div#slider div.scroll div.scrollContainer div.panel div.stick a:hover img{opacity: .5; filter:alpha(opacity=50);}









/* -------------------------------------------------------------- 

	LAYOUT

-------------------------------------------------------------- */

/* --------------------------------------------------------------

	DEFAULT
	
-------------------------------------------------------------- */


body{/* background: #fff url('style/images/gridbg.gif') repeat; */ background-color: #efefef;} /* background: just for developing */


/* -------------------------------- 
	CLASSES
-------------------------------- */

	/* -------------------------------- 
		Float
	-------------------------------- */

	.fl{float: left;}
	.fr{float: right;}

	.alignleft{float: left; padding-right: 14px; margin-bottom: 18px;}
	.alignright{float: right; padding-left: 14px; margin-bottom: 18px;}

	/* -------------------------------- 
		Rounder Cornes (Just Firefox, Safari and Ie8 at this moment)
	-------------------------------- */

	.br-rd4{border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}
	.br-rd2{border-radius: 4px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;}


/* -------------------------------- 
	CENTER ALL 946px
-------------------------------- */

	div#header, div#navigation div#menu, div#submenu ul, div.featured, div#works, div#content, div#foot{margin: 0 auto; overflow: hidden; width: 946px;}

div#workscat {margin: 0 auto; overflow: hidden; width: 966px;}

/* -------------------------------------------------------------- 

	TOP (header)

-------------------------------------------------------------- */


/* -------------------------------- 
	Header
-------------------------------- */

	div#header{padding: 28px 0;}
	
		div#header h1 {float: left;}
			div#header h1 a{background: transparent url('style/images/sordo-turned-01-small.png') no-repeat;border: none;height: 86px;display: block; overflow: hidden;text-indent: -2000px;width: 226px;}



	div#header h1 a:hover{background: transparent url('style/images/sordo-turned-02-small.png') no-repeat;border: none;display: block;height: 86px;overflow: hidden;text-indent: -2000px;width: 226px;}


		div#header p{float: right; width: 304px;}
		

/* -------------------------------- 
	Navigation
-------------------------------- */
	
	div#navigation {background-color: #333;}
		
		div#navigation div#menu {height: 56px; overflow: hidden;}
		
		div#navigation div#menu ol {float: left;}
		div#navigation div#menu ol li{border-left: 1px solid #666;float: left;}
		div#navigation div#menu ol li#menulast{border-right: 1px solid #666;background-color:#800000;color:#000000;}
			div#navigation div#menu ol li a {display: block; height: 56px; padding-left: 31px; width: 129px;}
					
				/* Vertical centring with line-height:0 and marging-top */
				div#navigation div#menu ol li a small{display: block; line-height:0; margin-top: -7px;}
			div#navigation div#menulast ol li a small{color:#000000;}
		div#navigation div#menu div#feed{display: inline; float: right;}
			div#navigation div#menu div#feed a {background: transparent url('style/images/feed-nav.gif') no-repeat;display: block; height: 56px; width: 66px;}
			div#navigation div#menu div#feed a:hover{background-position: 0 -56px;}
				div#navigation div#menu div#feed a span{display:none;}


/* -------------------------------------------------------------- 

	WORK PAGES

-------------------------------------------------------------- */


/* -------------------------------- 
	Featured
-------------------------------- */

	div.featured{margin: 56px auto;}
		div.featured div.info{float: left; width: 505px; position: absolute;}

			div.featured div.info dl dt{float: left; display: inline;}
				
			div.featured ul.view{margin-top: 285px; position: absolute; width: 505px;}
				div.featured ul.view li{display: inline; margin-right: 7px;}

		div.featured div.stick a{background-color: #fff;border: 1px solid #333; float: right; height: 269px; padding: 14px;width: 359px;}
		div.featured div.stick a:hover{border: 1px solid #999;}
		
			div.featured div.stick a img{background-color: #fff;opacity: 1; filter:alpha(opacity=100); width: 359px;}
			div.featured div.stick a:hover img{background-color: #fff;opacity: .5; filter:alpha(opacity=50); width: 359px;}


/* -------------------------------- 
	Works
-------------------------------- */

	div#works{margin-top: 56px;}
		
		div#works div.minus14{margin-left: -14px; overflow: visible; width: 960px;} /* Why width=960px? We have add the negative margin-left (-14px=+14px) to the div#workd width (946px). */
		
		div#works div.minus14 div.thumb{margin-left: 14px; display: inline; float: left; width: 306px;padding-bottom:28px;}
			div#works div.minus14 div.thumb a{background-color: #fff;border: 1px solid #333; display: block; height: 115px; padding: 14px 0; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}
			div#works div.minus14 div.thumb a:hover{border: 1px solid #999;}
			
				div#works div.minus14 div.thumb a img{background-color: opacity: 1; filter:alpha(opacity=100); #fff; width: 276px;}
				div#works div.minus14 div.thumb a:hover img{background-color: #fff; opacity: .5; filter:alpha(opacity=50); width: 276px;}

				div#works div.minus14 div.links {text-align:right;margin-left:-14px;}


/* -------------------------------- 
	Works CATALOG
-------------------------------- */

	div#workscat{margin-top: 56px;}
		
		div#workscat div.minus14cat{margin-left: -28px; overflow: visible; width: 640px;} /* Why width=960px? We have add the negative margin-left (-14px=+14px) to the div#workd width (946px). */
		
		div#workscat div.minus14cat div.thumbcat{margin-left: 14px; display: inline; float: left; width: 306px;}
			div#workscat div.minus14cat div.thumbcat a{background-color: #fff;border: 1px solid #333; display: block; height: 115px; padding: 14px 0; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}
			div#workscat div.minus14cat div.thumbcat a:hover{border: 1px solid #999;}
			
				div#workscat div.minus14cat div.thumbcat a img{background-color: opacity: 1; filter:alpha(opacity=100); #fff; width: 276px;}
				div#workscat div.minus14cat div.thumbcat a:hover img{background-color: #fff; opacity: .5; filter:alpha(opacity=50); width: 276px;}

				div#workscat div.minus14cat div.links {text-align:right;margin-left:-14px;}
.minus14cat h2 {
     margin-left:28px;
     font-weight:normal;
     }

#artists {
      width:640px;
      float:left;
      }

#wrap {
      width:306px;
      height:180px;
      display: inline; 
      float: left;
      padding-bottom: 28px;
      margin-left:14px;
      }

#wrap table {
      width:306px;
      margin-left:14px;
      }

#wrap table .links {
      padding-top:10px;
      }

#wrap h1 a{
      text-decoration:none;
      line-height:2 em;
      font-size:140%;
      color:#333333;
      padding-left:3px;
      }

#wrap h1 a:hover{
      color:#666666;
      }

#wrap .links a{
      color:#333333;
      }

#wrap .links a:hover {
      color:#666666;
      }

#latest {
      width:325px;
      float:right;
      }

#latest h2, #content h2, #latestrel h2 {
      font-weight:normal;
      }

#latest a {
       display:inline;
       overflow:visible;
       }

#latestpost tr, #latestpost table {
       height:130px;
       width:325px;
       vertical-align:top;
       }

#latestpost img a {
       border: 1px solid black;
       }


#latestrel {
      width:670px;

}

#latestrel a {
       display:inline;
       overflow:visible;
       }

#latestpostrel {
       float:right;
       margin-left:10px;
       margin-bottom:20px;
       }
#latestpostrel tr, #latestpostrel table {
       height:130px;
       width:325px;
       vertical-align:top;
       }

#singlerelease {
       color:#333333;
       font-size:120%;
       }

#singlerelease table {
       width:800px;
       }

#singlerelease .comment {
       font-size:90%;
       font-style:italic;
       padding-left:3px;
       }

#singlerelease h1 {
       font-size:200%;
       color:#333333;
       font-weight:normal;
       }

#singlerelease h2 {
       font-size:110%;
       margin-top:5px;
       color:#666666;
       font-weight:normal;
       }

#latestdatabase {
       margin-left:30px;
       color:#333333;
       float:right;
       width:310px;
       height:400px;
       }

#thedatabase {
       margin-bottom:60px;
       }
#news {
      width:280px;
      float:right;
      margin-left:10px;
      }

#releasecovers {

     width:260px;
     float:left;
     }

div#releasecovers li {
     width:130px;
     float:left;
     }

#news, #releasecovers a:hover {
      color:#800000;
      }

#contact a:hover {
       color:#800000;
       }
#latestdatabase a, #releasecovers a {
       color:#333333;
       }


#latestdatabase a:hover {
       color:#800000;
       }

#latestdatabase h2 {
      margin-bottom:39px;
       }

/* -------------------------------------------------------------- 

	CONTENT

-------------------------------------------------------------- */


/* -------------------------------------------------------------- 
	CASE STUDY & ABOUT PAGES
-------------------------------------------------------------- */

div#content{padding: 56px 0px 0px 0px}

	/* -------------------------------- 
		Ct-info
	-------------------------------- */
	
	div#content div#ct-info{display: inline; float: left; width: 626px;}
		
		div#content div#ct-info a.brd{background-color: #fff; border: 1px solid #333;display: block;}
		div#content div#ct-info a.brd:hover{border: 1px solid #999;}
			div#content div#ct-info a.brd:hover img{background-color: #fff;opacity: .5; filter:alpha(opacity=50); width: 622px;}
		
		div#content div#ct-info img {margin: 0 0 -0.5em;} /* The height should be multiple of 18px */

		div#content div#ct-info ul, div#content div#ct-info ol {margin-left:66px; padding-left:14px;}
			div#content div#ct-info ul ul, div#content div#ct-info ol ol {margin-left:26px;}

	/* -------------------------------- 
		Featured
	-------------------------------- */
	
	div.featured div.stick img.new{float: right; top: 241px; position: relative; z-index: 1000;}
	div.featured div.stick a.afternew{background-color: #fff;border: 1px solid #333; float: right; height: 269px; right: -66px;padding: 14px; position: relative; width: 359px;}
	
	
		/* -------------------------------------------------------------- 
			CONTACT
		-------------------------------------------------------------- */
	
		div#content div#ct-info div#contact{background-color: #ccc; margin: 0; padding: 52px 66px;}
	
			div#content div#ct-info div#contact div#usermessageb.failure{border: 2px solid #ccc; clear: both; padding: 4px;}

			div#content div#ct-info div#contact form legend {display: block;}
		
			div#content div#ct-info div#contact form fieldset.cf_hidden{display: none;}

			div#content div#ct-info div#contact form fieldset ol{margin: 0; padding: 0;}
			
				div#content div#ct-info div#contact form fieldset ol li{list-style: none; margin: 0;}
			
					div#content div#ct-info div#contact form fieldset ol li input {border: 0; margin-bottom: 14px; padding: 4px; width: 220px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;}
					div#content div#ct-info div#contact form fieldset ol li textarea{border: 0;  padding: 4px; width: 220px; margin-bottom: 18px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px;}
			
				div#content div#ct-info div#contact form p input{background-color: #000; border: 0; color: #fff; cursor: pointer; height: 36px; width: 66px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px;}
	
	
	/* -------------------------------- 
		Sidebar
	-------------------------------- */

	div#content div#sidebar{display: inline; float: right; margin-top: 4.2em; text-align: left; width: 264px;}
		div#content div#sidebar dl dt{float: left; display: inline;}
		div#content div#sidebar dl dd{border-bottom: 1px solid #333;}

		div#content div#sidebar ul {margin-top: -8px;} /* After dl */
				div#content div#sidebar ul li {display: inline;}
					div#content div#sidebar ul li a{border-bottom: 1px solid #333; display: block; padding: 9px 0 8px;}
				
		div#content div#sidebar div.vcard img{margin-bottom: 1.6em;}

		div#content div#sidebar div.vcard a.card{background: transparent url('style/images/vcard.png') no-repeat 0 100%; padding-left: 24px;}

		div#content div#sidebar div.vcard span{margin: 0; padding: 0;}


/* -------------------------------------------------------------- 

	FOOTER

-------------------------------------------------------------- */

	div#footer{background: #333;height: 140px;}
		div#footer div#foot{padding: 0 14px;}
			div#footer div#foot ol#footnav{padding: 56px 0 9px; overflow: hidden;}
				div#footer div#foot ol#footnav li{display: inline;float: left; margin-right: 7px;}
				
	div#footer div#foot p.rss{background: url('style/images/feed-icon.gif') no-repeat 0 50%; padding-left: 18px;}






#topad
   {
   float:left;
   margin-top:11px;
   margin-left:50px;
   }


#contentcommunity {
   padding:0 10% 0 10%;

}



#wpf-wrapper img {
   max-width:700px;
}