/* 
    Document   : estils
    Created on : 27/04/2014, 14:13:57
    Author     : Dr. Carles Torras
    Description: Purpose of the stylesheet follows.
*/

* {
    margin: 0;
    padding: 0;
}
a:focus {
    outline: 0;
}
a:link  {text-decoration: none; color: gray}
a:active  {text-decoration: none; color: gray}
a:hover  {text-decoration: none; color: black}
a:visited {text-decoration: none; color: gray}

@font-face {
    font-family: 'Comfortaa';
    src: url('fonts/comfortaa-regular-webfont.eot');
    src: url('fonts/comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/comfortaa-regular-webfont.woff') format('woff'),
         url('fonts/comfortaa-regular-webfont.ttf') format('truetype'),
         url('fonts/comfortaa-regular-webfont.svg#comfortaaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    /*font-size: 87.5%;  Base font size: 14px*/ 
    font-family: 'Comfortaa';
    line-height: 1.429;
    overflow-y: hidden;
    margin:0;
    padding:0;
    height:100%;    
}

.contenidor {
   height:100%;
   position:absolute;
}

/* CAPÇALERES ------------------------------------------------------------*/
.banner {
    position: absolute;
    width: 1132px;
    height: 134px;
    text-align: center;
    font-size: 40px;
    color: white;
    background: url('barrasup.gif');
    overflow-y: hidden;
    z-index: 10;
}
.menu {
    position:absolute;
    width: 1200px;
    height: 80px;
    top:96px;
    left:20px; 
    text-align: left;    
    font-size: 35px;  
    color: white;
    display: inline;
    z-index: 100;
}      
    .menu-nav a {color:white;}
    .menu-nav a:hover {color:#dae800;}
    
/* CONTINGUTS GENERALS -------------------------------------------------------*/
.contingut {
    position: relative;
    margin-top: 130px;
    margin-bottom: 400px;
    margin-left: 45px;
    width: 1200px;
    height: calc(100% - 220px);
    font-size: 17px;
    color: black;
    overflow-y: auto;
    overflow-x: hidden;
}
.continguttotalsi { position: absolute; width: 1100px;}
.contingutesquerrasi { position: absolute; margin-top: 20px; width: 500px;}
.contingutdretasi {
    position: absolute;
    margin-left: 550px;
    margin-top: 20px;
    width: 650px;
    color: gray;
}
.contingutindexesq {
    position: absolute;
    margin-top: 30px;
    width: 1200px;
    font-size: 24px;
    font-weight: bold;
}
.contingutindexdre {
    position: absolute;
    margin-top: 30px;
    margin-left: 570px;    
    width: 1200px;
    font-size: 24px;
    font-weight: bold;
    color: gray;
}
.contingutesquerra { position: absolute; margin-top: 80px; width: 500px; }
.contingutdreta {
    position: absolute;
    margin-top: 80px;
    margin-left: 570px;
    width: 500px;   
    color: gray;
}
.continguttotal { position: absolute; margin-top: 80px; width: 1100px; }

/* CONTINGUTS ESPECIALS -----------------------------------------------------*/
.titol { font-size: 24px; font-weight: bold; color: black; display: inline;}
.titolgris { font-size: 24px; font-weight: bold; color: gray; display: inline;}
.gris{color:gray; display: inline;}
#groc{color:#dae800; display: inline;}
ul,li { list-style-position:inside; margin:0; padding:0; }

#bal-p1{position: absolute; top:25px; left:360px;  font-size: 15px; text-align: right; color: green;}
#bal-p2{position: absolute; top:200px; left:720px;  font-size: 15px; text-align: left; color: green;}
#bal-p3{position: absolute; top:440px; left:650px;  font-size: 15px; text-align: center; color: green;}   
#bal-p4{position: absolute; top:250px; left:470px;  font-size: 15px; text-align: center; color: red;}
#bal-p5{position: absolute; top:330px; left:360px;  font-size: 15px; text-align: center; color: red;} 
#bal-p6{position: absolute; top:150px; left:240px;  font-size: 15px; text-align: left; color: red;}
#bal-p66{position: absolute; top:210px; left:150px;  font-size: 15px; text-align: center; color: red;}    
#bal-p7{position: absolute; top:170px; left:480px;  font-size: 15px; text-align: center; color: red;}    
#bal-p8{position: absolute; top:520px; left:240px;  font-size: 15px; text-align: center; color: green;}   
#bal-p9{position: absolute; top:270px; left:30px;  font-size: 15px; text-align: center; color: green;}  
#bal-p10{position: absolute; top:395px; left:240px;  font-size: 15px; text-align: center; color: red;}  
#bal-p11{position: absolute; top:90px; left:230px;  font-size: 15px; text-align: center; color: green;}    
#bal-p12{position: absolute; top:40px; left:790px;  font-size: 15px; text-align: left; color: green; font-weight: bold;}
    
.tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#758710;
    border-radius:5px;
    padding:10px;
    color:#fff;
}
.avisos { font-size: 10px; color: grey; opacity: 0.75;}

/* PEU PAGINES ------------------------------------------------------------*/
.peupagcos {
    position:fixed;
    width: 1122px;
    background: url('barrainf.gif') no-repeat;
    background-color: white;
    bottom:0;
    margin-left:10px;
    height:70px;
    z-index: 9;
}
    .peucontingut {
        position: absolute;
        top:15px;
        left:10px;
        color:#7d8500;
        opacity: 0.7;
        font-size: 10px;  
    }
    .peulogo {
        position: absolute;
        top:15px;
        left:550px;
        width: 557px;
        height:35px;
        background: url('logo2.gif') no-repeat;
    }
    
    
/*Bloc d'estils per l'script d'amagar i mostrar blocs de text
===========================================================================*/    
#wr {
	width:800px;
	margin: 0px auto;
	text-align: left;
}
.trigger,.trigger a {
	display: block;
	width: 304px;
	height: 26px;
/*	text-indent: -999999em;
	overflow: hidden;*/
}
.trigger {
	/*background: url(btn.png) no-repeat 0px 0px;*/
}
.close {
	/*background: url(btn.png) no-repeat 0px -26px;*/
}
.cnt {
	display: none;
	padding: 10px;
	margin: 10px;
	background: #f9f9f9;
}
.cl {
	width: 100%;
	clear: both;
	line-height: 0px;
	font-size: 0px;
}

/*Bloc d'estils pels butons
===========================================================================*/
#submit {
    background-color: white;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Comfortaa';
    border-radius:6px;
    /*color: #fff;*/
    border: #707070;
    border-width: 1px;
    border-style: solid;
}

#submit:hover {
    border: none;
    background:#868A08;
    box-shadow: 0px 0px 1px #777;
    color: white;
}

#submit1 {
    background-color: white;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Comfortaa';
    border-radius:6px;
    /*color: #fff;*/
    border: #707070;
    border-width: 1px;
    border-style: solid;
}

#submit2 {
    background-color: white;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Comfortaa';
    border-radius:6px;
    /*color: #fff;*/
    border: black;
    border-width: 2px;
    border-style: solid;
    height: 30px;
}

#submit2:hover {
    border: none;
    background:black;
    box-shadow: 0px 0px 1px #777;
    color: white;
}

#submit22 {
    background-color: white;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Comfortaa';
    border-radius:6px;
    /*color: #fff;*/
    border: black;
    border-width: 2px;
    border-style: solid;
    height: 30px;
}

/*Bloc d'estils pel login
===========================================================================*/
#mask {
	display: none;
	background: white; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 999;
}

.login-popup{
	display:none;
	background: #333;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999;
	-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}

.login-popup2{
	display:none;
	background: white;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999;
	-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}

img.btn_close {float: right; margin: -28px -28px 0 0;}
fieldset { border:none; }
form.signin .textbox label { display:block; padding-bottom:7px; }
form.signin .textbox span {display:block;}
form.signin p, form.signin span {color:#999; font-size:11px; line-height:18px;} 
form.signin .textbox input { 
    background:#666666; 
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    color:#fff; 
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font:13px Arial, Helvetica, sans-serif;
    padding:6px 6px 4px;
    width:200px;
}

form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }

.button { 
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color:#000; 
    border-width:1px;
    border-radius:4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color:#333;
    cursor:pointer;
    display:inline-block;
    padding:6px 6px 4px;
    margin-top:10px;
    font:12px; 
    width:214px;
}
.button:hover { background:#ddd; }
#recaptchacontacte {
    position:relative;
    left: 400px;
    top: -270px;
}