@charset "utf-8";
/* CSS Document */
body	{
	background-image:url(floral_dim.jpg);
	background-color:#B00300;
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #DDD;
	font-size:13px;
	}

img, img a, img a:link, img a:visited, img a:hover {
	border:0;
	}
	
#pagewrapper	{
	margin:0 auto;
   //margin:0 0 0 0;
	padding-top:30px;
	max-width:1015px;
	background-image:url(back_top_black.png);
	background-repeat:no-repeat;
	}
#header		{
	//margin-left:25px;
	max-width:100%;  //970px;
	height:398px;
	}

@media screen and (min-width: 520px) {
#header		{
	//margin-left:25px;
   margin-left:0px;
	max-width:970px;
	height:398px;
	background:url(header_right.jpg)  789px 16px no-repeat;
	}
}
#logo	{
	float:left;
	margin:100px 30px 0 25px !important;
 	margin:100px 30px 0 12px;
	}

#title	{
	float:left;
	//margin:6px 0px 13px 12px;
   margin:0px 0px 0px 0px;
	max-width:528px;

	}
	
#headerfotos{
	float:left;
	margin-bottom:12px;
	background-image:url(pool-seaview-start.jpg);
	max-height:288px;
	max-width:604px;
	background-color:#000000;
	}
		
#menu	{
	float:left;
	max-width:969px;
	height:28px;
	background-color:#999999;
	background-image:url(menu_back.jpg);
   margin:0 24px;
	}

#menu_hor	{
	 height:24px;
	 margin:0;
	 padding-top:4px;
	}
	
#menu_hor ul {
	list-style:none;
	color:#CCCCCC;
	padding-left:170px;
	margin:0px;
	}

#menu_hor li {
	float:left;
	}
	
#menu_hor a, #menu_hor a:visited {
	color:#CCC;
	text-decoration:none;
	padding:3px 15px;
	background:url(menu_knp.jpg) no-repeat right;
	}
	
#menu_hor a:hover	{
	color:#FFFD46;
	text-decoration:none;
	background:url(menu_over.jpg) right no-repeat;
	}
	
.left	{
	background:url(menu_knp.jpg) left no-repeat;
}
	
#content-container	{
	//max-width:1015px;
   margin:0 0 0 0;
   max-width:100%;
	background-image:url(back_mid_black.png);
	}
	
#content	{
	 margin:0 47px;
    //margin:0 0 0 0;
	 padding-top:20px;
	 padding-bottom:12px;
	}
	
.col-left	{
	float:left;
	max-width:550px;
	//margin-left:34px;
   margin-left:0px;
   	}
	
.bodytext	{
	clear:both;
	max-width:720px;
	margin:0 0 0 34px;

	}
	
.col-right	{
	float:right;
	max-width:300px;
 	}
		
#contact	{
	float:left;
   margin-left:30px;
   margin-right:30px;
  	//width:844px;
	padding:6px 38px;
	color:#FFFD46;
	border:0px solid #CC0000;
	line-height:20px;
	background-color:#333;
	}
	
#contact a 	{
	text-decoration:underline;
	}
	
.updated	{
	float:left;
	font-size:10px;
	text-align:center;
	max-width:920px;
	}
		
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#footer		{
	width:100%; //1015px;
	height:70px;
	background:url(back_foot_black.png) no-repeat ;
 	margin:0 0 0 0;
	}
	

.style1 {font-size: small}

a:link {
	color: #CC0000;
	color:#FFFD46;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CC0000;
	color:#FFFD46;
}
a:hover {
	text-decoration: underline;
	color: #CC0000;
	color:#FFFD46;
}
a:active {
	text-decoration: none;
}
.rates {
	font-weight: bold;
	color: #CC9900;
}

h1	{
	color:#CC0000;
	//border-bottom:1px #CC0000 dotted;
	width:100%;
	padding-bottom:10px;
	margin-bottom:20px;
	padding-left:30px;
   max-width:100%;
   height:auto;
	font-size:24px;
	background:url(point.jpg) left no-repeat;
	}
	
h2 {
	color:#CC0000;
	}
	
.inspring {
	//margin-left:30px;
	margin-right:100px;
	line-height:1.4em;
	}
	
caption	{
	color:#CC9900;
	font-size:14px;
	font-weight:bold;
	}
	
.tblborder	{
	border:1px solid #222;
	}
	
img	{border:0px;}

#photoalbum 	{
	align:center;
	}
#photoalbum img {
	border:3px solid #000000;
	}
   
   
.c1 {font-family:arial;color:blue;}
.c2 {font-family:arial;;font-weight:italic;font-weight:bold;color:blue;}
.c3 {font-family:arial;color:black;}
.c4 {font-family:arial;;font-weight:italic;color:silver;}
.c5 {font-family:arial;font-weight:italic;color:red;}
.c6 {font-family:arial;font-weight:bold;color:black;}
.c9 {font-family:arial;font-weight:italic;color:blue;}




//--------------------------------------------------------------------------------------------------------------------------------


.vmenu { display: none; }
.hmenu { display: block; }
.vfooter { display: none; }
.hfooter { display: block; }


 @media only screen and ( max-width: 767px) {
   .hmenu { display: none; }
   .vmenu { display: block; }
   .hfooter { display: none; }
   .vfooter { display: block; }


 }




.bar {
	text-align:center;
   align:center;
	background:#CCC;
   color:black;
	padding:4px;
}



   .col-100 {
       float: left;
       width: 100%;
       margin-top: 6px;
       text-align:center;
       background:inherit;
       vertical-align: text-bottom;
   }


   .col-25 {
       float: left;
       width: 30%;
       margin-top: 6px;
       text-align:right;
       background:inherit;
       vertical-align:text-bottom;
   }


   .col-75 {
       float: left;
       width: 70%;
       margin-top: 6px;
       text-align:left;
       background:inherit;
       vertical-align: text-bottom;
   }

   .col-50 {
       float: left;
       width: 50%;
       margin-top: 6px;
       background:inherit;
       vertical-align: text-bottom;
   }


   /* Clear floats after the columns */

   .clr:after {
       content: "";
       display: table;
       clear: both;
   }

   .smallscreen {display:none}
   .widescreen {display:block}


   .textarea    {border:1px solid;border-color:gray;width:95%;max-width:270px;}
   .input   {width:95%;max-width:270px;}
   .input-2 {width:95%;max-width:210px;}
   .dropdown {width:95%;max-width:270px;}
   .even    {background: black;}
   .odd  {background: black;}
   .mid     {background: black;}
   .basis   {background: #black;color:white;}
   .hide    {display:none}
   .fulltext { display:block}
   .shorttext { display:none}

   @media screen and (max-width: 520px) {
         .fulltext { display:none}
         .shorttext { display:block}
         .input {width:95%;max-width:270px;}
         .input-2 {width:95%;max-width:270px;}
         .dropdown {width:95%;max-width:270px;}
         .textarea  {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; display:block; width:95%;margin:0; padding:4px;border:1px solid #333;overflow-y:auto;overflow-x:hidden;border-color:gray;max-width:270px;}
         .col25,.col50, .col75 { width: 100%; margin-top: 0;text-align:left; }
         .smallscreen {display:block;}
         .widescreen {display:none;}


			#footer		{
				max-width:1015px;
				height:70px;
				//background:url(back.png) top left;
				margin:0;
				}

			#content-container	{
				//max-width:1015px;
			   margin:0 0 0 0;
			   max-width:100%;
				background-image:url(back.png);
				}

			#content	{
			    margin:0 0 0 0;
				 padding-top:20px;
				 padding-bottom:12px;
             background-image:url(back.png);
				}


			#pagewrapper	{
				//margin:0 auto;
			   margin:0 0 0 0;
				padding-top:30px;
				max-width:1015px;
				background-image:url(back.png);
				//background-repeat:no-repeat;
				}

		body	{
			background-image:url(back.png);
			background-color:black;
			margin:0;
			padding:0;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			color: #DDD;
			font-size:13px;
			}

			.bodytext	{
				clear:both;
				max-width:720px;
				//margin:0 0 0 34px;
			   margin:0 0 0 0;
				}

   }


   /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
   @media screen and (max-width: 359px) {
       .col-25,.col-50, .col-75, #linesendbutton, input[type=submit] { width: 100%; margin-top: 0;text-align:left; }
         //.col-25 { display:none}
         .hide {display:block;}
         .even {background-color: #FFF;}
         .odd {background-color: #EAF3F3;}
         .mid    {background-color: #dee2e2;}
         .basis {background: black; color:white;}
         .input {width:95%;max-width:270px;}
         .input-2 {width:95%;max-width:210px;}
         .dropdown {width:95%;max-width:270px;}
         .textarea  {     -moz-box-sizing:border-box;
                      -webkit-box-sizing:border-box;
                      box-sizing:border-box;
                      display:block;/*reset from inline*/
                      width:95%;
                      margin:0;/*remove defaults*/
                      padding:4px;
                      //background:#EEF;
                      border:1px solid #333;
                      overflow-y:auto;/*resets IE*/
                      overflow-x:hidden;/*resets IE*/
                      border-color:gray;
                      max-width:270px;
                     }
         .fulltext { display:block}
         .shorttext { display:none}
         .smallscreen {display:block;}
         .widescreen {display:none;}



   }

.autosize{
    width: 100%;
    height: auto;
}


/*------------ Menu smallscreen ----------------------*/


.dropbtn
{
    background-color: #eee;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width:100%;
}

.drpdwn
{
    position: relative;
    display: inline-block;
    width:100%;
}

.drpdwn-content
{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.drpdwn-content a
{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; line-height:25px;

}

.drpdwn-content a:hover {background-color: silver;color:black;}

.drpdwn:hover .drpdwn-content
{
    display: block;
}

.drpdwn:hover .dropbtn
{
    background-color:#eee;
}

tr.rowcolor:nth-child(even) {background: black;}
tr.rowcolor:nth-child(odd) {background: #1f2726;}


.slidePics {display: none;}


/* Slideshow container */
.slideshow-container {
  width: 100%;

  position: relative;
  margin: auto;
  height: auto;

  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0;

    max-width: 100%;
    min-width: 300px;
    height: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}