@charset "utf-8";
*{   /* overall style */
	margin: 0px;
	padding: 0px;
}
/* take care of OLDER browsers */
header, section, footer, aside, nav, article, hgroup{
	display:block;
}

body{
    text-align:center;
    /*background: linear-gradient(orange,snow); */
    background-image:url("./Images/bg7.jpg"); 
    font-family:Verdana;
    font-size:14px;
}

h1
{
	font: 25px Verdana;
}

h2{
	font: 20px Verdana;
}

h3{
	font: 18px Verdana;
}
#the_popup{  
    box-shadow:10px 10px 2px darkgray;
    border-radius:15px;  /* rounded corner */
    width:500px;
    padding:50px;
    margin:5px auto;   /* center of page */
    background-color:snow;
    font-family: Tahoma;
    color:#3C1414;
    text-align:left;
}

#popup_body{
    text-align:center;
    background: linear-gradient(orange,snow); 
    font-family:Verdana;
    font-size:14px;
}
#the_body {
    box-shadow: 10px 10px 2px darkgray;
    border-radius: 15px; /* rounded corner */
    width: 1000px;
    height: 620px;
    margin: 10px auto; /* center of page */
    padding: 10px;
    background-color: whitesmoke;
    font-family: Tahoma;
    color: #3C1414; 
    text-align: left;
}
#the_header{	
    width:100%;
    height: 8%;
	padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    font-size:30px;
    font-family:Broadway;
    text-shadow:1px 1px 1px snow;
	/* background: radial-gradient(yellow 10%, white 30%, lightblue 60%); */
	background: linear-gradient(180deg,#be5307,#bea909 ); 
    /* background-color: #285A6F; */
}

#the_input_text {
    clear:both;  /* because of float above */ 
    border-radius:5px;   /* round corner */
    height:16px;
    width:400px;
    box-shadow:1px 1px 1px darkgray;
    color:#3C1414;
    text-align:left;
    font-size:14px;
    border-top:1px ridge #3C1414;
    padding:2px;   
}

#the_input_button {
    clear:both;  /* because of float above */ 
    border-radius:2px;   /* round corner */
    height:28px;
    width:120px;   
    color:#3C1414;
    text-align:center;
    font-size:14px;
    background-color:#bea909;  
}

#the_input_textarea {
    clear:both;  /* because of float above */ 
    border-radius:5px;   /* round corner */
    width:400px;
    height:100px;
    box-shadow:1px 1px 1px darkgray;
    color:#3C1414;
    text-align:left;
    font-size:14px;
    border-top:1px ridge #3C1414;
    padding:2px;
}

#the_list li{
    text-align:left;
    padding:30px;
    list-style-Type: none;
    padding: 0 0 4px 23px;
    background: url("./Images/arrow.gif") no-repeat left top;
}

#the_list2 li{
    text-align:left;
    padding:30px;
    list-style-Type: none;
    padding: 0 0 4px 23px;
    color: blue;
    background: url("./Images/arrow.gif") no-repeat left top;
}

#article_header
{
    text-align:center;
    font-size:24px;
    font-family:Broadway;
    color:#3C1414;
    padding:10px;
}

#sub_header
{
    text-align:center;
    font-size:18px;
    font-family:Britannic Bold;
    color:#3C1414;
    padding:10px;
}
/* end of common id */

/* start of nav bar */
nav{
    width:100%;
    height:2%;   
    border-top:1px ridge #3C1414;
    border-bottom:1px ridge #3C1414;
    border-bottom-style:inset;
    background-color: #000000;
    text-align:center;
    text-emphasis:triangle;
/*    box-shadow:0px 4px wheat; */
   }

nav li{
    display:inline-block;  /* in nav bar */
    list-style:none;
    margin-bottom: 6px; 
    padding-top:2px;
}

nav a:link{
    color:white;
    font-size:16px;
    text-decoration:none;  /* no underline */
    padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;
}
nav a:visited{
    color:white;
    font-size:16px;
    text-decoration:none;  /* no underline */
    padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;
}

nav a:hover{
    color:white;
    font-size:16px;
    text-decoration:none;  /* no underline */
    padding-left:10px;
    padding-right:10px;
    background-color:#17475C;
    padding-bottom:5px;
}
/* end of nav bar */

#main_left {
    float: left;
    width: 500px;
    padding:30px;
    text-align: center;
}
#main_right
{
    float:left;    
    width:380px;
    padding:30px;
}


#espanol_left
{
    float:left;
    width:540px;
    padding:30px;

}
#espanol_right {
    float: left;
    width: 340px;
    padding:30px;
}


#frame_right {
    float: left;
    width: 380px;
    padding:30px;
}   

#frame_left
{
    float:left;
    padding:30px;
    width:500px;
}

#contactlenses_right {
    float: left;
    width: 420px;
    padding:30px;
}   

#contactlenses_left
{
    float:left;
    padding:30px;
    width:460px;
}

#service_right {
    float: left;
    width: 380px;
    padding:30px;
}   

#service_left
{
    float:left;
    padding:30px;
    width:500px;
}

#lenses_right {
    float: left;
    width: 380px;
    padding:30px;
}   

#lenses_left
{
    float:left;
    padding:30px;
    width:500px;
}

#saving_right {
    float: left;
    width: 300px;
    padding:30px;
}   

#saving_left
{
    float:left;
    padding:30px;
    width:580px;
}

#about_right {
    float: left;
    width: 380px;
    padding:30px;
}   

#plan{
    width:880px;
    text-align:center;
}
#about_left
{
    float:left;
    padding:30px;
    width:500px;
}

#contact_left
{
   float:left;
   width:480px;
   padding:30px;
}

#contact_right
{
    float:left;    
    width:400px;
    padding:30px;
}
#the_footer{   
    clear:both;  /* because of float above */ 
    height:8%;
    box-shadow:10px 10px 5px darkgray;
    color:#3C1414;
    text-align:left;
    font-size:14px;
    border-top:2px ridge #3C1414;
    /* background: linear-gradient(180deg, white, #17475C); */
    background: linear-gradient(180deg,#bea909,#be5307 ); 
   }
#the_footer table {
        text-align: left;
        padding-left:200px;
    }
#the_footer td {
        text-align: left;
        padding:20px;
    }