/* @override http://localhost/lletfresca/css/lletfresca_default.css */

/* 
    Document   : lletfresca_default
    Created on : 14-ago-2009, 9:49:44
    Author     : Tuatara Aplicacions TIC
    Description:
        Styles for lletfreca.com pc
*/

/*
    COLOR SCHEME

    #999999 - grey
    #444    - darker grey
    #6c9917 - green
    #F4F3EA - brown
    #DFDDBF - darker brown
    #DD681B - orange
    #B04318 - darker orange
    #7777cc - purple

*/

.maps-dropdown { color:black;
	background-color: white;
	font-size:11px;
	border:1px solid #6688CC;
	padding: 1px 2px;
	text-align: center;
	cursor: pointer;
	-moz-border-radius: 4px;
}
#maps-dropdown-selection { width:90px;
	font-weight:bold;
}

body {
	background-color: #6c9917;
}

.web-wrapper
{
    background: #6c9917 url('../img/default_pc/bg-repeat.jpg') repeat-x left top;
}

.box
{
    background-color: #F4F3EA;
}

.bordered
{
    border: 1px solid #DFDDBF;
    padding: 4px;
}

h1
{
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: bold;
}

h2
{
    font-size: 1.2em;
    color: #B04318;
    font-weight: bold;
}

.f-small
{
    font-size: 0.75em;
}

.f-big
{
    font-size: 1.1em;
}

.f-bigger
{
    font-size: 1.25em;
}

.link-to-home
{
    display: block;
    width: 300px;
    height: 160px;
}

#login-form-container
{
	background: #67B2F5;
	height: 45px;
}

#login-form-container form
{
	width: 950px;
	margin: 0 auto;
	height: 45px;
	display: block;	
}

#login-form-container label
{
	font-size: 14px;
	color: white;
	padding: 0px 10px 0px 3px;
}

#login-form-container .title
{
	font-size: 16px;
	font-weight: bold;
	color:  #444;
	padding: 0px 100px 0px 0px;
}

div#user-panel
{
	margin-top: 5px;
    float:right;
}

div#user-panel a
{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.5px;;
}

#header
{
    background: #fff url('../img/default_pc/header-bg.jpg') no-repeat left top;
    height: 169px;
}

#header-menu
{
	background-color: #fff;
}

#header-menu-left
{
    background: #fff url('../img/default_pc/logo-down.jpg') no-repeat left top;
    height: 63px;
}

#header-menu-right
{
    background: #fff url('../img/default_pc/border.png') no-repeat right top;
    height: 63px;
}

#content
{
    background-color: #fff;
}

#footer
{
    background-color: white;
    text-align: right;
    padding: 30px 0px 10px 0px;
}

#footer a
{
    color: #444;
    text-decoration: none;
}

#footer a:hover
{
    text-decoration: underline;
}

#content-message
{
	overflow: hidden;
	z-index: 999;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	height: 0;
	color: #000;
	font: 20px/40px arial, sans-serif;
	opacity: .9;
}

input.required, select.required, textarea.required
{
    border-color: #656581;
}

#footer span
{
    padding-right: 20px;
}

form h2
{
	background-color: #DD681B;
	padding: 10px;
	color: white;
}

p.form-input
{
    /*border-top: 1px solid #999999;*/
    padding: 0.2em;
    margin: 0.2em;
}

p.form-input label
{
    display: inline-block;
    font-weight: bold;
    /*width: 100px;*/
    width: 100%;
    vertical-align: middle;

    border-bottom:1px solid #E2E2E2;
    color:#656565;
    font-family:arial,verdana,sans-serif;
    font-size:1.2em;
    font-weight:700;
}

p.form-input span
{
    margin-left: 20px;
    color: #999999;
}

input, select, textarea {
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-topright:3px;
    border:1px solid #D9D9D9;
    color:#333333;
    font-family:verdana,arial,sans-serif;
    font-size:1.15em;
    padding:5px;
    vertical-align:middle;
}

.item-list
{

}

.item-list a
{
    color: #444;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 2px;
    height: 75px;
    vertical-align: middle;
}

.item-list-without-photo a
{
    color: #7777cc;
    text-decoration: none;
    font-weight: bold;
}

.item-list a:hover, .item-list-without-photo a:hover
{
    text-decoration: underline;
}

.item-list img
{
    margin-right: 10px;
}

.link-list
{
    margin: 0;
    padding: 0;
}

.link-list li
{
    list-style-type: none;
    border-bottom: 1px solid #ccc;
}

.link-list li a
{
    padding: 2px 2px 2px 17px;
    font-weight: normal;
    text-decoration: none;
    color: #444;
    display: block;
    background-image: url('../img/bullet.gif');
    background-position: 5px 50%;
    background-repeat: no-repeat;
}

.link-list li a:hover
{
    background-color: #7777cc;
    color: white;
}

/* ACCOUNT MENU */

#account-menu {
font-size: 12px; /* set the font size */
padding: 20px 10px 20px 0px; /* set the padding */
}
#account-menu ul {
line-height: 1em; /* setting the line height now so we don’t have any headaches*/
margin: 0px; /* let’s keep the margin set to 0 for the same reasons as above*/
list-style-type: none; /* we remove the UL’s default disc bullets */
float: left; /* we float the list to the left like we will all the elements inside*/
padding: 0px 0px 0px 5px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#account-menu ul li {
float: left; /* floatin’ left */
}
#account-menu ul li a {
text-decoration: none; /* remove the default underline off the anchor text */
display: block; /* we display this text as block so that we can apply padding/margin without problems */
float: left; /* floatin’ left, to make the menu horizontal */
padding: 0px 0px 0px 10px; /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
background: url(../img/master-menu-tabs.gif) no-repeat left top; /* we link to the tabs image, no tiling, showing the top left part of it */
margin-left: -5px; /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
z-index: 0; /* keep it on layer 0 (default) */
position: relative; /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
color: #666666; /* color of the tab text */
}
#account-menu ul li a span {
font-weight: normal; /* remove the bold effect */
display: block; /* display the strong element as a block so we can pad it, etc. */
float: left; /* float it left as well */
background: url(../img/master-menu-tabs.gif) no-repeat right top; /* now we show the right part of the tab and we complete the "puzzle" */
padding: 6px 10px 7px 5px; /* important, as through this you define the position of the text within the tab */
cursor: pointer; /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#account-menu ul li a:hover {
position: relative; /* again, keep things relative */
z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
background: url(../img/master-menu-tabs.gif) no-repeat left bottom; /* now we show the bottom part of the tabs image, the "hover" instance */
color: #000000; /* we color the hovered tab’s text black */
}
#account-menu ul li a:hover span {
background: url(../img/master-menu-tabs.gif) no-repeat;
position: relative; /* keep it relative */
z-index: 5; /* show this on layer 5 as well */
background-position: right bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}

#account-menu ul li.active a {
position: relative;
z-index: 5;
background:  url(../img/master-menu-tabs.gif) no-repeat left bottom;
color: #000000;
}
#account-menu ul li.active a span {
background:  url(../img/master-menu-tabs.gif) no-repeat;
position: relative;
z-index: 5;
background-position: right bottom;
}

/* MASTER MENU */

#master-menu ul {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

#master-menu ul li {
	float: left;
}

#master-menu ul a {
	float: left;
	text-decoration: none;
	color: #666;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

#master-menu ul li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

#master-menu ul li a:hover, #master-menu ul li a.active {
	color:#576D07;
	background: url("../img/default_pc/green-button.png") no-repeat top right;
}

#master-menu ul li a:hover span, #master-menu ul li a.active span {
	background: url("../img/default_pc/green-button.png") no-repeat top left;
}

.button {
	float: left;
	text-decoration: none;
	color: #666;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 1.1em "Arial", Helvetica, sans-serif;
}

.button span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

.button-green
{
	color:#576D07;
	background: url("../img/default_pc/green-button.png") no-repeat top right;	
}

.button-green span
{
	background: url("../img/default_pc/green-button.png") no-repeat top left;
}

.button-red
{
	color:#ededed;
	background: url("../img/default_pc/red-button.png") no-repeat top right;	
}

.button-red span
{
	background: url("../img/default_pc/red-button.png") no-repeat top left;
}

.button-pink
{
	color:#ededed;
	background: url("../img/default_pc/pink-button.png") no-repeat top right;	
}

.button-pink span
{
	background: url("../img/default_pc/pink-button.png") no-repeat top left;
}

.button-blue
{
	color:#0D5F83;
	background: url("../img/default_pc/blue-button.png") no-repeat top right;	
}

.button-blue span
{
	background: url("../img/default_pc/blue-button.png") no-repeat top left;
}

button {padding:0; border:0; cursor: pointer;}
button::-moz-focus-inner {padding:0; border:0}
button:focus {outline: 1px dotted}

.modal { 
    background-color:#fff; 
    display:none; 
    padding:15px; 
    text-align:left; 
    border:2px solid #333; 
 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    -moz-box-shadow: 0 0 50px #ccc; 
    -webkit-box-shadow: 0 0 50px #ccc; 
} 

/* PUBLICITAT */

.espai-pub-1
{
    margin: 5px 5px 0px 0px;
	padding: 0px 0px 0px 0px;
    float: left;
}

/* HOME */

h1.home
{
    /*line-height: 1em;*/
    border: 0;
}

.input-home
{
    position: relative;
}

#input-query {
	margin: 0;
}



#query-label
{
    position:absolute; top:0; left:0
}

h2.home
{
    font-size: 1.3em;
    font-weight: bold;
}
.presentation
{
    margin-bottom: 0px;
    height: 65px;
    overflow: hidden;
}
#home-map
{
    margin-top: 5px;
}
#results-container
{
    /*padding-left: 20px;*/
    height: 461px;
}

#results-container ul
{
    margin: 0;
}

#results-container ul li
{
    list-style-type: none;
    border-top: 1px solid #999999;
}

#results-container ul li span
{
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    cursor: pointer;
    background-color: #DACFFF;
    font-size: 1em;
    font-weight: 700;
    vertical-align: middle;
    display: block;
    line-height: 1.4em;
}

#results-container ul li p
{
    font-size: 0.9em;
    padding: 0.2em;
}

img.dispensadora-icon
{
    margin-right: 5px;
}

#loader{
    background-color: red;
}

#loader {
		background:white;
		background-image: url(../img/vaca-loading.gif);
		background-repeat:no-repeat;
		background-position:center;
		position:relative;
		top:-100%;
		left:0px;
		z-index:2;
		height:460px;
		/*height:100%;*/
		width:665px;

		filter:alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity: 0.4;
		opacity: 0.4;

	}

	#loader2 {
		background:#ECF1F4;
		background-repeat:no-repeat;
		background-position:center;
		position:relative;
		z-index:2;
		width:100%;
		height:100%;
		top:-100%;
		left:0px;
		filter:alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity: 0.4;
		opacity: 0.4;
		display:none;
	}

/* Recipes */

div.recipe-content
{
    margin: 10px 0px 0px 0px;
    padding: 20px;
    border: 1px solid black;
}

.recipe-ingredients
{
    font-weight: bold;
}

.recipe-elaboration
{
    border-left: 1px solid #ccc;
    padding-left: 1.7em;
    font-family: Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 1.7em;
}

.recipes-table
{

}

table tr.head th
{
	background-color: #6c9917;
	color: white;
	padding: 5px;
}

.recipes-table tr.row0 td
{
	background-color: #fff;
}

.recipes-table tr.row1 td
{
	background-color: #f0f0f0;
}