﻿

/* Display HTML5 structural elements as blocks */

article, aside, figure, figcaption, footer, hgroup, header, 
section, nav,ul
{
   display: block;
 }


   

   
   /*Set the default page element styles*/
  body
  {
	background-color: rgb(255,255,255,);/* white */	
	width: 95%;
	min-width: 1000px;
	max-width: 1400px;
	font-family: 'Verdana','Geneva',sans-serif;
	font-size:100% ;      /*    10vw ; changed to 10vw Resize the browser window to see how the text size scales.*/	
	font-weight: inherit;
	line-height: 1em;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	vertical-align: baseline;	
    border-left:rgb(179, 0, 0);     /*red*/
    border-right:rgb(179, 0, 0);     /*red*/
}

/* Header styles */

#header
 {
 
   width:60%;
    text-transform:uppercase;  
   font-size:large;
   font-style:italic;
   background:;
   text-align:Left;
	color:rgb(117, 117, 117); /*shade of black*/
      border-top:rgb(179, 0, 0);     /*red*/
   background-color: rgb(255,255,255);/* White*/
   border-bottom: rgb(179, 0, 0);     /*red*/
}

#header img 
{
   
   float:left;
   width: 60%;
   margin-bottom:30px;
   

   
}


 #hggroup/* Top heading*/
{
            display:block;
            font-size:x-large;
             float:left;
             background-color:rgb(255,255,255);/* White*/
            color:white;
            border: rgb(179, 0, 0);     /*red*/
            margin-top:20px;
			margin-bottom:30px;
			padding:;                                 
			width:45%;  /* width of box*/
			height:95%
			
}
 #hggroup h1 :first-of-type:first-line
{
   text-transform:uppercase;  
   font-size:large;    
}


#hggroup h2 :first-of-type:first-letter
{
        font-size:inherit;
	   font-family: 'Times New Roman ','Times',,sans-serif;
}





/* Vertical Navigation list styles */

	
	
}


#verticalnav div
{
           	
}
#verticalnav ul

{
         width:60%;
         height:250px;
         list-style-type: none;/* removes markers*/
         margin-top:10px;
		 margin-bottom:10px;
         padding: 0px;
         font-size: 0.9em;  /*letters in UL Men Golf Shoes */
         float:left;
         background-color:rgb(117, 117, 117); /*shade of black*/ 
\
         
         
}

 #verticalnav ul li 
{
       
    display: block;  /* li line in block */
    font-size=100%;
   
    
     
	width: 63%;  /* 20.6% */ /* width of box */
    float:left;
    height:25px;    /* 22px *//* height of box */  
    text-align:center;
    border:rgb(179, 0, 0);     /*red*/	   
    background-color:rgb(255,255,255);/* White*/  /* white correct*/  
    line-height:1.5em;
    list-style-type:none;
    margin: 20px 10px 2px 10px;  /*outside of box-separated one element from another
			                                 top-right-bottom-left*/

}

 #verticalnav  ul li a
 {
       
          color:rgb(179, 0, 0);     /*red*/
		  text-decoration:none;  
		          
 }


 #verticalnav ul li a:hover
{
background-color:white;
   
 /*  background-color:rgb(83,142,213)*/;/* Blue */
}
/*---------------------------------------------------------------------*/
/* Vertical Navigationnav2 list styles in footer */

	
	
}


#verticalnav2 div
{
           	
}
#verticalnav2 ul

{
         width:30%;
         height:250px;
        list-style-type: none;/* removes markers*/
         margin: 0px;
         padding: 0px;
         font-size: 0.9em;  /*letters in UL Men Golf Shoes */
         float:left;
         background-color: white;
\
         
         
}

 #verticalnav2 ul li 
{
       
    display: block;  /* li line in block */
    font-size=100%;
	width: 63%;  /* 20.6% */ /* width of box */
    float:left;
    height:25px;    /* 22px *//* height of box */  
    text-align:center;
    border: rgb(117, 117, 117); /*shade of black*/	   
    background-color:rgb(255,255,255);/* White*/  /*rgb(255,255,255); white correct*/  
    line-height:1.5em;
    list-style-type:none;
    margin: 20px 10px 2px 10px;  /*outside of box-separated one element from another
			                                 top-right-bottom-left*/

}

 #verticalnav2  ul li a
 {
       
          color:rgb(117, 117, 117); /*shade of black*//* Lettering */
		  text-decoration:none;  
		          
 }


 #verticalnav2 ul li a:hover
{
background-color:white;
   
 /*  background-color:rgb(83,142,213)*/;/* Blue */

}




/* verticalnavSelect*/

#verticalnavSelect ul

{
          width:51%;
      
        list-style-type: none;/* removes markers*/
         margin: 0px;
         padding: 0px;
         font-size: 0.9em;  /*letters in UL Men Golf Shoes */
         float:left;
         background-color:white;
       
         
}

 #verticalnavSelect ul li 
{
       

    display: block;  /* li line in block */
    font-size =100%;
	width: 32%;  /* 20.6% */ /* width of box */
    float:center;
    height:21px;    /* 22px */  
    text-align: center;
    border: rgb(255, 92, 92);/*shade of red*/   	   
    background-color:Black;  /*rgb(255,255,255);  white correct*/        
    line-height:1.5em;
    list-style-type:none;
    margin: 20px 10px 2px 10px;  /*outside of box-separated one element from another
			                                 top-right-bottom-left*/

}

 #verticalnavSelect  ul li a
 {
       
          color:black;/* Lettering */
		  text-decoration:none;  
		  background-color:rgb(179, 0, 0);     /*red*/
		          
}


 #verticalnavSelect ul li a:hover
{
background-color:white;

   
 /*  background-color:rgb(83,142,213)*/;/* Blue */

}

/* Vertical Navigationnav3 list styles----------------------- */

 #hggroup3/* Top heading*/
{
            display:block;
            font-size:x-large;
             float:left;
             background-color:rgb(255,255,255);/* White*/
            color:white;
            border: rgb(179, 0, 0);     /*red*/
			margin: 20px 10px 10px 10px; /*outside of box-separated one element from another
			                                 top-right-bottom-left*/
			padding: 8px;                                 
			width:35%;  /* width of box*/
			height:55%
			
}
 #hggroup h1 :first-of-type:first-line
{
   text-transform:uppercase;  
   font-size:large;    
}
	
	
}


#verticalnav3 div
{
           	
}
#verticalnav3 ul

{
         width:50%;
         height:250px;
        list-style-type: none;/* removes markers*/
         margin: 0px;
         padding: 0px;
         font-size: 0.9em;  /*letters in UL Men Golf Shoes */
         float:right;
         background-color:white;/*rgb(117, 117, 117); /*shade of black*/ 
\
         
         
}

 #verticalnav3 ul li 
{
       
    display: block;  /* li line in block */
    font-size=100%;
   
    
     
	width: 53%;  /* 20.6% */ /* width of box */
    float:left;
    height:25px;    /* 22px *//* height of box */  
    float:left;
    border:rgb(179, 0, 0);     /*red*/	   
    background-color:rgb(255,255,255);/* White*/  /* white correct*/  
    line-height:1.5em;
    list-style-type:none;
    margin: 20px 10px 2px 10px;  /*outside of box-separated one element from another
			                                 top-right-bottom-left*/

}

 #verticalnav3  ul li a
 {
       
          color:rgb(179, 0, 0);     /*red*/
		  text-decoration:none;  
		          
 }


 #verticalnav3 ul li a:hover
{
background-color:white;
   
 /*  background-color:rgb(83,142,213)*/;/* Blue */
}



/* Section----------------------*/

#section

{
           	background-color: rgb(255,255,255,);/* white */	
            float :left;
            border: rgb(179, 0, 0);     /*red*/
            border:medium;
			margin: 50px 100px 10px 30px;
			width: 95%;
			;
}

#section p
{
  Text-align:Left;
  font-size:120%;
}

#section >p:first-of-type:first-line

{
     text-transform:uppercase;
     color: white;
}


#article {
   float :left;
   width: 100%;
   border-bottom:rgb(179, 0, 0);     /*red*/
   padding-bottom:10px;
}
#article h1 {
   font-size: 2.5em;
   font-family: "Times New Roman", serif;
   font-weight: bold;
   color: rgb(179, 0, 0);     /*red*/
   letter-spacing: 7px;
   margin-right: 20%;
   padding-bottom:10px;
}



#article h2 {
   font-size: 2.5em;
   font-family: "Times New Roman", serif;
   font-weight: bold;
   color: rgb(179, 0, 0);     /*red*/
   letter-spacing: 7px;
   margin-right: 20%;
   padding-bottom:10px;
}

#article <p
 {
   font-size:small;
   color:rgb(255,255,255,);/*white*/ /*rgb(233, 69, 0);red*/
   margin: 10px 25% 10px 10px;
   
  }

 #article ul
 {
   padding-left:25px;
	}
	
 #aside ul li
 {	
	list-style-type:square;/* removes markers*/


nav.verticalNAVaside h3 
{
      color:red;
       font-size:200%;
	   font-family: 'Times New Roman ','Times',,sans-serif;
}


/* Style for aside */

#aside
{
            float:right;
            background-color:white;
            color:white;
            border: rgb(179, 0, 0);  /*red*/
            border:medium
			margin: 20px 100px 10px 100px; /*outside of box-separated one element from another*/
			padding: 8px;                                 
			width:90%;  /* width of box*/
}



 
 #aside ul
 {
   padding-left:25px;
	}
	
 #aside ul li
 {	
	list-style-type:square;/* removes markers*/

}
 
 



/* Footer Styles */
#footer 
{
            float:center;
			  width:90%;
			  color:white;
            background-color:rgb(255,255,255,);/*white*/
            border:rgb(117, 117, 117); /*shade of black*/
			margin: 10px 10px 10px 30px;
			padding: 8px; 
			
}

*/style for buttons not set up*/

#button {
 background-color: rgb(255,255,255,); /*white*/
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}



*/style for zoom not set up*/

.zoom {
  padding: 50px;
  background-color: rgb(255,255,255,);/*white*/
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


<div class="zoom"></div> 

