
/* LAYOUT */
body {margin: 0 20px 10px; text-align: center} /* IE Hack */
#wrapper {position: relative; max-width: 1024px; margin: 0px auto; text-align: left}
#top {position: relative; height: 80px}
#logo {position: absolute; bottom: 10px; left: 20px}
#slogan {position: absolute; bottom: 10px; right: 20px}
#contents {position: relative;}

/* WHITE SPACE */
* {margin: 0; padding: 0;}
td {padding-right: 20px;}
h1 {margin-bottom: 0.8em; padding-top: 1.5em}
h2 {margin: 1.2em 0 0.4em}
p {margin-bottom: 0.8em}
#menu ul {padding: 10px 10px}
#menu li {padding: 14px 10px}
#contents {padding: 20px}
#contents ul, ol {padding: 5px 0 5px 30px}
#infobox {padding: 0 20px}
#bottom {padding: 15px 20px 15px}
#bottom h2 {margin-top: 0}
#copyright {padding-left: 20px}
.space {margin-top: 2em;}
.smallspace {margin-top: 1em;}

/*
COLORS USED
white			#fff
gray			#53544C
light green		#e6ffd9
middle green	#e2f1c6
dark green		#529e4a
orange			#f60
dark gray		#3C3E33
red				#f33
*/

/* BACKGROUND COLOR AND IMAGES */
* {background: transparent}
input, textarea, select {background: white}
body {background: #eee}
#top, #copyright {background: transparent}
#bottom {background-color: #111}
#contents {background: white url('images/backgrounds/lenestoler.jpg') right no-repeat}
#menu {background: #111}
#infobox {background: #D3D4CC}

/* TEXT COLOR */
body {color: #3C3E33}
a {color: black}
#menu li, #menu li a:hover, a:hover, #bottom a {color: #ff0000}
#slogan {color: black}
#menu li a, #bottom {color: white}
#copyright, #copyright a {color: #83847C}

/* BORDER */
body, form, div, h1, h2, h3, p, em, ul, li, img, table, tr, td {border: 0}

/* FONT FAMILY */
body {font-family: Verdana, Arial, sans-serif}
h1, h2, #menu li, input, textarea, select {font-family: Arial, Verdana, sans-serif}

/* FONT SIZE */
h1 {font-size: 20px}
h2 {font-size: 15px}
body {font-size: 13px}
#slogan, #copyright {font-size: 10px}

/* FONT WEIGHT */
* {font-weight: normal}
b, h1, h2, a, #menu li {font-weight: bold}
#copyright a {font-weight: normal}

/* LINE HEIGHT */
body {line-height: 1.3em;}
#menu li, #slogan {line-height: 1.2}
#copyright {line-height: 1.2}

/* ALIGNMENT */
#slogan {text-align: right}
#menu, #copyright {text-align: center}

/* MISCELLANOUS */
#menu li {display: inline; list-style: none}
#menu li a, #copyright a {text-decoration: none}
h1, h2 {text-transform: uppercase}
em {font-style: italic; font-weight: bold;}
.button {margin-right: 10px; vertical-align: middle;}
#button {color: white; background-color: black; text-align: center; font-family: Arial; font-weight: bold; font-size: 16px; padding: 10px; margin: 0px 0 30px}
#button a {color: white; text-decoration: none}
#button span#red {color: #f00; font-weight: bold}
#button a:hover {text-decoration: underline}
p#imperative {font-style: italic; font-weight: bold; font-size: 90%}

UL { margin: 0; padding: 0 0 0 15px; color: #fff; background-color: #000; font-size: 11px; }
UL A { color: #f4e389; background-color: #000; }
UL A:hover { color: #9f9f9f; background-color: #000; }
LI { line-height: 1.5; }

td.available, td.booked, td.undefined, td.kalenderdager, td.kalender {width: 18px}
td.available			{background-color: #9f9f9f; border: 1px solid #000; padding: 0}
td.available a			{display: block; text-decoration: none;}
td.available a:hover	{background-color: #fff;}
td.booked				{background-color: #f4e389; border: 1px solid #000; padding: 0}
td.undefined			{background-color: #000; border: 1px solid #000; padding: 0}
table.calender_table	{border: 1px solid #000;}

.blue { margin: 0; padding: 0; color: #fff; background-color: #000; }

.icon {margin: 0; padding: 0 0 5px; text-align: right; vertical-align: bottom; color: #f4e389; background-color: #9f9f9f; font-weight: bold; font-size: 18px; }

.week				{margin: 0; border: 1px solid #fff;}
.calender_title		{text-transform: uppercase; text-align: right; color: #fff; background-color: #000; font-weight: bold; font-size: 14px; }

.menyvalg {padding: 30px 10px 0; color: #fff; background-color: #9f9f9f; font-weight: bold; font-size: 12px; line-height: 2; text-transform: uppercase; }
.menyvalg A { color: #fff; background-color: #9f9f9f; text-decoration: none; }
.menyvalg A:hover { color: #f4e389; background-color: #9f9f9f; }

.menytekst { margin: 0; padding: 10px 10px 0; color: #fff; background-color: #9f9f9f; font-size: 9px; }
.menytekst A { color: #f4e389; background-color: #9f9f9f; }
.menytekst A:hover { color: #fff; background-color: #9f9f9f; }

.copyright { margin: 0; padding: 0; text-align: center; vertical-align: top; color: #fff; background-color: #9f9f9f; font-size: 9px; }
.copyright a { color: #f4e389; background-color: #9f9f9f; font-weight: bold; text-decoration: none; }
.copyright a:hover { color: #000; }

.overskrift { margin: 0; padding: 0 0 10px; color: #fff; background-color: #000; font-size: 16px; font-weight: bold; text-transform: uppercase; }

.tekst { margin: 0; padding: 0 0 5px; color: #fff; background-color: #000; font-size: 11px; }
.tekst A { color: #f4e389; background-color: #000; }
.tekst A:hover { color: #fff; background-color: #000; }

.respons { margin: 0; padding: 10px 0 0; color: #f33; background-color: #000; font-size: 13px; font-weight: bold;}

.kalender {
	font-family: arial;
	font-weight: bold;
	font-size: 9px;
	text-align: center;
	color: #f33;
	background-color: #9f9f9f;
	padding: 0 3px 0;
	margin: 0;
	border: 1px solid #000;
 }
.kalender A {
	color: #f4e389;
	background-color: #9f9f9f;
	text-decoration: none;
	}
.kalender A:hover {
	color: #fff;
	background-color: #9f9f9f;
	text-decoration: none;
	}

.bestill {
	font-family: arial;
	font-weight: bold;
	font-size: 9px;
	text-align: center;
	color: #9f9f9f;
	background-color: #fff;
	padding: 0;
	margin: 0;
	border: 1px solid #000;
 }
.bestill A {
	color: #fff;
	background-color: #fff;
	text-decoration: none;
	}
.bestill A:hover {
	color: #fff;
	background-color: #fff;
	text-decoration: none;
	}
.kalenderdager {
	font-family: verdana;
	font-weight: normal;
	font-size: 11px;
	text-align: left;
	color: #fff;
	background-color: transparent;
	padding: 2px 5px;
	margin: 0;
	border: 1px solid #fff;
	}
.kalenderdager A {
	color: #f4e389;
	background-color: #000;
	text-decoration: none;
	}
.kalenderdager A:hover {
	color: #fff;
	background-color: #000;
	text-decoration: none;
	}
.kalendertider {
	font-family: arial;
	font-weight: bold;
	font-size: 9px;
	text-align: center;
	color: #fff;
	background-color: transparent;
	padding: 3px 1px;
	margin: 0;
	border: 1px solid #fff;
	}
.kalenderoverskrift {
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background-color: #000;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	border: 1px solid #fff;
	}

.msg, .msg a, a.msg {
	font-weight: bold;
	font-size: 12px;
	color: #f33;
	}

.em {
	font-weight: bold;
	font-size: 12px;
	color: #f4e389;
	}

#monthcalendars table, #treatments table {
	border: 1px solid #fff;
	}

#bestillingsinnhold {
	background-color: #000;
	padding: 20px;
	border: solid white;
	border-width: 1px 0;
	}

.marketing {
	text-align: left;
	font-size: 13px;
	font-weight: normal;
	color: white;
	background-color: #390;
	border: 1px solid #999;
	margin: 0;
	padding: 10px 20px;
	width: auto;
	}

.marketing a {color: #a00}
.marketing a:hover {color: white}

