/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	* Filename: loupoxid.css
	* Website: http://www.loupchante.net
	* Author: loupchante
	* Author URI: http://www.loupchante.net
	* Date: 21/01/2010
	* Version: 2.0
	
	 == STRUCTURE: ==========================
    - Page width: 960 px
    
	#container
		#header
			#logo
			#menu
		#wrapper
			#content
				#book
				#blogs
		#colleft
		#colright
		#footer
		
	 == COLORS: =============================
	 #E77817	orange
	 #000000	black
	 #FFFFFF	white

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/


html {
	font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	color: #2E1805;
	text-shadow: #000 0px 0px 0px;/* treu bold del Safari */
}

html, body {
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
}

body {
	font-size: 100%;
	background: #E77817 url(../images/bg-body.jpg) no-repeat top center;
}

ul, ol, li {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

q {
	quotes: '“' '”'
}

fieldset {
	border: 0;
}



/*******   layout   *******/

#container {
	text-align: left;
	width: 960px;
	margin: 30px auto 0;
}

/* header */
#header {
	height: 180px;
}

#header #logo a {
	height: 90px;
	width: 333px;
	margin: 0;
	background: transparent url(../images/logo-loupchante-1.png) no-repeat center bottom;
	display: block;
	text-indent: -9999px;
}

#header #logo a:hover {
	background-position: top;
}

/* menu */
#menu {
	height: 60px;
	background: transparent url(../images/bg-menu.png) no-repeat center center;
	padding-left: 340px;
}

#menu li {
	display: inline;
	margin: 0;
}

#menu a {
	float: left;
	width: 150px;
	height: 45px;
	margin: 7px 0 0 4px;
	display: block;
	text-indent: -9999px;
}

#menu #portfolio a {
	background: transparent url(../images/portfolio.png) no-repeat 0px 0px;
}

#menu #about a {
	background: transparent url(../images/about.png) no-repeat 0px 0px;
}

#menu #photoblog a {
	background: transparent url(../images/photoblog.png) no-repeat 0px 0px;
}

#menu #contact a {
	background: transparent url(../images/contact.png) no-repeat 0px 0px;
}

#menu #portfolio a:hover, #menu #about a:hover, #menu #photoblog a:hover, #menu #contact a:hover {
	background-position: 0px -45px;
}
#menu #portfolio a:active, #menu #about a:active, #menu #photoblog a:active, #menu #contact a:active {
	background-position: 0px -45px;
}

/* content */

	/* pàgina principal */
#presentacio {
	width: 920px;
	height: 100px;
	margin: -10px 0 20px 20px;
	background: transparent url(../images/presentacio-a.gif) no-repeat center center;
	text-indent: -9999px;
}

#book {
	height: 620px;
	width: 600px;
	float: left;
	margin: 0 0 50px 20px;
	background: transparent url(../images/bg-book.png) no-repeat center center;
}

#book h2 {
	height: 50px;
	width: 600px;
	margin: 0;
}

#book h2 a {
	height: 50px;
	width: 600px;
	background: transparent url(../images/portfolio-b.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
}

#book h2 a:hover, #book k2 a:active {
	background-position: 0px -50px;
}

#book #fotos {
	width: 500px;
	height: 500px;
	margin: 22px auto auto 47px;
}

#book #fotos img {
	border: #B96012 3px solid;
}

#blogs {
	height: 618px;
	width: 270px;
	float: right;
	margin: 0 20px 0 0;
}

#blogs #nyssen {
	height: 245px;
	width: 270px;
	background: transparent url(../images/bg-nyssen.png) no-repeat center center;
	margin: 0;
}

#blogs #nyssen h3 {
	height: 50px;
	width: 270px;
	margin: 0;
}

#blogs #nyssen h3 a {
	height: 50px;
	width: 270px;
	background: transparent url(../images/photoblog-b.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
}

#blogs #nyssen h3 a:hover, #blogs #nyssen h3 a:active {
	background-position: 0px -50px;
}

#blogs #nyssen img {
	margin: 20px auto auto 22px;
	border: #B96012 3px solid;
}

#blogs #japan {
	height: 200px;
	width: 270px;
	background: transparent url(../images/bg-japan.png) no-repeat center center;
	margin: 5px 0 0 0;
}

#blogs #japan h3 {
	height: 35px;
	width: 270px;
	margin: 0;
}

#blogs #japan h3 a {
	height: 35px;
	width: 270px;
	background: transparent url(../images/loup-japan.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
}

#blogs #japan h3 a:hover, #blogs #japan h3 a:active {
	background-position: 0px -35px;
}

#blogs #japan img {
	margin: 13px auto auto 22px;
	border: #B96012 3px solid;
}

#blogs #recreacions {
	height: 165px;
	width: 270px;
	background: transparent url(../images/bg-recreacions.png) no-repeat center center;
	margin: 5px 0 0 0;
}

#blogs #recreacions h3 {
	height: 35px;
	width: 200px;
	margin: 0;
}

#blogs #recreacions h3 a {
	height: 35px;
	width: 200px;
	background: transparent url(../images/recreacions.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
}

#blogs #recreacions h3 a:hover, #blogs #recreacions h3 a:active {
	background-position: 0px -35px;
}

#blogs #recreacions img {
	margin: 18px auto auto 22px;
	border: #B96012 3px solid;
}

/* div que colapse */
#info {
	clear: both;
	background: transparent url(../images/bg-i-about.png) no-repeat center top;
	padding-top: 10px;
	margin-top: 20px;
}

.fixed {
	width: 920px;
	margin-left: 20px;
}

#info .toggle {
	height: 35px;
	width: 150px;
	background: transparent url(../images/i-about.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
	margin: 0 0 10px 0;
}

#colleft {
	float: left;
	width: 570px;
}

#colleft h3 a {
	height: 30px;
	width: 560px;
	background: transparent url(../images/bio.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
}

#colleft h3 a:hover, #colleft h3 a:active {
	background-position: 0px -30px;
}

#colright {
	float: right;
	width: 310px;
}

#colright h3 a {
	height: 30px;
	width: 310px;
	background: transparent url(../images/coses.png) no-repeat 0px 0px;
	display: block;
	text-indent: -9999px;
}

#colright h3 a:hover, #colriht h3 a:active {
	background-position: 0px -30px;
}

#colleft p, #colright p {
	font-size: 140%;
	float: left;
	margin: 15px 15px 25px 0;
	line-height: 150%;
}

#colleft img, #colright img {
	float: left;
	padding: 2px;
	border: #F3D2B6 2px solid;
	background-color: #68452A;
	margin: 0 15px 0 0;
}

#colleft p a, #colright p a {
	color: #733C0B;
}

#colleft p a:hover, #colleft p a:active, #colright p a:hover, #colright p a:active {
	color: #B65F12;
}

	/* portfolio */
#work {
	width: 920px;
	margin: 30px auto 50px 20px !important;
	position: relative;
}

#work .bubble {
	display: inline-block;
	margin: 11px 8px 36px 7px;
	position: relative;
	width: 212px;
	height: 212px;
	background: transparent url(../images/bg-work.png) no-repeat center center;
}

#work .bubble img {
	padding: 0;
	background-color: #68452A;
	margin: 6px;
}

#work .bubble h2 {
	margin: 2px 4px 12px 4px;
	height: 20px;
	font-size: 130%;
	text-align: left;
	background: transparent url(../images/bg-work_h2.png) no-repeat center center;
	color: #E77817;
	padding: 4px 8px 2px;
}

#work .bubble .uppop {
    position: absolute;
    display: none;
	width: 200px;
	height: 100px;
	padding: 0;
}

#work .bubble .uppop .popup-in p {
	margin: 5px 8px;
	font-size: 130%;
	text-align: left;
	background-color: #E77817;
	color: #0D0701;
	padding: 4px;
}

#work .bubble .uppop .popup-in a {
	color: #0D0701;
}

#work .bubble .uppop .popup-in a:hover {
	color: #69370B;
}



	/* about */

#bio, #coses {
	width: 920px;
	margin: 10px 0 40px 20px;
}

#bio h2 {
	margin: 0 0 20px 0;
	height: 40px;
	width: 920px;
	background: transparent url(../images/bio-about.png) no-repeat center center;
	display: block;
	text-indent: -9999px;
}

#coses h2 {
	height: 50px;
	width: 920px;
	background: transparent url(../images/coses-about.png) no-repeat center center;
	display: block;
	text-indent: -9999px;
}

#bio .retrat {
	float: left;
	padding: 2px;
	border: #F3D2B6 2px solid;
	background-color: #68452A;
	margin: 0 20px 20px 0;
}

#bio img {
	float: right;
}

#bio p, #coses p {
	font-size: 140%;
	margin: 10px 0 15px 0;
	line-height: 150%;
}

#coses li {
	display: inline;
}

#english {
	clear: both;
	margin: 20px 0 40px 20px;
}

#english .fixed {
	width: 880px;
	background: transparent url(../images/bg-in-english.png) repeat;
	min-height: 1%;
	height: 1%;
}

#english .toggle a {
	height: 35px;
	width: 200px;
	background: transparent url(../images/in-english.png) no-repeat center top;
	display: block;
	text-indent: -9999px;
}

#english .toggle a:hover, #english .toggle a:active {
	background-position: 0px -35px;
}

#english .fixed p {
	font-size: 130%;
	margin: 10px 10px 15px 20px;
}

#imatges {
	width: 420px;
	margin: 40px 5px 10px 0;
	float: left;
}

#videos {
	width: 490px;
	margin: 40px 0 10px 0;
	float: right;
}

#musica {
	width: 440px;
	margin: 50px 35px 10px 0;
	float: right;
}

#imatges img, #videos img, #musica img {
	border: 2px #E77817 solid;
}

#imatges a:hover img, #videos a:hover img, #musica a:hover img {
	border: 2px #B65F12 solid;
}

#links  {
	float: right;
	width: 440px;
	margin: 20px 30px 0 0;
	font-size: 140%;
}

#links li {
	display: list-item;
	line-height: 180%;
}

#links a {
	color: #733C0B;
}

#links a:hover, #links a:visited {
	color: #B65F12;
}


	/* contact */
#contactform {
	float: left;
	width: 428px;
	height: 636px;
	margin: 40px 0 50px 20px;
	font-size: 140%;
	border: 1px solid #B65F12;
	padding: 10px;
	background-color: #E67817;
}

#contactform h2 {
	width: 400px;
	height: 30px;
	margin: 20px 0;
	background: transparent url(../images/formulari-de-contacte.png) no-repeat center center;
	display: block;
	text-indent: -9999px;
}

#formulari {
	margin-top: 30px;
}

#formulari .form_cont li {
	margin: 5px 0 2px 0;
	color: #6C380B;
}

#formulari .form_cont input, #formulari .form_cont textarea {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #ED8220;
	border: 1px solid #C86814;
	margin: 0 0 15px;
	padding: 4px;
	width: 320px;
}

#formulari .form_cont input:hover, #formulari .form_cont textarea:hover,
#formulari .form_cont input:focus, #formulari .form_cont textarea:focus { 
	background-color: #EE8B30;
	border: 1px solid #2E1805;
	}

#formulari .form_cont #boto_envia {
	width: 100px;
	height: 30px;
	text-transform: uppercase;
	font-weight: bold;
	background-color: #CF6C15;
	color: #452407;
}

#formulari .form_cont #boto_envia:hover, 
#formulari .form_cont #boto_envia:focus {
	background-color: #C56614;
	color: #221203;
	border: none;
	cursor: pointer;
}


#dades {
	margin: 70px 0 0 60px;
}

#dades li {
	margin: 20px 0;
}

#telefon {
	float: right;
	width: 440px;
	height: 656px;
	margin: 40px 20px 50px 0;
	background: transparent url(../images/telefon.jpg) no-repeat center center;
}

#dades a, #contactform a {
	color: #733C0B;
}

#dades a:hover, #dades a:active,
#contactform a:hover, #contactform a:active {
	color: #B65F12;
}


	/* accessibilitat, mapa */

#politica, #webmap {
	margin: 20px 20px 40px 20px;
	font-size: 140%;
	line-height: 150%;
	background: transparent url(../images/bg-in-english.png) repeat;
	padding: 20px 30px;
}

#politica h2, #politica h3,
#politica p, #politica ul {
	margin: 10px 0 30px;
}

#webmap h2, #webmap ul {
	margin: 20px 0 80px;
}

#politica li, #webmap li {
	list-style-type: disc;
	margin-left: 1em;
}

#webmap li {
	line-height: 200%;
}

#webmap li ul li {
	margin-left: 3em;
}

#webmap a {
	color: #733C0B;
}

#webmap a:hover, #webmap a:active {
	color: #B65F12;
}



/* footer */
#footer {
	clear: both;
	height: 150px;
	width: 100%;
	background: transparent url(../images/bg-info.jpg) no-repeat center bottom;
	padding: 15px 0 0 0;
	margin: -2px 0 0 0;
}

#footer h3 {
	float: right;
	margin: 15px 0 0 0;
}

#footer h3 a {
	width: 190px;
	height: 35px;
	display: block;
	background: transparent url(../images/contact-hire.png) no-repeat 0px 0px;
	text-indent: -9999px;
}

#footer h3 a:hover, #footer h3 a:active {
	background-position: 0px -35px;
}

#footer p {
	float: right;
	margin: 15px 30px 0 0;
}

#footer p a {
	width: 35px;
	height: 35px;
	display: block;
	background: transparent url(../images/facebook_logo.png) no-repeat 0px 0px;
	text-indent: -9999px;
}

#footer p a:hover, #footer p a:active {
	background-position: 0px -35px;
}

#footer ul {
	float: left;
	height: 20px;
	width: 550px;
	margin: 10px 0 0 0
}

#footer li {
	float: left;
	padding: 0 20px 0 0;
}

#footer li a {
	width: 90px;
	height: 20px;
	display: block;
	text-indent: -9999px;
}

#footer #mapa a {
	background: transparent url(../images/web-map.png) no-repeat 0px 0px;
}

#footer #acces a {
	background: transparent url(../images/accessibilitat.png) no-repeat 0px 0px;
}

#footer #mail a {
	background: transparent url(../images/mail-loup.png) no-repeat 0px 0px;
}

#footer #xhtml a {
	background: transparent url(../images/valid-xhtml.png) no-repeat 0px 0px;
}

#footer #validcss a {
	background: transparent url(../images/valid-css.png) no-repeat 0px 0px;
}

#footer #mapa a:hover, #footer #mapa a:active, #footer #xhtml a:hover, #footer #xhtml a:active, #footer #validcss a:hover, #footer #validcss a:active, #footer #acces a:hover, #footer #acces a:active, #footer #mail a:hover, #footer #mail a:active {
	background-position: 0px -20px;
}

/* tooltip */
#easy_tooltip{
	font-size: 120%;
	border: 2px solid #B96012;
	padding: 4px 10px;
	background: #F8D7BA;
	color: #733C0B;
	z-index:10000;
	margin: 50px 0 0 10px;
}




/**** divs variables ****/


/**** classes ****/

.clear{clear: both;}
.left{float:left;margin-right:1em;}
.right{float:right;margin-left:1em;}
.center{text-align:center;}

.capital {
	text-transform: uppercase;
	font-weight: bold;
}

.loup {
	color: #000;
	font-weight: bold;
}