@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway');

BODY{
background:#020100 url(../gifs/oyster.jpg) no-repeat;
background:#020100 url(https://www.mikeslater.co.uk/gifs/Bled.jpg) no-repeat;
color:#FFFFFF;
font-family:"Raleway","Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:normal;
text-decoration:none;
margin:0px;
min-height:1270px;
-webkit-text-size-adjust: 100%;
}

BODY.newhome{
background:#020100 url(../gifs/202205.jpg) no-repeat;
}

BODY.websites{
background:#615f58 url(https://www.mikeslater.co.uk/gifs/LiverpoolAirport.jpg) no-repeat;
background-position:center top;
}

BODY.gallery{
background-position:top right;
}

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%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {overflow-y: scroll;} 

.main{
width:990px;
margin-right:auto;
margin-left:auto;
}

.copyrightstatement{
width:250px;
margin-top:223px;
}

.gallerybox{
width:80%;
margin-left:auto;
margin-right:auto;
}

.innertopnewbannerx{position:fixed;}

.newhomebox{
margin-left:499px;
min-height:649px;
margin-top:12px;
}

.tditem{
font-family:"Raleway", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:normal;
text-decoration:none;
margin:4px;
color:#FFFFFF;
letter-spacing:0.8px;
border:1px #a3963f solid;
text-align:center;
vertical-align:middle;
padding-top:5px;
min-height:25em;
float:left;
background:#000000;
}

.tditemsmall{
font-family:"Raleway", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:normal;
text-decoration:none;
margin:4px;
color:#FFFFFF;
letter-spacing:0.8px;
border:1px #a3963f solid;
text-align:center;
vertical-align:middle;
padding-top:5px;
min-height:3em;
float:left;
background:#000000;
}

P.240{
font-family:"Raleway", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:normal;
text-decoration:none;
padding:0px;
color:#000000;
letter-spacing:0.05em;
background:transparent;
margin:0px;
width:129px;
min-height:2em;
padding-top:6px;
padding-bottom:6px;
border-bottom:1px #576570 solid;
}

P.center{
text-align:center;
}

a:link{
color:#FFFFFF;
text-decoration:none;
font-style:normal;
font-weight:bold;
}

a:hover{
color:#FFFFFF;
text-decoration:underline;
font-style:normal;
}

a:active{
color:#FFFFFF;
text-decoration:none;
font-style:normal;
}

a:visited{
color:#FFFFFF;
font-style:normal;
}


#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #333; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

H1{
padding:0px;
font-weight:normal;
color:#d9e5ff;
font-size:22px;
font-family:"Roboto Mono", Tahoma, Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0.2em;
background: transparent;
padding-left:10px;
padding-top:5px;
min-height:2em;
text-align:center;
margin-top:25px;
text-transform: uppercase;
}
H1.serenweb{
font-family: 'Roboto Mono', monospace;
color: #999;
margin: 1px;
padding: 1px;
font-size: 26px;
letter-spacing: 1px;
font-weight: normal;
text-align:left;
text-shadow:0px 0px 0px #518adb;
padding-top:2px;
font-variant: small-caps;
background:transparent url(https://serenweb.com/gifs/logo2021.png) no-repeat;
padding-left:325px;
min-height:35px;
}

H2{
padding:3px;
padding-left:8px;
font-weight:normal;
color:#c7d5f3;
font-size:16px;
font-family:"Roboto Mono", Tahoma, Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0.4em;
background: transparent url(../gifs/Redlogo.jpg) no-repeat;
margin-top:21px;
}

H2.white{
color:white;
}

H3{
padding:2px;
font-weight:normal;
color:#cdbf62;
text-align:left;
font-size:90%;
background:transparent;
margin:3px;
padding-top:10px;
}

P{
font-family:"Raleway","Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:normal;
text-decoration:none;
padding-left:4px;
color:#FEFEFE;
background:transparent;
margin:4px;
line-height:1.3;
}


SMALL{
font-size:90%;
}

LI{
font-family:"Raleway","Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:normal;
padding-left:4px;
color:#CCCCCC;
letter-spacing:0.8px;
background:transparent;
}

EM{
font-weight:normal;
text-decoration:none;
color:#000000;
letter-spacing:0.8px;
background:transparent;
line-height:110%;
margin:4px;
font-style:italic;
}

.select{
font-family:"Raleway", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:normal;
text-decoration:none;
letter-spacing:0px;
margin:3px;
color:#333300;
background:#F2F2F2;
border:1px #666666 solid;
width:300px;
}


.button {
  
-webkit-border-radius: 1;
  
-moz-border-radius: 1;
  
border-radius: 1px;
  
font-family: Raleway;
  
color: #ffffff;
  
font-size: 17px;
  
background: #334b6e;
  
padding: 7px 7px 7px 7px;
  
text-decoration: none;

padding-top:1px;
padding-bottom:1px;

}



.button:hover {
  
background: #e1731a;
  
text-decoration: none;

}

IMG.left{
float:left;
margin:5px;
}

IMG.right{
float:right;
margin:5px;
}

IMG.fullscreenall{
width:100%;
}

.Button1 {
background:url(../gifs/but1.gif) no-repeat top;
} 

.Button2 {
background:url(../gifs/but2.gif) no-repeat bottom;
padding:0px;
} 

P.clear{
clear:both;
}

.newtextblock{width:55%;}

.gallimage{height:333px;}


@media only screen and (min-width : 800px) and (max-width : 999px) {

}


@media only screen and (max-width : 799px) {

.innertopnewbanner{
width:90%;
margin-right:auto;
margin-left:auto;
}
.mainbodysleeve{
width:90%;
margin-right:auto;
margin-left:auto;
}

.newhomebox{
margin-left:309px;
min-height:409px;
margin-top:9px;
text-align:right;
}

BODY.newhome{
background:#020100 url(../gifs/202205mob.jpg) no-repeat;
background-position:-60px 210px;
}




.gallimage{height:auto;width:95%;}
.main{
width:90%;
}

IMG.fullscreen{width:90%;}

H1{
font-size:17px;
}
H1.serenweb{font-size:23px;letter-spacing:0em;text-align:center;min-height:36px;padding:0px;margin:0px;text-indent:-999px;}

H2{
font-size:13px;
}

P{
font-size:13px;
}

.newtextblock{width:95%;}
.tditemsmall{
width:95%;
}

}

@media only screen and (max-width : 499px) {

.newhomebox{
margin-left:129px;
min-height:409px;
margin-top:22px;
text-align:right;
}

}