/* seattledeck.css */
/* gelcoat.css */

html {

    background:-moz-linear-gradient(left white,#006fdd);
    background:linear-gradient(left,white,#006fdd);    
    background:-webkit-linear-gradient(left,white,#006fdd);
    background-color:white;
    background-size:cover;
    -ms-background-size:200% auto; /* IE<9 */
    -webkit-background-size:100% 100%; /* older webkit before cover */
    -webkit-background-size:cover;  
    -moz-background-size:100%; /* older mozilla for Mac */  
   }
    
body {
    display:block;position:relative;
    background-size:cover;
    -webkit-background-size:100% 100%; /* older webkit before cover */
    -webkit-background-size:cover;
    -ms-background: url(glassywater3.png) top left no-repeat; /* IE<9 */
    -ms-background-size:200% auto; /* IE<9 */  
    -moz-background-size:100%;      
    background-color:transparent;
    min-height:1070px;
    margin:20px auto 120px auto;
    padding:6px;
    font-family:arial,verdana,helvetica,sans-serif;
    font-size:16px; /* in px, helps keep size same across browsers */
   /* medium=default=18px;small=16px;x-small=13.5px;large=21px; 12px=100% */
    hyphens:auto;
    -moz-hyphens:auto;
    line-height:1.2em;
    max-width:1020px;
    width:98%;
    border-radius:10px;
    }
.table {display:table;
 margin:1px auto 1px auto;
 padding:1px;}
.navdiv {display:block;position:relative;
    clear:both !important; 
    margin:0px auto 20px auto;
    -border-radius:7px;
    padding:6px;
    max-width:98%;
    min-height:30px;
    border:0px solid yellow;
    background:-ms-linear-gradient(top center,transparent,#FFFFFF,transparent 96%) repeat scroll 0 0 transparent;
    background:-webkit-linear-gradient(top center,transparent,#FFFFFF,transparent 96% ) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(top center,transparent,#FFFFFF,transparent 96% ) repeat scroll 0 0 transparent;
    background:linear-gradient(top center,transparent,#FFFFFF,transparent 96%) repeat scroll 0 0 transparent;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#00ffffff',GradientType=0 ); /* Ie6-8 */
    }    
 ul#nav {margin:auto;}
 ul {-moz-padding-start: 10px;} /* override default */
#nav li {display:inline;} /* forces horizontal menu */
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col9,#col1,#col2,#col3,#col4,#col5,#col6,#col7,#col8,#col9  {
    display:block;
    position:relative;
    font-size:14px;
    font-weight:bold;
    width:220px;
    width:80%;
    min-height:500px;
    float:none;
    border:0px solid black;
    margin:0px auto 14px auto;
    padding:8px;
    border-radius:9px;
    overflow:hidden;
    background-color:white;
    -webkit-background-size:cover;
    -webkit-background-size:100% 100%; 
    -moz-background-size:100%;
    background-size:cover;
    box-shadow: 4px 6px 5px 0px #333333; /* horiz, vert, blur, spread, color */
   }
 h1 {margin:20px 0px 20px 0px;text-align:center;
    line-height:1.0em;}
 h2, h3 {text-align:center;}
 .orange {color:#fb7d00;}
 .bluish {color:#00509f;}
 .brown {color:#CC9273;} 
 .navy  {color:navy;}
 .buff {color:#CFB89F;}
 .aqua {color:#393ef0;}
 #col1 {display:block;}
 #col2,#col3,#col4,#col5,#col6,#col7,#col8,#col9 {display:none;} /* suppress display initially */
 .textshadow {zoom:1.0;
  background:rgba(255,255,255,0);
  xfilter: progid:DXImageTransform.Microsoft.Chroma(Color=#00ffffff);
  xfilter: progid:DXImageTransform.Microsoft.dropShadow(color=#6e6e6e,offX=4,offY=4);
  xfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
  
  -webkit-text-shadow:1px 1px 2px white, -1px -1px 2px white;
  -moz-text-shadow:1px 1px 2px white, -1px -1px 2px white;
  text-shadow:2px 1px 2px white, -2px -1px 2px white;}   
 .textshadow2 {
  -webkit-text-shadow:4px 4px 6px white, -4px -4px 6px black;
  -moz-text-shadow:4px 4px 6px white, -4px -4px 6px black;
  text-shadow:4px 4px 6px white, -4px -4px 6px black;
  }  
 .bottom,.top {
   display:block;position:relative;
   width:98%;
   height:170px;
   margin:auto;
   clear:both;
  }
 .bottom {
  height:190px;
   width:78%;
   margin:18px auto 6px auto;
   border-radius:9px;
   padding:6px;
   }
#grayrabbit, .propulsion { /* grayrabbit */
    color: white;
    display: block;
    font-size: 12px;
    letter-spacing: 7px;
    margin: 50px 1%;
    min-height: 34px;
    padding: 2px;
    position: relative;
    filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc);
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#6e6e6e,offX=2,offY=2);
    text-shadow: -1px 3px 2px black;
    -webkit-text-shadow: -1px 3px 2px black;
    -moz-text-shadow: -1px 3px 2px black;
     }
 .blockcenter {margin:auto;vertical-align:middle;box-shadow: -1px 2px 3px black;}     
 .q {}
 .a {list-style-type:none;color:navy;}
 .logotext {text-align:center;
   font-size:74px;
   letter-spacing:1px;
   color:silver;
   line-height:0.75em;
   font-weight:bold;
   font-family:arial;
   text-shadow:4px 4px 6px white, -4px -4px 6px black;
  -moz-text-shadow:-4px -4px 4px black,4px 4px 6px white;
  -webkit-text-shadow:-4px -4px 4px black,4px 4px 6px white;   
 filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc);
 filter: progid:DXImageTransform.Microsoft.dropShadow(color=#6e6e6e,offX=4,offY=4);
   }
 .sublogotext {
  display:block;
  text-align:center;
  margin:30px auto;
  font-family:verdana,arial;
 filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc);
 filter: progid:DXImageTransform.Microsoft.dropShadow(color=#6e6e6e,offX=4,offY=4);
  text-shadow:-4px -4px 4px black,4px 4px 6px white;
  -moz-text-shadow:-4px -4px 4px black,4px 4px 6px white;
  -webkit-text-shadow:-4px -4px 4px black,4px 4px 6px white;  
    font-weight:900;
  font-size:50px;
  line-height:1.1em;
  letter-spacing:2px;
  color:silver;
  }
 .logo {height:160px; width:auto;margin-top:6px;float:left;border-radius:9px;}
 .lillogo {width:70%;margin:auto;display:block;}   
 .logo3 {max-height:160px;margin-top:6px;margin-right:8px;float:left;border-radius:9px;max-width:19%;} /* each of the 3 pics */
 .threepics {width:auto;border:0px solid red;background:white ;} /* contains the 3 pics */
 .lilpic {float:left;width:90px;margin-right:1px;padding:4px;text-decoration:none;}  /* the img sized here with padding*/
 .lilpic:hover {width:200px;} /* make a little bigger on hover*/
 .right {text-align:right;}
 .left {text-align:left;}

 .drip {height:54px;display:block;margin:0 auto 0 auto;border:0px solid black;font-size:16px;}
 img {border:0px solid black;}
 img.li {height:34px;display:block;clear:both;float:left;margin-right:8px;margin-bottom:8px;}
 .anchor {text-decoration:underline;color:inherit;font-weight:bold;}
 .anchor:hover {color:red;}
 .hide {display:none;}
 .roundcube {width: 100px; height: 100px; border-radius: 50%;
   background: -webkit-radial-gradient(30% 30%, white, black);
   background: -moz-radial-gradient(30% 30%,white,black);
   background: radial-gradient(30% 30%,white,black);
  }

.box {max-width:90%;padding:3px;}/* max-width corrects width issue only on android chrome, not elsewhere */
#bath2 {float:right;max-width:40%;padding:4px;}
#spanish {font-size:15px;
    display:block;position: relative;
    background-color:#fefefe;
    width: 400px;
    margin: 70px auto;
    border: 5px dashed silver;
    padding: 4px;}
/* accessories use below only at this time  */
.thumbs {    display:block;position:relative;
    height:158px;
    margin:0px 0px 0px 10px;
    float:left;
    border-radius:5px; 
    border-bottom:0px solid blue;}
.thumbs:hover {background-color:#ffffca;border:2px solid yellow;}
.whatever {
   display:block;position:relative;
   clear:both;
   width:68%;
   height:auto;
   float:left;border-bottom:1px solid black;}/* the div */
.whatever li {line-height:2em;} /* make more room for image up to 160px 4 li */
@media only screen and (max-device-width: 480px) {
	.sublogotext { font-size: 120%;line-height:1em;  }
	.threepics {display:none;}
	.logo {max-width:250px;}	
   }
 /* hover navigation follows */
#nav, #nav2 { /* the  container */
   position:relative;
   font-family:verdana,arial,sans-serif;
   list-style:none;
   font-size:18px;
   color:#166DDF;/* #166DDF blue */
   line-height:1.2em;
   letter-spacing:2px;
   z-index:100;
   font-weight:bold;
   margin:auto;
   float:none; 
   width:100%;
   text-shadow:4px 4px 3px white;
   text-align:center;
   letter-spacing:2.4px; /* reads better */
  }

#nav2 a, #nav a{
	text-decoration:none;
	}
#nav a { 
    color:mediumblue;/* #166DDF blue */
    font-size:15px;
    font-weight:bold;
	margin:1px 12px 1px 12px;
	border:0px solid white;
  }
#nav2 a{
 color:black;
 font-size:14px;
 font-weight:normal;
 margin:1px 10px 1px 10px;
 }	

#nav2 a:hover, .nav a:hover, #nav a:hover, #nav li:hover a{
	color:black; 
	background-color:#00ffff; /* turquoise  */
	text-decoration:overline;
	box-shadow:4px 4px 14px #ffffff;
	padding:2px 2px;
}