/* ============================= */
/* ! Layout for Seacrest B&B  */
/* ============================= */

/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}


body {
font-family: verdana, arial, sans-serif;
font-size:110%;
padding:1% 0;
background-image:url(../images/back11.jpg);
background-attachment:fixed;
}

img, object, embed {
max-width: 100%;
}

img {
height: auto;
}


#slideshow {
	float:left;
}



/* ============================= */
/* ! Desktop   */
/* ============================= */

.display {
display: inherit;
}

.display_mobile {
display: none;
}

#wrapper {
	width: 100%;
max-width: 1140px;
min-width: 755px;
margin: auto;
overflow: hidden;
background-color: transparent;
color:#000;
position:relative;
border: 10px solid #fff;
}

#header {
background-image:url(../images/logo3.jpg);
background-repeat:no-repeat;
background-position: bottom;
height:145px;
background-color: transparent;
}

#mainbox {
background-color:#fff;
float:left;
width:100%;
color:#666;

}

#content {
background-color:#fff;
float:right;
width:69%;
}

#linkespalte {
float:left;
background-color:transparent;
color:#004a42;
width:30%;
font-family:'Trebuchet MS', Verdana, Georgia;
}

#footer {

min-height: 100px;
text-align:right;
background-color:#fff;
font-size: 85%;
color: #004a42;
padding: 10px 10px 5px 0;
}

#footer a {
letter-spacing:2px;
text-decoration:none;
text-align:right;
font-weight: bolder;
color: #004a42;
}

#buttons {
width: 100%;
text-align: right;
font-family:'Trebuchet MS', Verdana, Georgia;
margin-left: 0px;
}

#buttons ul {
list-style:none;
font-size:100%;
}

#buttons ul li {
border-bottom: 1px solid #ccc;
margin: 5px 0 5px 0;
}

#buttons ul li a {
display:block;
background-color: #fff;
color: #666;
text-decoration:none;
letter-spacing:3px;
font-weight: 900;
padding-right: 3px;

}

#buttons ul li a:hover {
background-color: #c1cdad;
color: #fff;
font-weight: 900;
}

h1{
letter-spacing:3pt;
font-size:100%;
color:#fff;
text-align:center;
font-family: 'Trebuchet MS',Verdana, Arial, sans serif;
background-color: #c1cdad;
}

h2 {
font-family: 'Trebuchet MS',Verdana, Arial, sans serif;
font-size:125%;
letter-spacing:1pt;
padding: 15px 0 0 10px;
color:#004a42;
text-align: left;
}

h3 {
font-size:115%;
letter-spacing:1pt;
text-align:right;
color:#666;
font-family: 'Trebuchet MS',Verdana, Arial, sans serif;
background-color:#eee;
margin: 10px 0 10px -35px;
border-bottom: 1px solid #ccc;
}

#preheader p {
font-family: 'Trebuchet MS',Verdana, Arial, sans serif;
font-size:100%;
color: #fff;
text-align: center;
font-weight: bolder;
letter-spacing: 4px;
padding-right: 5px;
}

#belowfooter p {
font-size:85%;
color: #fff;
text-align: center;
font-weight: bolder;
padding: 3px;
background-color: #c1cdad;
letter-spacing: 3px;
}

#preheader a , #belowfooter a{
color: #fff;
}

#preheader a:hover , #belowfooter a:hover{
color: #004a42;
text-decoration: none;
}

#content p  {
font-size:80%; 
margin: 10px 10px 10px 10px;
}

.c1 p {
font-size: 85%;
}

a {
text-decoration:none;
font-weight: bolder;
background-color:transparent;
color:#666;
}

div.c1 {
background-color:transparent;
text-align:right;
color:#004a42;
width: 90%;
float: right;
margin: 10px 0 10px 20px;
}

.c2 {
width: 49%;
background-color:#fff;
float:left;
clear:left;
text-align:right;
}

.c3 {
width: 49%;
background-color:#fff;
float:right;
clear:right;
text-align:left;
padding-right: 10px;
}


p.c1{
font-size: 90%;
margin-left: 5px;
}

p.text1{
text-align:left;
}

p.text2{
text-align: right;
}


.c1 ul{
list-style-type: square;
list-style-position: inside;
font-size:90%;
color:#004a42;
}

.c1 li{
margin-top: 5px;
}

#content ul{
list-style-type: square;
list-style-position: inside;
font-size:90%;
font-weight: 700;
color: #666;
margin-left: 50px;
margin-top: 20px;
}

#content li{
margin-top: 3px;
}

#linkespalte a {
color:#666;
}

#linkespalte a:hover {
color:#ff6600;
}

a:hover, #footer a:hover{
text-decoration:underline;
color:#ff6600;
}

img.floatleft {
float: left; 
clear:left;
margin: 5px 10px 5px 0px;
border: 1px solid #ddd;
padding: 5px;
}

img.footerleft {
float: left; 
clear:left;
margin: 5px 10px 5px 150px;
}

img.floatright {
float: right; 
clear:right;
margin: 5px 0px 5px 10px;
border: 1px solid #ddd;
padding: 5px;
}

img.nobright {
float: right; 
clear: right;
margin: 10px 0 0 10px;
border:none;
}

img.nobleft {
float: left; 
clear:left;
margin: 10px 10px 10px 0px;
border: none;
}

.c2 img, .c3 img{
border: 1px solid #ddd;
padding: 5px;
margin: 5px 0 5px 0;
}

.c1 img {
	border: 1px solid #ddd;
	padding: 5px;
	margin: 5px;
}

img.noborder {
	border:none;
}


			


@media all and (max-width: 1180px) {

#wrapper {
width:95%;
position:inherit;
overflow:inherit;
}

}

@media all and (max-width: 1080px) {

#content {
width:67%;
}

}

@media all and (max-width: 850px) {

#wrapper {
	min-width: 0;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	}
	
#slideshow {
float: none;
}


#mainbox {
background-color:#fff;
float:none;
clear:both;
width: 100%;
}

#content {
float:none;
border: none;
width: 100%;
margin-bottom: 20px;
}


#linkespalte {
float:none;
width: 100%;
min-height:inherit;
}

#buttons {
width:100%;
text-align: center;
display:inherit;
}

h3 {
font-size: 150%;
line-height: 1.0;
text-align: center;
background-color: #fff;
color: #004a42;
letter-spacing: 1px;
margin: 30px 0 10px 0;
}



div.c1 {
text-align:center;
width: 95%;
float: none;
margin: 10px;
}

.c1 p {
text-align: center;
font-family:Verdana, Geneva, sans-serif;
color: #666;
font-size: 90%;
}

.c1 ul {
width: 98%;
margin: 10px 0 10px 0;
}

h1, h2 {
text-align: center;
}


#footer {
text-align: right;
border: none;
}

img.footerleft {
float:right;
margin: 10px;
}

}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

body {
background-image: none;
}



.display_mobile {
display: inherit;
}

.display {
display: none;
}

#linkespalte {
	font-family: verdana, arial, sans-serif;
}

.c1 ul {
	font-weight: 400;
	font-size: 90%;
}

img.floatright, img.floatleft, img.nobleft, img.nobright, .c1image_right, img.border  {
float: none; 
clear: both;
margin: 3px;
text-align: center;
}

.c2, .c3 {
width: 100%;
}

p.top{
background-color:#eee;
width: 95%;
font-size: 130%;
margin: 20px 0 20px 0;
text-align: center;
}

p.top a{
background-color: #eee;
color: #aaa;
font-size: 130%;
text-decoration: none;
}

.c1 p.text4 {
	font-size: 80%;
}

h1, h2 {
font-size: 130%;
line-height: 1.0;
text-align: center;
background-color: #fff;
color: #004a42;
letter-spacing: 1px;
margin: 10px 0 10px 0;
}

h3 {
border:none;
}

#content p, #footer p, .c1 p {
font-size: 120%;
line-height: 1.4;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
}

.c1 p.text4 {
	font-size: 80%;
}

li {
font-size: 130%;
}

#preheader {
color: #004a42;

}

#preheader p, #preheader a{
font-size:130%;
color: #004a42;
letter-spacing: 0;
text-align: center;
}

#preheader a:hover , #belowfooter a:hover{
color:#A00;
text-decoration: none;
}

#footer {
font-size: 90%;
text-align:  center;
}


}

@media handheld, only screen and (max-width: 520px) {
#header {
background-image:url(../images/logo4.jpg);
background-repeat:no-repeat;
background-position: bottom;
height:145px;
background-color: transparent;
}

}