/*
Theme Name: CSS Mix
Theme URI: http://www.cssmix.com.br/
Description: First Css Mix Theme
Version: 1.0
Author: http://cssmix.com.br
Tags: cssmix, multicolor, design
*/

/* Welcome Coder :) See our skill  */

/*==================Indice====================

                1.  Resetar
                2.  Geral
                3.  Topo
                4.  Conteudo
                5.  Rodape
                6.  Paginas
                6.1 Nos
                6.2 Exemplo
                6.3 Contato
                6.4 Pedido
                6.5 Privacidade

=============================================*/

/*============================================
 1. Resetar
=============================================*/

* { padding:0; margin:0; text-decoration:none; list-style:none; vertical-align:baseline; border:none; outline:0;}

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
 
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
 
* html .clearfix { height: 1%; }    

/*============================================
 2. Geral
=============================================*/

strong {font-weight:bold;}
.none { display:none; }
span.pink { color:#FF0066;}
body { background:url(images/back.jpg) left top repeat; }
#page { width:970px; margin:0 auto; }

/*============================================
 3. Topo
=============================================*/

#header { width:100%; height:210px; background:url(images/topo32.png) left top no-repeat;}
#headerimg { margin:118px 0 0 0; float:left;}
#headerimg h1 a {display:block; width:320px; height:58px; text-indent:-9999px; display:block; overflow:hidden;}
#mainmenu {float:right; width:600px;}
#mainmenu ul {margin:135px 0 0 0;}
#mainmenu ul li {display:inline; float:left;}
#mainmenu ul li a {display:block; padding:0 9px; font:bold 21px Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif; color:#C6D58B;}
#mainmenu ul li a:hover {color:#FF0066;}
.page-id-5 #mainmenu ul li a.navnos, .page-id-6 #mainmenu ul li a.navprivacidade, .page-id-7 #mainmenu ul li a.navexemplos, .page-id-25 #mainmenu ul li a.navpedido, .page-id-10 #mainmenu ul li a.navcontato {color:#FF0066;}

/*============================================
 4. Conteudo
=============================================*/

#toplinks {width:970px; height:145px; background:url(images/ourjob.png) 50% 50% no-repeat; display:none; }
.home #toplinks { display:block; }


#content {width:600px; float:left; border:1px solid #C6D58B; background:#fff; margin:15px 0 0 0; }
#content h2 { background-color:#C5D387; color:#fff; padding:5px; font:normal 22px Trebuchet Ms, Arial, Helvetica, sans-serif; }
#content ul.steps li {width:190px; height:255px; float:left; padding:0 5px;}
#content ul.steps li p {text-align:center; color:#333; font:normal 11px Arial, Verdana, Helvetica, Sans-serif; margin:170px 0 0 0;}
#content ul.steps li p span.pink {color:#FF0D6D;}
#content ul.steps li.first-step {background:url(images/first-step.jpg) 50% 30% no-repeat;}
#content ul.steps li.second-step {background:url(images/second-step.jpg) 50% 30% no-repeat;}
#content ul.steps li.third-step {background:url(images/third-step.jpg) 50% 30% no-repeat;}

#sidebar { width:305px; background:#fff; padding:0px 10px 27px 10px; border:1px solid #C6D58B; float:right; margin:15px 0 0 0; }
#sidebar h3 { color:#FF64A2; font:normal 20px Tahoma, Verdana, Geneva, Sans-serif; margin-top:15px; padding:0 0 0 30px; background:url(images/ok.jpg) 0% 50% no-repeat; }
#sidebar h3 a { color:#FF64A2; font:normal 20px Tahoma, Verdana, Geneva, Sans-serif; }
#sidebar h3 a:hover { text-decoration:underline; color:#C6D58B; }
#sidebar p { font:normal 12px Trebuchet Ms, Arial, Helvetica, sans-serif; text-indent:15px; padding:0 0 0 15px;}

/*============================================
 5. Rodape
=============================================*/

#footer { width:100%; height:80px; margin:20px 0 0 0; padding:0 0 20px 0; float:left; clear:both; background:url(images/footer.png) top left no-repeat; }
#fleft {width:570px; float:left; height:60px; padding:10px;}
#fleft #botao-projeto { background:red url(images/enviar-projeto.jpg) top left no-repeat; float:right; margin:7px 25px 0 0;}
#fleft #botao-projeto a {display:block; width:132px; height:47px;}
#fright {width:280px; float:right; height:80px;}
#fright ul li {float:left; margin:10px 6px;}
#fright ul li.twitter {background:url(images/twitter.jpg) top left no-repeat;}
#fright ul li.feed {background:url(images/rss.jpg) top left no-repeat;}
#fright ul li.mail {background:url(images/contato.jpg) top left no-repeat;}
#fright ul li.skype {background:url(images/skype.jpg) top left no-repeat;}
#fright ul li a {display:block; width:55px; height:55px; text-indent:-9999px; overflow:hidden; display:block;}

/*============================================
 6. Paginas
=============================================*/

#contentinside {width:940px; background:#fff; padding:20px 15px; font:normal 12px Arial, Verdana, Helvetica, Sans-serif; /* border:1px solid #C6D58B; */ margin:15px 0 0 0; }
#contentinside #conteudo {width:655px; float:left;}
#contentinside #depoimentos {width:270px; float:right; /* border-left:1px solid #CCD98F; */ padding:0 0 0 10px;}
#contentinside h2 {font:bold 19px Trebuchet MS, Verdana, Geneva, Sans-serif; color:#C6D58B; margin:0 0 10px 0;}
#contentinside span.grey { color:#DFDFDF;}
#contentinside #conteudo p {line-height:1.5em; margin:15px 10px; width:570px;}

  /* 6.1 Nos ==================================*/

    #contentinside #depoimentos ul li {width:270px; height:163px; margin:0 0 50px 0; background:url(images/post-it-depoimentos.jpg) top left no-repeat;}
    #contentinside #depoimentos ul li p {width:190px; height:105px; padding:45px 0 0 55px; color:#666; line-height:1.5em;}
    #contentinside #depoimentos ul li p.autor {height:auto; margin:0 0 0 50px; padding:0; color:#333; font-size:11px; text-align:right;}
    #contentinside #depoimentos ul li p.autor a {color:#333;}
    #contentinside #depoimentos ul li p.autor a:hover {color:#FF0066;}
    #contentinside #conteudo .moneyback {margin:0 0 30px 120px;}
    #contentinside #conteudo ul.tensteps {margin:0 0 0 30px;}
    #contentinside #conteudo ul.tensteps li {background:url(images/pinksquare.jpg) 0% 50% no-repeat; padding:0 0 0 15px; margin:15px 0;}

  /* 6.2 Exemplos ==================================*/

    #contentinside #conteudo ul#jobs li {height:120px; padding:0 0 0 180px; margin:0 0 30px 0;}
    #contentinside #conteudo ul#jobs li h3 {font:bold 21px Georgia, Palatino, Times New Roman; color:#CEDA9D;}
    #contentinside #conteudo ul#jobs li h3 a {font:bold 21px Georgia, Palatino, Times New Roman; color:#CEDA9D;}    
    #contentinside #conteudo ul#jobs li.skidunweb {background:url(images/skidun-revista-webdesign.jpg) top left no-repeat;}
    #contentinside #conteudo ul#jobs li.tedx-sudeste {background:url(images/tedx-sudeste.jpg) top left no-repeat;}
    #contentinside #conteudo ul#jobs li.triplet {background:url(images/triplet.jpg) top left no-repeat;}
    #contentinside #conteudo ul#jobs li.eckart {background:url(images/eckart.jpg) top left no-repeat;}
	#contentinside #conteudo ul#jobs li.segurospro {background:url(images/segurospro.jpg) top left no-repeat;}
    #contentinside #conteudo ul#jobs li p {width:auto; padding:0; margin:5px 0 0 10px;}
    #contentinside #conteudo ul#jobs li p.tags span.pink {text-decoration:underline;}

  /* 6.3 Contato ==================================*/

    #contentinside #contato {width:100%; background:#FFFFCC; border:1px solid #FFFF66;}
    #contentinside #selo {height:140px; margin:20px; border-bottom:1px solid #FFFF66;}
    #contentinside #selo p {width:670px; float:left; font:normal 18px Arial, Verdana, Helvetica, sans-serif; text-align:center; margin:10px 15px 0 15px;}
    #contentinside #selo .ffj {float:left; margin:15px 0 0 0;}
    #contentinside #selo .selo {float:right;}

    #contentinside #cformsform {margin:0 20px; padding:0 0 20px 0;}
    #contentinside #usermessagea {margin:20px; font:bold 20px Trebuchet MS, Verdana, Helvetica, Sans-serif; color:#F94779;}
    #contentinside .cf-ol li {margin:0 0 15px 0;}
    #contentinside .cf-ol li label span {font:bold 16px Trebuchet MS, Verdana, Helvetica, Sans-serif; color:#663333; position:relative; top:5px;}
    #contentinside .cf-ol li input {border:1px dashed #999; width:740px; height:25px; float:right; font-size:14px; padding:5px 0 0 10px;}
    #contentinside .cf-ol li .area {width:860px; margin:20px 0 0 0; padding:20px; background:#FFFFE0; font:bold 14px Georgia, Times, Times New Roman, Serif; color:#F94779; line-height:1.5em; font-style:italic;}
    #contentinside .cf-ol li span.reqtxt, .cf-ol li span.emailreqtxt {display:none;}
    #contentinside .cf-sb #sendbutton {width:128px; height:34px; background:url(images/enviar-contato.jpg) top left no-repeat; font:bold 20px Georgia, Times, Times New Roman, Serif; color:#fff;}
    #contentinside .cf_li_err input:focus {border:1px solid red !important; color:red;}

  /* 6.4 Pedido ==================================*/


    #content #project { padding:20px; }
    #content #project #slider-dias { margin-bottom:10px; }
    #content #project #slider-layouts { margin-top:10px; margin-bottom:10px; }
    #content #project #dias, #layouts {width:22px !important; background:#fff !important; color:#000; font-weight:bold;}
    #content #project #form-dias, #form-layouts {font:normal 16px Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif !important;}
    #content #project #total {border:1px solid #D6E1A6; padding:7px; font:normal 18px Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif !important;}
    #content #project .orca { color:#B2C564;}
    #content #project .pricefinal {background:#fff !important; color:#FF0066;}
    .page-id-25 #botao-projeto {display:none;} 
    input{font-size: 1em;}
    #content p.advice { margin:10px 0 10px 0; font:normal 12px Arial, Helvetica, sans-serif; }

    #selectable { width:100%; height:70px; padding:10px 0; margin:10px 0 0 0;}
    #selectable .ui-selecting { border:2px solid #FECA40; }
	  #selectable .ui-selected { border:2px solid #C5D387; }
	  #selectable li { width:70px; height:70px; float:left; display:block; border:2px solid #fff; margin:0 20px 0 0; text-indent:-9999px; display:block; overflow:hidden;}
    #selectable li.css {background:url(images/htmlecss.jpg) top left no-repeat; }
	  #selectable li.wordpress {background:url(images/wordpress.jpg) top left no-repeat;}
	  #selectable li.joomla {background:url(images/joomla.jpg) top left no-repeat;}
	  #selectable li.magento {background:url(images/magento.jpg) top left no-repeat;}

    #content #cforms2form {padding:0 10px 20px 10px;}	
    #content #cforms2form .cf-ol li {margin:0 0 15px 0; height:30px;}
    #content #cforms2form .cf-ol li label span {font:bold 16px Trebuchet MS, Verdana, Helvetica, Sans-serif; color:#663333; position:relative; top:5px;}
    #content #cforms2form .cf-ol li input {border:1px dashed #999; color:#FC5B91; width:450px; height:25px; float:right; font-size:14px; padding:5px 0 0 10px;}
    #content #cforms2form .cf-ol li input:focus {color:#000;}
    #content #cforms2form .cf-ol li select {float:right; width:150px; margin:7px 300px 0 0;}
    #content #cforms2form .cf-ol li span.reqtxt, .cf-ol li span.emailreqtxt {display:none;}
    #content fieldset.cf-fs1, fieldset.cf-fs2 {border:1px solid #D8E2A8; padding:10px; margin:15px 0 0 0;} 
    #content fieldset.cf-fs1 legend, fieldset.cf-fs2 legend {color:#333; padding:0 5px; font:bold 16px Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;}
    #content #cf_uploadfile2-10 {width:450px !important; margin:3px 0 0 0; overflow:hidden;}
    #content #cforms2form .cf-sb #sendbutton2 {width:128px; height:34px; background:url(images/enviar-contato.jpg) top left no-repeat; font:bold 20px Georgia, Times, Times New Roman, Serif; color:#fff;}
    #content #usermessage2a {margin:20px; font:bold 20px Trebuchet MS, Verdana, Helvetica, Sans-serif; color:#F94779;}
    #content #cforms2form .cf-fs1 {display:none;}

  /* 6.5 Privacidade ==================================*/

    #content #privacidade {padding:20px;}
    #content #privacidade p {margin:0 0 15px 0; font:normal 13px Arial, Verdana, Helvetica, Sans-serif; line-height:1.5em;}
    #content #privacidade h3 {font:normal 16px TrebuchetMS, Arial, Verdana, Helvetica, Sans-serif; margin:0 0 10px 0; color:#FF0066;}