/***********************************************/
/* 3col_leftNav.css                             */
/* Use with template 3col_leftNav.html          */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
}

a{
	color: #D5D6D5;
	text-decoration: none;
}

a:link{
	color: #333333;
	text-decoration: none;
}

a:visited{
	color: #333333;
	text-decoration: none;
}

a:hover{
	color: #7E1416;
	text-decoration: none;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #334d55;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

/* masthead 1st padding space for top of logo. 4th padding 30px for moving logo in to the right. Border-bottom is for width of top grey line underlogo.*/

#masthead{
	padding: 25px 0px 0px 30px;
	border-bottom: 2px solid #cccccc;
	width: 100%;
}

/* topbar is the 1st top grey line under the logo. 
1st Padding is for the space underneath logo. */


#topbar{
	padding: 15px 0px 0px 0px;
	border-bottom: 0px solid #cccccc;
	width: 70%;
}

/* Nav bar= changed the border right and border bottom color to white instead of grey. To get rid of the 1px grey line around
the sublink navigation. Also changed the width to 21% instead of 20 so that the names of projects can line up with 
the grey line above sublinks. */
#navBar{
	float: left;
	width: 21%;
	margin: 0px;
	padding: 0px;
	background-color: #eeeeee;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

/* #headlines= changed the border right and border bottom color to white to GET RID! of the 1px grey line around
the headline menu.. */

#headlines{
	float:right;
	width: 20%;
	padding-right: 10px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}

#content{
	float: left;
  width: 55%;
}

/***********************************************/
/* Components                                  */
/***********************************************/

#siteName{
	margin: 0px;
	padding: 0px 0px 0px 10px;
}


/************* #globalNav styles (is my navigation bar! & 2nd grey line under print main links.) **************/
/************* #(used globalNav 
1st location padding 15px is for the "TOP SPACE" above print, audio etc. 
3rd location for padding 15px is for the "BOTTOM SPACE" under the print, audio etc ) 
4th location for padding 30 px is "INDENTING SPACE" to move PRINT ACUTAL WORD etc to RIGHT ALIGN
border-bottom=width of greyline under print links
**************/

/************* #(globalNav 
globalNAV a= PADDING 2nd location = SPACE BETWEEN THE WORDS PRINT AUDIO ETC. **************/




#globalNav{
padding: 15px 0px 15px 30px;
border-bottom: 1px solid #CCC;
color: #cccccc;

}

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 90%;
	padding: 0px 25px 0px 0px;
}

/*************** #pageName styles = (GREY LINE TO THE RIGHT WHERE PROJECT TITLES GO on top of it) 
Added a border-bottom and width to pageName style so that I would get a 3rd grey line. 
Added 3 extra locations to Margin. 
1st location Margin used for (SPACE) under second grey line under print etc.
4th location Margin 270px is also to help align 3rd grey line to the right under the "f" for fineart. 
3rd location padding for SPACE under project title. 
width= the width of the grey line 
**************/



#pageName{
	margin: 35px 0px 0px 277px;
	padding: 0px 0px 12px 0px;
	border-bottom: 1px solid #cccccc;
	width: 70%;
}

/************* #breadCrumb styles = Used for Grey line to the LEFT!! of secondary links. 

Added Margin to grey line. 
Margin 1st location -1px for the Y coordinate (vertical) aligned to same height of (PAGE NAME=GREY PROJECT TITLE LINE) 
Margin 4th location 20px is to IDENT GREY LEFT LINE to the right. 
width= the length of the grey line. 
*************/

#breadCrumb{
	font-size: 80%;
	margin: -82px 50px -20px 205px;
	padding: 0px 0px 0px 0px;
	border-bottom: 1px solid #CCCCCC;
	width: 50%;
}


/************** .feature styles ***************/

/* .feature{ ((I kept padding-left:45 to padding-left:45px)) Padding-left helps align the text description of projects off to the right of the red titles of projects.*/

.feature{
	font-size: 70%;
	clear: none;
	float: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 45px;
	color: #333333;
}

/* .feature styles (.feature h3{ is for the paragraphs in the middle of layout. */

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: left;
}

.feature img{
	float: left;
	padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

/* .story{ ---This is for the (font size) of the grey paragraph description text of each project that is located underneath the project title and in the middle of site. */

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story p{
	padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles (border: 1px solid color of light grey #cccccc; [changed color to white] #ffffff to get rid of bottom thin grey outlined box. the box outlines my copyright to left of website. ***************/

#siteInfo{
	clear: both;
	border: 1px solid #ffffff;
	font-size: 75%;
	color: #333333;
	padding: 1px;
	float: none;
}

#siteInfo img{
	padding: 4px 1px 9px 10px;
	vertical-align: middle;
}


/************* #search styles (got rid of 1px from the #search{ to get rid of grey line underneath the grey line) #search{ 
changed form 5px 0px 5px 10px to all 0px so that the grey box would disapperar above sub menu./ **************/

#search{
	padding: 0px 0px 0px 0px;
	border-bottom: 0px solid #ffffff;
	font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
	display: block;
	margin: 0px;
	padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #333;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles (SectionLinks a {) took out the 1px from the border-top width to get rid of square buttons for sub links.)***********/

#sectionLinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-bottom: 0px solid #cccccc;
	font-size: 85%;
	background-color: #FFFFFF;
}

/* #sectionLinks styles (SectionLinks h3 { padding 4th location is the indenting of the word Print for title.) Changed from 83px to 78px

2nd change:: In the #sectionLinks a { ((I changed the padding-top section from 1px and changed to 6px*/


#sectionLinks h3{
	align: left;
	margin: 0px;
	padding: 0px 0px 0px 78px;
}

#sectionLinks a {
	display: block;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #999999;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 78px;
}

#sectionLinks a:hover{
	background-color: #ffffff;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
	position: relative;
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
	background-color: #FFFFFF;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
	display: block; 
}

/************** #advert styles **************/

#advert{
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#advert img{
	display: block;
}


/************** #headlines styles (
headlines p{
1st padding location 100px stays the same as 3rd padd-its for the (SPACE) between headlines!
2ND padding 43px is INDENTING paragraph in from the RIGHT!
3rd padding 100px or adjust to more or less for the (SPACE) between headlines!. **************/

#headlines{
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 0px 10px;
	font-size: 80%;
}

#headlines p{
	padding: 0px 43px 100px 0px;
}


/************** #mercedes imgs 
used this for placement of 1st mercedes but didn't work. #.imgs{
	padding: 4px 4px 4px 4px;
	vertical-align: middle;
	}
**************/