/************************************************************************************
Defaults & Reset
*************************************************************************************/
/* CSS 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, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; }

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


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

html, body { height: 100%; width: 100%;	line-height: 1.5em; font-family:'Droid Sans', sans-serif; }

body {
	-webkit-text-size-adjust: 100% !important;
	color: #222222;
	background-color: #ffffff;
	font-size: 1em; 
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
}

*,
*:after,
*:before {
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

a,
a:link,
a:visited { text-decoration: none; color: #000000 }

a:active,
a:hover { text-decoration: none; color: #666666}

a.hvid { color: #ffffff; }

a.rod { color: #ff0000; font-weight: bold; }

a.knap {
	padding: 12px;
	background-color: #113355;
	text-transform: uppercase;
	color: #ffffff !important;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 5px;
	font-size: 14px;
	line-height: 14px;
}

h1, h2, h3 { margin-bottom: 25px; line-height: 1.5; }

h4 { font-size: 1.8em; margin-bottom:  1.8em; line-height: 1; }

p { padding: 0px; margin: 0px; }

strong, .Bold, b { font-weight: bold; }

.hidden { display: none }

span.alert {
	color: #ff0055;
	font-weight: bold;
	font-size: 10px; 
}

.error {
	color: #ff0055;
	font-weight: bold;
	font-style: italic;
}

form {
	min-width: 50%;
	display: table;
}

form table tr td {
	width: auto;
}

input {
	font-family:'Droid Sans', sans-serif;
}

button:focus,
input:focus,
select:focus {
	outline:0;
}

input[type="submit"] {
    padding: 12px;
    background-color: #113355;
    text-transform: uppercase;
	color: #fff !important;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
    border-radius: 5px;
    font-size: 14px;
    line-height: 14px;
}

input[type="submit"]:hover {
	background-color: #1e5988;
}

input[type="tel"],
input[type="text"],
input[type="email"] {
    padding: 9px 8px !important;
	font-size: 14px;
	box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid #cecece;
	width: auto;
	min-width: 170px;
	text-align: right;
}

input[type="email"] {
}

select {
    padding: 9px 8px !important;
	box-sizing: border-box;
	border: 1px solid #cecece;
    border-radius: 3px;
    outline: none;
	line-height: initial;
	cursor: pointer;
}

#vaelg_dato select {
	margin-right: 10px;
    float: left;
}

#salgsbetingelser input,
#salgsbetingelser label {
	cursor: pointer;
}

#salgsbetingelser a {
	text-decoration: underline;
}

/************************************************************************************
Header
*************************************************************************************/

.header {
	width: 100%;
}

.header .branding {
	margin: 0 auto;
	text-align: center;
}

.header .branding .logo {
	margin-bottom: 20px;
	margin-top: 20px;
	max-width: 800px;
	width: 90%;	
}

/************************************************************************************
Navigation
*************************************************************************************/

.navigation {
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
}

.navigation .menu-wrapper {
    float: left;
    width: 100%;
    padding: 0;
}

.navigation .menu-wrapper .menu-item {
    float: left;
    list-style: none;
    margin-top: 5px;
	margin-right: 5px;
}

.navigation .menu-wrapper .menu-item:last-of-type {
	margin-right: 0;
}

.navigation .menu-wrapper .menu-item a {
	padding: 9px 9px 9px 9px;
	background-color:#113355;
	text-transform:uppercase;
	font-size:16px;
	display:inline-table;
	color: #ffffff;
}

.navigation .menu-wrapper .menu-item-adhoc a {
	background-color:#a60237;
}

/************************************************************************************
Content
*************************************************************************************/

.content {
	max-width: 1280px;
	width: 100%;
	min-height: 200px;
	border: 1px solid #ccc;	
	padding: 10px;
	font-size: 1em;
	box-sizing: border-box;
	color: #222222;
	display: table;
}

/************************************************************************************
Booking
*************************************************************************************/

.book-link {
	padding: 12px;
    background-color: #113355;
    text-transform: uppercase;
    color: #fff !important;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 5px;
    font-size: 14px;
	line-height: 14px;
	display: inline-block;
}

.book-link:hover {
	background-color: #1e5988;
}

.book-soeg-felt {
	border: 1px solid #cccccc;
	margin-right: 10px;
}

.book-soeg-knap {
	padding: 11.5px !important;
	/* margin: 0 0 10px 10px; */
    background-color: #113355;
    text-transform: uppercase;
    font-size: 1em;
    display: inline-table;
    color: #fff;
    border: 0;
    cursor: pointer;
}

.book-soeg-knap:hover {
	background-color: #1e5988;	
}

.book-link:disabled,
.book-soeg-knap:disabled {
    background-color: #777777;
	color:#ccc;
}

.red	{
	color:#a60237;
}

/************************************************************************************
Footer
*************************************************************************************/

.footer {
	display: table;
	width: 100%;
}

/************************************************************************************
Tabeller
*************************************************************************************/

#main-table	{
	max-width: 1280px;
	width: 100%;
	}

#main-td	{
	border: 1px solid #cccccc;
	padding: 5px;
	}

td.kalender
{
	color:#000000;
	font-size: 10px;
}

td.garanti
{
	color:#000000;
	font-size: 12px;
}

td.kort
{
	color:#000000;
	font-size: 11px;
}

table.dokumentation
{
	color:#000000;
	font-size: 9px;
}

table.hoved
{
	border-color: #5C5C5C;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
}

table.main
{
    border-color: #5C5C5C;
    border-width: 0px 0px 0px 0px;
    border-style: solid;
}

td.window
{
    border-color: #5C5C5C;
    border-width: 2px 2px 2px 2px;
    border-style: solid;
	color:#000000;
	font-size: 14px;
}

td.bund
{
	color:#ffffff;
	font-size: 12px;
}

td.top
{
	color:#ffffff;
	font-size: 12px;
}


/************************************************************************************
Default
*************************************************************************************/

.row h4 {
	font-size: 1.5em;
	margin: 0 0 10px 0;
}

.row {
	float: left;
	margin: 10px 0;
	box-sizing: border-box;
}

.row-full {
	width: 100%;
}

.row-half {
	width: 50%;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.row table td {
	width: 50%;
	vertical-align: top;
}

/************************************************************************************
Form
*************************************************************************************/

input.knap {
	background-color: #EF9B49;
	color:#336666;
}


/************************************************************************************
Broliste
*************************************************************************************/

.bro-go-back {
	text-align: center;
	margin-top: 20px;
}

.bro-title {
	text-align: center;
	font-size: 2.4em;
	margin-bottom: 10px;
}

.bro-count {
	text-align: center;
	margin-bottom: 20px;
}

.broer {display: block !important;}

.broer ul {list-style:none; margin:0;}
.broer ul li {background: #eee; padding: 0; text-align:center; margin-bottom:10px;}
.broer ul li a, .broer ul li a:visited {background: #999; display: block; padding:8px; color: #fff;  -webkit-transition: ease-in-out background 0.3s; -moz-transition: ease-in-out background 0.3s; transition:  ease-in-out background 0.3s;}
.broer ul li a:hover {background: #666;}

table.bro div p {
    line-height: 30px;
}

table.bro div .baaddimensioner {
    font-size: 12px;
    width: 100%;
    display: block;
    line-height: 14px;
    padding-bottom: 6px;
}



table.bro { width: 80%; margin: 0 auto; padding: 0; border: none; text-align: center; }
table.bro div { margin: 0; padding: 0; line-height: 50px; cursor: default; }

table.bro td.kaj { background: #eaeaea; width: 20%; content:" ";}

table.bro td { width: 25%; }

table.bro td.leftside { width: 40% !important; padding: 5px 0 5px 0; }
table.bro td.leftside div { background: #fff;  padding: 0 10px; display: block; border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; position: relative; }
table.bro td.leftside div:before { content:""; position: absolute; left: -30px; top: 0; width: 0; height: 0; border-top: 25px solid transparent; border-right: 30px solid #fff; border-bottom: 25px solid transparent; }

table.bro td.rightside { width: 40% !important; padding: 5px 0 5px 0; }
table.bro td.rightside div { background: #fff; padding: 0 10px; display: block; border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; position: relative;}
table.bro td.rightside div:before { content:""; position: absolute; left: 100%; top: 0; width: 0; height: 0; border-top: 25px solid transparent; border-left: 30px solid #fff; border-bottom: 25px solid transparent; }

table.bro td.optaget div { color: #226699; margin: 10px 10% 0; }
table.bro td.ledig div { color: #226699; margin: 10px 10% 0; }
table.bro td.ledig div { background: rgba(255, 255, 255, 0.5); }
table.bro td.ledig div:before { border-left-color: rgba(255, 255, 255, 0.5); border-right-color: rgba(255, 255, 255, 0.5); }

table.bro td.ledig div { background: rgba(215, 232, 86, 0.75); color: #fff; }
table.bro td.ledig.leftside div:before { border-right: 30px solid rgba(215, 232, 86, 0.75); }
table.bro td.ledig.rightside div:before { border-left: 30px solid rgba(215, 232, 86, 0.75); }


table.bro td.optaget a:hover { color: #a8253a; }

.land {background: #eaeaea; }
.vand {background: #a3ccff url('http://struerhavn.dk/cms-billeder/vand-2.jpg') center center ; background-size: cover;  }




table.bro td div .baadplads {
	position: absolute;
    border-radius: 100%;
    background-color: #efefef;
    width: auto;
    padding: 6px;
	min-width: 28px;
	height: 28px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid;
    color: #000000;
	border-color: rgb(34, 102, 153);
	font-size: 14px;
	line-height: 15px;
}

table.bro td div .baadtype {
    width: 16px;
    display: inline;
    padding: 0 5px;
    position: absolute;
    border-radius: 100%;
    background-color: #efefef;
    padding: 5px;
    border: 1px solid;
	border-color: rgb(34, 102, 153);
	box-sizing: unset;
}

table.bro td.leftside div .baadplads {
    right: -10px;
    top: -5px;
}

table.bro td.leftside div .baadtype {
    right: -9px;
    top: 28px;
}

table.bro td.rightside div .baadplads {
    left: -10px;
    top: -5px;
}

table.bro td.rightside div .baadtype {
    left: -10px;
    top: 28px;
}
/************************************************************************************
fastligger betalings oversigt
*************************************************************************************/

.fastligger-betaling-oversigt {
	width: 50%;
	margin-bottom: 20px;
	padding: 10px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.fastligger-betaling-oversigt table tr td:first-of-type {
	width: 70%;
}

.fastligger-betaling-oversigt table tr td:last-of-type {
	width: 30%;
}

/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 1280px) {
	.navigation {
		margin: 0 4% 20px 4%;
		width: 92%;
	}

	.content {
		margin: 0 4%;
		width: 92%;
	}

	.footer {
		margin: 0 4%;
		width: 92%;
	}
}

@media screen and (min-width: 769px) {
	.menu-wrapper {
		display: initial !important;
	}
}

@media screen and (max-width: 768px) {
	.row-half {
		width: 100%;
		margin-bottom: 10px;
	}

	.row-half:last-of-type {
		margin-bottom: 0;
	}

	.row-half > .row-half {
		width: 50%;
	}

	.navigation {
	}

	.navigation .menu-toggle {
		width: 100%;
		text-align: center;
		display: block;
		font-size: 14px;
		padding: 23px 20px;
		color: #113355;
	}

	.navigation .menu-toggle:before {
		content: '≡ ';
	}

	.navigation .menu-wrapper {
		display: none;
	}

	.navigation .menu-wrapper .menu-item {
		width: 100%;
		margin: 0;
		text-align: center;
	}

	.navigation .menu-wrapper .menu-item a {
		color: #113355;
		background-color: #ffffff;
		padding: 23px 20px;
		font-size: 14px;
		width: 100%;
	}

	.navigation .menu-wrapper .menu-item-adhoc a {
		background-color: #a60237;
		color: #ffffff;
	}

	form {
		width: 100%;
	}
	
	table.bro {
		width: 90%;
	}
	.fastligger-betaling-oversigt {
		width: 100%;
	}
}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {
	.row-half > .row-half  {
		width: 100%;
	}

	#main-td {
		font-size:16px;
	}

	table {
		width: 100%;
	}
}

@media screen and (max-width: 448px) {
	table.bro {
		width: 100%;
	}

	table.bro td.kaj {
		width: 1%;
	}

	table.bro td.leftside div,
	table.bro td.rightside div {
		padding: 0 5px;
		border-radius: 5px;
	}

	table.bro td.leftside div:before,
	table.bro td.rightside div:before {
		display: none;
	}

	
	table.bro div .baaddimensioner {
		font-size: 10px;
	}
}