body {
margin:0;
text-align:center;
font-family: verdana, arial, sans-serif;
background:#000000;
}	

/*background-image: url(http://www.craftypedlr.co.uk/images/starbg.gif);*/

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

#outer {
	width:100%;
	overflow: hidden;
	text-align:center;
	padding:0em;
	margin:0;	
	}
	
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #0061ff;}
a:active {color: #ff6600;}	
	
br.clear {
width:90%;
height:0.1em;
clear:both;
padding:0;
margin:0;
background:#00ccee;
}	
	
h1,h2,h3,h4 {
font-weight:bold;
margin:0.2em auto 0.2em auto;
text-align:center;
}		
	
h1 {
font-size:1.3em;
}
	
h2 {
font-size:1.2em;
margin:0em;
}	
	
h3 {
font-size:1.0em;
}	

h4 {
font-size:0.9em;
}
	
p {
margin:0.3em 0em 0em 0em;
padding:0em;
}	

#ms, #cs, #vh, #hh {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#ms:hover, #cs:hover, #vh:hover, #hh:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding:0em; /* Location of the box */
  left:5em;
  top:5em;
  width: 80%;
  height: 80%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#header {
width:100%;
padding:0em 0em 0em 0em;
margin:0;
float:left;
text-align:center;
}

#topnav {
float:left;
width:100%;
text-align:center;
padding:0.3em 0em 0.3em 0em;
margin:0em;
}

#topnav #navlist1 {
width:90%;
text-align:center;
padding:0em;
margin:0em auto 0em auto;
}	

#topnav #navlist1 ul{
font-size:0.8em;
width:100%;
list-style:none;
text-align:center;
padding:0em;
margin:0em auto 0em auto;
background-color:#000000;
}  

#topnav #navlist1 ul li{
display:inline-block;
width:17%;
margin:0em;
padding:0.2em 0.5em 0.2em 0.5em;
background-color:#000000;
border-right:1px solid #cccccc;
}

#topnav #navlist1 ul li a{
text-decoration:none;
font-weight:normal;
background-color:#000000;
padding:0em 0em 0em 0em;
} 
	
#maincontent {
clear:both;
width:98%;
text-align:center;
padding:0;
margin:0em auto 0em auto;
background-color:#000000;
border:0em solid #228b22;
border-top:0em;
}

#mainmid {
clear:both;
width:95%;
padding:0.8em auto 0.2em auto;
margin:0.2em auto 0em auto;
color:#000000;
font-size:0.7em;
background-color:#ececec;
text-align:center;
border:2px solid #444444;
border-radius:1em;
}

#mainmid a{
color:#0000cc;
}

#mainmid p{
margin-top:0.5em;
}

#intro {
clear:both;
padding:0em auto 0em 0.3em;
width:90%;
margin:0em auto 0.2em auto;
text-align:left;
background-color:#ececec;
}

#examples{
clear:both;
width:95%;
font-size:1.0em;
text-align:center;
margin:0em auto 0em auto;
padding:0em;
background-color:#ececec;
}

.prodeg{
clear:both;
width:95%;
margin:0em auto 0em auto;
padding:0.3em 0em 0.3em 0em;
}


.prodeghead{
width:95%;
margin:0.2em auto 0.2em auto;
}

.prodegpic{
float:left;
width:30%;
text-align:center;
padding:2em 0.2em 0.2em 0.2em;
margin:0em;
}

.prodegpic img{

}

.prodegdesc{
float:left;
text-align:left;
width:65%;
margin:0.2em auto 0.3em auto;
padding-top:0.2em;
}

#mainmid .formsection{
width:100%;
clear:both;
margin:0.5em auto 0.3em auto;
background-color:#ececec;
text-align:center;
}

#mainmid .formsection .mainform{
clear:both;
width:90%;
background-color:#ececec;
margin:0.5em auto 0.5em auto;
padding-top:0.5em;
}

#mainmid .enqdetails{
clear:both;
width:90%;
background-color:#ececec;
margin:0.5em auto 0.5em auto;
padding-top:0.5em;
}

#mainmid .formsection .formleft{
width:90%;
float:left;
text-align:left;
margin:0.5em auto 0.5em 0.5em;
padding:0em;
background-color:#ececec;
}

#mainmid .formsection .formright{
width:90%;
float:left;
text-align:left;
margin:0.5em auto 0.5em 0.5em;
padding:0em;
background-color:#ececec;
}

#mainmid input[type=submit]{
font-size:1.0em;
}

#mainmid input[type=text]{
font-size:1.0em;
}

#mainmid input[type=file]{
font-size:1.0em;
}

#mainmid input[type=button]{
font-size:1.0em;
}





#contactrow {float:left;width:90%;padding:0.5em;font-size:1em;}
#contactphone {float:left;width:60%;padding:0em;}
#contactform {float:left;width:30%;padding:0em;}

#pagefooter {
width:95%;
font-size:0.8em;
margin:0em auto 0em auto;
}
#footcontact {
clear:both;float:left;width:35%;font-size:1em;
}
#footcontact a:link {
font-size:1.3em;
}
#footphone {
float:right;width:60%;
}


/* mobile */
@media only screen 
and (min-device-width: 20em)
and (max-device-width: 50em)
and (orientation:portrait)
{
body { font-size:100%;}
#topnav #navlist1 ul li{padding:0.2em 0.3em 0.2em 0.3em;}
}

/* mobile landscape */
@media only screen 
and (min-device-width: 20em)
and (max-device-width: 50em)
and (orientation:landscape)
{
body { font-size:130%;}
#topnav #navlist1 ul li{padding:0.2em 0.3em 0.2em 0.3em;}
#mainmid h2{font-size:1.0em;}
}

/* desktops */
@media only screen 
and (min-device-width: 51em)
{
body { font-size:150%;}
#topnav #navlist1 ul{font-size:1.2em;}
#mainmid {width:80%;font-size:0.9em;}

#intro {width:80%;margin:0em auto 0.2em auto;}
#examples {padding-top:1em;}
#examples h2 {margin-bottom:1em;}

.prodegdesc {margin:0.2em auto 0.3em 1em;padding-top:1em;}
.prodegpic {padding:0.2em 0.2em 0.2em 0.2em;}

#contactrow {float:left;width:90%;}
#contactphone {float:left;width:60%;}
#contactform {float:left;width:30%;padding-top:0.3em;}

#pagefooter {width:80%;}
#footcontact {float:left;width:40%;text-align:right;margin:0;}
#footcontact a:link {font-size:1.5em;}
#footphone {float:left;width:55%;margin:0;}

.modal {left:10em;top:10em;}

}