/** 
  CSS by Jeremy Marc (jmarc@justalab.com)
  Feel free to browse this, but don't copy 
  it completely. That's uncool. 
*/

/**
* __Colors__
 * Body Background:     [FFF, 000]
 * Body Font:           555
 * Pink Links:          AD0778
*/

/**
 * Redeclarations
 */ 
*							{ margin: 0; padding: 0; border: 0; }
body						{ font: 13px Georgia, serif; }
object 						{ outline:none; }


/**
 * Common
 */
a							{ text-decoration: none; color: #ad0778; }
a:hover						{ text-decoration: underline; color: #fff; }
ul 							{ list-style-image: none; list-style-position: outside; list-style-type: none; text-decoration: none; }

.text-replace				{ background-repeat: no-repeat; outline-color: -moz-use-text-color; outline-style: none; text-indent: -9999px; }							
.body-bg-shadow				{ background: transparent url('../images/cube-shadow.jpg') no-repeat center 390px; }
.dark 						{ background-color: #0f0f0f; clear: both; color: white; width: 100%; }
.top 						{ position: absolute; right: 0; top: -30px; }
.container 					{ clear: both; width: 960px; }
.clearfix:after 			{ content: "."; visibility: hidden; display: block; height: 0; clear: both; }

/**
 * Button effet
 */
a .item-image a *			{ display: none; } 
.item-image a ,
.item-image a .hover 		{ float:right; width:100%; height:100%; position: relative; display: block; background: url(../images/overlay.png) 0 0 no-repeat; text-indent: -290486px; } 	
.item-image a:hover			{ width: 210px; height: 325px; }
.item-image a.highlight:hover, 
.item-image a .hover 		{ background-position: 0 0; }

/**
 * Form
 */
label 						{ color: #fff; }
label.error					{ color: red; font-style: italic; }
input, textarea 			{ font-size:17px; display: block; width: 365px; height: 47px; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #181818; margin: 10px 0; padding: 0 0 0 50px; } 
textarea 					{ height: 165px; padding: 15px 0 0 15px; width: 400px; }
input:focus, textarea:focus { background: #fff; }
input.name 					{ background: #fff url('../images/mini_icons.png') 10px 10px no-repeat; }
input.email 				{ background: #fff url('../images/mini_icons.png') 10px -35px no-repeat; }
input.company 				{ background: #fff url('../images/mini_icons.png') 10px -105px no-repeat; }
input.name:focus, input.email:focus, input.company:focus { background-color: #fff; }
.submit, .submit:focus 		{ background: transparent url('../images/submit.jpg'); display: block; width: 120px; height: 33px; cursor: pointer; }
#nemail.error				{ border:red solid 1px; }						

/**
 * Header
 */
.header 					{ margin: 0 auto; padding: 0 0 50px; }
.header img 				{ float:left; padding-top: 15px; }
#nav 						{ height: 155px; float: right; overflow: hidden; /* ? */ }
#nav li 					{ float: left; }
#nav li a 					{ height: 73px; width: 120px; background-image : url('../images/navigation.png'); display: block; text-indent: -234567px; }
#nav .home-nav.selected 	{ width: 104px; background-position: 0 -81px; }
#nav .work-nav 				{ background-position: -104px 0; }
#nav .work-nav:hover 		{ background-position: -104px -81px; }
#nav .about-nav 			{ background-position: -224px 0; width: 106px; }
#nav .about-nav:hover 		{ background-position: -224px -81px; }
#nav .contact-nav 			{ background-position: -329px 0; width: 96px; }
#nav .contact-nav:hover 	{ background-position: -329px -81px; }
h1#text-intro 				{ background: transparent url('../images/intro.png') no-repeat; height: 64px; margin: 0 auto; width: 948px; }
#cu3er 						{ margin-top: 20px; text-align: center; margin: 0 auto; }
#cu3er img 					{ width: 960px; margin-bottom: 140px; }
#cu3er 						{ float: left; margin: 40px 0 50px 10px; padding: 0; background: 0; }


/**
 * Work
 */
div.work 					{ margin: 0 auto; padding: 30px 0; position: relative; }
#title-work 				{ background: transparent url('../images/title-work.png') no-repeat scroll; height: 67px; float: left; width: 187px; text-indent: -9999px; }
#btn 						{ float: right; margin-top: 25px; }
a.project 					{ background: transparent url('../images/project.png') no-repeat scroll; display: block; float: right; height: 33px; margin-left: 15px; text-indent: -9999px; width: 141px; }
a.project:hover 			{ background: transparent url('../images/project-hover.png') no-repeat scroll; }
a.twitter 					{ background: transparent url('../images/twitter.png') no-repeat scroll; display: block; float: right; height: 33px; text-indent: -9999px; width: 240px; }
a.twitter:hover 			{ background: transparent url('../images/twitter-hover.png') no-repeat scroll; }
#main-content 				{ margin: 75px auto; }
.item 						{ float: left; margin: 0 15px; margin-bottom: 3em; width: 210px; }
.item h3 					{ font-size: 18px; font-weight: normal; padding: 5px 5px 0; color: #ad0778; }
.item h3 a 					{ color: #fff; }
.item p 					{ color: #fff; font-size: 14px; font-style: italic; padding: 2px 5px; }
.item-image 				{ position: relative; }
.item-image a 				{ background: none; display: block; height: 325px; left: 0; position: absolute; text-align: left; text-indent: -9999px; !important; top: 0; width: 210px; z-index: 1; }
#noResultsInfo				{ width:200px;margin:0 auto;top:50px;background:#d9292a;color:#000;font-size:14px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;padding:20px;position:relative; }
#exploreBoxWrap a:hover 	{ text-decoration: none; }
#exploreBoxWrap .box		{ width:230px;height:345px;float:left;position:relative;cursor:pointer;display:block; margin: 0 10px 25px 0;}
#exploreBoxWrap .box.right  { margin-right: 0; }
#exploreBoxWrap .box .inner	{ position:absolute;width:210px;height:325px;border:10px solid #000;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;background:#1f1f1f; }
#exploreBoxWrap .box:hover .inner	{ border-color:#fff; }
#exploreBoxWrap .box .disco { position:absolute;top:0;z-index:2;width:210px;height:325px;overflow:hidden;}
#exploreBoxWrap .box .cover { position:absolute;top:0;left:0 ;width:210px;height:325px;}
#exploreBoxWrap .box .bg 	{ width:210px;height:325px;}


#exploreBoxWrap .box .text	{ position:absolute; bottom:5px; right:5px; z-index:3; min-width:150px; }
#exploreBoxWrap .box .name	{ opacity: 0.8; float:right;color:#fff;font-size:16px;line-height:30px;font-weight:normal;background:#000;padding:0 7px;-moz-border-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-radius:10px;-webkit-border-bottom-right-radius:0;border-radius:10px;border-bottom-right-radius:0;}
#exploreBoxWrap .box:hover .name	{color:#d30b93; }
#exploreBoxWrap .box .stuff	{position:absolute;top:-22px;right:0;z-index:2;visibility:hidden;}
#exploreBoxWrap .box:hover .stuff	{visibility:visible;}
#exploreBoxWrap .box .info	{height:18px;color:#fff;float:left;line-height:18px;font-size:11px;background:#247cb8;padding:0 4px;margin:0 0 0 2px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#exploreBoxWrap .box .likes	{padding-right:20px!important;}
#exploreBoxWrap .box .likes img {position:absolute;right:4px;top:4px;}
#exploreBoxWrap .box .pieces b {display:block;float:left;width:12px;height:18px;background:center center no-repeat;margin:0 0 0 2px;}
#exploreBoxWrap .box .pieces span.num {float:left;}



#pagination					{padding:10px 0 0 0; text-align: center ;}
#pagination a,
#pagination strong 			{display:block;float:left;width:40px;height:40px;line-height:40px;text-align:center;margin:0 10px 0 0;background:#222;text-decoration:none;color:#fff;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; text-decoration: none;}
#pagination strong,
#pagination a:hover			{ font-weight:normal;background:#fff;color:#000; }
.clear 						{ clear: both; }
.ul_pagination 				{ display: inline-block; clear:both; }
.ul_pagination li			{ display:block; float:left; background:none; margin-left: 5px; }
.ul_pagination a 			{ text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;color:#247cb8; }
#pagination .pagination_active{font-weight:normal;background:#fff;color:#000;}

/**
 * About
 */
div.about 					{ margin: 0 auto; position: relative; padding: 30px 0 130px 0; }
.about img#labs 			{ position: absolute; bottom: 130px; left: 380px; }
.about div 					{ float: left; width: 385px; margin: 50px 0 0 0; line-height: 22px; }
.about p 					{ color: #555; text-align: justify; }
.about h2 					{ background: transparent url('../images/title/about.png'); width: 209px; height: 69px; }
.about h2 + p 				{ display: block; background: transparent url('../images/about_desc.png'); width: 909px; height: 103px; margin: 30px 0 0 0; }
.about img + div 			{ float: right; }
.about p span 				{ font-weight: bold; }
.about p + p 				{ margin: 25px 0 0 0; }
#newsletter 				{ position: absolute; bottom: 0; width: 785px; height: 50px; background: #0f0f0f; padding: 15px 0 0 0; margin-left:50px; }
#newsletter label:first-child { width: 315px; height: 24px; display: block; margin: 5px 10px 0 10px; background: transparent url('../images/newsletter_title.jpg'); text-indent: -9999px; float: left; }
#newsletter input.email		{ display: inline; float: left; height: 32px; padding: 0 15px; background: #fff; width: 305px; margin: 0px 7px 0 0; }
#newsletter .submit, 
#newsletter .submit:focus 	{ background: transparent url('../images/ok.jpg') no-repeat; width: 95px; height: 34px; margin: 0 0 0 0; }
	

/**
 * Contact
 */
div.contact 				{ padding: 30px 0 130px 0; margin: 0 auto; position: relative; }
.contact h2 				{ background: transparent url('../images/title/contact.png'); width: 237px; height: 66px; }
.contact h3 				{ margin: 40px 0; }
.contact #inquiry			{ width: 450px; float: left; }
.contact #hello 			{ width: 450px; float: right; }
.contact #inquiry h3 		{ background: transparent url('../images/inquiry.png'); width: 444px; height: 48px; }
.contact #hello h3 			{ background: transparent url('../images/hello.png'); width: 426px; height: 48px; }
#hello a.twitter 			{ background: transparent url('../images/twitter.png') no-repeat scroll; display: block; height: 33px; text-indent: -9999px; width: 240px; margin: 30px 30px 0 0; float: none; }
#hello a.twitter:hover 		{ background: transparent url('../images/twitter-hover.png') no-repeat scroll; }
#hello a.skype 				{ background: transparent url('../images/skype.png') no-repeat scroll; height: 33px; text-indent: -9999px; width: 177px; display: block; margin: 10px 0 40px 0; }
#hello a.skype:hover 		{ background: transparent url('../images/skype-hover.png') no-repeat scroll; }


/**
 * Footer
 */
#footer 					{ padding: 25px 0; }
.footer 					{ margin: 0 auto; overflow: auto; }
.footer p 					{ color: #7a7a7a; text-align: center; }
.success 					{ display: none; background: #0a8e20; color: #fff; font-size: 15px; font-style: italic; height: 33px; width: 285px; line-height: 33px; text-align: center;}