body { color: #333333; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; background-color: #333333; text-align: center; margin-top: 0; margin-bottom: 0; padding-top: 0; border: 0;}

/* Container */
#container  	 { color: #c7c7c7; text-align: center; margin:0 auto; width: 1100px; padding: 0;} /* note: "auto" required for centering */

/* Contentbox */
/* the contentbox height has to be set so it's a minimum height background for most pages, or it looks weird */
#contentbox      { border: 1px solid #000000; clear: both; text-align: center; background-color: #000000; padding: 45px; width: 850px; height: 500px; margin:0;} 

/* the contentbox height has to be set to a different height background for gallery pages */
#artpg #contentbox, #fashionpg #contentbox, #musicpg #contentbox, #peoplepg #contentbox, #projectspg #contentbox    { width: 1100px; height: 650px; text-align: center; padding: 30px auto 30px; } 

/*since the content is longer, give these pages the ability to grow to the appropriate height */
#clientspg #contentbox, #biopg #contentbox, #pricingpg #contentbox {height: auto;} 
#homepg #contentbox { padding: 25px; width: 900px; height: 500px; text-align: center;}
#contenttext	 { color: #c7c7c7; text-align: left; width: 600px; }
#contenttexthome	 { color: #c7c7c7; width: 400px; margin-top: 125px; margin-left: 50px; }

#decorimage      { border: 1px solid #000000; float: right; position: relative; margin-top: 0px; right: 0px; padding-left: 25px; padding-bottom: 20px;}  /*Featured image on content pages, not gallery*/
#decorimage1     { border: 1px solid #000000; float: right; position: relative; margin-top: -210px; left: 0px; }  /*Charlie: girl on right*/


/* Main */
h1 {padding: 0;}

h2 { line-height: 15px; font-size: 12px; font-weight: bold; border-bottom: 1px solid; padding: 8px 0px 0px 0px; width: 600px; color: #c7c7c7; }
#homepg h2 { font-size: 14px; border: none; padding 4px; width: 400px;}
#biopg h2 { font-size: 14px; border-bottom: 2px solid; padding: 4px 0px 0px 0px; width: 345px; } 

h3 { line-height: 13px; font-size: 12px; font-weight: bold; border-bottom: 1px solid; padding: 4px 0 0px 0; width: 180px; color: #c7c7c7; }
#thumbgallery h3 { border-bottom: 1px solid; width: 225px; color: f49c70;}
#homepg h3, #biopg h3 { width: 75px; }

blockquote p { margin-top: 50px; font-style: italic; text-align: center; }
cite { font-style: bold; margin-left: 350px; }
hr { color:#c8b191; background-color:#c7c7c7; height:1px; border:none; }
img {margin:0; padding:0; border-width: 0;}

/* Links */
#contentbox a:link { color:#f6ab86; font-weight: bold; text-decoration: none; } 
#contentbox a:active { color:#f6ab86; font-weight: bold; text-decoration: none; } 
#contentbox a:visited { color: #f6ab86; font-weight: bold; text-decoration: none; }
#contentbox a:hover { color: #c7c7c7; font-weight: bold; text-decoration: underline; }

#footer a:link { color: #c7c7c7; text-decoration: none; }
#footer a:active { color: #c7c7c7; text-decoration: none; }
#footer a:visited { color: #c7c7c7; text-decoration: none; }
#footer a:hover  { color: #f6ab86; text-decoration: underline; }

/* Header */
  #header { margin-top: -20px; text-align: left; width: 950px; height: 92px; padding:0;} /* Added margin-top:-20px to get rid of phantom space at top of header */
  #logo { height: 72px; 
  		margin:0;
  		text-align: right; 
  		padding: 0;
		float: right;
		position: relative; 
		display: inline; }
  #logo img { height: 72px; margin:0; padding: 0px; border: 0px;}
  #navbox { text-align: left; 
  		margin:0;
		width: 512px; 
		float: left;
		padding-top: 70px;
	    padding-bottom: 2px; }
  #nav { position: absolute;
  		 width: 575px; height: 20px;		  /*Update Nav width & height if changes*/
         background: url(/images/nav.gif);
         margin: 0px 0px 0px 0px; 
		 padding: 0px;
		 text-align: left; }

/* Main nav dimensions specified */
/***** Must edit DIMENSIONS if change nav!
Pattern is -- left: starting-px width: segment-width;
Where starting-px is the x coordinate that starts that particular segment of the Nav 
and segment-width is the width of that segment of the navigation (i.e. how wide the 'Home' button/area is)
*****/
  #nav li { margin: 0px; padding: 0px; list-style: none; 
  	    position: absolute; top: 0px; display: inline; }
  #nav li, #nav a { height: 20px; display: block; border: none;}  /* height must = 1/2 total height of nav.gif */
/*   NEW NAV STYLE:  */
	  #fashion		{ left: 0; width: 58px; }
	  #art	 	 	{ left: 63px; width: 28px; }
	  #music		{ left: 98px; width: 45px; }
	  #people		{ left: 148px; width: 50px; }
	  #projects		{ left: 203px; width: 69px; } 
	  #clients 		{ left: 273px; width: 63px;	}
	  #news	   		{ left: 341px; width: 40px; }
	  #bio	   		{ left: 388px; width: 27px; }
	  #pricing		{ left: 420px; width: 52px; }
	  #contact 		{ left: 480px; width: 94px; }
	  

/* Change main nav to "on" position for current page and hover state */
/***** Must EDIT HOVER STATE COORDINATES if change nav!
Pattern is -- background: transparent url(path to Nav image) starting-px y-start no-repeat;  
Where x-start is the -(x) coordinate that will be used as the left edge for this particular segment of the Nav 
and y-start is the -y coordinate that will be used as the top, left corner on hover (should be 1/2 height of full nav image) 
*****/
  #fashionpg li#fashion, #fashion a:hover { background: transparent url(/images/nav.gif) 0px -20px no-repeat; }
  #artpg li#art, #art a:hover { background: transparent url(/images/nav.gif) -63px -20px no-repeat; }
  #musicpg li#music, #music a:hover { background: transparent url(/images/nav.gif) -98px -20px no-repeat; }
  #peoplepg li#people, #people a:hover { background: transparent url(/images/nav.gif) -148px -20px no-repeat; }
  #projectspg li#projects, #projects a:hover { background: transparent url(/images/nav.gif) -203px -20px no-repeat; } 
  #clientspg li#clients, #clients a:hover { background: transparent url(/images/nav.gif) -273px -20px no-repeat; }
  #newspg li#news, #news a:hover { background: transparent url(/images/nav.gif) -341px -20px no-repeat; }
  #biopg li#bio, #bio a:hover { background: transparent url(/images/nav.gif) -388px -20px no-repeat; }
  #pricingpg li#pricing, #pricing a:hover {background: transparent url(/images/nav.gif) -420px -20px no-repeat; }
  #contactpg li#contact, #contact a:hover { background: transparent url(/images/nav.gif) -480px -20px no-repeat; }

/* News List (formerly Project List)*/
#newslist dl { font-size: 11px; width: 350px; margin-left: 0px; padding-left: 0px; text-indent: -1em; }
#newslist dt { font-weight: bold; line-height: 20px; display: block; width: 400px; margin-left: 15px; padding: 0px; border: none; }
#newslist dd { line-height: 19px; display: block; width: 400px; margin-left: 35px; padding: 0px 0px 5px; border: none; }
#newslist a { font-size: 9px; }

/* Clients List */
#clients ul { margin-left: 20px; padding-left: 20px; text-indent: 1em; }
#clients li { list-style-type: square; line-height: 20px; width: 400px;}

/* Gallery Index */
.gal-main { float: left; width:145px; text-align: center; padding: 0px 6px 0px 6px; line-height: 10px;}
.gal-main img { border: 1px solid #000000; margin-bottom: 5px;}

/* Gallery */
#thumbgallery  { padding-right: 15px; float: left; text-align: left; width: 250px; height: 600px; overflow:auto; }
#thumbgallery img { margin: 2px 1px; }
/*#featureimage  { text-align: center; margin: 0px auto; border-width: 2px; clear: right;}
#featureimage img { position: relative; margin: 0px auto; right: -13px;} */

#arrows { text-align: right; margin: 0px 15px -30px 0px;}
#arrows img { margin: 0px 0px; }
/* Footer */
#footer	{ clear: both; text-align: center; color: #c7c7c7; font-size: 12px; width: 750px; margin: 10px auto; }