/* 
    Document   : cocolia
    Created on : 18-mar-2013, 14:41:22
    Author     : ruben
    Description:
        Purpose of the stylesheet follows.
*/

@font-face {
  font-family: 'MuseoSans_900';
  font-style: normal;
  font-weight: normal;
  src: local('MuseoSans_900'), url('MuseoSans_900.otf') format('opentype');
}

body {
	font-family: 'MuseoSans_900', 'Arial black', Helvetica, sans-serif;
	color: #000;
	background: #fff;
	padding: 0px;
	cursor: url(http://www.cocolia.cat/assets/img/G_spray_naranja_peq.png),progress;
}

body a {
	cursor: url(http://www.cocolia.cat/assets/img/F_spray_peq.png),progress;
}

#container {

}

a:visited, a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #000;
}

/* Para el efecto de fade in, ocultamos el contenido general sólo si tiene javascript activado */
html.js #home { display:none; }
html.js #ficha { display:none; }



/* HEADER */

	header {
		/* width: 100%; */
		/* position: fixed; */
		/* height: 36px; */
		margin: 0px auto;
		padding: 12px;

	}
	header div {
		margin: 0 auto;
		position: relative;
	}
	header nav ul.menu {
	    list-style: none outside none;
	    padding-top: 0;
	    position: fixed;
	    width: 100px;
	    z-index: 2;
	}
	header nav ul.menu li {
		display: inline;
		margin-right: 26px;
	}
	header nav ul.menu li a {
		display: inline;
		color: #000;
	}
	header nav ul.menu li.active a {
		/* color: #ff513d; */
	}

	header .logo {
	    width: 100%;
	    text-align: center;
	    top: 1em;
	    position: fixed;	
	    z-index: 1;
	}
	
	header .logo a {
	    color:#000;
	    font-size: 30px;
	    z-index: 1000;
	    padding-right: 48px;
	}
	
	header ul.lang-changer {
	    list-style: none outside none;
	    position: fixed;
	    right: 15px;
	    /* top: 0; */
	    z-index: 1;
	}
	header ul.lang-changer li {
		display: block;
		margin-left: 3px;
		padding-left: 3px;
		text-align: right;
	}
	header ul.lang-changer li a {
		display: block;
		color: #000;
	}
	header ul.lang-changer li.first {
		border-left: none;
	}
	header ul.lang-changer li.active {
		/* color: #ff513d; */
	}

/* FOOTER */

	footer {
		height: auto;
		background: #fff;
		color: #000;
		clear: both;
	}
	footer div {
		width: 980px;
		margin: 0 auto;
	}

/* HOME */
	#home {
		margin: 0 auto;
		/* padding: 0px 25px 0px 100px; */
		width: 1330px;
	}

	#home div.content {
	    margin: 0 auto;
	}

	#home div.content_tapiz {
	    /* margin: 65px auto; */
	}
	#home ul {
	    list-style: none outside none;
	}
	#home ul li {
	    float: left;
	    margin: 0px 5px 5px 0px;
	}

/* ESTUDIO */
	#estudio {
		margin: 75px auto;
		width: 860px;
	}

	#estudio div.content {
	}

	#estudio div.content .content_left {
	    width: 360px;
	    display: inline;
	    float:left;
	    margin-right: 70px;
	    margin-top: 80px;
	}	
	#estudio div.content .content_left p, #estudio div.content .content_left h2 {
	    font-size: 20px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#estudio div.content .content_raul {
	    width: 195px;
	    display: inline;
	    float:left;
	    margin-right: 40px;
	    margin-top: 80px;
	}	
	#estudio div.content .content_raul p, #estudio div.content .content_raul h3 {
	    font-size: 12px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#estudio div.content .content_mireia {
	    width: 195px;
	    display: inline;
	    float:right;
	    margin-top: 80px;
	}	
	#estudio div.content .content_mireia p, #estudio div.content .content_mireia h3 {
	    font-size: 12px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}

	#estudio div.content .bloque1 {
	    height: 430px;
	}

/* WORKSHOPS */
	#workshops {
		margin: 75px auto;
		width: 860px;
	}

	#workshops div.content {
	}
        #workshops div.content h2 {
            margin-top: 65px;
            margin-bottom: 20px;
            text-transform: uppercase;
            font-size: 16px;
        }

	#workshops div.content .content_left {
	    width: 400px;
	    display: inline;
	    float:left;
	    margin-right: 0px;
	    margin-top: 0px;
	}
	#workshops div.content .content_left p {
	    font-size: 13px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#workshops div.content .content_left h3 {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
            margin-top: 45px;
            margin-bottom: 20px;
            text-transform: uppercase;
	}
        
        #workshops div.content .content_right {
	    width: 400px;
	    display: inline;
	    float:right;
	    margin-top: 0px;
	}	
	#workshops div.content .content_right p {
	    font-size: 13px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#workshops div.content .content_right h3 {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
            margin-top: 45px;
            margin-bottom: 20px;
            text-transform: uppercase;
	}


/* SERVICIOS */
	#servicios {
		margin: 75px auto;
		width: 860px;
	}

	#servicios div.content {
	}
        #servicios div.content h2 {
            margin-top: 65px;
            margin-bottom: 20px;
            text-transform: uppercase;
            font-size: 16px;
        }

	#servicios div.content .content_left {
	    width: 260px;
	    display: inline;
	    float:left;
	    margin-right: 40px;
	    margin-top: 0px;
	}
	#servicios div.content .content_left p {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#servicios div.content .content_left h3 {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
            margin-top: 45px;
            margin-bottom: 20px;
            text-transform: uppercase;
	}
        

	#servicios div.content .content_center {
	    width: 260px;
	    display: inline;
	    float:left;
	    margin-right: 0px;
	    margin-top: 0px;
	}
	#servicios div.content .content_center p {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#servicios div.content .content_center h3 {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
            margin-top: 45px;
            margin-bottom: 20px;
            text-transform: uppercase;
	}


        #servicios div.content .content_right {
	    width: 260px;
	    display: inline;
	    float:right;
	    margin-top: 0px;
	}	
	#servicios div.content .content_right p {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#servicios div.content .content_right h3 {
	    font-size: 16px;
	    font-weight: normal;
	    color:#000;
            margin-top: 45px;
            margin-bottom: 20px;
            text-transform: uppercase;
	}



        
/* CONTACTO */
	#contacto {
		margin: 90px auto;
		width: 860px;
	}
	#contacto div.content {
	    width: 340px;
	    display: inline;
	    float:left;
	}	
	#contacto div.content p, #contacto div.content h2 {
	    font-size: 20px;
	    font-weight: normal;
	    color:#000;
	    padding-top: 0;
	    margin-top: 0;
	}
	#contacto div.content p.tam12 {
	    font-size: 12px;
	    font-weight: normal;
	    color:#000;
	}	
/* FICHA PROYECTO */

	#ficha {
		width: 1330px;
		margin: 75px auto;
		padding: 0;
	}

	#ficha div.content {
		width: 1300px;
		margin: 0 auto;
		font-size:12px;
	}

	#ficha div.content div.left_content{
		width: 14%;
		margin-right: 2%;
		float: left;
	}	
	#ficha div.content div.left_content h1{
	    font-size: 12px;
	    margin: 0px;
	    padding: 0px;
	    font-weight: normal;
	}	

	#ficha div.content .center_content{
		width: 66%;
		margin-right: 2%;
		float: left;
	}	
	#ficha div.content .center_content img{
		width: 100%;
		margin-bottom: 20px;
	}
	#ficha div.content .center_content iframe{
		width: 100%;
		margin-bottom: 20px;
	}	

	#ficha div.content .center_content ul.thumbs {
	    list-style: none outside none;
	    margin: 0px;
	    padding: 0px;
	}
	
	#ficha div.content .center_content ul.thumbs li {
		display: inline;
	}
	
	#ficha div.content .center_content ul.thumbs li p {
		margin: 0px;
		padding: 0px;
	}

	#ficha div.content div.right_content{
		width: 14%;
		float: left;
	}	
	#ficha div.content div.right_content p{
	    font-size: 12px;
	    margin: 0px;
	    padding: 0px;
	}	

	#ficha .bar_nav_bottom {
	    bottom: 0;
	    padding: 15px 0;
	    position: fixed;
	    width: 1300px;
	}
	
	#ficha .bar_nav_bottom ul {
    	    list-style: none outside none;
	}
	ul.go_previous {
	    width: 33%;
	    float: left;
	    text-align: left;
	}
	ul.go_previous li a {
	    color:#000;
	}
	
	ul.go_top {
	    width: 33%;
	    float: left;
	    text-align: center;	
	}
	ul.go_top li a {
	    color:#000;
	}
	
	ul.go_next {
	    /* width: 33%; */
	    float: right;
	    text-align: right;	
	    padding-right: 27px;
	}
	ul.go_next li a {
	    color:#000;
	}	
	
/* FORMULARIOS */

	form {
		margin-top: 35px;
	}
	form p {
		position: relative;
	}

	input[type=text], input[type=email], input[type=password], textarea {
		border: 1px solid #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 2px 5px;
		background-color: #fff;
		margin: 4px 0;
		width: 300px;
		color: #333;
	}
	input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover,
	input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus {
		color: #000;
	}

	div.msgbox {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background: #ffec00;
	    color: #000;
		padding: 2px 10px;
	}
	label.error {
		-webkit-border-radius: 5px;
		-webkit-border-top-left-radius: 0;
		-moz-border-radius: 5px;
		-moz-border-radius-topleft: 0;
		border-radius: 5px;
		border-top-left-radius: 0;

		background: #ffec00;
	    color: #000;
		margin-left: 10px;
		padding: 2px 10px;
		/* necesita que el parent esté posicionado */
		position: absolute;
		left:240px;
		top: 30px;
	}

	button {
		background: #fff;
		border: 1px solid #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #222;
		padding: 5px 15px;
		margin: 10px 0 0;
	}
	button:hover,
	button:focus {
		color: #000;
	}

	p.captcha{
		margin: 30px 0 0 0;
	}

/* SECCION SLIDER HOME */
section.slider_home h2 {
    text-align: center;
    padding: 25px 15% 0px 15%;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 1px;
}
	
/************************************************************************************
smaller than 1330
*************************************************************************************/
@media screen and (max-width: 1330px) {

	#home {
		width: 100%;
	}
    
    	#ficha {
	    width: 100%;
	}
	
	#ficha div.content {
	    width: 98%;
	    margin: 1% 1%;
	    font-size: 12px;
	}
    
    	#ficha div.content div.left_content{
	    float: none;
	    width: 100%;
	    margin-bottom: 30px;
	}
	#ficha div.content div.center_content{
	    float: none;
	    width: 100%;
	    margin-bottom: 30px;
	}
	#ficha div.content div.right_content{
	    float: none;
	    width: 50%;
	    margin-bottom: 30px;
	}

	#ficha .bar_nav_bottom {
	    width: 100%;
	}	
        
        section.slider_home h2 {
            text-align: center;
            padding: 25px 15% 0px 15%;
            font-size: 17px;
            line-height: 22px;
        }        
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

        #container {
            margin-top: 70px !important;
        }
        
	#ficha div.content div.left_content{
	    float: none;
	    width: 100%;
	    margin-bottom: 30px;
	}
	#ficha div.content div.center_content{
	    float: none;
	    width: 100%;
	    margin-bottom: 30px;
	}
	#ficha div.content div.right_content{
	    float: none;
	    width: 50%;
	    margin-bottom: 30px;
	}
	ul.go_next {
	    padding-right: 0px;
	}	

	#ficha .bar_nav_bottom {
	    width: 100%;
	}	
	
}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {


	#ficha div.content div.left_content{
	    float: none;
	}
	#ficha div.content div.center_content{
	    float: none;
	}
	#ficha div.content div.right_content{
	    float: none;
	}

	header ul.lang-changer li {
	    display: block;
	}
	
	#ficha .bar_nav_bottom {
	    width: 95%;
	}	
	ul.go_next {
	    padding-right: 0px;
	}	

	header .logo a {
	    color:#000;
	    font-size: 30px;
	    z-index: 1000;
	    padding-right: 0px;
	}

        section.slider_home h2 {
            text-align: center;
            padding: 25px 5% 25px 5%;
            font-size: 17px;
            line-height: 22px;
        }

}	
	

a:hover {
    text-decoration: none;
}