/**************************************************************************/
/*																		  */
/*	Project: MASTERTEMPLATE 101-ODENSE									  */
/*																		  */
/*	Date of creation: 04.03.2014										  */
/*																		  */
/*	Date of publishing: XX.XX.XXXX										  */
/*																		  */
/*	Last modification: 07.04.2014										  */
/*																		  */
/*	Developed by: Erik Ehrbach from 101-Odense (http://101-odense.dk/)	  */
/*																		  */
/**************************************************************************/
/*
/************************************************************************************************/
/*																								*/
/*	Color 1 - YELLOW-BROWN : #CFCA4C - Used on the logo and input borders on hover or active	*/ 
/*																								*/
/*	Color 2 - BEIGE : #FCF5BF - Only used on a mobile dropdown									*/ 
/*																								*/
/*	Color 3 - LIGHT GREEN : #9FE5C2 - Used on dropdown hover and on mobile navigation		 	*/ 
/*																								*/
/*	Color 4 - DARK GREEN :	#5EB299 - Primary color, used almost everywhere						*/ 
/*																								*/
/*	Color 5 - BROWN :	#745A33	- Only used on a error message									*/ 
/*																								*/
/*	Color 6 - DARK  GRAY: #74848D - Secondary color, used on hr tag, button:active, etc 		*/ 
/*																								*/
/*	Color 7 - LIGHT GRAY: #FBFBFB - Body's background color 									*/
/* 																								*/
/*	Color 8 - MID GRAY: #E1E1E1 - Used on the top bar and the footer 							*/
/************************************************************************************************/
/*
/********************************/
/*------Meyerweb's reset--------*/
/********************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
eput, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/********************************/
/*------------Global------------*/
/********************************/
html {
	font-size: 62.5%;
	overflow-y: scroll;
}

body {
	background-color: #fbfbfb;
	font-family: Arial, Helvetica, sans-serif;
	min-height: 100%;
}

/* 
Borders and padding are drawn inside the set width of the content.
*/
*, 
*:before, 
*:after {
	-moz-box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-webkit-box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, 
h4, h5, h6 {
	margin: 0 0 .5em;
	color: #5EB299;
}

/* 
REM stated font-sizes need to have a fallback to support older browsers (IE8 and below) 
*/
h1 {
	font-size: 38px;
	font-size: 3.8rem;
}

h2 {
	font-size: 28px;
	font-size: 2.8rem;
}

h3 {
	font-size: 24px;
	font-size: 2.4rem;
}

h4 {
	font-size: 22px;
	font-size: 2.2rem;
}

h5 {
	font-size: 20px;
	font-size: 2rem;
}

h6 {
	font-size: 18px;
	font-size: 1.8rem;
}

p, span, a {
	font-size: 15px;
	font-size: 1.5rem;
}

p {
	line-height: 1.45em;
	margin: .7em 0;
}

p img {
	max-width: 100%;
}

hr {
	height: .18em;
    border: 0;
    background-color: #74848D;
}

label {
	display: block;
	margin: 1em 0 .2em;
}

input, textarea {
	-moz-appearance:none;
   	-webkit-appearance:none;
	display: block;
	box-shadow: none;
	border-radius: 0;
	font-size: 14px;
	font-size: 1.4rem;
	margin: 0;
	outline: none;
	max-width: 100%;

}

input[type="submit"] {
	background-color: #FFF;
	border: 1px solid #DEE1E3;
	color: #74848D;
	cursor: pointer;
	font-size: 14px;
	font-size: 1.4rem;
	height: 2.42em;
	margin: .5em 0 0;
	padding: 0 .3em;
	vertical-align: top;
	
}

input:not([type="submit"]), textarea {
  	border: 1px solid #DEE1E3;
	padding: .3em 0;
}

input:not([type="submit"]):after {
	content: "#";
}

input:not([type="submit"]):hover {
	border: 1px solid #CFCA4C;
}

input[type="submit"]:focus {
	border: 1px solid #CFCA4C;
	background-color: #74848D;
	color: #FFF;
}

input:not([type="submit"]):focus, textarea:focus {
	border: 1px solid #CFCA4C;
  	box-shadow: 0px 0px 5px 1px rgba(148, 196, 127, 0.5);
	-moz-box-shadow: 0px 0px 5px 1px rgba(148, 196, 127, 0.5);
	-webkit-box-shadow: 0px 0px 5px 1px rgba(148, 196, 127, 0.5);
}

/** Placeholder stylings **/
::-webkit-input-placeholder {
	font-size: 1.2rem;
}

::-moz-placeholder { 
	font-size: 1.2rem;
    opacity: 1;
}

:-moz-placeholder { 
	font-size: 1.2rem;
    opacity: 1;
}

::-ms-input-placeholder { 
	font-size: 1.2rem;
}	/* IE10+ */

a:link {
	//color:#5EB299;
	color :#4286f4; 
	text-decoration: none;
}

a:hover {
	color:#9FE5C2;
	text-decoration: underline;
}

a:visited {
	color: #5EB299;
}

img {
	border: 0;
}

strong {
	font-weight: 700;
}

/** Text resizing fix for iOS devices in landscape mode **/
/** Read more: http://www.sitepoint.com/forums/showthread.php?1048874-iPhone-landscape-view-blows-up-font-sizes **/
@media only screen and (min-width : 320px) and (max-width : 560px) {
	body {-webkit-text-size-adjust: none;}
}

/********************************/
/*------------COLUMNS-----------*/
/********************************/
/* 
GRID for responsive web. Made by Adam Kaplan. Source: http://www.adamkaplan.me/grid/ 
*/
.column {
	float: left;
	margin-left: 5%;
}

.column:first-child {
	margin-left: 0;
}

.column.full {
	width: 100%;
}
  
.column.two-thirds {
	width: 65%;
}
  
.column.half {
	width: 47.5%;
}
 
.column.one-third {
	width: 30%;
}
 
.column.one-fourth {
	width: 21.25%;
}

.column.auto {
	width: auto;
}

.column.flow-opposite { 
	float: right; 
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
 
.clearfix:after {
	clear: both;
}
 
.clearfix {
	*zoom: 1;
}

.row {
	overflow: hidden;
}

@media screen and (max-width: 860px) {
	.column.full,
	.column.two-thirds,
	.column.half,
	.column.one-third,
	.column.one-fourth,
	.column.auto {
		float: none;
		margin: 0;
		width: 100%;
	}
}

/********************************/
/*-------------MENU-------------*/
/********************************/
#menu-container.column {
	margin-left: 0;
}

#menu {
	display: block;
}

#menu ul li {
	display: inline-block;
	height: 9em;
	position: relative;
	margin: 0;
}

#menu ul li a {
	color: #74848D;
	display: block;
	height:100%;
	padding: 3em 1em 0;
	text-transform: uppercase;
	text-decoration: none;
}

/*
Removes the space between inline block elements
See more: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 
NB! The first two elements didnt have a gap between them for some reason, that's why it's excluded
*/
#menu > ul > li:not(:nth-child(-n+2)) {
	margin-left: -.45em;
}

#menu ul li:hover {
	background-color: #5EB299;
}

#menu ul li:hover a,
#menu ul li a:hover {
	color: #FFF;
}

#menu ul li.active {
	//background-color: #5EB299;
	background-color: #4286f4;
}

#menu ul li.active a {
	color: #FFF;
}

#menu ul li ul.dropdown {
	display: none;
	overflow: hidden;
	padding-top: .18em;
	min-width: 100%;
	position: absolute;
	z-index: 9999;
}

#menu ul li:active > ul.dropdown,
#menu ul li:hover > ul.dropdown {
	display: block;
}

#menu ul li ul.dropdown li{
	background-color: #5EB299;
	display: block;
	height: 3em;
	margin: 0;
	width: auto;
}

#menu ul li ul.dropdown li a{
	color: #FFF;
	display: block;
	padding: .5em 1em;
	text-transform: none;
	white-space: nowrap; /* this */
}

#menu ul li ul.dropdown li a:hover,
#menu ul li ul.dropdown li:hover a,
#menu ul li ul.dropdown li:hover {
	background-color: #9FE5C2;
}

.dropdown-btn-container {
	position: absolute;
	top: 5.3em;
	right: 1.5%;
	width: 2.9em;
}

.dropdown-btn {
	height: 3em;
	display: none;
}

.dropdown-btn:before {
	content: "";
	position: absolute;
	right: 0;
	top: 0.25em;
	width: 1.8em;
	height: 0.2em;
	background: #74848D;
	box-shadow:
		0 0.55em 0 0 #74848D,
		0 1.1em 0 0 #74848D;
}

.dropdown-btn:hover {
	text-decoration: none;
}

@media screen and (max-width: 860px) {
	.dropdown-btn {
		display: block;
	}

	#menu {
		display: none;
		margin-top: 1em;
	}

	#menu ul li ul.dropdown {
		left: 0;
		padding: 0;
		position: relative;
		top: 0;
		z-index: 3;
	}

	#menu ul li:hover > ul.dropdown {
		display: none;
	}

	#menu ul li {
		background-color: #5EB299;
		display: list-item;
		margin: 0 0 2em 0;
		height: auto;
	}

	#menu ul li.active {
		background-color: #74848D;
	}

	#menu > ul > li:not(:nth-child(-n+2)) {
		margin-left: 0; /*Empy gap reset*/
	}

	#menu ul li ul.dropdown li:first-child {
		margin-top: .3em;
	}

	#menu ul li ul.dropdown li a{
		background-color: #FCF5BF !important;
		color: #74848D;
		width: 100%;
	}

	#menu ul li a {
		color: #FFF;
		display: block;
		padding: .8em 0 .8em .8em;
		margin-bottom: 0;
	}
	

	div.hover {
		display:none;
	}

	#menu ul li.active a,
	#menu ul li.active,
	#menu ul li a:hover,
	#menu ul li:hover a,
	#menu ul li:hover {
		background-color: #9FE5C2;
		text-decoration: none;
	}

	#menu ul li ul.dropdown li a:hover,
	#menu ul li ul.dropdown li:hover a,
	#menu ul li ul.dropdown li:hover {
		background-color: #CFCA4C !important;
		color: #FFF;
	}
}
/********************************/
/*------LAYOUT AND STYLING------*/
/*------------OVERALL-----------*/
/********************************/
#wrapper {
	max-width: 1020px;
	margin: 0 auto;
	overflow: hidden;
	width: 95%;
	background-color: #FFF;
}

.global-width {
	padding: 0 1.5%;
}

.success_message {
	color: #5EB299;
	font-weight: bold;
}

.error_message {
	color: #745A33;
	font-weight: bold;
}

input.robot-detection {
	display: none;
}

/********************************/
/*------LAYOUT AND STYLING------*/
/*------------HEADER------------*/
/********************************/
header {
	margin-top: 2em;
}

header .header-top, 
header .header-bottom{
	position: relative;
	overflow: visible !important;
}

header hr {
	margin: 0;
}

#small-icons {
	margin-top: -2em;
	padding: .15em 0;
	background-color: #e1e1e1;
	text-align: right;
}

#small-icons .wrapping {
	text-align: right;
}

#logo-container {
	margin-right: 1.5%;
}

#logo-container{
	
}

#slideshow {
	position: relative;
	overflow: hidden;
}

/* Adds an invisible layer on top of the slideshow to remove the ability to swipe through images on touch devices.
Seems like an only option to get it working like that. Read more: https://groups.google.com/forum/#!forum/slidesjs */
#slideshow-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
}


#breadcrumb-container {
	height: 3.4em;
	padding: .75em 0;
}

#search-container {
	position: absolute;
	top: 0;
	right: 0;
}

#search-container form {
	font-size: 0;
}

#search-container input:not([type="submit"]) {
	display: inline-block;
	font-size: 18px;
	font-size: 1.8rem;
}

#search-container input[type="submit"]{
	display: inline-block;
	margin: 0 0 0 .2em;
}

.search-form-container {
	position: relative;
	display: none;
	float: left;
	margin-left: .5em;
	padding: .7em;
	background-color: #5EB299;
	white-space: nowrap;
}

.search-btn {
	background: url(../images/search.png);
  	background-image: url(../images/search.svg), none;
  	background-size: 3em;
  	background-repeat: no-repeat;
  	float: left;
  	height: 3.4em;
  	margin: .65em 0;
  	width: 3.5em;
}
@media screen and (max-width: 860px) {
	#search-container {
		position: relative;
		height: 3.4em;
		margin: .65em 0 2em;
	}

	.search-btn {
		float: left;
	}

	.search-form-container {
		margin: 0;
		float: left;
		width: 85%; /*Fallback for calculated width*/
		width: calc(100% - 3.5rem); /* 100% - the width of search icon */
	}
	#search-container form input[type="search"]{
		width: 80%; /*Fallback for calculated width*/
		width: calc(100% - 3.5rem); /* 100% - the width of submit button */
	}

	#breadcrumbs {
		display: block;
	}

}

/********************************/
/*------LAYOUT AND STYLING------*/
/*---------MAIN CONTENT---------*/
/********************************/
#content {
	font-size: 15px;
	font-size: 1.5rem;
	margin: 1.6em 0 2em;
	min-height: 300px;
}

#content p{
	text-align: justify;
}

@media screen and (max-width: 860px) {
	#content {
		margin-top: 1em;
	}
}
/********************************/
/*------LAYOUT AND STYLING------*/
/*-------RESPONSIVE TABLE-------*/
/********************************/
.responsive-table {
	width: 100%;
	border-collapse: collapse; 
}

.responsive-table th {
	background: #5EB299;
	color: #FFF;
	font-weight: bold;
}

.responsive-table th, td {
	text-align: left;
	padding: .6em;
	border: 1px solid #E1E1E1;
}

.responsive-table tr:nth-of-type(odd) {
	background: #eee;
}

@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	.responsive-table table, 
	.responsive-table thead, 
	.responsive-table tbody, 
	.responsive-table th, 
	.responsive-table td, 
	.responsive-table tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.responsive-table tr { border: 1px solid #ccc; }
 
	.responsive-table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}

	.responsive-table tr:nth-of-type(odd) td:not(:last-child) {
		border-bottom: 1px solid #FFF;
	}

	

	/* If thead tag is missing and header(th) is stated on the same row as cells(td), cells(td) are not sent to the right but to the left */
	.responsive-table:not(.has-thead) td,
	.responsive-table:not(.has-thead) tbody tr th ~ td {
		padding-left: 6px;
	}

	.responsive-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px;
		white-space: normal;
		text-align:left;
		font-weight: bold;
	}
 
	/* Label the data */
	.responsive-table td:before { 
		content: attr(data-title); 
	}
}



/********************************/
/*------LAYOUT AND STYLING------*/
/*------------FOOTER------------*/
/********************************/
footer {
	background-color: #e1e1e1;
	padding-top: 2.5em !important;
	padding-bottom: 2.5em !important;
}

.copyright {
	text-align: right;
}

@media screen and (max-width: 860px) {
	.copyright {
		text-align: left;
	}
}

#tableList {
    margin-top: 10px;
}
#tableList th,td{
    border: 1px solid #e1e1e1;
    padding: 0.6em;
    text-align: left
}
#tableList th {
    font-weight: 600;
    text-align: center;
}

.formDiv{
    float: left;
    display: block;
    width: 100%;
    border: 1px solid #e1e1e1;
}

#tableForm{
    //border: 1px solid #e1e1e1;
    margin:0 auto;
}

#tableForm th {
    padding-left: 20px;
    text-align: left;
    width: 50%;
}

#tableForm td,th{
    border: none;
}

#tableForm input, textarea {
    width: 100%;
}