@import 'Html.css';
@import 'Gallery.css';
@import 'Controls.css';
@import 'facebox.css';

div#container{width:960px;margin:0 auto;}
div#wrapper{float:left;width:100%}

/* HEADER */
#header 
{
	background: url(Imatges/header-bg.png) no-repeat left top;
	position: relative;
	height: 130px;
	margin:  0 auto 5px  auto;
	color: #333333;
}
.vp
{
	position: absolute;
	left: 220px;
	top: 57px;
	color: #ffffff;
	background-color: transparent;
	font-weight: bold;
}
#adressa
{
	clear: both;
	float: right;
	width: 160px;
	height: 80px;
	text-align:center;
	font-size:0.8em;
	line-height:1.2em;
}
.flags 
{
	position: absolute;
	left:0px;
	top: 79px;
	text-transform: uppercase;
	font-size: 9px;
}

/* START MENUS */
#menua
{
    border-bottom: 1px solid #e2ecec;
    position: absolute;
    left: 0px;
    top: 104px;
    width: 100%;
    text-align:left;
    text-transform: uppercase;
    display:block;
}

.menua-static-item
{
    padding: 3px 7px;
    margin: 1px 5px 0 0;
    font: 0.9em Verdana;
    text-align: center;
    background: #f1f6f6 url(Imatges/media/bluetab.gif) top left repeat-x;
}

.menua-hover {background-image: url(Imatges/media/bluetabactive.gif);}
#menua a{text-decoration:none;color:#000066; background:none;}
#menua a:hover{text-decoration:underline;color:#000066;}

.menua-selected {
     background-image: url(Imatges/media/bluetabactive.gif); 
     text-decoration: none;
     font-weight:bold;
}
/* END MENUS */

.nav {
	position: absolute;
	right: 37px;
	top: 79px;
	font-size: 0.78em;
	text-transform: uppercase;
}


/* COLUMNS 
#content{float:left;width:500px;text-align: center; background:#ffffff}

*/

#sidebar{float:left;width:220px;margin-left:-960px;}
#sidebar{padding-top:20px;}


#sidebar a{color:#000066;background-color:Transparent;}
#sidebar a:hover{text-decoration:underline;}

#sidebar p{color:#000066;}
#sidebar p a{color:#000066;}
#sidebar p a:hover{text-decoration:underline;}

#sidebar ul a{color:#000066; background-color:Transparent;}
#sidebar ul a:hover{color:#000066;text-decoration:underline;}

#sidebar h3{color:#000066;}

#content{margin: 0 222px}
#content{ padding:0 16px;}	
#content h3{font-family:  Georgia, Arial; font-style:italic;	margin: 0.6em 0 1.4em 0;}

/*

*/

#extra{float:left;width:200px;margin-left:-220px;}
#extra{padding:0 10px;}

#extra p{font-size:0.88em;}

/*  
div#sidebar{background:#B9CAFF}
div#extra{background:#FF8539}
*/

.breadcrumb {clear:both;width:100%;height:0.5em;}
.back{width:98%; padding:10px 5px; text-align:left; background: #e2ecec;}

.mid-col{float:left;width:45%;padding:10px;text-align:left; overflow:auto;}

/* FOOTER */
div#footer{clear:both;width:100%;}


/* PAGES */

#home{}

/* nena-noel
background: url(Imatges/nena-noel-50.png) no-repeat;
*/
.nena{position: absolute;width: 98px;height: 124px;}

/* Tag Cloud background:none;*/
.tagcloud{margin-left: auto;margin-right: auto;}

/* thumbs 
.thumbs img:hover{border:2px solid #e2ecec; background:none;}
*/
.thumbs img{position:relative; width:40px;height:40px; padding:1px;margin:5px 8px 5px 9px;border:2px solid #e2ecec;background:none;}

.thumbs a{}
.thumbs a:hover{ background-color:#e2ecec;}

#add-to-favorites,#also-in,#site-news{text-align:left; padding:10px; padding-top:10px;}
#add-to-favorites h2, #also-in h2, #site-news h2,
#add-to-favorites h2 a, #also-in h2 a, #site-news h2 a{font-size:1em; font-weight:normal;
	                        display:block;
	                        padding:6px 12px;
	                        margin:-6px -12px;
	                        border:none; }
#site-news h2 a{background: url(Imatges/news.png) 90% 50% no-repeat;}

#also-in h2 a{background: url(Imatges/post.gif) 90% 50% no-repeat;}
#add-to-favorites h2 a{background: url("Imatges/folder_favorites.png") 90% 50% no-repeat;}
#add-to-favorites h2 a:hover, #also-in h2 a:hover, #site-news h2 a:hover{color:#000066; text-decoration:underline;}
#also-in p, #site-news p{font-size: 0.76em;}

#wrapper {clear:both; text-align:center;}
#wrapper h4{margin:auto;margin-top:1.2em;}

/* PHOTOS, DETAILS */
#fotos-alfombras {clear:both; text-align:center;}
#fotos-alfombras h4{margin:auto;margin-top:1.2em;}
#fotos-alfombras p a {text-decoration: none;color: #000066;}
#fotos-alfombras p a:visited {color: #cc00ff;}
#fotos-alfombras p a:hover {text-decoration: none;background-color:#000066;color: #ffffff;}
#fotos-alfombras p a:active {color: #000066;}

#details {clear:both; text-align:center;}
#details h4{margin:auto;margin-top:1.2em;}
/* END PHOTOS, DETAILS */

/* QUIENES, CONTACTAR */
#quienes, #contactar, #foro {clear:both; text-align:center;min-height:500px;}
#quienes h4, #contactar h4{font-size: 1.1em;font-weight:lighter;}

/* FORO */
#foro{clear:both;width:100%; overflow:hidden; background-color:#fff; }
#foro p{ text-align:left; font-size: 12px;}
#foro td {width: 98%; text-align:left; font-size: 12px;}
#foro textarea{ font-family:Arial, Helvetica, sans-serif; }
#leftcolumn{float:left; width:36%;}
#displaycolumn{float:left;width:57%; padding:10px; background:#fff;text-align:left;}
#displaycolumn{padding-top:20px;}
/* END FORO */

#quickSummary {
	clear: both; 
	margin: 20px; 
	float: left;
	text-align: left;
	}
#quickSummary p {}
#quickSummary p a span{text-decoration: none;color: #000066;}
#quickSummary p a:visited span  {color: #000066;}
#quickSummary p a:hover span  {text-decoration: none;background-color:#000066;color: #ffffff;}
#quickSummary p a:active span  {color: #000066;}
#quickSummary .serra span {color: #000066; font-size:132.3%; font-weight:bold;}
#quickSummary p span {font-size:102.3%; font-weight:bold;}

#quickSummary .center{text-align:center;}
#quickSummary .espaiat{ word-spacing: 0.3em; color:#666666;}

#slide-show {clear:both; width:100%; text-align: center;}

div#otras{clear:both; width:100%; text-align:center;} 
div#otras a {font-weight:bolder;}
div#otras a:hover{color:#000066;background-color:#E6CD84;}
#otras h4{	margin-top: 0;	font-size: 1.3em;}	 

/* AUTENTICACIÓ 
	background:  url(Imatges/fons_blaulat2.jpg) repeat-y;
*/
#autenticacio {
	width: 686px;
	min-height:500px;
	padding:  0px 37px;
	padding-top: 1px; /* Weird Mozilla Bug */
	padding-bottom: 40px; /* Weird Mozilla Bug */
}

/* END AUTENTICACIÓ */


#banner1 {
	float: left;
	width: 180px;
	height: 100%;
}

#resume, #register, #pressu-albums, #admin-albums, #admin-photos {
	background-image: url(Imatges/fons_blaulat.jpg);	
	background-repeat: repeat-y;
	overflow: auto;
	position: relative;
	width: 686px;
	padding: 0px 37px;
	padding-top: 1px; /* Weird Mozilla Bug */
	padding-bottom: 40px; /* Weird Mozilla Bug */
}

/* ADMIN */
#admin-manage
{
	position: relative;
	width: 686px;
	left: 0px;
	top: 10%;
	border-top: #D3D3D3 thin dotted;
	padding-top: 10px; /* Weird Mozilla Bug */
	padding-bottom: 40px; /* Weird Mozilla Bug */
}
#admin-manage h1{left: 8px; width: 256px; top: 8px}
	
#admin-manteniment
{
	width: 100%;
	float:left;
	overflow:auto;
}


#a_groc {
	text-decoration: underline;
	color: rgb(243,227,79);
	/*color: #DBB94F;*/
}

#fuente_modifica {
	text-decoration: none;
	font-family: Webdings;
	/*color: #DBB94F;*/
}



.emptydata td {
	padding: 50px;
	color: #aeaeae;
}

/* Datalist */
.view {
    width:760px;
	text-align: center;
	 position:relative; margin:0 auto;
    top: 0px;
    left: 0px;
}

.photo-frame {
	margin-left: auto;
	margin-right: auto;
}
/* End Datalist */

/* Item  Datalist*/
.item {
	padding: 0.6em 1.3em;
	color: #333333;
	border:1px solid #e2ecec; border-width:1px;
}
.item a {text-decoration:none; background:none;}
.item a:hover {text-decoration:none; background:none;}

.item a img{text-decoration:none; background:none;}
.item a:hover img{text-decoration:none; background:none; font-size:100.2%;}
.item a span{text-decoration: none;color: #000066;background-color:#ffffff;}
.item a:visited span{color: #000066;background-color:#ffffff;}
.item a:hover span{text-decoration: none;background-color:#000066;color: #ffffff; }
.item a:active span{}

.item h4 {margin-bottom: 0.4em;}
.item a h4{text-decoration: none;color: #000066;background-color:#ffffff;}
.item a:visited h4{color: #000066;background-color:#ffffff;}
.item a:hover h4{text-decoration: none;background-color:#000066;color: #ffffff; }
.item a:active h4{}

/* End Item Datalist */

.nullpanel {
	padding: 150px;
	width: auto;
	text-align: center;
}

.borde{vertical-align:middle;}



/* ADMIN/PRESSU PAGE */
#admin-details, #pressu-fotos, #pressu-detalls {
	background-image: url(matges/fons_blaulat.jpg);
	padding: 0;
	width: 760px;
}
#admin-details .view , #pressu-detalls .view{
	margin-top: 20px;
	margin-bottom: 20px;
}
/* ADMIN/PRESSU PAGE */


.return{}
.return a {text-decoration:none; background-color:Transparent;}
.return a:hover {text-decoration:none; background-color:Transparent;}

.return span a{text-decoration: none;color: #000066;background-color:#ffffff;}
.return span a:visited{color: #000066;background-color:#ffffff;}
.return span a:hover{text-decoration: none;background-color:#000066;color: #ffffff; }
.return span a:active {}


.buttonbar 
{
	background-image: url(imatges/photonav-bg.gif);
	background-repeat: repeat-x;
	margin-left: auto;
	margin-right: auto;
	padding-top: 4px;
	width: 100%;
	height: 33px;
	text-align: center;
}

.buttonbar-top {background-image: url(imatges/photonav-top-bg.gif);}
.buttonbar-top .right {float: right;margin: -0.8em 0 0  0;}

.right-pdf {float: right;margin: -3.0em 0 0 0;  z-index:99;}


/* 3 FOOTER */

.footerbg {
	width: auto;
	height: 50px;
	text-align: center;
}

.footer {
	background-image: url(imatges/footer.gif);
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	width: 770px;
	height: 50px;
	text-align: center;
	font-size: 10px;
	color: #ffffff;
}

.menub {
	margin: 8px auto 2px auto;
	text-transform: uppercase;
	font-size: 10px;
}

.menub a:visited {
	color: #DBB94F;
}



/* Inline styles are used because image controls hard code a border property */


.photo_200
{
	padding: 8px;
	border: #cccccc 1px ridge;
}

.bloque
{
	float: left;
	width: 10em;
	height: 7em;
	line-height: 7em;
	color:#000066;
	text-align:center;
}

.grupoSerra1
{
	background-image: url(Imatges/fons_blaulat.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 33em;
	height: 1.2em;
	color: #000066;
	text-align: center;
	font-family: Arial;
	font-size: 20px;
	font-weight: bolder;
	padding: 10px;
}

.grupoSerrabox
{
	float: left;
	width: 43.8%;
	height: 7em;
	color: #000066;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	font-weight: lighter;
	margin: 1em 0 1em 1em;
	padding: 1em;
	border: solid #000066 1px;
}

.floatright{float: right;padding: 2px;}

.textfield {font-family: Arial; font-size: 10pt; text-align:justify; }

div#main2
{
	border-top: solid #000066 1px;
	border-left: solid #000066 1px;
	padding-top: 20px;
	}

div#punch2 {float: left; width: 100px; height: 70px; 
text-align: center; background: white; color: #000066; 
border: solid #000066 1px; border-width: 0 1px 1px 0; 
padding: 0 10px 5px 0; margin: -1px 25px 10px -1px;
position: relative;}            /* fix for IE/Win */

div#punch2 img {height: 70px; width: 100px;}

div#fons-Perich
{
	background-image: url(Imatges/fons_perich_d.jpg);
	background-repeat: repeat-y;
	height:50px;
	text-align:center;
	font-size: 14pt;
	color: #660033;
	margin: 0px 0px 10px 5px;
}
div#fons-Perich img {float:left; }
div#fons-Perich a {font-size: 14pt;	color: #660033;}
div#fons-Perich a:hover 
{
	text-decoration: underline overline; 
	background-color: #660033;
	color: #ffffff;
	letter-spacing: 0.2pc;
}


div#news
{
	width: 150px;
	height: 110px;
	text-align: center;
	background: #ffff00;
	border: solid #000000 1px;
	margin: 30px 10px 10px 10px;
	position: relative;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-top: 0px;
}
div#mant
{
	float: left;
	left: 0px; top: 0px;
	width: 90%;
	text-align: left;
	border: solid #777 1px;
	padding: 15px 10px;
	margin-top: 15px;
}
div#mant h3{color:#000066;}
div#mant a {text-decoration: none;}
div#mant a:hover {text-decoration: underline;background-color:#cbc3ac;	color: #000066;}

div#tupsar
{
    padding:2em 0 0 0;
    color: #333333;
	text-align:left;
    font-size:0.8em;
}
div#tupsar a{color:#000066;}
div#tupsar a:hover
{
	background-color: transparent;
	text-decoration: none;
	letter-spacing: 0.2pc;
}

/* AVÍS LEGAL: ENLLAÇ + PAG HTML */
div#avis-legal
{
    padding:2em 0 0 0;
    color: #666666;
	background-color: transparent; 
	text-align:left;
	font-size: 0.5em;
}
div#avis-legal a{color:#000066;}
div#avis-legal a:hover{text-decoration: underline;}
div#avis {float: left;width: 300px;height:400px;padding: 0px 37px;
}
/* END AVÍS LEGAL: ENLLAÇ + PAG HTML */



.textDetail {
	border: 1px solid #929292;
	font-family:Arial;
	vertical-align: middle;
	padding: 3px;
	margin: 2px 0 5px 0;
	color: #666666;
	background-color:Transparent;
}
/**/
.commentbox
{
	background-color: #ececec;
	float:left;
	padding: 10px ;
	margin-top:15px;
	margin-left: 30px;
}

.commentcontent
{
    float:right;
	padding: 10px ;
	margin-top:15px;
	text-align:left;
}
.commentcontent p:first-letter	
{
	font-size: 1.2em;
	font-weight: bold;
	color: #006;
}
.commentfooter
{
	background: url(Imatges/arrow.gif) no-repeat center 0px; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
	padding-top: 1px;
	margin-bottom: 2em;
	color: #4A4A4A;
}


/* Photo Zoom CSS */

#zoom { float:left; position:relative; width:75px; margin-right:10px; }

#zoom a img { border:0pt none; }

#zoom a.p1:hover { background-color:transparent; } /* IE6sp2 needed this to open the large image */

#zoom a .large { position: absolute; width:0px; }

#zoom a.p1:hover .large { border:1px solid black; position: absolute; top: -100px; left: 150px; width:300px; }

/* End Photo Zoom CSS */

.left {float: left;width: 200px;margin: 0 6px 5px 0; padding:10px;}



.lletraSerra 
{
	font-family:Arial;
	font-size: 30px;
}
.lletraColeccion
{
	font-family: Arial;
	font-size: 20px;
	font-weight: bold;
	border-bottom: #330099 thin groove;
	text-align: center;
}

p.enbloque
{
	float:left;
	text-align:left;
	font-weight:bolder;
}
.textbox
{
	padding: 11px;
	margin-bottom: 7px;
	width: 98%;
	border: #f3f3f3 2px solid;
}


/* Google Maps
   Following is a fudge that works only in IE/Win and puts a border around the image
   because it doesn't handle PNG transparency too well 
*/
* html .icon img { border: 1px solid #ccc;  }
.temp { font: normal 2em Arial, serif; color: #900; }
.cc { margin-left: 3%; text-align: center; float: left; width: 40%; }
.misc { margin-left: 31%}
.attrib { clear: both; text-align: center; padding: .5em; background: #eee; }
.googleH1 {font: normal 1.2em Arial, serif; color: #900; border-bottom: 1px dashed #ccc; }
.plainbox{padding: 0 1px 0 1px; color: #696969;font: .8em Arial, Helvetica, sans-serif;
}
#googleMap{text-align:center;}


#inputArea input, #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    width: 300px;
} 

#inputArea input[type="text"], #inputArea textarea
{
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-image: url( 'Imatges/blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
} 
#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}
.activeField
{
        background-image: none;
        background-color: #ffffff;
        border: solid 1px #33677F;
}
.idle
{
    border: solid 1px #85b1de;
    background-image: url( 'Imatges/blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
}
/*
#content h3{color:#c00;}
*/
/*
  style the list which contains the links
*/
ul#cmd {
  margin: 5px;
  font-size: 90%;
  list-style: none;
}

/* 
  this could be applied to the links, but IE needs this on <li>
*/
ul#cmd li 
{
 list-style: none;
 margin-bottom : 5px;
}

/*
  static link styling
*/
ul#cmd a {
  position : relative; /* to create a new positioning baseline */
  width : 185px;
  height : 4em;
  display : block;
  padding : 5px;
  padding-right : 0;
  border : 1px solid #444;
  background : #ddd ;
  color : #444; 
  text-decoration : none;
  font-weight : bold;
  cursor : pointer;
}

/*
  styles for the span (kept opff screen until needed
*/
ul#cmd a span {
  position : absolute;
  top : -9000px;
  left : -9000px;
  display : block;
  width : 260%;
  height : 4em; /* to make the text resizable but do allow room */
  background : #fafafa ;
  border : 1px solid #444;
  border-left : 0;
  padding : 5px;
  padding-left : 23px;
  text-indent : -17px;
  cursor : pointer; /* needed for opera */
  color : #000066;
}

/* 
  hover/focus styles of link
*/
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {
  background : #fafafa ;
  color : #000;
}

/*
  re-postion the pre-styled span on hover/focus
*/
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
  top : -1px;
  left : 130px;
}

#comment-panel a.close{color:#993300; text-decoration:none;}
#ToBoletines { text-align:center;}

.ups{width:180px;text-align:center; margin:20px 6px;}
.ups a {background:none;text-align:center;Display:block;}
.ups p{padding:0px; margin-top:-2px;}

.ups a:link, .ups a:visited 
{
    padding:0 1px;
    text-decoration:none;
    background-image:none;
    text-align:center;
}
.ups a:hover, .ups a:active 
{
    text-decoration:none;
    text-shadow: 1px 1px 1px #333333;
}
.ups a img
{
    margin-top:5px;
}

#slides {position: relative;width: 500px;height: 330px;overflow: hidden; }
#slides img {display: block;width: 500px;height: 330px; } 
#slides-p {position: relative;width: 198px;height: 150px;overflow: hidden; }
#slides-p img {display: block;width: 198px;height: 150px; }