/* General styles */

body
{ 
  margin:0px; padding:0px; font-family: Arial, sans-serif; 
  color:#4c4c4c; background-color:rgb(204,230,227);
}

div#header
{
 position:relative; color:white; margin:25px;  height:168px;  font-size:25px;
 background: rgb(77,166,156) url("/img/header_back.gif") 20px no-repeat;
}

div#header div#info{ position:absolute; right:120px; top:20px; }

div#header div#gaq
{ position:absolute; right:10px; top:10px;  
  font-size:25px;
  background-color:rgb(204,230,227);
  padding:10px; color:rgb(77,166,156);
  text-transform: uppercase;
}

#gaq a{ color:rgb(77,166,156); }
#gaq a:hover{ color:rgb(0,90,80); }

#mainmenu{ position:absolute; text-align:right; bottom:10px; right:10px; font-size: 15px; margin-left:180px; }
#mainmenu a{ color:white; }
#mainmenu a.active{ color:rgb(0,90,80); }
#mainmenu a:hover{ color:rgb(0,90,80); }

@media only screen and (min-width:720px){ #mainmenu{font-size:20px;} } /* Width required is ~ 200 + 26*font size*/
@media only screen and (min-width:850px){ #mainmenu{font-size:25px;} }
@media only screen and (min-width:928px){ #mainmenu{font-size:28px;} }
@media only screen and (min-width:980px){ #mainmenu{font-size:30px;} } 

#infolinks{font-size:15px;}
@media only screen and (min-width:720px){ #infolinks{font-size:20px;} } /* Width required is ~ 200 + 26*font size*/
@media only screen and (min-width:850px){ #infolinks{font-size:25px;} }
@media only screen and (min-width:928px){ #infolinks{font-size:28px;} }
@media only screen and (min-width:980px){ #infolinks{font-size:30px;} } 

a{ text-decoration:none; color:blue; }
a:visited{  color:blue; }
a:hover{ color:black; }

div#footer{ margin:25px; font-size:80%; color:rgb(116,115,123); }

div#copyr{ text-align:right; }

h1{ font-size:30px; color:rgb(0,132,115); margin-top:20px; font-weight:normal; }
body#home h1 span.gray{ font-size:35px; font-weight:normal; color:#4c4c4c; }
body#home h1{ font-size:50px; }

h2{ font-size:25px; color:rgb(0,132,115); }
body#home h2{ color:#4c4c4c; font-weight:normal; }

/* Forms */
form, input, button, select{ font-size:30px; }
div.IO{ clear:both; padding-bottom:10px; }
/*div.IO label{ display:block; float:left; width:8em; padding-bottom:10px; }*/
label.wx{ width:90%; }
input.w{ width:320px; }
h2.err{ color:black; background-color:yellow; font-size:100%; padding:5px; }
form br{ clear:both; margin-top:10px; }
form span.err{ font-size:80%; color:red; }
form div{ margin-top:5px; }
form label{ display:inline-block; min-width:8em; font-size:80%; color:green; }
form span.desc{ font-size:80%; color:green; }

/* Corners */

div#header span.a{ position:absolute;  top:0px; left:0px; width:17px; height:17px; background:url(/img/C1A.gif) no-repeat; }
div#header span.b{ position:absolute;  top:0px; right:0px; width:17px; height:17px; background:url(/img/C2A.gif) no-repeat; }
div#header span.c{ position:absolute; bottom:0px; left:0px; width:17px; height:17px; background:url(/img/C3A.gif) no-repeat; }
div#header span.d{ position:absolute; bottom:0px; right:0px; width:17px; height:17px; background:url(/img/C4A.gif) no-repeat; }

div#gaq span.a{ position:absolute;  top:0px; left:0px; width:7px; height:7px; background:url(/img/C1B.gif) no-repeat; }
div#gaq span.b{ position:absolute;  top:0px; right:0px; width:7px; height:7px; background:url(/img/C2B.gif) no-repeat; }
div#gaq span.c{ position:absolute; bottom:0px; left:0px; width:7px; height:7px; background:url(/img/C3B.gif) no-repeat; }
div#gaq span.d{ position:absolute; bottom:0px; right:0px; width:7px; height:7px; background:url(/img/C4B.gif) no-repeat; }

div#content span.b{ position:absolute;  top:0px; right:0px; width:20px; height:20px; background:url(/img/C2C.gif) no-repeat; }
div#content span.d{ position:absolute; bottom:0px; right:0px; width:20px; height:20px; background:url(/img/C4C.gif) no-repeat; }

/* Tables */
table{ border-collapse:collapse; }
th{ background-color:#A1BCFA; text-align:left;}
td, th{ padding:0.5em; border:1px solid #018; border-left:gray; border-right:gray; vertical-align:top;}

div#wrapper{ min-width:600px; max-width:1400px; }

div#content
{ position:relative; background: white bottom left no-repeat; 
  margin:25px;
  padding-bottom:10px;
  padding-right:20px;
  padding-left:10px;
}

#infolinks {display:none; }
#infolinks a.active{ color:rgb(0,90,80); }
#infolinks a:hover{ color:rgb(0,90,80); }

@media only screen and (orientation: portrait), screen and (max-width:699px)
{
  #infolinks{ display:block; padding:10px; padding-top:40px; line-height:150%; }
  div#content div#infolinks span.b, div#content div#infolinks span.b{ display:none; }
}

@media only screen and (orientation: landscape) and (min-width:700px)
{
  div#content{ padding-left:260px; min-height:400px; }

  #infolinks{ display:block; position:absolute; left:0px; top:0px; max-width:240px; background-color:rgb(204,230,227); }

  #infolinks a
  { display:block; position:relative; background:rgb(127,191,184); color:white;
    margin-bottom:5px; margin-right:5px; padding:5px; padding-left:20px; padding-right:10px; line-height:100%; 
  }

  #infolinks span.vbar{ display:none; }

  div#content div#infolinks span.b{ position:absolute;  top:0px; right:0px; width:6px; height:6px; background:url(/img/C2D.gif) no-repeat; }
  div#content div#infolinks span.d{ position:absolute; bottom:0px; right:0px; width:6px; height:6px; background:url(/img/C4D.gif) no-repeat; }

}

@media only screen and (orientation: landscape) and (min-width: 900px)
{
  form, input, button, select, table{ font-size:12pt; }

  div#content{ padding-left:360px; min-height:750px; }

  div#content{ background-image: url("/Img/content_back1.jpg"); }
  body#home div#content{ background-image: url("/img/content_back2.jpg"); }
  body#about div#content{ background-image: url("/img/content_back3.jpg"); }
  body#onlinepropose div#content{ background-image: url("/img/content_back4.jpg"); }
}