@charset "utf-8";
/* CSS Document */
/* Design and CSS created by Mattias Andersson */
/* www.massassi.se */


/*******************************************/
/************* BASIC HTML TAGS *************/
/*******************************************/

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	}

h1 {
	color: #49493b;
}

h3{
	font-size: 18px;
}
	
h1 small {
	font-size: 20px;
	position: relative;
	top: -5px;
	color: #96977a;
}

/***** Links *****/
a,
a:link,
a:visited {
	text-decoration: none;
	color: #3c3c30;
}

a:hover {
	color: 				#3c3c30;
	text-decoration:	underline;
	}
	
a img{
	border: none;
}

/*******************************************/
/********** MAIN LAYOUT ELEMENTS ***********/
/*******************************************/

/*These are the main divs used to position everything.
Roughly ordered from top to bottom of the HTML code 
(NOT the apparent top-to-bottom order when you render the page in a browser) */

/****************** HTML, BODY **************************/
html, body{
	padding: 0;
	margin: 0;
	height: 100%; /* needed for container min-height */
	
	text-align: center;
	font: 12px helvetica, arial;
	color: #3c3c30;
	
	background: #b4b592 url("../images/body_bg_6.png") repeat-x top;
	/*background: #b4b592 url("../images/body_bg_2.gif") repeat-x top;*/
}


/****************** CONTAINER **************************/
#container{
	position: relative; 	/* nödvändig för footer positionering*/
	margin: 0 auto; 		/* center (denna funkar inte i IE5) */
	text-align: center;		/* för IE <6 */
	
	height: auto !important;/* real browsers */
	height: 100%;			/* IE6: treaded as min-height*/
	min-height: 100%; 		/* real browsers */
	
	width: 960px;			/* sidans bredd*/
	overflow: hidden;
	/*background: #c0c19c;*/
}


/****************** HEADER **************************/

#header{
	width: 100%;
	padding-top: 20px;
	overflow: hidden;
	/*background: #C0C19C;*/
}



/****************** CONTENT **************************/

#content{
	overflow: hidden;

	height: auto !important;/* real browsers */
	height: 100%;			/* IE6: treaded as min-height*/
	min-height: 100%; 		/* real browsers */
	
	margin: 0 0 100px 0; 	/* bottom margin för footer, samma som footer height */
	padding-bottom: 80px;
	background: #c0c19c url("../images/main_bg_3.gif") no-repeat top;
	/*background: #c0c19c;*/
}

	/****************** CONTENT LEFT **************************/
	#contentLeft{
		float: left;
		/*overflow: hidden;*/
		
		width: 200px;
		margin: auto;
		text-align: center;
		/*background: #00f;*/
	}
	
	/****************** CONTENT CENTER **************************/
	#contentCenter {
		float: left;
		overflow: hidden;
		
		width: 600px;
		text-align: left;
		
		/*background: #0ff;*/
	}
	
	
	/****************** CONTENT RIGHT **************************/
	#contentRight {
		float: left;
		overflow: hidden;

		width: 160px;
		/*height: 300px;*/
		text-align: left;
		
		/*background: #0f0;*/
	}


/****************** FOOTER *************************/

#footer{

	position: absolute;
	bottom: 0; 				/* stick to bottom */
	left: 0;
	overflow: hidden;

	text-align: center;

	height: 100px;
	width: 100%;
	color: #60604d;
	/*background: #96977a;*/
}


/********************************************/
/******** SPECIFIED LAYOUT ELEMENTS *********/
/********************************************/


/*********** HEADER **********/
#headerTop{
	width: 100%;
	margin-bottom: 4px;
	height: 36px;
	overflow: hidden;
	
	/*background: #0ff;*/
}

#headerLogo{
	position: relative;
	top: 10px;
	float: left;
	overflow: hidden;
	
}

#headerLanguage{
	float: right;
	overflow: hidden;
	widht: 200px;
}

#headerImage{
	/*padding-top: 10px;
	padding-bottom: 10px;*/
	height: 172px;
	width: 100%;
	/*background: #96977a url("../images/header_bg_5.gif") repeat-x top;*/
}




/****************** LANGUAGE ****************************/

#language{
	float: right;
	overflow: hidden;
	width: 80px;
	
	/*background: #f00;*/
}

#language a{
	display:block;
	width: 31px;
	height: 33px;
	
}

#language_sv{
	/*background: url('../images/lang_sv.png') no-repeat top center;*/
	float: left;
	overflow: hidden;
	margin-right: 10px;
}

#language_en{
	/*background: url('../images/lang_en.png') no-repeat top center;*/
	float: left;
	overflow: hidden;
}




/*********** MENU **********/
#menu{
	margin: auto;
	width: 180px;
	margin-top: 20px;
	text-align: left;
}


#menu ul{
	margin: 0;
	padding: 0;
}

#menu li{
	position: relative;

}

#menu ul li a, #menu ul li h2 {
	border-bottom: 1px solid #93947A;
}

#menu a, #menu h2{
	padding: 8px 0px 8px 10px; 
	display: block;
	margin: 0;
	font: bold 12px/12px arial, helvetica, sans-serif;

}

#menu ul a:hover{
	background: #b4b592;
	text-decoration: none;
	color: #000;
}

.menuParentItem h2{
	background: url("../images/menu_arrow_off.png") no-repeat;
	background-position: center right;
}

.menuParentItem h2:hover{
	color: #000;
	background: #b4b592 url("../images/menu_arrow_on.png") no-repeat;
	background-position: center right;
}


/*
#menu ul h2:hover{
	background: #88896e;
	text-decoration: none;
}
*/



/******* Sub level menu items *******/

#menu ul ul{
	position: absolute;
	width: 170px; 			/*sub menu width*/
	top: 0;
	left: 100%; 			/* to position them to the right of their containing block */
	width: 100%; 			/* width is based on the containing block */
	border-top: 1px solid #87886d;
	border-left: 1px solid #87886d;
	border-right: 1px solid #87886d;
	background: #96977a;
}

#menu ul ul a:hover, 
#menu ul ul h2:hover{
	background: #88896e;
	text-decoration: none;
}

#menu ul ul li a, 
#menu ul ul li h2 {
	border-bottom: 1px solid #87886d;
}


div#menu ul ul,
div#menu ul ul li:hover ul ul{
	display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul{
	display: block;
}





/****************** PAGE CONTENT **************************/

#page_1{
	padding: 30px 30px 30px 30px;
}
/*
#page_1 h3{
	font-size: 18px;
	text-decoration: underline;
}
*/
#page_1 ul{
	margin-left: 15px;
	list-style: disc outside;
}


/****************** GALLERY **************************/

#page_2{
	overflow:hidden;
	padding: 20px 0 0 0;
}

#page_2_header{
	position: relative;
	left: 29px;
	top: 10px;
}

#page_2 ul{
	overflow: hidden;

	margin: 0px;
	padding: 10px;
}

#page_2 ul li{
	width: 167px; 
	height: 149px;
	float: left;
	overflow: hidden;	
	
	margin: 10px;
	list-style: none;
	background: url('../images/gallery_polaroid_5.png') no-repeat top center;
}

#page_2 ul li img {
	margin: 17px 0 0 18px;
	cursor: pointer;
	background: #e3e3e3;
}

#page_2 h4{
	position: relative;
	width: 135px;
	top: 0px;
	left: 4px;
	
	margin: 0px 5px 0 13px;
	font: 12px helvetica, arial;
	text-align: left;
	color: #292929;
	cursor: pointer;
}

#page_2 input {
	position: relative;
	top: 0px;
	left: 4px;
	display: none;
}


.hidden{
	display: none;
}

#response{
	position: relative;
	clear: both;
	background: #e3e3e3;
	padding: 1.5em;
	color: #292929;
	border: 1px solid #BFBFBF;
}

span#x{
	font-weight: bold;
	font-size: .9em;
	color: #292929;
	position: absolute;
	background: gray;
	padding: .1em;
	cursor: pointer;
	top: 0;
	right: 0;
}


/****************** CONTENT *********************/

#handSign{
	position: relative;
	margin-right: 20px;
}



/****************** HUNDHJÄLPEN ****************************/

#hundhjalpen{
	width: 100%;
	margin-top: 25px;
	font: 11px helvetica, arial;
}

#hundhjalpen_header{
	width: 160px;
	margin: 0 0 10px 0;
	font-weight: bold;
}

#hundhjalpen_header img{
	margin: 0 0 0 6px;
}

.hundhjalpen_section img{
	margin: 0 0 10px 16px;
}

.hundhjalpen_section{
	width: 150px;
	margin: 0 10px 10px 0;
	padding: 10px 0 10px 0;
	background: #c9caa3;
	background: -moz-linear-gradient(top, #D3D4AB, #C3C49D);
	background: -webkit-gradient(linear, left top, left bottom, from(#D3D4AB), to(#C3C49D)); 
    -moz-border-radius: 6px;  
    -webkit-border-radius: 6px;  
}

.hundhjalpen_section p{
	width: 120px;
	margin: auto;
	margin-bottom: 10px; 
}

.hundhjalpenText{
	width: 140px;
	margin: auto;
	padding: 10px 0 16px 0;
	border-bottom: 1px dashed #93947A;
}

.hundhjalpenText a{
	text-decoration:	underline;
}



/****************** FOOTER ****************************/

#footerCopyright{
	float: left;
	overflow: hidden;
	
	width: 160px;
	margin: 20px;
	/*background: #0ff;*/
}

#footerText {
	float: left;
	overflow: hidden;
	
	width: 540px;
	height: 40px;
	margin: 20px 10px;
	
	/*background: #f0f;*/
}

#footerText p{
	height: 40px;
	width: 100%;
	/*margin: 0 auto;*/
	text-align: left;
	
	/*background: #0ff;*/
}

#footerContact{
	float: right;
	overflow: hidden;
	
	width: 160px;
	margin: 20px;
	text-align: left;
	
	/*background: #2f0;*/
}

#footerContact a,
#footerContact a:link,
#footerContact a:visited{
	color: #60604d;
}