/*
 * Estilo CSS mobile das páginas do sistema
 *
 * @versao: 1.0.1
 * @sistema: Sistema de Ajuda Mútua - Open Master
 *
 * @autor: Émerson Januário da Silva
 * @data: 21/03/2018
 */

/* Smartphone em modo retrato */
@media only screen and (max-width : 480px){
	#login{
		width:300px;
		margin-top:20px;
		padding:0 10px;
		/*background-color:red;*/
	}
	#login img{
		margin:10px 0 15px 34px;
	}
	#login img.cadastro{
		margin:0 0 0 55px;
	}
	#login form{
		width:258px;
		padding:20px;
		margin-top:15px;
		border-top:4px #5800B0 solid;
		border-bottom:1px #DDD solid;
		border-left:1px #DDD solid;
		border-right:1px #DDD solid;
		background-color:#FFF;
		box-shadow: 0px 0px 10px #CCC;
	}
	#login form input{
		width:238px;
		font-weight:bold;
		color:#777;
		padding:10px 10px;
		margin:2px 0 20px 0;
		border:1px #DDD solid;
	}
	#login form input.btn{
		width:260px;
	}
	#login form select{
		width:260px;
	}
	
	header{
		height:102px;
	}
	#header{
		width:300px;
		height:82px;
		padding:10px 10px;
		/*border-bottom:3px #FF4F22 solid;*/
	}
	#header img{
		width:120px;
		margin:0;
	}
	#header img.barra{
		padding-right:0;
		border:0;
	}
	#header img.sair{
		display:none;
	}
	#header p{
		/*display:none;
		margin:0px;*/
		width:290px;
		float:left;
		margin:0;
		padding:0 5px 5px;
	}
	#header p.titulo{
		/*float:left;
		margin-left:30px;*/
		margin-top:10px;
		margin-left:0;
		padding-top:5px;
		border-top:1px #DDD solid;
		font-size:12px;
	}
	
	#nav{
		position:absolute;
		width:30px;
		height:30px;
		top:10px;
		right:10px;
		background:#5800B0 url(../img/menu.png) no-repeat center;
		border-radius:4px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		z-index:9;
	}
	#nav ul{
		display:none;
	}
	#nav:hover ul{
		display:block;
		background-color:#5800B0;
		width:160px;
		/*height:250px;*/
		margin-top:-10px;
		margin-left:-121px;
		padding:8px 0;
		border-left:1px #000 solid;
		border-bottom:1px #000 solid;
	}
	#nav ul li{
		display:block;
		height:18px;
		padding:8px 10px;
	}
	#nav ul li a{
		font-size:13px;
		color:#F1F1F1;
		text-decoration:none;
		padding:8px 0;
		margin:0;
	}
	#nav ul li a:hover{
		color:#FFF;
	}
	
	article{
		width:300px;
		padding:0 10px;
		margin:0 auto;
	}
	
	#tag{
		margin-top:10px;
		padding:12px 10px;
	}
	
	section{
		/*
		left:50%;
		margin:30px 0;
		margin-left:-500px;
		margin:0 auto;*/
		position:relative;
		float:left;
		width:298px;
		min-height:200px;
		margin-top:10px;
		margin-bottom:20px; /*Dar espaço para o footer*/
		border-top:3px #0C6AB4 solid;
		border-bottom:1px #DDD solid;
		border-left:1px #DDD solid;
		border-right:1px #DDD solid;
		background-color:#FFF;
	}
	section h1{
		font-size:13px;
		padding:15px 10px;
	}
	
	section table{
		width:298px;
	}
	section table tr.maior{
		padding-top:12px 10px;
	}
	section table td{
		vertical-align: middle;
	}
	section table td.inicio{
		padding-left:10px;
	}
	section table td.final{
		padding-right:10px;
	}
	section table td.apagar{
		display:none;
	}
	section table td.valor{
		width:60px;
	}
	
	section span.apagar{
		display:none;
	}
	
	section a#botao{
		margin-right:17px;
	}
	
	section #pesquisa{
		margin-right:17px;
	}
	section form input{
		width:100px;
	}
	section form select{
		padding:6px 7px;
	}
	section form select.pequeno{
		width:280px;
	}
	section form select.medio{
		width:280px;
	}
	section form select.margin-grande{
		margin-right:0;
	}
	section form#frm{
		width:288px;
		padding:10px 0 10px 10px;
	}
	section form#frm div input{
		width:258px;
		padding:6px 10px;
	}
	section form#frm div input.pequeno{
		width:258px;
	}
	section form#frm div input.medio{
		width:258px;
	}
	section form#frm div input.grande{
		width:258px;
	}
	section form#frm div input.margin-pequeno{
		margin-right:0;
	}
	section form#frm div input.margin-medio{
		margin-right:0;
	}
	section form#frm div input.margin-grande{
		margin-right:0;
	}
	section form#frm div.botao{
		width:278px;
		padding:10px 0px;
		margin:50px 0 0;
	}
	section form#frm div textarea{
		padding:3px 10px;
	}
	section form#frm div textarea.grande{
		width:258px;
	}
	section form#frm div textarea.margin-pequeno{
		margin-right:0;
	}
	
	section p{
		float:left;
		width:280px;
		padding:5px 10px;
	}
	section p.cliente{
		font-size:20px;
	}
	section p.saldo{
		padding:10px;
	}
	section p.botao{
		padding:10px 10px;
		margin:50px 0 0;
	}
	
	#welcome{
		position:relative;
		float:left;
		width:278px;
		padding:15px 10px 20px;
		margin-top:10px;
		margin-bottom:0px;
		background-color:#FFF;
		border-top:3px #0C6AB4 solid;
		border-bottom:1px #DDD solid;
		border-left:1px #DDD solid;
		border-right:1px #DDD solid;
	}
	#welcome span{
		float:initial;
		display:block;
		margin-top:20px;
		margin-right:50px;
	}
	#welcome a.botao{
		font-size:12px;
		margin:15px 0;
		padding:6px 12px;
		font-weight:bold;
		text-decoration:none;
		color:#FFF;
		background-color:#00CC33;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
	}
	#welcome a.laranja{
		background-color:#FF3300;
	}
	
	#home{
		width:300px;
		/*min-height:390px;*/
		margin-top:10px;
		margin-bottom:0px; /*Dar espaço para o footer*/
	}
	#home div{
		width:280px;
		margin-bottom:10px;
	}
	#home div.grande{
		width:280px;
	}
	#home div.margem-direita{
		margin-right:0px;
	}
	
	footer{
		display:none;
	}
}