/*
Theme Name: JOS Creative Studio
Theme URI: http://www.wdjos.com
Version: 1.0
Author: Jeff Olinger
*/


/* Overal setup */
* {
	margin:0;
	padding:0;

}
body {
	background:#000 url(images/fundo.jpg) top center no-repeat fixed;

	color:#ccc;
	font: 16px 'DroidSansRegular', Arial, sans-serif;
	margin:0px;
}
a {
	color:#999;
	text-decoration:none;
	outline:0;
}
a:hover { color:#900; }
a img { border: none; }
ul, li {
	list-style: none;
	margin:0;
	padding:0;
}
h1 { font-size:30px; }
h2 { font-size:14px; }
h3 {
	color:#bbb;
	text-transform:capitalize;
}
h4 { font-size:14px; }
code {
	font: 11px "Courier New";
	color:#666;
	padding:5px;
	margin:5px 0;
	display:block;
	border-left:1px solid #903000;
}

.left {
	float:left;
	margin-top:3px;
	margin-right:8px;
}
.right {
	float:right;
	margin-left:8px;
}
.clear { clear: both; }
.clear-both { clear: both; }
.pagenavi {
	margin: 10px 0;
	clear: both;
}
#searchWrap {
	float:right;
	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	-moz-border-radius: 3px;	
	background-color:#000;
	padding:2px;
}
.campo_busca{
	padding:3px;
	border:none;
	margin-right:5px;
	color:#666;
	background-color:#000;
}
.campo_busca{width:180px;}
.campo_busca_btn{
 cursor:pointer;
 width:24px;
 height:20px;
 padding:3px;
 border:0px;
background:transparent url(images/lupa.jpg) no-repeat center center; 
 }
.campo_news{
	background:#000 url(images/menu.gif) repeat-x left top;
	width:277px;
	height:30px;
}
.redonda {
	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	-moz-border-radius: 3px;
border-radius: 3px;
/*	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
}
img.redonda {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

#icones-sistema { height:32px; }
#icones-sistema ul {
	margin:0px 0 8px 0;
	padding:7px 0 0px 80px;
	list-style:none;
}
#icones-sistema ul li {
	display:inline;
	float:left;
}
#icones-sistema img {
	border:none !important;
	margin-right:5px;
}
/*==============================
FORMULARIO
==============================*/
#form-solicitacao input, #form-solicitacao textarea, #form-solicitacao select{
	border:0px;	
	font-family: 'NewJuneRegular', Arial, sans-serif;
}
#form-solicitacao .campo {
	padding:4px;
	font-size:12px;
	background-color:#333;
	color:#CCC;

	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.form-btn{
	padding:5px 10px;
	background-color:#c90;
	color:#FFF;
}
/*==============================
MENU
==============================*/
#suporte, .centro{
	display:block;
	margin:0 auto;
	margin-top:15px;
	margin-bottom:8px;
	width:1000px;
	padding:10px;
	text-align:left;
	/*background:#333 url(images/menu.gif) repeat-x center top;*/
		background:url(images/px.png);
	height:25px;
}
#suporte ul {
	list-style:none;
	text-align:left;
	margin:0px;
	padding:0px;
}
#suporte li {
	float:left;
	margin: 0;
}
#suporte li a {
	font: 12px 'DroidSansRegular', Arial, sans-serif;
	outline:none;
	color:#ccc;
	text-decoration:none;
	display:block;
	padding:5px 15px 0px 15px;
	height:32px;
	text-transform:uppercase;
}
#suporte li a:hover {
	color:#c00 !important;
	text-decoration:none;

}
/*==============================
TOPO
==============================*/
#logo{
	background: transparent url(images/jos.png) no-repeat left top;	
	width:450px;
	height:137px;
	float:left;
}
#topo {
width:1000px;
margin-left:-500px;
		height:176px;
		display:block;
		width:1000px;
		border:1px yellow;
		text-align:left;
}
#header {
	width:1000px;
	margin:0 auto;
	padding:0px;
	height:176px;
	color:#FFF !important;

}
#header h1 a {
	display:block;
	font-size: 20px;
	margin: 5px 0;
	width: 240px;
	text-indent: -999em;
}
#header h1 a:hover { color: #7ebe40; }
#chat{ float:right; margin-top:40px;}
#main-wrapper {
	display:block;
	margin:0 auto;
	width:1000px;
	padding:10px;
	text-align:left;
	background:url(images/px.png);
}
.main {
	width: 490px;
	margin:0;
	padding:0;
	float:left;
	overflow: hidden;
}
/*==============================
THUMBNAILS
==============================*/
.thumb { background: #333; }
.cover h2 {
	margin: 5px 5px 15px 5px;
	color:#FFF;
	font: 22px 'ColabThi-webfont', Arial, sans-serif;
	font-weight:normal;	
}
.cover h2 a{height:140px;}
.boxgrid {
	width: 235px;
	height: 150px;
	margin:7px;
	float:left;
	overflow: hidden;
	position: relative;
}
.boxgrid img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}
.boxgrid p {
	margin-right:10px;
	position:absolute;
	bottom:0%;
	right:0%;
}
.boxcaption a{ color:#fff; display:block;}
.boxcaption {
	float: left;
	position: absolute;
	background:#000;
	height: 150px;
	width: 100%;
	opacity: .9;
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
	/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
.captionfull .boxcaption {
	top: 0;
	left: 0;
}
.caption .boxcaption {
	top: 150px;
	left: 0;
}

/* single page */
.post.single {
	line-height:1.4em;
	width:485px;
	padding:3px;
}
.post.single h2, .post.single h2 a {
	text-decoration:none;
}

.post.single ul, .post.single ol { margin: 1em; }
.post.single ul li, .post.single ol li {
	margin: 0;
	color: #666;
	line-height: 1.4em;
}
/*==============================
SUBMENU
==============================*/
#four {
	height:55px;
	margin-bottom:20px;
	
}
#four div.four-block {
	display:block;
	float:left;
	width:244px;
	height:48px;
	padding:0;
	cursor:pointer;
	background: #000 url(images/submenu.gif) no-repeat right top;

}
#four #four-web { border-bottom:1px solid #63c; }
#four #four-design { border-bottom:1px solid #F09; }
#four #four-video { border-bottom:1px solid #F90; }
#four #four-audio { border-bottom:1px solid #9C0; }
#four div.four-block h2 {
	font: 21px 'NewJuneLight', Arial, sans-serif;
	display:block;
	padding:0px;
	letter-spacing:1px;
}
#four div.four-block{
		position:relative;	z-index:1000;
}
#four div.four-block h2 a{
	color:#999 !important; display:block; border:0px !important; display:block; padding:12px 2px 14px 8px;
}
#four div.four-block h2 a:hover{ color:#FFF !important;}
#four-web h2 a{	background:transparent url(images/four_web_off.jpg) no-repeat;}
#four-web h2 a:hover{background:transparent url(images/four_web_on.jpg) no-repeat;}
#four-design h2 a{	background:transparent url(images/four_grafico_off.jpg) no-repeat;}
#four-design h2 a:hover{background:transparent url(images/four_grafico_on.jpg) no-repeat;}
#four-video h2 a{	background:transparent url(images/four_video_off.jpg) no-repeat;}
#four-video h2 a:hover{background:transparent url(images/four_video_on.jpg) no-repeat;}
#four-audio h2 a{	background:transparent url(images/four_audio_off.jpg) no-repeat;}
#four-audio h2 a:hover{background:transparent url(images/four_audio_on.jpg) no-repeat;}
#four-audio h2 a:active{background:transparent url(images/four_audio_on.jpg) no-repeat;}

#four div.four-block p {
	font-size:11px;
	color:#999;
	padding:10px 0 0 8px;
}
#four div.last { margin-right:0px; }
.four-block li {
	list-style: none;
	font: 12px 'DroidSansRegular', Arial, sans-serif;
	float: none;
	display: inline;
}
.four-block ul li a {
	display: block;
	padding: 7px 10px;
	text-decoration: none;
	width: 220px !important;
	color: #f8f8f8;
	white-space: nowrap;
	width: auto;
	background: #666;
	border-top:1px solid #000;	
}

#four-web ul li a:hover {	color:#FFF;	background:#63c;}
#four-design ul li a:hover {	color:#FFF;	background:#F09;}
#four-video ul li a:hover {	color:#FFF;	background:#F90;}
#four-audio ul li a:hover {	color:#333 !important;	background:#9C0;}
#four-web, #four-design, #four-video{ margin-right:3px;}
.four-block ul {
	margin: 0;
	padding: 5px 0 0 0;
	position: absolute;
	visibility: hidden;
	z-index:100;
}
/*==============================
LISTA CLIENTES
==============================*/
.item_lista_clientes {
	margin:5px;
	background-color:#000;
	padding:10px;
	height:90px;
	border-bottom:1px dotted #333;
}
.item_lista_clientes img { margin-right:10px; }
.item_lista_clientes h2 {
	font-weight:normal;
	margin-bottom:4px;
	color:#FFF !important;
	font-size:18px;
}
.item_lista_clientes h2 a { color:#FFF !important; }
.item_lista_clientes h2 a:hover { text-decoration:underline; }
.item_lista_clientes p { font-size:11px; }

/*==============================
LISTA NOTICIAS
==============================*/
.item_lista_noticias {
	margin:10px  10px 0;
	padding:10px 10px 16px 10px;
	background:transparent url(images/divisoria.png) no-repeat center bottom;
}
.item_lista_noticias img { margin-right:10px; }
.item_lista_noticias h2 {
	margin-bottom:6px !important;
	font-size:22px;
	font-weight:normal;
	font: 22px 'NewJuneLight', Arial, sans-serif;
	line-height:160%;
}
.item_lista_noticias h2 a{color:#fff;}
.item_lista_noticias h2 a:hover {
	text-decoration:underline;
}
.item_lista_noticias p {
	font-size:12px;
	padding-left:0px !important;
	margin-left:0px !important;
}

/*==============================
RODAPE
==============================*/
.rodape {
	display:block;
	min-height:210px;
	height:auto !important;
	height:210px;
	margin:0 auto;
	width:1000px;
}
.rodape div.float {
	float:left;
	width:320px;
	display:block;
	padding:4px;
	line-height:130%;

}
.rodape div.float h1 {
	color:#666 !important;
	font-size:16px;
	padding:8px 8px 8px 0 !important;
	font: 22px 'trumpgotwesmed', Arial, sans-serif;
	margin-bottom:10px;
	letter-spacing:1px;
	text-transform:uppercase;
}
.rodape div.float h1 a {

	text-decoration:none !important;
}

.rodape div.float ul.not li {
	margin-bottom:15px;

	text-align:justify;
}
.rodape div.float ul li a:hover { text-decoration:none !important; }
.relacionamento{ height:100px; width:200px; list-style:none; padding:0px; margin:10px 0; }
.relacionamento img{ display:block; float:left; padding:5px; border:1px solid red; width:40px;}

#footer-bg {
		width:100%;
		min-height:340px;
		height:auto !important;
		height:340px;
		position:absolute;
		z-index:-1;
		margin:0 auto;
		margin-top:10px;
		clear:both;
}
#footer {
background:url(images/px.png);
height:320px;
	color:#333;
	font-size:11px;
	line-height:1.4em;
	padding:8px;
	margin:0 auto;	
	width:1000px;
	margin-top:5px;
}

#footer img { display: none; }
/*==============================
PAGINA
==============================*/
#pagina h1 { 
	font: 18px 'NewJuneLight', Arial, sans-serif;
	font-weight:normal;
	color:#FFF;
	display:block;
	margin:5px 0 5px 0;
}
#pagina h2 { 
	font: 18px 'NewJuneLight', Arial, sans-serif;
	font-weight:normal;
	color:#fff;
	display:block;
	margin:8px;
	padding:8px;
}
#pagina p {
	line-height:160%;
	margin:8px !important;
	padding:8px !important;
	font-size:13px;
	display:block;
}

/* sidebar related */
.sidebar-ajuste { min-height:600px; }
#sidebarwrapper {
	margin:0;
	padding:0;
	float:right;
	color: #999;
	background-color:#333;
}

#lista-noticias{
	width:600px;
}
#redes{ float:right; width:350px; margin-top:15px;}
#redes ul li{ margin-bottom:8px;}
.categories {
	padding: 0;
}
.categories ul {
	margin: 0px;
	padding: 0;
}
.categories ul li {
	font-size: 11px;
	padding:0px 2px 3px 0px;
	float: left;
	width: 48%;
	display: inline;
}

#cerebro{
	width:450px;
	height:400px;
	background: transparent url(images/cerebro.png) no-repeat center top;
	float:right;
}

/* classes */
.img-sistema{ float:left; margin-right:15px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
.homevideo {
	float:right;
	width:455px;
	margin-bottom:15px;
	padding:32px 0 8px 0;
	background:url(images/barra.jpg) no-repeat center top;
	text-align:center;
}
.cliente_logo {
	display:block;
	margin:1px;
	border:none !important;
}
.cliente_desc {
	clear:both;
	padding-top:10px;
}
.titulo, .titulo_post {
	clear:both;
	color:#fff;
	margin-bottom:10px;
	padding:2px;
	padding-bottom:13px;
	font-weight:normal;
	font: 20px 'NewJuneLight', Arial, sans-serif;
	letter-spacing:1px;
	background: url(images/linha2.gif) no-repeat left bottom;
	line-height:130%;
}
.titulo_post a{color:#fff !important; text-transform:none !important; letter-spacing:1px !important;}
.titulo_post a:hover{ color:#f09;}
.semborda { border:none !important; }
.underline { border-bottom:1px dotted #fff; }
.leiamais {
	margin-top:10px;
	color:#FFF !important;
	padding:4px 0px 4px 0px;
}
.flecha { font-size:18px; }
.onde{ font-size:9px;}
.onde a{ color:#999 !important;}


.cliente{
	display:block;
	float:left;
	padding:5px;
	width:280px;
	background:#333 url(images/menu.gif) repeat-x center center;
	margin:4px;
	border-bottom:1px solid #900;

}
.cliente h2{ font-weight:normal;}
.cliente h2 a:hover{ color:#9C0;}
.cliente p{ display:block; padding:3px 0 0 0;}

.voltar a { color:#900 !important; }
.content-right{ width:150px; float:right; background-color:#333;}

#pagina { min-height:400px; }

#shar{
	clear:both;
	display:block;
	padding:10px 0 10px 0;
}
/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

html, body { height: 100%;}
#page-wrap { width: 1000px; padding: 0 0 15px 0; margin: 0 auto; overflow: hidden; height: 100%; 
}

.info-col { float: left; width: 150px; height: 100%; padding: 20px 0 0 0; }
.info-col h2 { 
text-align: center; font-weight: normal; 
padding: 0 0 15px 0; font-size:16px;
color:#999;
text-transform:uppercase;
 }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.s-web { background: url(images/servicos_web.jpg) center center no-repeat; }
.s-design { background: url(images/servicos_design.jpg) center center no-repeat; }
.s-video { background: url(images/servicos_video.jpg) center center no-repeat; }
.s-audio { background: url(images/servicos_audio.jpg) center center no-repeat; }
.s-sistema { background: url(images/servicos_sistema.jpg) center center no-repeat; }

dt { padding: 10px; background: #900; color: #666; border-bottom: 1px dotted white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px !important; color: #666; 
border-right: 1px solid white; line-height:150%; font-size: 12px;}
dt.current{ font-size:12px; line-height:140%;}
dt:nth-of-type(1) { background: #e8e8e8; }
dd:nth-of-type(1) { background: #e8e8e8; }

dt:nth-of-type(2) { background: #ddd; }
dd:nth-of-type(2) { background: #ddd; }

dt:nth-of-type(3) { background: #ccc; }
dd:nth-of-type(3) { background: #ccc; }

dt:nth-of-type(4) { background: #e8e8e8; }
dd:nth-of-type(4) { background: #e8e8e8; }

dt:nth-of-type(5) { background: #ddd; }
dd:nth-of-type(5) { background: #ddd; }

dt:nth-of-type(6) { background:#ccc; }
dd:nth-of-type(6) { background: #ccc;}
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); z-index: 1; position: relative; }
.mozaico{ clear:both; position:absolute; bottom:0px; width:393px; height:4px; background: url(images/mozaico.gif) no-repeat; }
.selo{
	float:right;
	background: url(images/selo_jos.png) no-repeat;
	width:95px;
	height:66px;
	position:absolute;
	margin-left:900px;
	z-index:1;
	bottom:18px;
}
.ass{ float:left; position:absolute; bottom: 16px; color:#666; padding-left:4px;}

/* CLIENTES */
.sponsor{
	width:180px;
	height:130px;
	float:left;
	margin:5px;	
	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
	color:#333 !important;
}
.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;	
	background:url("images/bgclientes.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover{
	border:1px solid #999;	
	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 20px #999 inset;
	-webkit-box-shadow:0 0 20px #999 inset;
	box-shadow:0 0 20px #999 inset;
}
.sponsorFlip img{
	/* Centering the logo image in the middle of the sponsorFlip div */	
	position:absolute;
	top:50%;
	left:50%;
	margin:-65px 0 0 -90px;
}
.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}
div.sponsorDescription{
	padding:8px;
}
.sponsorSegmento{
	padding:10px 0 10px 0 !important;
	margin:0px !important;
	font-size:10px  !important;
	text-align:left;
}
.sponsorDescription h2{
	font-size: 13px;
	padding:0px !important;
	margin:0px !important;
	font-style:normal;
	color:#333 !important;
}
.sponsorURL{
	font-size:10px;
	padding:0px !important;
}
.sponsorURL a{ color:#666;}
.sponsorURL a:hover{ color:#09C;}
.voltar {
	clear:both;
	margin-top:10px;
	display:block;
font: 12px 'DroidSansRegular', Arial,sans-serif !important;
	text-transform:uppercase;
}
.voltar a{
	padding:8px !important;
	background-color:#c00;
	color:#FFF !important;
}
.voltar a:hover{background:#09C;}
.segmento{ background:#09C !important; padding:5px; color:#FFF; float:right; text-transform:uppercase; font: 12px 'DroidSansRegular', Arial,sans-serif !important; }