/* 
CODE DESIGN: NORDIC WEB DESIGN 
*/

/* *************************** */
/* ******* SPECIAL FONT ****** */
/* *************************** */

/*
Hvis du vil adde en speciel skrifttype til dit website, eksempelvis din h2 skal du generere den skrifttype du vil bruge på 
" http://www.fontsquirrel.com/fontface/generator " og så ligge ind i samme mappe som style.css ligger i. 

Derefter skal du være sikker på at kalde filerne det samme som du erstatter 'FONT-NAME-HERE' med.

Der efter skal du så benytte dig af: font-family: 'FONT-NAME-HERE'; der hvor du vil bruge skrifttypen. (husk at erstattet 
FONT-NAME-HERE med din skrifttype, og det skal være et sammenhængende ord.
*/

@font-face {
  	font-family: 'FONT-NAME-HERE';
  	src: url('FONT-NAME-HERE.eot?') format('eot'), url('FONT-NAME-HERE.woff') format('woff'), url('FONT-NAME-HERE.ttf') format('truetype');
}

/* *************************** */
/* ***** GLOBAL STYLING ****** */
/* *************************** */

html {overflow-y: scroll;}

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #f9f9f9;
	background-image: url(../images/bg4.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
}

/* ***** NO IMG BORDERS ****** */

a img {
	border: 0;
	text-decoration: none;
}

/* ******* TXT STYLING ******* */

h1 {	
}

h2 {	
}

h3 {
}

p {
}

/* ******* Welcome page ******* */

.sprog {
	float: right;
	height: 20px;
}

.index_outer_header {
	width: 900px;
	height: 137px;
	margin: 0 auto;
}

.index_header {
	width: 900px;
	height: 110px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

.index_logo {
	height: auto;
	position: absolute;
	top: 20px;
}

.content {
	clear: both;
}

.vi_tilbyder_left {
	float: left;
	width: 500px;
	margin-top: 10px;
}

.vi_tilbyder_right {
	float: right;
	width: 340px;
	margin-top: 10px;
}

.vi_tilbyder_right ul {
	
}

.vi_tilbyder_right ul li {
	list-style-image: url(../images/checkmark.jpg);
	margin-right: 10px;
	float: left;
	width: 160px;
}

.content h2 {
	font-size: 22px;
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

.wrapper {
	background-color: #f6f6f6;
	width: 960px;
	margin: 0 auto;
	margin-bottom: 30px;
}

.index_wrapper {
	width: 960px;
	margin: 0 auto;
	height: auto;
	min-height: 200px;
}

.galleri_holder {
	width: 95px;
	height: 95px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 3px solid #CCC;
	float: left;
}

.galleri_holder img {
	width: 95px;
	height: 95px;
}

.tlf {
	position: absolute; 
	margin-left: 720px; 
	margin-top: 25px; 
	width: 250px;
}

.tlf h2 {
	font-size: 17px;
}

.index_tlf {
	height: 50px;
	width: 226px;
	background-image:url(../images/ring_til_os_skraa.png);
	background-repeat: no-repeat;
	padding-top: 25px;
	padding-left: 33px;
	float: left;
	margin-left: 255px;
	margin-top: -105px;
	
}

span#mellemrum {
	padding.right: 30px;
}

.index_tlf p {
	color: #9f9f9f;
	font-size: 18px;
	-webkit-transform: rotate(355deg);	
	-moz-transform: rotate(355deg);
	-ms-transform: rotate(355deg);
	-o-transform: rotate(355deg);
	transform: rotate(355deg);
} 

.stor_overskrift {
	margin: 0 auto;
	width: 900px;
	padding-top: 40px;
	padding-bottom: 40px;
	color: #6a6a6a;
	
}

.stor_overskrift h2 {
	color: #6a6a6a;
	font-size: 23px;
	text-transform: uppercase;	
	font-weight: normal;
}

.index_banner {
	width: 900px;
	height: 320px;
	margin-bottom: 15px;
	margin: 0 auto;
	margin-top: 15px;
}

.index_header_menu {
	margin-top: 105px;
	margin-bottom: 20px;
	background-color: #000;
	height: 29px;
	width: 909px;
	background-image: url(../images/menu_background.png);
	background-repeat: repeat-x;
	margin-left: -2px;
}


.index_header_menu ul {
	float: right;
	margin-right: -10px;
}

.index_header_menu ul li {
	float: left;
	list-style-type: none;
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px dotted #fff;
	margin-top: 5px;
}

.index_header_menu ul li a {
	text-decoration: none;
	color: #ccc;
	font-size: 12px;
}

.index_header_menu ul li a:hover {
	color: #fff;
}


.index_content_holder {
	width: 900px;
	height: auto;
	margin: 0 auto;
}

.content_tekst {
	width: 860px;
	height: auto;
	color: #000;
	padding: 20px;
	margin-top: 5px;
	margin-bottom: 30px;
	border: dotted 1px #9c9c9c;
	background-color: #FFF;
}

.content_tekst h2 { 
	font-size: 20px;
	margin-bottom: 5px;
}

.content_tekst { 
	font-size: 12px;
}

.index_content_holder h3 {
	color: #434343;
}


.index_content_holder a {
	text-decoration: none;
}

.index_content_holder a img {
	text-decoration: none;
	border: none;
}

.box_left_holder {
	width: 290px;
	height: auto;
	float: left;
}

.box_left_holder h2 {
	margin-bottom: 5px;
	text-transform: uppercase;	
	font-size: 16px;
}

.box_left {
	border: 7px solid #fff;
	width: 275px;
	height: 130px;
	background-color: #fff;
	float: left;
	background-image:url(../images/hvadlavervi.jpg);
	background-repeat: no-repeat;
	margin-bottom: 10px;
}

.box_left h2 {
	font-size: 12px;
	bottom: 0;
	color: #fff;
	padding: 5px;
	margin-top: 98px;	
	text-align: right;
	font-weight: normal;
	background-color: #ff5004;
	padding-right: 10px;
}

.box_middle_holder {
	width: 290px;
	height: auto;
	float: left;
	margin-right: 15px;
	margin-left: 15px;
}

.box_middle_holder h2 {
	margin-bottom: 5px;
	text-transform: uppercase;	
	font-size: 16px;
}

.box_middle {
	height: 130px;
	background-color: #fff;
	float: left;
	margin-bottom: 10px;
	border: 7px solid #fff;
	width: 275px;
	background-image:url(../images/faaettilbud.jpg);
	background-repeat: no-repeat;
}

.box_middle h2 {
	font-size: 12px;
	bottom: 0;
	color: #fff;
	padding: 5px;
	margin-top: 98px;	
	font-weight: normal;
	background-color: #06C;
	padding-right: 10px;
	text-align: right;
}

.box_right_holder {
	width: 280px;
	height: auto;
	float: left;
}


.box_right_holder h2 {
	margin-bottom: 5px;
	text-transform: uppercase;	
	font-size: 16px;
}

.box_right {
	margin-bottom: 10px;
	border: 7px solid #fff;
	width: 275px;
	height: 130px;
	background-color: #fff;
	float: left;
	background-image:url(../images/kontakt.jpg);
	background-repeat: no-repeat;
}

.box_right h2 {
	font-size: 12px;
	bottom: 0;
	color: #fff;
	padding: 5px;
	margin-top: 98px;	
	font-weight: normal;
	background-color: #6da623;
	padding-right: 10px;
	text-align: right;
		
}

.index_footer {
	font-size: 10px;
	clear: both;
	margin: 0 auto;
	width: 900px;
	padding-top: 10px;
	color: #5c5c5c;
	border-top: 1px solid #b3b3b3;
	margin-top: 40px;
	padding-bottom: 30px;
	padding-top: 20px;
}

.footer_left {
	float: left;
	text-transform: uppercase;
}

.footer_right {
	float: right;
}

.footer_right a {
	font-size: 10px;
	color: #5c5c5c;
	text-decoration: none;
}

.cleaning h2 {
	color: #000;
	font-size: 20px;
	margin-bottom: 10px;
	width: 700px;
}

.cleaning p {
	color: #000;
	font-size: 14px;
	width: 700px;
}

.conditory h2 {
	color: #846c32;
	font-size: 20px;
	margin-bottom: 10px;
	width: 600px;
}

.conditory p {
	color: #846c32;
	font-size: 14px;
	width: 600px;
}

.catering h2 {
	color: #881719;
	font-size: 20px;
	margin-bottom: 10px;
	width: 750px;
}

.catering p {
	color: #881719;
	font-size: 14px;
	width: 750px;
}

.contact h2 {
	color: #2A2A2A;
	font-size: 20px;
	margin-bottom: 10px;
	width: 750px;
}

.contact p {
	color: #2A2A2A;
	font-size: 14px;
	width: 750px;
}

/* *************************** */
/* ********** CLEAR ********** */
/* *************************** */


.clear_both {
	clear: both;
}

.clear_right {
	clear: right;
}


/* **************************** */
/* ********** SHADOW ********** */
/* **************************** */

/*
For at benytte dig af Shadow på divs mv. skal du eksempelvis på en div class skrive shadow_black efter din div.
Lad mig give dig et eksempel: <div class="content"></div> - hvis du vil adde shadow i black, grey eller white, skal
den hedde <div class="content shadow_black"></div> - husk du kan udskifte black med grey og white også.
*/


.shadow_black {
    -webkit-box-shadow: #000 0 0 5px 3px;
    -moz-box-shadow: #000 0 0 5px 3px;
    box-shadow: #000 0 0 5px 3px;
    behavior: url(pie/PIE.htc);
}

.shadow_darkgrey {
    -webkit-box-shadow: #8e8e8e 0 0 5px 3px;
    -moz-box-shadow: #8e8e8e 0 0 5px 3px;
    box-shadow: #8e8e8e 0 0 5px 3px;
    behavior: url(pie/PIE.htc);
}

.shadow_grey {
    -webkit-box-shadow: #d8d8d8 0 0 5px 3px;
    -moz-box-shadow: #d8d8d8 0 0 5px 3px;
    box-shadow: #d8d8d8 0 0 5px 3px;
    behavior: url(pie/PIE.htc);
}

.shadow_white {
    -webkit-box-shadow: #FFF 0 0 5px 3px;
    -moz-box-shadow: #FFF 0 0 5px 3px;
    box-shadow: #FFF 0 0 5px 3px;
    behavior: url(pie/PIE.htc);
}


/* ***************************** */
/* ********** ROUNDED ********** */
/* ***************************** */

/*
For at benytte dig af rounded cornors på divs mv. skal du eksempelvis på en div class skrive rounded_big efter din div.
Lad mig give dig et eksempel: <div class="content"></div> - hvis du vil adde rounded corners med radius på 5 eller 10px, skal
den hedde <div class="content rounded_big"></div> - husk du kan udskifte big med small også, og få en mindre rund kant.
*/

.rounded_big {
    behavior: url(../pie/PIE.htc);
    -moz-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px; 
}

.rounded_small {
    behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
}


/* ***************************** */
/* ************ MENU *********** */
/* ***************************** */




/* ******** MENU ACTIVE ******** */

/*
For at give active til dine links skal du give alle punkterne et ID som eks id="forside" - Der efter skal du hvor du har includet, 
din menu lave en span id omkring, på hvert enkelt side og HUSK at ændre den hvis du så har en .php fil der hedder noget andet.
Lad mig give et eksempel: 


<span id="forside">
	<?php
		include ("includes/menu.php");
	?>
</span>

Dette er så til forsiden, har du en kontakt side kan du gøre ligeledes bare husk at opret en ny span ned i css på samme måde som 
jeg har vist det. Og så ser det således her ud på kontakt.php:

<span id="kontakt">
	<?php
		include ("includes/menu.php");
	?>
</span>

*/

span#forside a#forside,
span#vitilbyder a#vitilbyder,
span#galleri a#galleri,
span#kontakt a#kontakt
{
	color: #fff;
	font-weight: bold;
}

#container {
	width:875px;
	margin:0 auto;
	position:relative;
	z-index:0;
	margin-right: 10px;
}

#example {
	width:900px;
	height:300px;
	position:relative;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-15px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:0;
	width:1115px;
	height:320px;
	top:-3px;
	left:-120px;
	z-index: 900;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:15px;
	left:-2px;
	z-index:9999;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:875px;
	overflow:hidden;
	position:relative;
	display:none;
	z-index: 9999;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:900px;
	height:265px;
	display:block;
	z-index: 999;
}



/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:891px;
}

/*
	Pagination
*/

.pagination {
	margin:30px auto 0;
	width:100px;
	float: right;
	margin-right: -20px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/*
	Caption
*/

.caption {
	z-index:500;
	position:absolute;
	left:0;
	height:40px;
	padding:10px 20px 5px 20px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:490px;
	font-size:25px;
	line-height:1.33;
	color:#fff;
	text-shadow:none;
	top: 180px;
}

.kontaktoplysninger {
	float: left;
}

.kontaktoplysninger a {
	color: #000;
	text-decoration: underline;
}

.kontaktoplysninger a:hover {
	color: #000;
	text-decoration: none;
}

.outer_contact {
	width: 620px;
	float: left;
	margin-right: 20px;
}

#contact { 
margin:0; 
padding:5px 0; 
width: 620px;
padding-top: 20px;
border-right: solid thin #ececec;
margin-right: 20px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: solid thin #ececec;
}

#contact * { 
color:#f9f9f9;
}

#contact ol { 
margin:0; 
padding:0; 
list-style:none;
width: 23px;
}

#contact li { 
margin:0; 
padding:0; 
background:none; 
border:none; 
display:block;
color: #000;
font-size: 12px;
width: 600px;
margin-bottom: 1px;
}

#contact li.buttons {
width: auto; 
float: left;
}

#contact label { 
float:left; 
margin:0; 
width:80px; 
padding:5px 0; 
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
color:#000; 
margin-right: 5px;
}

#contact label span { 
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
}

#contact input.text { 
font-family: Verdana, Geneva, sans-serif;
width:500px; 
max-width: 500px;
min-width: 500px; 
margin:0 0 5px 0; 
padding:5px 2px; 
height:15px; 
background-color:#fff; 
color:#000;
font-size: 12px;
border:1px solid #ddd; 
behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
}

#contact textarea { 
width:500px;
max-width: 500px;
min-width: 500px;
max-height: 75px;
border:1px solid #ddd; 
margin:5px 0; padding:2px; 
background-color:#fff; 
height:75px; 
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color:#000;
behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
}

#contact li.buttons input { 
padding:3px 0; 
margin:0; 
border:0;
background-color: #fff; 
font-size: 12px; 
color: #000;
border:1px solid #ddd; 
padding-top: 5px;
cursor: pointer;
behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
	margin-left: 84px;
}

p.response { 
text-align:center; 
color:#000; 
font:bold 11px Arial, Helvetica, sans-serif; 
line-height:1.5em; 
width:auto; 
}

.ikkese {
	display: none;
}




















#contactform { 
margin:0; 
padding:5px 0; 
width: 620px;
padding-top: 20px;
}

#contactform .year {
	width: 60px;
	background-color: #fff;
}

#contactform * { 
color:#000;
}

#contactform ol { 
margin:0; 
padding:0; 
list-style:none;
width: 23px;
}

#contactform li { 
margin:0; 
padding:0; 
background:none; 
border:none; 
display:block;
color: #000;
font-size: 12px;
width: 850px;
margin-bottom: 1px;
}

#contactform li.buttons {
width: auto; 
float: left;
}

#contactform label { 
float:left; 
margin:0; 
width:80px; 
padding:5px 0; 
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
color:#000; 
margin-right: 5px;
}

#contactform label span { 
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
}

#contactform input.text { 
font-family: Verdana, Geneva, sans-serif;
width:500px; 
max-width: 500px;
min-width: 500px; 
margin:0 0 5px 0; 
padding:5px 2px; 
height:15px; 
background-color:#fff; 
color:#000;
font-size: 12px;
border:1px solid #ddd; 
behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
}

#contactform textarea { 
width:500px;
max-width: 500px;
min-width: 500px;
max-height: 100px;
border:1px solid #ddd; 
margin:5px 0; padding:2px; 
background-color:#fff; 
height:100px; 
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color:#000;
behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
}

#contactform li.buttons input { 
padding:3px 0; 
margin:0; 
border:0;
background-color: #fff; 
font-size: 12px; 
color: #000;
border:1px solid #ddd; 
cursor: pointer;
behavior: url(../pie/PIE.htc);
    -moz-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; 
	margin-left: 84px;
	padding: 5px;
}