/* Formata-se cada revista, e separadores, assim como a "mask" on-over: */
@import url('styleRevistas.css');
/***********************************************/

/*Vermelho Oficina: #e31e24 ou RGB(227,30,36)*/

body{
    background:url(../imgs/wallpaper.png);
    background-repeat: repeat;
	background-position: left top;
	margin:0;
	padding:0;
}

span.MLogo, span.closePagHover{
    background-image: url(../imgs/LogoM.png); background-repeat: no-repeat; background-position: center center;
    position: fixed; float: right; margin-top: 10px; right: 10px;
    width:30px; height:30px;
    cursor: pointer;
    opacity:0.4;
    /*border:1px solid green;*/
    z-index: 20; /* SEMPRE a mais à frente de todas!*/
}
span.closePagHover{background-image: url(../imgs/close.png); opacity:0;}

/*-----*/

.quiosque{
    /*margin-left:auto;
    margin-right:auto;
    list-style: none;
    border:1px solid red;*/
}

/*-----*/

.bookshelf{
	float:left;
	margin-top:50px;
    margin-left:5%; /*15px;*/
    width: 50%;
    min-width: 360px;
    max-width: 500px; /*não deixa imgs fora da prateleira - o tamanho do background img */
    /* border:1px solid red; */
}

.bookshelf .shelf{
	width:100%; /*426px;*/
	height:460px; /*440px;*/
    /* border:1px solid blue; */
}

.bookshelf .shelf .row{
	background:url(../imgs/wall-bookshelf.png);
	background-size:500px;
	background-repeat: no-repeat;
	background-position:center bottom;
	position:relative;
	width:100%; /*360px;*/
	height:164px; /*158px;*/
	margin-left:0px; /*33px;  distância a .bookshelf .shelf*/
/*  border:1px solid cyan; */
}

/***********************************************/

.bookshelf .shelf .loc{
	position:absolute;
	bottom:60px; /*distância ao limite da layer .bookshelf .shelf .row-x */
	width:90%; /*harmónio da distribuição das revistas em cada prateleira*/
	margin-left:5%; /*para manobrar, na posição horizontal, relativamente à tábua.*/
}

.bookshelf .shelf .loc > div{
	width:33%; /*parte para cada revista (25% serão 4 revistas) */
	height:100%;
	float:left;
	text-align:center;
	position:relative;
}

.bookshelf .sample,
.bookshelf-row .sample{
	margin:auto;
	position: relative;
	/* z-index:1; /*fica na DIV da revista (quiosque.php), para distinguir as Revistas dos thumbVazio's */

	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-ms-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-o-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	box-shadow:2px 2px 5px rgba(0,0,0,0.6);

	-webkit-transition:-webkit-transform 0.1s;
	-webkit-transform:translate(0, 0);
	-moz-transition:-moz-transform 0.1s;
	-moz-transform:translate(0, 0);
	-ms-transition:-ms-transform 0.1s;
	-ms-transform:translate(0, 0);
	-o-transition:-o-transform 0.1s;
	-o-transform:translate(0, 0);
	transition:transform 0.1s;
	transform:translate(0, 0);
}

.bookshelf .suggestion{
	font-family:'Open Sans Condensed',sans-serif; color:rgb(99,99,100);
	text-align:center;
    /* line-height:40px; controla distancia entre a main (bookshelf) div e a da bookshelf (bookshelf.shelf))*/
    height:22px; /*optou-se por n escrever nada... height "equivalente" imposta aqui*/
 }

/***********************************************/


/********************
* Contact form DESIGN
*********************/
span.form_close{
	background-image: url(../imgs/close.png); background-repeat: no-repeat; background-position: top left;
    float:right; margin: 15px; width:22px; height:24px;
	cursor:pointer; opacity:0.4;
    z-index: 11;
}
span.form_close:hover{
	opacity:1.0;
}

.formContactHeader {
    background: url("../imgs/papelHr_bg.png") rgba(0, 0, 0, 0); background-repeat: no-repeat;
    /*border-bottom: 1px solid #CCCCCC;*/ border-left: 1px solid #CCCCCC;
    position: relative; left: 15%; top: -248px; display: block; /*top = [|top(formContact)|+height]-2px(sombra) */
    width:400px; height:90px; /*dim papelHr_bg.png*/
    -webkit-box-shadow:2px 0px 5px rgba(0,0,0,0.6);
    -moz-box-shadow:2px 0px 5px rgba(0,0,0,0.6);
    -ms-box-shadow:2px 0px 5px rgba(0,0,0,0.6);
    -o-box-shadow:2px 0px 5px rgba(0,0,0,0.6);
    box-shadow:2px 0px 5px rgba(0,0,0,0.6);
    z-index: 10;
    /*visibility: visible; /**/
    display: none; /* para o "fade-in" JQuery */
}
.formContact {
    background-image: url("../imgs/papel_bg.png"); background-color: rgba(0, 0, 0, 0); background-repeat:repeat-y; background-attachment:scroll; background-position: left top;
    /*background-size: 400px 40px; /*é 360x40; estica-se um pouco; no problem.*/
    border-top: 0px none #e5ece5; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC;
    position: absolute; display: block; left: 15%; top: -160px;
    width: 340px; padding: 15px 20px 13px 40px; /*come 20+40px às "margens"*/ margin: 0 0 40px;
    overflow-x: hidden;/* auto;*/
    overflow-y: hidden;
    /**/
    font-family: monospace;
    font-size: 14px;
    color: #996699; /*meio preto #525252; magenta: #996699*/
    line-height: 140%; /*20px;*/
    text-align: left;
    text-justify: auto;
    /**/
    -webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    -moz-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    -ms-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    -o-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    box-shadow:2px 2px 5px rgba(0,0,0,0.6);
    z-index: 11; /*à frente do Header, por causa sombras*/
    /*visibility: visible;/**/
    display: none; /* para o "fade-in" JQuery */
}
.formContact h2 {
    line-height:10%; /*alivia espaço do parágrafo (antes e depois)*/
    text-align: center;
    font-size: 16px; color: #996699; text-decoration: underline;
    text-transform: uppercase; letter-spacing: 10px;
    /* text-transform: none; clear: both;*/    
}

span.formContactStamps {
    background:transparent url(../imgs/papelStamps.png) no-repeat top left;
    position: absolute; float:right; margin-left: 20px; margin-top: -20px;
    width:92px; height:48px;
}
/********************
* Contact form MECH (as in Oficina-Design/srcp/style.css)
*********************/
#contact input[type="button"]{
    background:transparent url(../../imgs/submit.png) no-repeat bottom center;
    width:177px; height:83px; /*83px;*/ float:right;
    border:none; outline: none;
    padding-left:15px; margin:0px 10px 0px 0px;
    font-family:'Open Sans Condensed',sans-serif;
    color:#e31e24;
    font-size:22px;
    text-decoration: underline;
    opacity:0.6;
    cursor:pointer;
}
#contact input[type="button"]:hover{
    text-decoration: none;
    opacity:1.0;
}
#contact textarea{
    height:20px;
}
#contact p.submitForm{
    height:40px; /*40px;*/
}
/********************
* Contact form MSGS/ERRORS (as in Oficina-Design/srcp/style.css)
*********************/
.clickInput, .charcounter{
    font-weight:bold;
    color: #525252;
    cursor: pointer;
    /*border:1px solid red;*/
}

.loader{
    background:transparent url(../../imgs/loader.gif) no-repeat top left;
    width:31px; height:31px;
    float:right; margin-top:0px; margin-right:40px;
}
.success{
    /*height:10px; /*31px;*/
    /*border:1px solid #fff;*/
    color:#e31e24; /*#cccccc;*/
	position: static; float:right;
	margin: -20px 45px 63px 0px;
}
.envelope img{
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-88px;
    margin-left:-123px;
}

/***********************************************/
.guiaInterruptor{
    position: relative; float: right;
    width:100%; height:48px;/* dim interruptor */
    top: 145px; /*relativo à última prateleira; não sobe pois tem 100%*/
    /*border:1px solid red; */
}
.interruptor{
    background-image:url(../imgs/interruptor.png); background-repeat: no-repeat;
    position: relative; float: right; right: 10%;
    width:48px; height:48px;/* dim interruptor */
    /**************/
    top: 0px;
    /* 630px (relativo ao topo); 145px (será relativo à última prateleira, acima do sofá); 0px, dentro da ".guiaInterruptor"*/
    /**************/
    cursor: pointer;
    /*border:1px solid blue;*/
}
 .interruptor:hover{
        /* opacity: 0.8; /* a ser usado qd se apaga tudo*/
}
/***********************************************/
.telefone{ /*rola colado ao "sofaMesaTlf", para poder ser clicável*/
    background-image:url(../imgs/S_Tlf.png); background-repeat: no-repeat;
    background-position: bottom right; background-size: 74px 65px; /*redim para ficar exactamente igual*/
    position: absolute; float: right; left:70%; top:110px; /* 110px; relativo à layer sofaMesaTlf; left=background-position*/
    width:74px; height:65px;/* dim ~telefone */
    margin-left: 34px; /* 34px para colocar mm em cima O OPERA DÁ CAGADA, AQUI! BUG... */
    /* padding-top:0px; padding-left:0px; margin-top:0px; margin-left:34px; /**/
    cursor: pointer;
    z-index: 10
    /*border:1px solid blueviolet;/**/
}
.sofaMesaTlf{
    background-image:url(../imgs/Sofa_Mesa_Tlf.png); background-repeat: no-repeat;
   	background-size:550px; /*100%; /*500px;*/
	position:relative; float: right; background-position:70% 100%; bottom: -200px;
	width:100%; height:380px;
    z-index: 10
	/*border:1px solid black;*/
}
.soalho{
    background:url(../imgs/rodape.png) repeat-x; background-size:43px; /*dim width do png: 43px*/
	position:relative; float:left; background-position:0% 100%;
    bottom: -47px; /* a teminar atrás/antes das pernas do sofá*/
	width:100%;
	height:200px; /*200px; - como é a última, vai influenciar TODAS as DIVs, atrás...*/
    z-index: -10;
	/* border:1px solid green; */
}

/***********************************************/