/*
Thanks to W3Schools for the CSS tutorials!!
*/

body {
  font: 				12px verdana;
  line-height: 			140%;
  background-image: 	url("/images/bg.jpg");
  background-position: 	center;
  background-repeat: 	no-repeat; 
  background-size: 		cover;
  position: 			relative;
  margin:			 	0px;
}


.inlineheader {
	font-family:	verdana;
	font-size:		10pt;
	
}

/* Style the header */
.header {
  padding: 		10px 16px;
  background: 	#00cc66;
  color: 		#f1f1f1;
  position:		fixed;
  top:			0;
  width:		100%;
  z-index:		1;
  
}

.pixelspace {
  height:	3px;	
}

.mainfont {
	font-size: 15;
	font-stretch: epxanded;
	line-height: 1.5em;
	
}

/* Style the mainpage */
.mainpage {
  padding: 10px 16px;
  background: #dddddd;
  color: #111111;
  position:relative;
  top:80;
  left:10;
  width:70%;
  background-color: rgba(222,222,222,0.9);
}

/* Style the footer */
.newfooter {
  padding: 10px 16px;
  background: #000000;
  color: #f1f1f1;
  position:fixed;
  right:0;
  bottom:0;
  vertical-align:middle;
  width:200;
}

.footer {
	font-size:10px;
	color:#dddddd;
	font-weight:bold;
	text-decoration:none;
	display:block;
	}


.midTxt {
	position:fixed;
	bottom:11;
}

.nav {
  display: 		inline-block;
  padding: 		10px 16px;
  background: 	#444444;
  color: 		#f1f1f1;
  position:		fixed;
  right:		0;
  top:			0;
  z-index:		2;
}


.navButCont {
	display: inline-block;
}

.wrapper {
	display: flex;
}

.input-group {
	width:350;
	padding:5;
}
.input-group button {
 
  height:30;
  width:100;
		
}
.input2 {
	text-align:right;
    background-color:#ddd;	
	display: inline-block;
	width:200;
}
.label2 {
	width:60;
	text-align:left;
	
	display: inline-block;
}
.formBody {
	background: #aaa;
	padding:20;
	width:350;
	text-align:center;
	vertical-align:middle;
}



.histPic {
	width:			500;
	border-style:	solid;
    border-width:	1px;
    border-color:	#000000;
	text-align:		center;
}

.histPic img {
	width:			500;
}

.picDesc {
	width:			480;
	border-style:	solid;
    border-width:	1px;
	border-top: 	0;
    border-color:	#000000;
	font-size:		12px; 
	line-height: 	100%;
	background: 	#dddddd;
	padding:		10px;
	text-align:		center;
}


 .email_icon {
	 width: 20;
 }

.widthpixel {
	width:				10;
	height:				10;
	background-color:	red;
	display: 			inline-block;
}

.leftside50 {
	float:			left;
	width:			50%;
	border-style:	none;
    border-width:	1x;
    border-color:	#f0f0f0;
	
}

.leftside {
	display: 	inline-block;
	float:		left;
	width:		calc(100% - 400px);
}

.rightside {
  display: inline-block;	
  border-style:	solid;
  border-width:	1px;
  border-color:	#f0f0f0;
  /*flex: 		1; */
}

.navlink:link, .navlink:visited, .navlink:active {
  height:			17;
  width:			100;
  border-style:		solid;
  border-width:		1px;
  border-color:		#ffffff;
  padding: 			3px;
  font-weight:		bold;
  font-size:		10px;
  display:			block;
  text-decoration:	none;
  color:			#f1f1f1;
  vertical-align:	middle;
}

.navlink:hover {
 background-color: 	#f1f1f1; 
 color: 			#000000;
}

.elevantion_holder {
	text-align:		right;
	
}

.elevation {
	position:		relative;
	right:			-50;
	border-style:	solid;
	border-color:	#000000;
	height:			444;
	width:			500;
}

.blk_border {
	border-style:	solid;
	border-color:	#000000;
	
}
.bold {
	font-weight:	bold;
}

.i {
   font-style:		italic;
}

.small {
   font-style:	italic;
   font-size:	10px;
}

.bigmargin {
	margin:		10;
}

.center {
	text-align:center;
}

.floor_container {
	display: 	inline-block;
	width:		200;
	text-align:	center;
}

.container_text {
	position:	relative;
	font-size:	10;
	font-weight:bold;
	text-align:	center;
}

/* CSS for slideshow */

.fling-minislide {width:350px; height:300px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 100%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}


/* ################# */

/* CSS for Lightbox for floorplans etc. */


/* Styles the thumbnail */

a.lightbox img {
	width: 150px;
	border: 3px solid white;
	box-shadow: 0px 0px 8px rgba(0,0,0,.3);
	margin: 10px 20px 10px 20px;
}

.floorplan {
	opacity:60%;
}
.floorplan:hover {
	opacity:100%;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
	position: fixed;
	top: -100%;
	left:0;
	width:calc(100% + 40px);
	background: rgba(0,0,0,.7);
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
	overflow: hidden;
	z-index:5;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
	margin: auto;
	position: absolute;
	opacity:1;
	top: 0;
	left:0;
	right:0;
	bottom: 0;
	max-height: 0%;
	max-width: 0%;
	border: 3px solid white;
	box-shadow: 0px 0px 8px rgba(0,0,0,.3);
	box-sizing: border-box;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
	display: block;
	width:50px;
	height:50px;
	box-sizing: border-box;
	background: white;
	color: black;
	text-decoration: none;
	position: absolute;
	top: -80px;
	right: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
	content: "";
	display: block;
	height: 30px;
	width: 1px;
	background: black;
	position: absolute;
	left: 26px;
	top:10px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
	content: "";
	display: block;
	height: 30px;
	width: 1px;
	background: black;
	position: absolute;
	left: 26px;
	top:10px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
	opacity: 1;
	top: 0;
	bottom: 0;
}

.lightbox-target:target img {
	max-height: 100%;
	max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
	top: 0px;
}




/* CSS FOR THE TABS*/


dt {
  font-weight: bold;
}

dl {
  margin-bottom: 50px;
}

#bug:target {
  outline: 4px solid #ccc;
}

/**
 * tab panel widget
 */
.tabPanel-widget {
  position: relative;  /* containing block for headings (top:0) */
  background: #999;
}

/**
 * because labels come first in source order - we use z-index to move them in front of the headings
 */
.tabPanel-widget > label {
  position: absolute;
  z-index: 1;
}

/**
 * labels and headings must share same values so grouping declarations in this rule prevents async edits (risk of breakage)
 * line-height == height -> vertical centering
 * the width dictates the offset for all headings but the first one: left offset = width * number of previous heading(s)
 * note that width and offset of label/heading pair can be customized if necessary
 */

.tabPanel-widget > label,
.tabPanel-widget > h2 {
  font-size: 1.1em;
  width: 9em;
  height: 2em;
  line-height: 2em;
}

/**
 * position:relative is for the markers (the down arrow in tabs)
 */
.tabPanel-widget > h2 {
  position: relative;
  margin: 0;
  text-align: center;
  background: #999;
  color: #fff;
}

.tabPanel-widget > label {
  border-right: 1px solid #fff;  
}

/**
 * all first level labels and headings after the very first ones 
 */
.tabPanel-widget input,
.tabPanel-widget > label ~ label,
.tabPanel-widget > h2 ~ h2 {
  position: absolute;
  top: 0;
}


/**
 * We target all the label/heading pairs
 * we increment the :nth-child() params by 4 as well as the left value (according to "tab" width)
 */

.tabPanel-widget label:nth-child(1),
.tabPanel-widget h2:nth-child(3) {
  left: 0em;
}

.tabPanel-widget label:nth-child(5),
.tabPanel-widget h2:nth-child(7) {
  left: 9em;
}

.tabPanel-widget label:nth-child(9),
.tabPanel-widget h2:nth-child(11) {
  left: 18em;
}

.tabPanel-widget label:nth-child(13),
.tabPanel-widget h2:nth-child(15) {
  left: 27em;
}



/**
 * we visually hide all the panels
 * https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
 */
.tabPanel-widget input + h2 + div {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important; 
  width: 1px !important; 
  overflow: hidden;
}
/**
 * we reveal a panel depending on which control is selected 
 */
.tabPanel-widget input:checked + h2 + div {
  position: static !important;
  padding: 1em !important;
  height: auto !important; 
  width: auto !important; 
}

/**
 * shows a hand cursor only to pointing device users
 */
.tabPanel-widget label:hover {
  cursor: pointer;
}

.tabPanel-widget > div {
  background: #f0f0f0;
  padding: 1em;
}

/**
 * we hide radio buttons and also remove them from the flow
 */
.tabPanel-widget input[name="tabs"] {
  opacity: 0;
  position: absolute;
}


/** 
 * this is to style the tabs when they get focus (visual cue)
 */

.tabPanel-widget input[name="tabs"]:focus + h2 {
  outline: 1px dotted #000;
  outline-offset: 10px;
}


/**
 * reset of the above within the tab panel (for pointing-device users)
 */
.tabPanel-widget:hover h2 {
  outline: none !important;
}

/**
 * visual cue of the selection
 */
.tabPanel-widget input[name="tabs"]:checked + h2 {
  background: #333;
}

/**
 * the marker for tabs (down arrow)
 */
.tabPanel-widget input[name="tabs"]:checked + h2:after {
  content: '';
  margin: auto;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
}

/**
 * Make it plain/simple below 45em (stack everything)
 */
@media screen and (max-width: 45em) {
 
  .rightside {
	  display:  block  !important;
      position: static !important;
      height:   auto   !important; 
      width:    auto   !important; 
 	 
  }
 
 .leftside {
	  display:  block  !important;
      position: static !important;
      height:   auto   !important; 
      width:    auto   !important; 
 	 
 }
 .leftside50 {
	  display:  block  !important;
      position: static !important;
      height:   auto   !important; 
      width:    auto   !important; 
 	 
 }
 
 .email_icon {
	 width: 	40 !	important;
	 
 }
 
 .mainpage {
	 width:    95%   	!important; 
	 left:     0     	!important;
 }
 
.newfooter {
	left:		0		!important;
	width:      100%    !important;
	padding:    1px     !important;
	text-align: center  !important;
	font-size:  13		!important;
}
 
.midTxt {
	bottom:     11      !important;
	font-size:  18     !important;
}
 
.header {
    padding:    0 0 5 5  !important;
}	
 .navButCont {
	 width:				24%;
	 vertical-align: 	middle;
 }
  
.navlink {
	text-align: 		center 	!important;
	flex: 				1;
	align-items: 		center;
	justify-content: 	center;	
	vertical-align: 	middle	!important;
	width:				auto  	!important;
	height:				30		!important;
	border-style:		none	!important;
	border-width:		0		!important;
	font-size:			13px 	!important;
}

.pixelspace {
	display:    none    !important;
} 

.elevantion_holder {
	text-align:center;
	
}
.elevation {
	width:90% !important;
	left:0;
}


.histPic {
	width:90% !important;	
}

.histPic img {
	width:100% !important;	
}

.picDesc {
	width: 		calc(90% - 10px)	!important;
	padding:	5px 				!important;
	
}

.nav {
  height:			30;
  padding: 			0 		!important;
  position:			fixed;
  left:				0;
  top:				45;
  z-index:			2; 
  vertical-align:	middle;
}





.input-group {
	width:			auto 	!important;
	padding:		5;

}

.input2 {
	text-align:		right;
    display: 		inline-block;
	width:			200;
	
}
.label2 {
	
	width:			40;
	text-align:		left;
	display: 		inline-block;
}
.formBody {
	padding:		5		 !important;
	width:			auto 	 !important;
	text-align:		center;
	vertical-align:	middle;
}



 
  /* hide unecessary label/control pairs */
  .tabPanel-widget label,
  .tabPanel-widget input[name="tabs"] {
    display: none;
  }
  
  /* reveal all panels */
  .tabPanel-widget > input + h2 + div {
    display: block !important;
    position: static !important;
    padding: 1em !important;
    height: auto !important; 
    width: auto !important; 
  }
  
  /* "unstyle" the heading */
  .tabPanel-widget h2 {
    width: auto;
    position: static !important;
    background: #999 !important;
  }
  
  /* "kill" the marker */
  .tabPanel-widget h2:after {
    display: none !important;
  }

}

/* END CSS FOR TABS*/