/* 10/8/2008 CSS Exercise */

body
{
color:#000000;
font-family:"Times New Roman", Times, serif;
font-size:12px;
margin:0;
background:#000000 url(images/gingko_background.jpg) repeat-y center;  /* Better to use "background" than "backgroundimage" */
}

/* to center set margins: margin:0px auto; position:relative; */
/* "#" is used because it is an ID tag -- this defines a "layer" or "container"  */
/* Padding and margin affect placement but are not included in the width tag */
/* relative v. absolute: */
/* Can use negative margins to make layers overlap */

/* To add border to image that is in a table cell: 
td img
{
border: 1px;
solid: #335599;
}
This would apply to all cells in all tables . . . */

/*  NOTE  */
/*  To change the behavior/appearance of an element within a div you can do things like:
/*  .bodytext a (with its characteristics like color padding, etc.)or .bodytext li (with its characteristics like color padding, etc.)to globally impact all links and/or list items within .bodytext  */ 
/* a.style is a rewrite of the <a . . .> when you put the class inside a link tag.  e.g. <a ref ="address" class="style">  */
/*  .style a indicates that if any link is inside a tag with that style it should use those instructions.  Where "style" is any class like bodytext, container, and etc.  */   


#container
{
position:relative;
Margin: 0px auto; /* To make the container center on the page use: Margin: 0px auto; */
padding:10px;
width:750px;
height:800px;
/* margin-bottom:400px; */
margin-top:10px;
background: url('images/background.jpg');

}
#containercatalog
{
position:relative;
Margin: 0px auto; /* To make the container center on the page use: Margin: 0px auto; */
padding:10px;
width:800px;
height:7500px;
margin-top:10px;
background: url('images/background.jpg');
}
#gallery_title_box
{
position:absolute;
width:500px;
height:75px;
margin-top:100px;
margin-left:25px;
}

/*
#photo   "#" is used because it is an ID tag -- this defines a "layer" or "container"  And it is unique and the only one 
{
position:relative;  go to http://w3schools.com/ 

height:20px;
margin:5px;  the amount of space OUTSIDE container 
border:1px ridge #ccc;   borders apply to the edges of the padding padding starts at top and work around clockwise; if you only use one value it applies to all four sides
}
*/
#shows  /* "#" is used because it is an ID tag -- this defines a "layer" or "container"  And it is unique and the only one */
{
position:absolute; 
padding:10px; 
top:600px;
left:30px;
height:150px;
width:350px;

}
#contact  /* "#" is used because it is an ID tag -- this defines a "layer" or "container"  And it is unique and the only one */
{
position:absolute; 
padding:10px; 
top:375px;
left:30px;
height:200px;
width:350px;
text-align:center;
background: url('images/contact_background.jpg') no-repeat center;

}

#logo 
{ 
position:absolute;
top:16px;
left:20px;
width:220px;
height:73px;
background-color:#666;
z-index:2;
}
#catalog_text
{ 
position:absolute;
top:150px;
left:20px;
width:350px;
height:200px;
background-color:#530E06;
padding:20px;text-align:center;
}

#slideshow 
{ 
position:absolute;
padding:20px;
left:200px;
width:160px;
height:225px;
top:100px;
background-color:#530E06;
z-index:1;
}
#text1
{ 
position:absolute;
top:110px;
left:0px;
width:175px;
height:150px;
background:url('images/background.jpg');
z-index:2;
text-align:right;
}
#text2
{ 
position:absolute;
top:60px;
padding:10px;
left:420px;
width:300px;
height:800px;
background-color:
#3C0000;

z-index:2;

}

#banner { position:relative;
Margin: 0px auto;
width:200px;
height:100px;
margin-bottom:400px; 
margin-top:50px;
background-color:#666;
height: 600px;  }

#order { position:absolute;
width:200px;
height:100px;
top:450px;
left:50px;
align:center;
}


#navigation  
{ 
position:absolute;
width:600px;
height:50px;
margin-left:300px; 
Top:20px;
}

/* Link styles  */
.emaillink 
{
}
a.emaillink{
font-weight:normal;
	font-size: 14px;
	color:
	#FFCC66;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}
a.emaillink:hover 
{
background-image: url('images/Link1-button_2.jpg');
}

.orderlink 
{
position:absolute;
top:450px;
left:55px;
width:200px;
height:30px;

}
a.orderlink
{
background: url('rollover_images/rollover_catalog.jpg') no-repeat center;
}
a.orderlink:hover 
{
background-image: url('rollover_images/rollover_catalog_hover.jpg');
}

/*  You need to put a transparent image over the images that will swap out with hover, etc since background images won't use alt tags for recognition by google */

.homelink 
{
position:absolute;
top:0;
left:0;
width:80px;
height:30px;
}
a.homelink
{
background: url('rollover_images/rollover_home.jpg') no-repeat center;
}
a.homelink:hover 
{
background-image: url('rollover_images/rollover_home_hover.jpg');
}
.cataloglink 
{
position:absolute;
left:85px;
top:0;
width:80px;
height:30px;
}
a.cataloglink
{
background: url('rollover_images/rollover_catalog.jpg') no-repeat center;
}
a.cataloglink:hover 
{
background-image: url('rollover_images/rollover_catalog_hover.jpg');
}
.gallerylink 
{
position:absolute;
top:0;
left:170px;
width:80px;
height:30px;
}

a.gallerylink
{
background: url('rollover_images/rollover_gallery.jpg') no-repeat center;
}
a.gallerylink:hover 
{
background-image: url('rollover_images/rollover_gallery_hover.jpg');
}

.aboutlink 
{
position:absolute;
top:0;
left:255px;
width:80px;
height:30px;
}
a.aboutlink
{
background: url('rollover_images/rollover_about.jpg') no-repeat center;
}
a.aboutlink:hover 
{
background-image: url('rollover_images/rollover_about_hover.jpg');
}

.testimonialslink 
{
position:absolute;
top:0;
left:340px;
width:144px;
height:30px;
}
a.testimonialslink
{
background: url('rollover_images/rollover_testimonials.jpg') no-repeat center;
}

a.testimonialslink:hover 
{
background-image: url('rollover_images/rollover_testimonials_hover.jpg');
}


/* TITLE STYLES */
.TitleBlack
{
  font-weight: bold;
  font-size: 24px;
  color: #000000;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
}
.Title_dark_right_justified
{
  font-weight: bold;
  font-size: 30px;
  color: #663300;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  text-align: right;
  }
.Title_dark_centered
{
  font-weight: bold;
  font-size: 20px;
  color: #663300;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
  }

.TitleGreen
{
	font-weight: bold;
	font-size: 30px;
	color: #006600;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

.TitleWhite
{
	font-weight: bold;
	font-size: 30px;
	color: #FFFFFF;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

.TitleGold
{
	font-weight: bold;
	font-size: 30px;
	color:
	#FFCC66;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}
.Sub_title_gold
{
	font-weight: bold;
	font-size: 16px;
	color:
	#FFCC66;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}
.Sub_title_gold_small
{
	font-size: 12px;
	color:	#FFCC66;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}
.TitleBlackSmall
{
  font-weight: bold;
  font-size: 24px;
  color: #000000;
  font-family:"Times New Roman", Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
}

.TitleGreenSmall
{
	font-weight: bold;
	font-size: 18px;
	color: #006600;
	font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}


/* SUBTITLE STYLES */
.SubtitleBlack
{
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  margin-bottom: -17px;
}

.SubtitleBlackList
{
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  margin-bottom: 10px;

}


/* BODY TEXT STYLES */
.BodyText
{
  color: ##F5C149;
  font-size: 16px;
  font-family: "Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
}
.BodyTextHeading
{
  color: ##F5C149;
  font-size: 16px;
  font-family: "Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
}

.BodyTextBold
{
  color: ##F5C149;
  font-size: 32px;
  font-family: "Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-weight: bold;
  text-align:center;
  
}

a.BodyTextBold  /* The "a" means that this style applies to a link (an "anchor" link) */
{
  color:  #3300CC;
  font-size: 16px;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-weight: bold;
}

a.BodyTextBold:hover
{
  color: #FF6600;
  font-size: 16px;
  font-family:"Times New Roman",Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  font-weight: bold;
  text-decoration:none
}


.LeftNavigation {
	font-family: "Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
a.LeftNavigation {
	font-family: "Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
}
a.LeftNavigation:hover {
	font-family: "Times New Roman",Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color:#FFCC66;
}