html {
/*
background: -moz-linear-gradient(top, rgba(0,0,150,0.7) 0%, rgba(0,0,150,0.7) 100%) no-repeat center center fixed, url("../images/BlueDoor.jpg") no-repeat center center fixed;
background: -ms-linear-gradient(top, rgba(0,0,150,0.7) 0%, rgba(0,0,150,0.7) 100%) no-repeat center center fixed, url("../images/BlueDoor.jpg") no-repeat center center fixed;
background: -webkit-linear-gradient(top, rgba(0,0,150,0.7) 0%, rgba(0,0,150,0.7) 100%) no-repeat center center fixed, url("../images/BlueDoor.jpg") no-repeat center center fixed;
background: -o-linear-gradient(top, rgba(0,0,150,0.7) 0%, rgba(0,0,150,0.7) 100%) no-repeat center center fixed, url("../images/BlueDoor.jpg") no-repeat center center fixed;
background: linear-gradient(top, rgba(0,0,150,0.7) 0%, rgba(0,0,150,0.7) 100%) no-repeat center center fixed, url("../images/BlueDoor.jpg") no-repeat center center fixed;
*/
-moz-background-size: cover;
-ms-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
background-color:#000088;
min-height:100%; /* so that a linear-gradient background in fills screen */
}
body {
color:#FFFFFF; /*white */
font-family: "Trebuchet MS", sans-serif;
/* font-size:24px; */ /* then use em in all others styles */
font-size:1em;
/*background-color:#000080;*/ /* navy blue */
-moz-opacity:1;
-webkit-opacity:1;
-ms-opacity:1;
-o-opacity:1;
opacity:1;
height: 100%; /* for google maps div to have a basis */
border-top:0px solid yellow; /* don't make it 0px or body moves down from top */
padding-left: 2%;
padding-right: 2%;
padding-top: 0%;
padding-bottom:0%;
margin: 0%;
width:96%;
position:absolute;
top:0px;
left:0px;
}
.opacityOFF {
-moz-opacity:1;
-webkit-opacity:1;
-ms-opacity:1;
-o-opacity:1;
opacity:1;
}
.clearer {
clear:both;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px;
}
.email {
color:red;
}
.contactus {
width:100%;
border:0px solid green;
font-size:1.0em;
}
.contactus tr td {
width:50%;
vertical-align: top;
}
h1 {
/*color:#666; */
color:#ffffff;
font-size:2.0em;
text-transform: uppercase; /* force text to uppercase */
}
h2 {
/*color:#555; */
color:#888888;
font-size:1.7em;
}
.head4 {
font-size:1.0em;
color:#909090;
}
@-moz-keyframes swing {
from {
-moz-transform: scale(0.5);
}
10% {
-moz-transform: scale(0.55);
}
20% {
-moz-transform: scale(0.6);
}
30% {
-moz-transform: scale(0.65);
}
40% {
-moz-transform: scale(0.7);
}
50% {
-moz-transform: scale(0.75);
}
60% {
-moz-transform: scale(0.8);
}
70% {
-moz-transform: scale(0.85);
}
80% {
-moz-transform: scale(0.9);
}
90% {
-moz-transform: scale(0.95);
}
to {
-moz-transform: scale(1.0);
}
}
@-webkit-keyframes swing {
from {
-webkit-transform: scale(0.5);
}
10% {
-webkit-transform: scale(0.55);
}
20% {
-webkit-transform: scale(0.6);
}
30% {
-webkit-transform: scale(0.65);
}
40% {
-webkit-transform: scale(0.7);
}
50% {
-webkit-transform: scale(0.75);
}
60% {
-webkit-transform: scale(0.8);
}
70% {
-webkit-transform: scale(0.85);
}
80% {
-webkit-transform: scale(0.9);
}
90% {
-webkit-transform: scale(0.95);
}
to {
-webkit-transform: scale(1.0);
}
}
@-ms-keyframes swing {
from {
-ms-transform: scale(0.5);
}
10% {
-ms-transform: scale(0.55);
}
20% {
-ms-transform: scale(0.6);
}
30% {
-ms-transform: scale(0.65);
}
40% {
-ms-transform: scale(0.7);
}
50% {
-ms-transform: scale(0.75);
}
60% {
-ms-transform: scale(0.8);
}
70% {
-ms-transform: scale(0.85);
}
80% {
-ms-transform: scale(0.9);
}
90% {
-ms-transform: scale(0.95);
}
to {
-ms-transform: scale(1.0);
}
}
@-o-keyframes swing {
from {
-o-transform: scale(0.5);
}
10% {
-o-transform: scale(0.55);
}
20% {
-o-transform: scale(0.6);
}
30% {
-o-transform: scale(0.65);
}
40% {
-o-transform: scale(0.7);
}
50% {
-o-transform: scale(0.75);
}
60% {
-o-transform: scale(0.8);
}
70% {
-o-transform: scale(0.85);
}
80% {
-o-transform: scale(0.9);
}
90% {
-o-transform: scale(0.95);
}
to {
-o-transform: scale(1.0);
}
}
@keyframes swing {
from {
transform: scale(0.5);
}
10% {
transform: scale(0.55);
}
20% {
transform: scale(0.6);
}
30% {
transform: scale(0.65);
}
40% {
transform: scale(0.7);
}
50% {
transform: scale(0.75);
}
60% {
transform: scale(0.8);
}
70% {
transform: scale(0.85);
}
80% {
transform: scale(0.9);
}
90% {
transform: scale(0.95);
}
to {
transform: scale(1.0);
}
}
.menu {
/*font-size:1.8em; */
background-color:#CCC;
color:#0000ff;
-webkit-animation: swing 1s 1 ease-in;
-moz-animation: swing 1s 1 ease-in;
-o-animation: swing 1s 1 ease-in;
-ms-animation: swing 1s 1 ease-in;
animation: swing 1s 1 ease-in;
width:100%;
padding:0;
margin:0;
border: 1px solid black;
border-radius:5px;
}
.menu ul {
margin: 0;
padding: 0;
list-style:none;
}
.menu li {
float: left;
margin-right:1%;
padding-left:1%;
width:23%;
/* background: -moz-linear-gradient(left, rgba(100,100,100,0.8) 0%, rgba(0,0,255,0.8) 100%) no-repeat center center fixed; */
background: -moz-linear-gradient(left, rgba(100,100,100,0.8) 0%, rgba(200,200,200,0.8) 100%) ;
background: -webkit-linear-gradient(left, rgba(100,100,100,0.8) 0%, rgba(200,200,200,0.8) 100%) ;
background: -o-linear-gradient(left, rgba(100,100,100,0.8) 0%, rgba(200,200,200,0.8) 100%) ;
background: -ms-linear-gradient(left, rgba(100,100,100,0.8) 0%, rgba(200,200,200,0.8) 100%) ;
background: linear-gradient(left, rgba(100,100,100,0.8) 0%, rgba(200,200,200,0.8) 100%) ;
}
.menu ul li a:link {
text-decoration: none !important;
}
.menu ul li a:visited {
text-decoration: none !important;
color:#0000ff;
}
.menu ul li a:hover {
text-decoration: underline !important;
color: white;
-moz-transition:all 3s ease 0s;
-ms-transition:all 3s ease 0s;
-webkit-transition:all 3s ease 0s;
-o-transition:all 3s ease 0s;
transition:all 3s ease 0s;
}
.menu ul li a:active {
text-decoration: underline !important;
color: red;
}
.LHS {
width:50%;
float:left;
opacity:0.8;
/* background-color:#000080; */ /* navy blue */
font-size:1.0em;
}
.RHS {
width:50%;
float:right;
}
.TOP {
height:0%;
background-color:yellow;
}
.BOTTOM {
height:0%;
background-color:yellow;
}
#map-canvas {
border:1px solid black;
/*height:inherit; */
height:100%;
}
.photoLHS {
display:inline;
float:left;
width:15%;
margin-right:1%;
}
.photoLHS img {
border: 1px #999 solid; /* grey */
box-shadow:4px 4px 4px #444444;
border-radius:5px;
margin: 0px;
padding: 0px;
width:100%;
}
.test320 {
width: 320px;
height: 320px;
border: 0px #999 solid; /* grey */
background-color:red;
}
/* --------------------------------------------------------------------------- */
/* Desktop screen <= 320px wide */
@media only screen
and (min-width : 200px)
and (max-width : 320px) {
body {
font-size:1.0em;
}
.menu {
/* font-size:1.4em; */
}
}
/* Desktop screen >=320px up to 359px wide */
@media only screen
and (min-width : 320px)
and (max-width : 359px) {
body {
font-size:1.1em;
}
.menu {
/* font-size:1.4em; */
}
}
/* Desktop screen >= 360px wide up to 799px */
@media only screen
and (min-width : 360px)
and (max-width : 799px){
body {
font-size:1.2em;
}
}
/* Desktop screen >= 800px wide up to 1023px */
@media only screen
and (min-width : 800px)
and (max-width : 1023px){
body {
font-size:1.6em;
}
}
/* Desktop screen >= 1024px wide up to 1919px */
@media only screen
and (min-width : 1024px)
and (max-width : 1919px){
body {
font-size:1.8em;
}
}
/* Desktop screen >= 1920px wide */
@media only screen
and (min-width : 1920px)
{
body {
font-size:2em;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 portrait ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2.0) and (-webkit-max-device-pixel-ratio: 2.99) ,
only screen and (min-device-pixel-ratio : 2.0) and (-max-device-pixel-ratio: 2.99) {
/* Styles */
/* .menu li {
float: none ;
} */
}
/* iPhone 4 landscape ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2.0) and (orientation : landscape),
only screen and (min-device-pixel-ratio : 2.0) and (orientation : landscape) {
/* Styles */
/* .menu li {
float: left ;
} */
}