/************************************************************************************************************

budsjord.no
website by Atelier Espen Schjelderup (c) 2012-1013, revised 2015

layout.css

************************************************************************************************************/
@import url( https://fonts.googleapis.com/css?family=Quicksand:300,400 );
/************************************************************************************************************
body massage
************************************************************************************************************/
html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

body {
	background-color: #141414;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;	
}

body * {
	margin: 0;
	padding: 0;
}

img {
	display: block;
	border: 0;
	outline: none;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	outline: none;
}

.hideme {
	display: none;
}



/************************************************************************************************************
typo: family
************************************************************************************************************/
body { font-family: Verdana, Arial, Tahoma; }

#categories, #site-tools, .pn_text, .counter, #ticker_title, #ticker, #event_calendar_list dt, h2 { font-family: 'Quicksand'; }

/************************************************************************************************************
typo: size
************************************************************************************************************/
html { font-size: 62.5%; }

#categories { font-size: 3rem; }

.pn_text, #ticker_title, #ticker, .counter, #home_btn { font-size: 2.5rem; }

h2 { font-size: 2rem; }

#event_calendar_list dt { font-size: 1.9rem; }

h1 { font-size: 1.6rem; }

p, #contact_bubble p, .content ul.list li, #site_tools, .btn, .btn_dbg, .btn_cancel, #event_calendar_list dd, #fb_calendar_link { font-size: 1.4rem; }

/************************************************************************************************************
typo: line-height
************************************************************************************************************/
h1, p, .content ul.list li, #event_calendar_list dd { line-height: 2.3rem; }

#contact_bubble p, #site_tools { line-height: 2rem; }

.counter { line-height: 4.0rem; }

#event_calendar_list dt { line-height: 4.4rem; }

/************************************************************************************************************
typo: style/weight
************************************************************************************************************/
#categories, .pn_text, .counter, #event_calendar { font-weight: 400; }

#site-tools { font-weight: 300; }

h1 { font-weight: normal; }

/************************************************************************************************************
typo: color
************************************************************************************************************/
/*body, h1, p, a, .content ul.list li, #event_calendar, .counter, .slash { color: #fff; }*/
body, a, .pn_text { color: #fff; }

#contact_bubble h1, #contact_bubble p { color: #323232; }

#contact_bubble a {
	color: #5ec2a9; /* utg�tt gr�nn */
	color: #8ea5df;
}

/************************************************************************************************************
typo: misc
************************************************************************************************************/
h1, #contact_bubble p {
	white-space: nowrap;
}

p {
	margin-bottom: 30px;
/* 	letter-spacing: 0.1em; */
}

#event_calendar_list dt {
	border-top: 1px solid #f0f0f0;
	cursor: pointer;
}

#event_calendar_list dt:first-child {
	border-top: none;
}

#event_calendar_list dd {
	margin-bottom: 10px;
	white-space: pre-line;	
}

#event_calendar_list dd a {
	line-height: 4rem;
}

#event_calendar_list dl {
	margin-bottom: 20px;
}

.content ul.list {
	margin: -30px 0 30px;
	list-style-type: none;
}

.content ul.list li:before {
	position: relative;
	content: "-";
	left: -5px;
}

.content ul.list li {
	margin-left: 10px;
	text-indent: -5px;
}

a {
 	text-decoration: none;
}

#categories .on {
	border-bottom: 1px solid #fff;
	padding-bottom: 4px;
}

.counter {
/*	word-spacing: -10px;*/
	text-align: right;
	height: 60px;
}

#start_t, #next_t {
	text-align: right;
}

#site_tools .on {
	border-bottom: 1px solid #fff;
}

/************************************************************************************************************
typo: opacity / transitions
************************************************************************************************************/
.pn_text { opacity: 0; }

#credits a { opacity: 0.1; }

#prev_btn .prev_a, #next_btn .next_a { opacity: 0.25; /* black circle = 0.25, white circle = 0.1 */ }

.slash { opacity: 0.3; }

#prev_btn:hover .prev_a, #next_btn:hover .next_a, .h_med { opacity: 0.4; }

a, .counter span, .scroll_btn { opacity: 0.5; }

#ticker li, .content a, #site_tools ul li a { opacity: 0.6; }

#event_calendar_list dt { color: rgba(255,255,255,0.6); }

a:hover, #ticker li:hover, #event_calendar .on, #site_tools a:hover, .scroll_btn:hover, #contact_bubble a, #site_tools .on, .on, #event_calendar:hover>#ticker li, .h_max, #credits a:hover { opacity: 1.0; }

#event_calendar_list dt:hover, #event_calendar_list dt.on { color: rgba(255,255,255,1.0); }

#directions_window input, #credits a {
	-webkit-transition: opacity 0.6s ease;
	-moz-transition: opacity 0.6s ease;
	-o-transition: opacity 0.6s ease;
	transition: opacity 0.6s ease;
}


.pn_text, #prev_btn .prev_a, #next_btn .next_a, #event_calendar_list dt {
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
}

a, #contact_bubble a, #ticker li, .scroll_btn  {
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}


#credits a:hover, .btn, .btn_dbg, .btn_cancel, #event_calendar_list dt:hover {
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	-o-transition: 0.2s ease;
	transition: 0.2s ease;
}

a:hover, #contact_bubble a:hover, #ticker li:hover, .scroll_btn:hover, #prev_btn:hover .prev_a, #next_btn:hover .next_a, 
.h_max, #directions_window input:hover, .btn:hover, .btn_dbg:hover, .btn_cancel:hover {
	-webkit-transition: opacity 0.15s ease; /* webkit */
	-moz-transition: opacity 0.15s ease; /* firefox */
	-o-transition: opacity 0.15s ease; /* opera */
	transition: opacity 0.15s ease; /* standard */
}

#contact_bubble a {
	border-width: 0 0 1px;
	border-style: solid;
	border-color: rgba(142, 165, 223, 0.0);
	padding-bottom: 2px;
}

#contact_bubble a:hover {
	border-color: rgba(142, 165, 223, 1.0);
}

.scroll_btn {
	display: none;
}

#directions_window input {
	background-color: #fafafa;
}

#directions_window input:hover {
	background-color: #fff;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 items

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.btn, .btn_dbg, .btn_cancel {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-style: italic;
	padding: 13px 37px;
	text-decoration: none;
	cursor: pointer;
}

.btn {
	background-color: #acf6c9; /* utg�tt gr�nnfarge */
	background-color: #c6f5c8; /* utg�tt gr�nnfarge mattere */
	background-color: #c0d2ff;
	border: 1px solid rgba( 125, 125, 125, 0.45);
}

.btn_dbg {
	background-color: #afc6fe;
	border: none;
}

.btn_cancel {
	background-color: #ffe0e1;
	border: none;
}

.btn:hover, .btn_dbg:hover {
	background-color: #b2ffd0; /* utg�tt gr�nnfarge */
	background-color: #c9d8fe;
}

.btn_cancel:hover {
	background-color: #ffa5a8;
}

.btn:active {
	opacity: 0.7;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 structure

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#logo {
	position: absolute;
	top: 44%;
	left: 50%;
	background: url('graphics/logo.png') no-repeat 0 0;
	width: 181px;
	height: 257px;
	margin-top: -129px;
	margin-left: -91px;
	cursor: pointer;
	z-index: 99;
}

#index_punchline {
	display: none;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(20, 20, 20, 0.7);
	width: 100%;
	height: 100%;
	text-align: center;
	cursor: pointer;
	z-index: 98;
}

#index_punchline p {
	position: absolute;
	top: 44%;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	margin-top: 160px;
	z-index: 97;
}

header {
	position: absolute;
	top: 9px;
	left: 10px;
	right: 10px;     
	background-color: #fff;
	height: 6px;
	z-index: 95;
}

#wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90;
}

/* for visitors with js disabled */
#wrapper {
	overflow: auto;
}
/* non-js end */

body.js #wrapper {
	overflow: hidden;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 main navigation
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#categories ul {
	margin: 13px 0 0 8px;
	width: 70%; /* justeres til slutt */
	list-style-type: none;
}

#categories ul li {
	float: left;
	height: 36px;
	margin-right: 8px;
}

#categories ul li#home_btn {
	float: left;
	clear: left;
	height: 41px;
	margin-right: 5px;
}

#site_tools ul {
	position: absolute;
	top: 22px;
	right: 10px;
	list-style-type: none;
}

#site_tools ul li {
	float: left;
	margin-right: 3px;
}

#site_tools ul li a {
	display: block;
	height: 22px;
}

#btn_press_no a, #btn_press_de a {
	margin-right: 20px;
}

#btn_press_en a {
	margin-right: 20px;
}

#btn_facebook a {
	background: url('graphics/facebook-icon.svg');
	background-size: 100% 100%;
	width: 9px;
	margin-right: 15px;

}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 event calendar
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#event_calendar {
	position: relative;
	float: left;
	clear: left;
	margin-left: 9px;
	margin-top: -5px;
}

#ticker_title {
	white-space: nowrap;
	height: 60px;
	line-height: 40px;
	float: left;
	margin-right: 25px;
	cursor: pointer;
}

#ticker li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 60px;
	line-height: 40px;
	cursor: pointer;
}

#ticker li .state {
	font-size: inherit;
	margin: 0;
}

#ticker span.date {
	margin-right: 20px;
}

.event_calendar_flyout_container {
	display: none;
	position: absolute;
	top: 47px;
	left: 119px;
	z-index: 100;
}

.flyout_triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent rgba(0, 0, 0, 0.5) transparent;
	margin-left: 85px;
}

.event_calendar_flyout {
	display: inline-block;
	background: rgba(0, 0, 0, 0.5);
	margin: 0;
	color: #fff;
	padding: 10px 25px 25px;
	overflow: visible;
}

.flyout_thumb {
/*	display: inline-block;*/
/*	vertical-align: top;	*/
/*	margin-right: 12px;*/
	height: 175px;
}

.flyout_text {
/*	display: inline-block;*/
/*	width: 500px;*/
	white-space: pre-line;
	vertical-align: top;
}

.flyout_text h2 {
	margin-bottom: 5px;
}

.flyout_text p {
	line-height: 1.8em;
	margin-bottom: 0;
}

#event_calendar_list span {
	float: left;
	width: 190px;
}

#event_calendar_list dd {
	margin-left: 190px;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 content
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#content_container {
	clear: left;
	margin-top: 135px;
}

.content {
	padding: 0 255px 0 10px;
}

.scroll_btn {
	position: absolute;
	right: 207px;
	width: 25px;
	height: 22px;
	cursor: pointer;
}

#scroll_up {
	top: 140px;
	background: url('graphics/btn_arrow_up.png');
}

#scroll_down {
	bottom: 47px;
	background: url('graphics/btn_arrow_down.png');
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 image-viewer
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.image_source {
	display: none;
}

/* for visitors with js disabled */
#index_image {
	display: block;
	opacity: 0.3;
	position: absolute;
	margin-top: -100px;
	width: 100%;
	z-index: 0;
}

body#index #index_image {
	opacity: 1.0;
}
/* non-js end */

body.js #index_image {
	display: none;
}

#gradient_overlay {
	position: absolute;
	background: url('graphics/gradient.png') repeat-x;
	width: 100%;
	height: 413px;
	z-index: 10;
}

.raster_overlay {
	position: absolute;
	background: url('graphics/raster.png');
	width: 100%;
	height: 100%;
	opacity: 0.6;
	z-index: 10;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 image-viewer controls
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.counter {
	display: none;
	position: absolute;
	top: 44px;
	right: 10px;
	z-index: 95;
}

#prev_btn, #next_btn {
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -38px;
	width: 61px;
	height: 61px;
	cursor: pointer;
	z-index: 95;
}

#prev_btn { left: 10px; }
#next_btn { right: 10px; }

.prev, .prev_a, .next, .next_a {
	position: absolute;
	width: 61px;
	height: 61px;
}

.prev, .next { z-index: 90; }

.prev_a, .prev { left: 0; }
.next_a, .next { right: 0; }

.prev_a, .next_a { background: url('graphics/circle_black.png') no-repeat 0 0; }

.prev { background: url('graphics/prev_arrow.gif') no-repeat 0 0; }
.next { background: url('graphics/next_arrow.gif') no-repeat 0 0; }

.pn_text {
	position: absolute;
	top: 50%;
	margin-top: -0.71em;
	z-index: 100;
}

#start_t, #next_t {
	right: 100px;
}

#prev_t {
	left: 100px;
}

#no_image {
	position: absolute;
	background: url('graphics/blue_gradient.png') repeat-x 0 0;
	width: 100%;
	height: 100%;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 preloader
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 		#preloader_overlay {
			position: absolute;
			top: 0;
			left: 0;
			background-color: transparent;
			width: 100%;
			height: 100%;
			z-index: 99;

		}

		#preloader_inner_container {
			margin: 150px 10px 0;
		}

		#preloader_bar {
			position: relative;
			background-color: #fff;
			height: 1px;
			width: 0%;
		}

		#preloader_percentage {
			position: relative;
			height: 50px;
			width: 100px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 16px;
			font-weight: normal;
			color: #fff;
			opacity: 0.5;
			line-height: 50px;
		} */


/* #holder{
	position: absolute;
	top: 30px;
	left: 90px;
	background: rgba(0,0,0,0.8);
	color: white;
	padding: 7px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	-webkit-border-radius: 7px;
	-ms-border-radius: 7px;
	z-index: 1000;
} */


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 credits
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#credits a {
	position: absolute;
	bottom: 9px;
	right: 9px;
	background: url('graphics/credits.png') no-repeat 0 0;
	width: 23px;
	height: 24px;
	z-index: 100;
}