/* CSS Document */

a {color:#0000ff;text-decoration:underline;cursor:pointer;display:inline-block}
a:hover {color:#ff00ff;} 

sup {color:red;font-size:0.6em}

a img {border-color:#000055}

img
{
border-width:0px;
}


form {margin:auto;display:inline-block;text-align:left}
form table td {padding-bottom:0.1em}
form table td:first-child {text-align:right}
form textarea {width:97%;height:4em}                                                                  
#plantable form input[type="text"],form input[type="email"]  {width:25%}


#pform {font-size:1.2em}
#pform input[type="text"],form input[type="email"]  {width:95%}


form select {width:98%}

#sform 
{display:inline-block;position:relative;background:#ccc;box-shadow:5px 5px 4px #777;}

#sform table{margin:0;width:100%}
#sform td {padding:.2em .4em}
#sform table caption {text-align:center;background:blue;font-size:1.5em;color:#fff;margin-bottom:0.4em;text-shadow:2px 2px #000;padding:.5em 0;width:100%} 
#sform button {width:90%;font-size:1.2em;font-weight:bold}

.codedisclaimer { text-decoration:none;cursor:pointer;z-index:1000}  
.codedisclaimer:hover::after {content:"See FAQ for details";cursor:pointer;z-index:1000}


h1 {font-size:2em;text-align:center;}
h2 {font-size:1.5em;text-align:center;}
h3 {font-size:1.2em;text-align:center;}

#footer
{
position:relative;  
background-color:#000066;
text-align:center;
color:#aaa; 
padding-bottom:4vh;
padding-top:2vh;
}

#header {position:relarive;overflow:hidden}

#header1 a {color:#fff}
#header1 a:hover {color:#ccc}


 
#header2 a
{color:white}

.email2 {display:none}
 
.mytitle  {
font-style:italic;
color:#fff;
text-decoration:underline;
text-align:center;
z-index:2;
text-shadow:4px 4px 4px #333; 
}

#header2 a:hover {color:#ccc}


#header3  a:hover {color:#fff;text-decoration:underline;}

#header3
{
float:right;
position:relative;
overflow:auto;
text-shadow:2px 2px #000;
}   

#headnav
{
position:relative;
margin:auto;
text-align:center;
z-index:2;
}

#headnav a:hover {text-decoration:none;white-space:nowrap;color:#000;background:#ccc}

#headnav a 
{
color:#fff;
width:19.5%;
float:left;
line-height:1.5em;
border-left:solid 1px #777;
text-decoration:none;
white-space:nowrap;

}    
#headnav a:last-child
{border-right:solid 1px #777;}
         
#popnav{
text-align:center;
position:fixed;
left:5vw;right:5vw;top:3vh;bottom:2vh;display-index:100;
background:#111;
z-index:100;
border:solid 3px;#999;
overflow:auto;
padding-top:4vh;
}    

#popnav1
{display:none;position:fixed;left:0px;right:0px;top:0px;bottom:0px;opacity:0.7;z-index:80;background:#333}

#popnav a {display:inline-block;font-family:arial;width:80%;margin:3vh auto auto auto;color:#fff;line-height:5vh;background:#999;font-size:4vh;vertical-align:middle;text-decoration:none;border-radius:1vh;text-shadow:2px 2px 4px #000000;}

#popnav a:hover {background:#555;color:#eee }

#footnavbreak {display:none;}      

 #popnavclose{
position:absolute;right:1vw;top:1vh;width:7vw;text-align:center;background:#eee;margin-top:0px;text-decoration:none;border-radius:2vw;font-family:arial;font-weight:bold  }

#popnavclose a {background:none;margin:0px;text-decoration:none;color:#000;text-shadow:none}


/* Content */

.maincontent p
{text-align:left}

.break
{display:inline-block;}

.gtypes{
width:100%;
clear:both;
overflow:auto;
color:#fff;
}
.gtypes div  {
position:relative;
float:left;
margin:2%;
width:20%;
background-color:#000;
height:100%;
padding-bottom:1vh;  
text-align:center;
border-top:solid 1px #000;                
}

.gtypes img{
display:block;
width:100%;
height:auto;}
.gtypes img:hover{opacity:0.8}

.gtypes a {color:#fff}

.gtypes a:hover {color:#ccc}

.gtypes a:last-child {margin:auto 2px auto 2px}

 .requestquote
{
position:relative;
display:block;
margin:5vh auto;
width:100%;
background:#FFBF00;
padding:1em 0;
font-size:2em;
text-align:center;
border-radius:3vh;
}

.pricingtable
{border:solid 1px #000;border-collapse:collapse;position:relative;margin:auto;max-width:500px;background:#b0e0e6;border:solid 1px #000}

 .pricingtable td
{border-bottom:solid 1px #333;padding:0.4vw}  
  
.pricingtable th {font-size:1.2em;border-bottom:solid 1px #000;text-align:center;background:#ccc;padding:.5em 0em}


.list1  {font-size:1.0em;list-style-type:none;margin:1em;padding:0;text-align:left}
.list1 li {margin-top:1em;}  
.list1 h2 {font-weight:bold;font-size:1.1em;margin-bottom:0px;margin-left:-0.8em;line-height:1.2em;text-align:left}


.mytable { text-align:left;}
.mytable td:first-child {text-align:right}



 
/* graphic at top of design.php page */
 
 #workflow {
 position:relative;overflow:auto;padding-bottom:3px;margin:1em auto;display:inline-block;font-size:2.5vw}
 
 #workflow p
 {margin:0.2em;text-align:center}
 
 #workflow div 
 {position:relative;
 display:inline-block;
 float:left;
 width:6em;
 border:solid 1px #000;
 box-shadow:2px 3px #999; 
 }    
  #workflow img
 {
  position:relative;
  float:left;
  display:inline-block;
  width: 2em;
  height:auto;
  margin:1em 1em auto 1em; 
} 

@media (max-width:800px)
{
#workflow {font-size:3.8vw;}
#workflow img{width:1.2em;margin:1em 0.2em auto 0.2em;};
}
@media (max-width:800px)
{
#workflow {font-size:3.8vw;}
#workflow img{width:1.2em;margin:1em 0.2em auto 0.2em;};
}
@media (max-width:480px)
{
#workflow {font-size:4.7vw;}
#workflow img{width:1.0em;margin:1em 0.2em auto 0.2em;}
#workflow div {width:auto;max-width:6em;}
}

/* portfolio */   
.portfolio img {width:100%;height:auto;}     
.portfolio a:hover {opacity:0.9;}

#ppimage img{max-width:99%;margin:auto;height:100&}

.planimage {margin:auto;cursor:pointer;max-height:28em;}

.ppthumb {text-align:center;background:#333}
.ppthumb img {margin:1em;cursor:pointer;max-width:90%}
.ppthumb a:hover{opacity:.8}

.cdsamples
{
display:inline-block;
float:left;
width:30%;
overflow:auto;
background:#000;
margin:1em 1%;
border:solid 1px #333;
box-shadow:0.3em 0.3em 0.3em #999;
} 

.cdsamples img {
width:100%;
height:auto;
cursor:pointer;  
}

.cdsamples img:hover
{opacity:0.9}

.enlargeimage
{     
float:none;
display:block;
position:fixed;
z-index:200;
left:10%;
right:10%;
top:5%;  
bottom:10%;
cursor:pointer;
text-align:center;
}


.enlargeimage img
{ 
max-width:96%; 
border:solid 2px #333;
max-height:80vh;
box-shadow:50px 50px 50px 15px #000;

}

.img4wide {overflow:hidden;text-align:center;height:13vw;max-height:150px}

.img4wide img { 
margin:0px 1vw 0px 0px;  
height:13vw;
max-height:150px;
}

.bottomtext {
position:relative;
background:#ddd;
clear:both;
margin:2em 0;
overflow:auto;
font-size:2em;
}

.bottomtext img{
float:left;
max-height:9em;
max-width:35%;
}
.bottomtext div
{display:inline-block;float:left;margin:0;max-width:64%}

.bottomtext a
{margin:1em;display:block}

.purchase {margin:0 1em;text-align:center}

.purchase table{border-collapse:collapse;border:solid 1px #aaa;margin:auto}

.purchase table caption {font-weight:bold;font-size:1.5em}

.purchase table td {border:solid 1px #ccc;padding:.3em;text-align:left}

.purchase h3 {color:red;font-size:1.2em}

.contentheader {margin:auto}

.contentheader img {max-width:30vw;margin-left:1em;box-shadow:.2em .2em .2em}

.purchase button {font-size:1.5em;margin:1em auto 0 auto;cursor:pointer}


.searchresults
{text-align:center;position:relative}

.searchresults1
{
float:left;
position:relative;
margin:1em;
background:#000;  
height:15em;
display:flex;align-items:center;
border:solid 2px #000
} 

.searchresults1:hover
{
border: solid 2px blue;
background:#333
}

.searchresults1 img
{
cursor:pointer;
}



.searchresults1 a
{display:inline;text-decoration:none}

.searchresults1 p
{margin:.1em auto;padding:0;color:white;text-align:center;display:block}


.dynamictab
{background:#E0F0FF;
text-align:center;
}

.dynamictab div
{
border:solid 1px #999;
cursor:pointer;
display:inline-block;
background:#eee;
padding:4px;
margin:4px;
}

.dynamictab div:hover
{background:#ccc;
}

.dynamictab a
{color:#000;
text-decoration:none;}

#menusearch{
border: solid 1px #000;
background:#fff;
padding:0px;
border-radius:0em 1em 1em 0em;
height:1.5em;
}

#menusearch img
{
height:1em;
margin-right:6px;
vertical-align:middle;
cursor:pointer;
}

#menusearch img:hover
{
height:1.1em;
}


#cuslabel
{color:#000;
transition:color 2s}