@charset "utf-8";
/* CSS Document */
/* GRA 310 - Final Project */
/* Author: Terance Williams (The Graphics Man) */

body {
	    background-color: #66CC00;
  }
  
a:link    {color:#FF0;}	
a:visited {color:#FF0;}

h2 
  {
	    /* color: #3300CC; /* font color */
	    /* color: #333333; /* font color */
	  
  }
  
.balance {
		margin-top: -.65em; /* adjust by -.65em */
}

.center
  {
	    text-align:center; /* center text */
  }
  
.fontArial
  {
	    font-family:Garamond, Helvetica, sans-serif;

  }
  
.enlargeFont
  {
	    font-size: 32px; /* enlarge font */
	    line-height: 72px; /* 6.07.2015: fixed, mahaha... >:) */ 
	                     /* old, reduce spacing between lines to 12.5 percent 
						    note: this maked the text unreadable when the browser was reduced in size*/
  }
  
.shadow {
		font-weight:bolder;
		text-shadow: #EEE 1px 1px;
}

   
#container
  {
	  	float:left; 
	    background-color: #FF0099; /* foreground container color */
	    color: #EEEEEE; /* font color */
		width: 80%;
		max-width: 1366px; 
	    min-width: 640px;
	    margin:0 8em auto; /* center */
	    border-radius: 10px; /* round the corners a little bit; this makes it more visually appealling. >:) */
	    box-shadow: 4px 4px 5px #900;
	  
	    border-top: 2px solid #EEE;
	    border-bottom: 2px solid #EEE;
	    border-left: 2px solid #EEE;
	    border-right: 2px solid #EEE;
  }
  
#title
 {
	   float:none;
	   background-color: #FF0099;
	   color: #FF0; /* font color */
	   width: 100%;
	   margin:0 auto; /* center */
	   text-shadow: #900 0.2em 0.2em 0.3em; 
	   border-radius:10px; /* round the corners a little bit to match the container design, mahaha...  ;) */
	   width: 80%;
	   margin:0 auto; /* center */
 }
  
#content
  {
	   float:none; 
	   max-width: 80%;
	   min-width: 640px;
	   margin:0 auto; /* center */
  }
  
   
/*
 NAVIGATION LAYOUT ELEMENTS
*/
#nav, #fake{
	   list-style-type: none;
	   cursor: default;
	   margin: 0;
	   padding: 0;
	   float: left;
	   width: 100%;
   }
   

#nav .wrap {
	   text-align:center; 
   }

.wrap { 
	   position:relative;
	   margin: -2px auto; /* adjust top pixels by -2 */
	   width: 610px; /* was 510px; */
   }
   
.wrap2 { 
	   position:relative;
	   margin: -2px auto; /* adjust top pixels by -2 */
	   width: 610px; /* was 510px; */
   }
   
#nav li, #fake li{
	   list-style-type: none;
	   position: relative;
	   text-align: center;
	   width: 8em; /* width of menu items (links) */
	   float: left;
   }

/*
 NAVIGATION DESIGN ELEMENTS
 */
#nav, #fake {
	   background-color: #FF0; /* background color yellow */
       border-bottom: 2px solid #CCCC00; /* bottom border color pink */
	   border-top: 2px solid #FFCC00; /* /* top border color pink */  
   }

#nav a {
	   display: block;
	   background-color: #FF0; /* background color yellow */
	   color: #FF0099; /* font color pink */
	   font-size:18px;
	   /* text-shadow: #900 0.1em 0.1em 0.2em; */
	   text-decoration: none; /* no underline with link */
	   padding: 0.5em 0.75em; 
	   margin-top: -14px;
   }

#nav a:hover {
	   background-color: #66CC00;
	   color: #FF0; /* font color yellow */
   }

#nav .currentPageTab {
   	  background-color: #EEE;
	  color: #FF0099; /* font color pink */
	  /* text-shadow: #900 0.1em 0.1em 0.2em; */
  }
   
#fake {
	   border-radius:5px;
	   margin-bottom: 10px;  
}

#footer {
	   float:left; 
	   /* color: #990033; */
	   font-style: italic;
	   text-align: right;
	   width: 90%;
	   /* margin:0 auto; /* center */
	   
	   padding-left: 2%;
	   padding-right: 2%;
   }
   
#footer a:focus {
	  background-color: #FF0099; /* background color pink */
	  color: #FF0; /* font color yellow */
   }
   
#footer a:hover {
	  background-color: #66CC00;
	  color: #FF0099; /* font color pink */
	  padding-left: 2%;
	  padding-right: 2%;
	  border-radius: 5px; /* round the corners a little bit; this makes it more visually appealling. >:) */
   }
   
#footer .currentPageTab {
	   
   }
   
/* 
HOME PAGE 
*/
#homepageVisuals {
	float:none;
	background-image: url("bitmaps/ID-10095333.jpg");
	background-position: center;
	background-repeat:no-repeat;
	border-top: 2px solid #EEE;
	border-bottom: 2px solid #EEE;
	border-left: 2px solid #EEE;
	border-right: 2px solid #EEE;
	height: 296px; /* height: 296px; */
	width: 80%; /* old 100%; */
	padding-left: 2%;
	padding-right: 2%;
	color: #FF0099;
    /* text-shadow: #000 0.2m 0.2em 0.3em; */
	margin-bottom: .4em;
	border-radius: 10px; /* round the corners a little bit to continue the visual element. This is sweet... >:)*/
	box-shadow: 4px 4px 5px #900;
	margin:0 auto; /* center */
	
}

/* 
ABOUT PAGE
*/
#aboutpageVisuals {
	float:none;
	background-image: url("bitmaps/ID-100234390.jpg"); 
	background-position: center;
	background-repeat:no-repeat;
	border-top: 2px solid #EEE;
	border-bottom: 2px solid #EEE;
	border-left: 2px solid #EEE;
	border-right: 2px solid #EEE;
	height: 296px; /* height: 296px; */
	width: 80%; /* old 100%; */
	padding-left: 2%;
	padding-right: 2%;
	color: #FF0099; /* font color */
	/* text-shadow: #000 0.2em 0.2em 0.3em; */
	margin-bottom: .4em;
	border-radius: 10px; /* round the corners a little bit to continue the visual element. This is sweet... >:)*/
	box-shadow: 4px 4px 5px #900;
	margin:0 auto; /* center */
}

#narrative {
    padding-left: 4%;
	padding-right: 4%;
}

/* 
CONTACT PAGE
*/
#contactpageVisuals {
	float:none;
	background-image: url("bitmaps/ID-100313689.jpg"); 
	background-position: center;
	background-repeat:no-repeat;
	border-top: 2px solid #EEE;
	border-bottom: 2px solid #EEE;
	border-left: 2px solid #EEE;
	border-right: 2px solid #EEE;
	height: 296px; /* height: 296px; */
	width: 80%; /* old 100%; */
	padding-left: 2%;
	padding-right: 2%;
	color: #FF0099; /* font color */
	/* text-shadow: #000 0.2em 0.2em 0.3em; */
	margin-bottom: .4em;
	border-radius: 10px; /* round the corners a little bit to continue the visual element. This is sweet... >:)*/
	box-shadow: 4px 4px 5px #900;
	margin:0 auto; /* center */
}

/*
MENU PAGE
*/
#menupageVisuals {
	float:none;
	background-image: url("bitmaps/ID-100223847.jpg");
	background-position: center;
	background-repeat:no-repeat;
	border-top: 2px solid #EEE;
	border-bottom: 2px solid #EEE;
	border-left: 2px solid #EEE;
	border-right: 2px solid #EEE;
	height: 296px; /* height: 296px; */
	width: 80%; /* old 100%; */
	padding-left: 2%;
	padding-right: 2%;
	color: #FF0099;
	/* text-shadow: #000 0.2em 0.2em 0.3em; */
	margin-bottom: .4em;
	border-radius: 10px; /* round the corners a little bit to continue the visual element. This is sweet... >:)*/
	box-shadow: 4px 4px 5px #900;
	margin:0 auto; /* center */
	
}

#fffHeader {
	float:none;
	width: 80%;
	padding-left: 2%;
	padding-right: 2%;
    margin:0 auto; /* center */
}

#column1 {
	float:left;
	width: 39%;
	
	padding-left: 2%;
	padding-right: 2%;
	margin:0 2.3em auto; 
    /* margin:0 auto; /* center */
}

#column2 {
	float:left;
	width: 39%;
	
	padding-left: 2%;
	padding-right: 2%;
    margin:0 auto; /* center */
}

h3.menu {
	cursor:pointer;
	background-color: #FF0; 
	color: #FF0099; /* font color pink */
	border-radius:5px;
	padding-left: 2%;
	padding-right: 2%;
    height: 18pt;
}

h3.menu:hover { 
	background-color: #66CC00; /* green */
	color: #FF0099; /* pick */ 
} 

.menuPics, .salePics {
	width: 40%;
	/* text-align: left; */
	float:left;
	margin-left: 1em;
	margin-right: 1em;
	/* border: #CC0033 solid 4px; /* red */
	border: #EEE solid 4px; /* light grey (silver) */
	border-radius:25px;
}

.aboutPics {
	width: 18%;
	/* text-align: left; */
	float:left;
	margin-top: 1em;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	/* border: #CC0033 solid 4px; /* red */
	border: #EEE solid 4px; /* light grey (silver) */
	border-radius:25px;
}

.blah {
	display: block; 
}

.lt{
	text-align: left; 
}

.ieColorFix {
	color: #EEE; /* ie browsers color fix */
}

.credits a:hover {
	background-color: #66CC00;
	color: #FF0099; /* font color pink */
	padding-left: 2%;
	padding-right: 2%;
	border-radius: 5px; /* round the corners a little bit; this makes it more visually appealling. >:) */
}

.columnBox {
	float: left;
	width: 100%;
	margin-bottom: .2em;
}