body { margin: 0; padding: 0; text-align:center; background: #fff url(/UI/IMG/background.jpg) center repeat-y; height:100%;font-family:Arial,Verdana; font-size:0.75em;color:#684111;}
#document {width:790px;height:100%; text-align:left;margin:0 auto;padding:0 50px;  }
#topnav {height:75px; border-bottom:2px solid #00b4e0;}
#head {height:100px; text-align:center; border-bottom:2px solid #00b4e0; padding-top:40px; } 
#grid {min-height:450px;border-bottom:2px solid #00b4e0;padding:20px 0;}
#footer {}
h1 {text-transform:uppercase;font-size:1.75em;font-weight:normal;margin:0;line-height:1.5em;}
h2 {font-size:1.5em;font-weight:normal;text-transform:uppercase;color:#684111;}
h3 {color:#684111;text-transform:uppercase; font-weight:normal;font-size:1.2em;margin-top:25px;}
p {line-height:1.4em;}
img {border-style: none;}
a:link, a:visited {color:#684111; text-decoration:none;}
a:hover, a:active {color:#684111; text-decoration:underline;}

#topnav img.logo {margin: 15px 15px 5px 15px;float:left;}
#topnav div.separator {float:left;height:14px; width:3px;background: url(/UI/IMG/topnav/separator.jpg) no-repeat;margin: 56px 4px 0 4px;}
#topnav div.menuitem {float:left;height:14px;margin: 56px 0 0 0}
#topnav div.share {margin-top:56px;height:27px;text-align:center;width:18px;}
#topnav div.share a {text-decoration:none;color:#fff;}
#topnav div.logo {margin-top:36px;height:30px;}

#counter {height:86px;border-bottom:2px solid #00b4e0;text-align:center;}
#counter .align-center {display:block;text-align:center;margin-top:10px;padding-left:100px;}
#counter .lblCounter {float:left;margin-top:35px;margin-right:5px;}
#counter div.start-counter {float:left;margin:8px 0 0 8px;}
#counter div.start-counter img {margin:1px;}

#grid.start {min-height:352px;}
#grid .left {float:left;min-height:350px;}
#grid .right {float:right;}

#grid #start .left {float:left;width:205px; border-right:2px solid #00b4e0;}
#grid #start .right {float:left; width:575px;text-align:center;}
#start .right img.imgstartright {float:left;margin-top:30px;margin-left:30px;}

#grid #activity .left {width:460px;}
#grid #activity .right {width:300px;text-align:center;}
#activity .right .arealist {width:200px;margin-bottom:40px;border:2px solid #00b4e0;font-size:11px; color:#684111;}

#grid #generic .left {width:460px;}
#grid #generic .right {width:300px;text-align:right;}

#grid #list {}
#list .imageitem {float:left; width:96px;height:150px;margin: 10px 35px 10px 0;}
#list .imagetext {font-size:11px;margin-top:5px;}
#list img {width:80px;}

#footer #leftarrow {float:left; width:15px;padding-top:1px;}
#footer #rightarrow {float:left; width:15px;padding-top:1px;}
#footer .rollimg {float:left; width:76px;height:76px;background:url(/UI/IMG/bg_rullbild.jpg);}

.modalPopup {position:absolute; z-index:100001; width:400px; height:600px; background-color:#56c9eb; color:#684111; border:2px solid #009fc6;}
.modalPopup .close {float:right; margin:8px;z-index:200;}
.modalPopup img.logo {float:left; margin-left:170px;margin-top:15px;}
.modalPopup div.text {clear:both;padding:15px 30px;text-align:left;}
.modalPopup h2 {color:#684111;text-transform:none;}
.modalPopup .form {text-align:left;padding:10px 30px;}
.modalPopup .formfield {margin-bottom:20px;z-index:10001;}
.modalPopup .formlabel {color:#684111; font-size:14px;font-weight:bold;display:block;}
.modalPopup .textBox {border:1px solid #fff; width:314px; height:24px;font-size:24px;padding:8px;}
.modalPopup select{border:1px solid #fff;width:330px;height:40px;font-size:16px;padding:8px;}
.modalPopup input.button {border:1px solid #58cdea;width:53px; height:35px;float:right;background:#009ec4; color:#fff; font-size:16px;font-weight:bold;margin-right:5px; cursor: pointer;}
.modalPopup input.wide {width:auto;float:left;font-size:12px;}
.modalPopup input.float {float:right;margin-top:3px;}
.modalPopup input.smaller {width:250px;float:left;}
.modalPopup .disclaimer {color:#684111; font-size:10px;margin:0; padding:0;display:block;}

.error { display: block; padding: 4px; color: Red; background: yellow; font-weight: bold; border: 2px solid black; }

.left .activities {min-height:410px;}
.left .counter {width:294px; height:134px;padding:15px 10px;}
.left .counter h2 {text-transform:uppercase;color:#fff;margin:0;font-size:20px;}

.left .orange {background: url(/UI/IMG/counter/bg_counter_orange.gif) no-repeat;}
.left .pink {background: url(/UI/IMG/counter/bg_counter_pink.gif) no-repeat;}
.left .green {background: url(/UI/IMG/counter/bg_counter_green.gif) no-repeat;}
.left .brown {background: url(/UI/IMG/counter/bg_counter_brown.gif) no-repeat;}
.left .red {background: url(/UI/IMG/counter/bg_counter_red.gif) no-repeat;}
.countertext {margin-top:7px;color:#fff;font-size:18px;width:230px;line-height:30px;}
.countertext img {vertical-align:middle;margin-right:2px;}
.dropdown {float:right;display:block;margin: 10px 10px 40px 0;font-size:11px; border:2px solid #009ec4; color: #684111;width:200px; }

.activitylist .listitem {display:block;clear:both;padding:5px 0;}
.activitylist .date {float:left;width:50px;}
.activitylist a {float:left;width:350px;}

.left .presslist {min-height:425px;}
.presslist .listitem {display:block; clear:both;padding:10px 0;}
.presslist .date {font-weight:bold;}
.presslist a {font-weight:bold;}
.presslist .presstext p {margin:0;padding:0;}
a.backlink {float:right;}

.btnTaStallning {margin-top:20px;}
.lblRullbilder {margin:3px 0;}
.clear-both {clear:both;height:0;}

.pager {border-top:1px solid #dad0c6; height:15px;clear:both; display:block;padding-top:5px; text-align:left;}
.pager ul { margin: 0; padding: 0; }
.pager li { display: inline; padding: 0 10px 0 0; margin:0;font-weight:bold;}
.pager li.current { color:#000; }

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 760px;
	height:76px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable .items .img {
	float:left;
	margin:0;
	padding:2px;
	background: url(/UI/IMG/bg_rullbild.jpg) no-repeat 0 0;
	cursor:pointer;
	width:72px;
	height:72px;
}

/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:15px;
	height:73px;
	float:left;
	margin:1px 0 0 0;
	cursor:pointer;
	font-size:1px;
}

a.right { background:url(/UI/IMG/rightarrow.jpg) 0 0 no-repeat; clear:right; }

a.left { background:url(/UI/IMG/leftarrow.jpg) 0 0 no-repeat; }