/*        ______________________
        SCREENSTYLES

        www.bellwald-chalet.ch

        Version: 16.09.2016

        Thomas Spörri
        _______________________ */



/*/////////////Reset/////////////*/

html, body {
	width: 						100%;
	height:						100%;
}

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, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 					0;
	padding:					0;
	border:						0;
	font-size:				100%;
	font:							inherit;
}

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

ol, ul {
	list-style:				none;
}

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

/*/////////////General/////////////*/

body {
	background:				#111 url(../links/bg.jpg) repeat center top;
	color: 						#fff;
	font-family: 			'Yanone Kaffeesatz', sans-serif;
	font-size:				100%;
	font-weight:			300;
	line-height: 			1.5;
}

header, .wrapper, .colone, .info, footer {
	margin: 					0 auto;
	width:						950px;
}

a {
	color:						#cda14a;
	text-decoration:	none;
	border-bottom: 		3px solid #cda14a;
}

a:focus, a:hover, a:active {
	color: 						#fff;
	text-decoration:	none;
	border-bottom: 		3px solid #fff;
}

p, a, article ul, input, textarea, select, button {
	font-family: 			'Yanone Kaffeesatz', sans-serif;
	font-size:				1.4rem;
}

p, article ul {
	padding:					0 0 1.0rem 0;
}

h1, h2, h3, h4, h5, h6 {
	color:						#fff;
	font-family:			'Francois One', sans-serif;
}

h1 {
	font-size:				2.5rem;
}

h2 {
	color: 						#cda14a;
	font-size:				1.8rem;
	padding:					0 0 0.5rem 0;
}

h3 {
	color: 						#cda14a;
	font-size:				1.2rem;
	padding:					0 0 0.5rem 0;
}

img {
	max-width:				100%;
	height:						auto;
}

#headerinfo {
/* display: 					none; */
	background-color: #7e0000;
	margin-bottom: 		0.5rem;
	text-align: 			center;
}

.info {
	text-align: 			center;
}

.info p {
	display: 					inline-block;
	font-family:			'Francois One', sans-serif;
	font-size: 				1.2rem;
	padding: 					0.2rem 0 0.3rem 0;
}

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

nav {
	text-align:				center;
}

nav div {
	border-bottom:		3px double #fff;
	color:						#fff;
	font-family:			'Francois One', sans-serif;
	font-size:				2.0rem;
	letter-spacing: 	0.1rem;
	line-height: 			1;
	padding: 					0.8rem 0;
	text-transform:		uppercase;
}

nav ul {
	list-style-type:	none;
	margin:						0.4rem 0 0.9rem 0;
	padding:					0.4rem 0;
}

nav ul li {
	display: 					inline-block;
}

nav ul li a {
	border-bottom:		none;
	border-right:			1px solid #fff;
	color:						#fff;
	font-family:			'Francois One', sans-serif;
	font-size:				1.5rem;
	padding:					0.2rem 0.75rem 0.2rem 0.75rem;
}

nav a:focus, nav a:hover, nav a:active {
	border-bottom:		none;
	color: 						#cda14a;
}

nav .last {
	border-right:			none;
}

nav .active {
	color:						#cda14a;
}

.extlink a {
	background: 			#cda14a;
	border-bottom:		none;
	border-right:			none;
	color:						#000;
}

.extlink a:focus, .extlink a:hover, .extlink a:active {
	color:						#fff;
}

svg {
	height: 					1.5rem;
	margin: 					0 0.4rem 0 0;
  stroke-width:			7.8125%;
  stroke-linejoin:	round;
  stroke-linecap:		round;
  width:	 					1.5rem;
}

/*/////////////Main/////////////*/


article {
	margin: 					1.5rem 0.5rem 0 0.5rem;
}

.colleft {
	float: 						left;
	width: 						47%;
}

.colright {
	float: 						right;
	width: 						47%;
}

.leadpics img {
	border:						8px solid silver;
	border-radius:		2px;
}

.popup-gallery img {
	border:						6px solid silver;
	border-radius:		2px;
}

.popup-gallery img:hover {
	border-color:			#cda14a;
}

#map {
	height:						400px;
	width: 						100%;
}

#map a {
	border-bottom:		none;
	font-family:			Roboto, Arial, sans-serif;
}


.info_content p, .info_content a {
	font-size: 				1.2rem;
}

.info_content p {
	color:						#000;
	padding:					0;
}

.info_content a {
	color:						#000;
	padding:					0;
	border-bottom: 		3px solid #cda14a;
}

.info_content a:focus, .info_content a:hover, .info_content a:active {
	color: 						#cda14a;
	text-decoration:	none;
	border-bottom: 		3px solid #fff;
}

p.label {
	background-color:	#fff;
	border-radius:		0.15rem;
	color:						#000;
	display:					inline;
	font-weight:			700;
	padding:					0.1rem 0.3rem;
}

article li {
	padding:					0 0 0.3rem 0;
	list-style-type:	square;
}

div.popup-gallery a {
	color:						#fff;
	border-bottom: 		none;
}

div.popup-gallery a:focus, div.popup-gallery a:hover, div.popup-gallery a:active {
	color:						#cda14a;
	border-bottom: 		none;
}

figure {
  display: 					inline-block;
  vertical-align: 	top;
}

figure a {

  padding-left: 		4px;
  padding-right: 		4px;
  padding-bottom: 	1rem;
  text-align:				center;
}

figcaption {
  font-weight: 			400;
  line-height: 			1;
  max-width:				300px;
  padding:					0;
  text-align:				center;
}

figcaption .mfp-title {
  font-size: 				1.4rem;
}

figcaption .mfp-counter {
  font-size: 				1rem;
}

.portrait figcaption {
  max-width:				167px;
  padding: 					0 6px;
}

.landscape figcaption {
  max-width:				227px;
}

button.mfp-close {
	margin:				 		0;
}

iframe {
	height:						350px;
	margin:						1rem 0;
	overflow: 				scroll;
	width: 						100%;
}

/*/////////////Formular/////////////*/

fieldset {
	padding: 					0.5rem 0 0 0;
}

input, textarea, select {
	background:				rgba(255, 255, 255, 0.4);
	border: 					1px solid silver;
	border-radius:		4px;
	color: 						#000;
	padding:					2px 10px; 
	outline:					none;
}

span.adress	{
	width: 						100%;
}

span.adress-plz	{
	width: 						20%;
}

span.adress-city	{
	width: 						74%;
}

textarea, input#input_3, input#input_4, input#input_10, input#input_11, input#input_12_addr_line1, input#input_12_city {
	width: 						80%;
}

select#input_12_country {
	width: 						85%;
}

input#input_7, input#input_12_postal {
	width: 						50%;
}

fieldset label {
	color:						#fff;
	font-family:			'Francois One', sans-serif;
	font-size: 				1.3rem;
	padding: 					0.2rem 0 0.8rem 0;
}

.form-sub-label-container {
	display: 					inline-block;
}

.block {
	vertical-align: 	top;
	padding-left: 		0.5rem;
}

.form-sub-label-container label {
	color:						#fff;
	font-family: 			'Yanone Kaffeesatz', sans-serif;
	font-size: 				1.2rem;
	line-height: 			1;
}

.date-separate {
	padding: 					0 0.3rem;
}

.form-sub-label {
	display:					block;
}

button {
	background-color: #cda14a;
	border: 					none;
	border-radius: 		4px;
	box-shadow:				none;
	color: 						#fff;
	margin:				 		1rem;
	padding: 					0.45rem 0.6rem;
	text-shadow: 			none;    
}

button:hover {
	color: 						#000;   
}

span.form-required {
	color: 						#b40e0e;
	font-weight: 			700;
	padding-left: 		5px; 
}

.form-line-error .form-error-message {
	clear:						both;
	float:						none;
	color:						#b40e0e;
	margin-bottom:		3px;
	padding:					6px;
}

.form-line-error input, .form-line-error input, .form-line-error textarea, .form-line-error select {
	border: 					1px solid #b40e0e;
}

div.calendar.popup {
	margin-left:			-40px;
	margin-top:				-100px;
	z-index:					100000;
}

div.calendar {
	box-shadow:				0 0 8px rgba(0, 0, 0, 0.5);
	color:						#000;
}

div.calendar table {
	background-color: #eee;
	border:						1px solid #aaa;
	border-collapse:	collapse;
}

div.calendar thead {
	background-color: white;
}

div.calendar td, div.calendar th {
	font-size:				1.1rem;
	padding:					1px;
	text-align:				center;
}

div.calendar td.title {
	font-weight: 			700;
}

div.calendar .title, div.calendar .button {
	color:						#000 !important;
}

div.calendar th {
	background:				#ddd none repeat scroll 0 0;
	border-bottom:		1px solid #ccc;
	border-top:				1px solid #ccc;
	color:						#555;
	font-weight:			700;
}

div.calendar tr.days td {
	color:						#555;
	cursor:						pointer;
	text-align:				center;
	width:						1.6em;
}

div.calendar tr.days td:hover:not(.unselectable), div.calendar td.button:hover:not(.unselectable) {
	background-color: #cda14a;
	cursor:						pointer;
}
.unselectable {
	cursor:						default !important;
}

div.calendar td.weekend {
	background:				#b5cfe9 none repeat scroll 0 0;
}

div.calendar .today {
	background:				#b40e0e none repeat scroll 0 0 !important;
	color:						#fff !important;
}

#cid_2 a {
	border-bottom: 		none;
}

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

footer {
	clear: 						both;
	padding: 					1.5rem 0 1rem 0;
	text-align:				center;
}

footer ul {
	list-style-type:	none;
	padding:					0.2rem 0 0.8rem 0;
}

footer ul li {
	display: 					inline-block;
	padding:					0 1.7rem;
	vertical-align: 	top;
}

footer p, footer a {
	border-bottom:		none;
	color:						#fff;
	display: 					inline-block;
	font-size:				1.3rem;
	font-weight:			400;
	line-height: 			1.2;
	text-align: 			left;
	vertical-align: 	top;
}

footer a:focus, footer a:hover, footer a:active {
	border-bottom:		none;
	color: 						#cda14a;
}

footer img {
	vertical-align: 	middle;
	padding-right: 		0.3rem;
}

/* Tiny Desktops */
@media only screen and (max-width: 768px) {
	
	header, .wrapper, .colone, .info, footer {
		margin: 				0 auto;
		width:					100%;
	}
	
	.colleft, .colright {
		width: 					100%;
	}
	
	p, a, article ul, input, textarea, select, button {
		font-size:			1.3rem; /* 1.4rem */
	}

	h1 {
		font-size:			1.875rem; /* 2.5rem */
	}

	h2 {
		font-size:			1.35rem; /* 1.8rem */
		padding:				0 0 0.5rem 0; /* 0 0 0.5rem 0 */
	}
	
	h3 {
		font-size:			1.1rem; /* 1.35rem */
		padding:				0 0 0.5rem 0; /* 0 0 0.5rem 0 */
	}
	
	nav div {
		font-size:			1.5rem; /* 2.0rem */
		letter-spacing: 0.1rem;
		padding: 				0.8rem 0;
	}
	
	nav ul {
		padding:				0.4rem 0 0.9rem 0;
	}
	
	nav ul li {
		padding:				0 0 0.5rem 0;
	}

	nav ul li a {
		font-size:			1.3rem; /* 1.5rem */
		padding:				0.2rem 0.6rem 0.2rem 0.6rem; /* 0.2rem 0.8rem 0.2rem 0.8rem */
	}
	
	svg {
		height: 				1.3rem; /* 1.5rem */
		margin: 				0 0.4rem 0 0;
		width:	 				1.5rem;
	}
	
	article li {
		list-style-position: inside;
	}
	
	#map {
		height:					300px;
	}
	
	iframe {
		height:					300px;
	}

	footer ul {
		display:				inline-block;
		text-align:			left;
	}
	
	footer ul li {
		display: 				block;
	}

	footer p, footer a {
		font-size:			1.2rem; /* 1.3rem */
	}
}