/* HTML & BODY STYLE --------------------------------------------------------------------------------*/

/* Make the html fill the screen */
html {
  height:100%;
}

/* No margins, set background image and color, align the body on the screen */
body {
  margin:0; padding:0; height:100%;
  font-family:arial, serif;
 /*background: url(../images/background.gif) #666666; */
  background: LightGrey;
  text-align: center;
}

/* STYLE TO APPLY BY DEFAULT - These get applied if nothing else is over-riding later on in the CSS */
h1, h2 {
  padding-left: 10px;
  padding-right: 20px;
}
  
h1 { 
  line-height:50px;
  /*color: #524031; */
  color: #545454;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: lighter;
}

h2 {
	font-weight: lighter;
}
h2, h3{
   padding-left: 20px;
   color: #545454;
   font-weight: lighter;
}
  
p {
  padding-left: 20px;
  padding-right: 30px;
  text-align: justify;
  font-size: 13px;
  color: DimGray;
}

ul {
   font-size: 13px;
   text-align: justify;
   padding-right: 30px; 
 }
li {
  margin-bottom: 10px;
}
   
b {
  color: #524031;
}
	
#facebook p{
   text-align: center;
   margin-left: 10px;
  }
	
/* -- WRAP STYLE ------------------------------------------------------------------------------------------------------------------*/
/* This is the container for all the html on the page. Set background, width, min-height and margins */
#wrap {
  background:url(../images/bg200W3B.gif) top left repeat-y;
  width:1000px;
  min-height:100%;
  position: relative;
  margin:auto;
  text-align: left;
}
/* Hack for IExpl as min-height doesn't work */
* html #wrap {
  height:100%
}


/* -- HEADER STYLE ------------------------------------*/
/* This is for the top of the page that contains the website name (Andrew Stannard Photogrpahy) */
#masthead {
  background: #b3b1a1 url(label2.gif) right no-repeat;
  margin:0; padding:0;
  height:60px;
  border: 1px solid black;
}
#masthead h1 {
  line-height:60px;
  color:#eeeeee;
  text-align: left;
  margin:0; padding-left:20px;
  font-variant: small-caps;
  font-size: 1.7em;
  letter-spacing: 0.3em;
}


/* MAIN NAVIGATION STYLE -----------------------------------------------------------------------------------------------*/
/* Floats the navigation bar to the left of the screen */
#main_nav {
  float:left;
  width:160px;
}

/* Each menu item is really a list item - set no margins or bullet points */
#main_nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Styling for the nav bar items. The arrows are on the background image, hence the text indent of 30px */
#main_nav ul a {
   display: block;
   width: 160px;
   height: 34px;
   line-height: 34px;
   /*color: #524031; */
   color: #545454;
   text-decoration: none;
   background: #edecdd url(../images/nav.gif) no-repeat left bottom;
   text-indent: 30px;
   font-weight: bold;
   font-size: 1.0em;
}

/* These next items change the background image for different menu condtions (e.g. current page, current page with sub-items etc */
#main_nav .down {
   background: #edecdd url(../images/nav_down.gif) no-repeat left bottom;
}
#main_nav .sub {
	text-indent: 50px;
	font-size: 0.7em;
	background: #edecdd url(../images/nav_sub.gif) no-repeat left bottom;
}
#main_nav .sub_current {
	text-indent: 50px;
	font-size: 0.7em;
	background: #edecdd url(../images/nav_sub_current.gif) no-repeat left bottom;
}
#main_nav li.first a {
   height: 40px;
   line-height: 40px;
}
#main_nav .current {
   background: #edecdd url(../images/nav_current.gif) no-repeat left bottom;
   }
 #main_nav .down, .current {
    background: #edecdd url(../images/nav_down_current.gif) no-repeat left bottom;
   }

   
/* The background images are all twich the width they need to be. */
/*When we roll over them it displays the right-hand half of the image, which has an inverted the color scheme. */ 
#main_nav a:hover, .selected a {
   background-position: right bottom;
   color: #dddddd;
}

/* Hack for IExpl, can't remember exactly why we need this */
#main_nav li {
   display: inline; /* IE Fix */
}

/* View Cart Form */
#main_nav .v_cart {
   margin-top: 20px;
   text-align: center;
}




/* CONTACT FORM STYLE -------------------------------------------------------------------------------- */
/* Used on the 'contact' page */
#form {
   width: 700px;
   height: 1%;
   position: relative;
   margin: 40px auto;
   padding-left: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
   background: #edecdd;
   border: 1px solid black;
 }
 
 
/* PRICING OPTIONS TABLE STYLING --------------------------------------------------------------------- */
/* This section is all the styling for the table used on the pricing options*/

/* Setup paragraph alignment and size */
#price_table table p {
	font-size: 12px;
	vertical-align: text-top;
	margin: 8px auto;
	padding-left: 10px;
	padding-right: 5px;
	
}
/* Set overall table width and margins */
#price_table table {
	width: 500px;
	position: relative;
    margin: 20px auto;
	background: #edecdd;
	border: 1px solid black;	
	border-collapse: collapse;
} 

/* Add to cart button */
 #price_table td{
   vertical-align: middle;
 }
 #price_table p{
   vertical-align: middle;
 }
 #price_table img{
   vertical-align: middle;
   margin-right: 10px;
 }
 #price_table form {
	display: inline;
	text-align: left;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-right: 00px;
	vertical-align: top;
	border-collapse: collapse;
	padding-top: 0px;
    padding-bottom: 0px;
}

/* Border setup for rows and columns */
#price_table tr {
	border-bottom: 1px solid gray;
}
#price_table td {
	text-align: left;
		height: 45px;
		 margin-right: 10px;
	border-bottom: 1px solid gray;
}

/* Widths for each of the column types */
#price_table .print_option {
	width: 340px;
}
#price_table .print_price {
	width: 70px;
}
#price_table .price_button {
	width: 90px;
}



 /* NEWS ITEM */
 /* These stylings are used on the old news page, and also on the articles page */
.news_item {
   width: 750px;
   height: 1%;
   position: relative;
   margin: 20px auto;
   background: #edecdd;
   border: 1px solid black;
  }
  
/* Use h1 for the main news title */
.news_item h1 {
   font-size: 13px;
   /* color: #524031; */
   color: #545454;
   padding-left: 20px;
   text-align: left;
   margin: 2px auto;
 }
 
 /* Use p for the news content */
.news_item p {
   padding-left: 20px;
   padding-right: 30px;
   text-align: justify;
   margin: 2px auto;
   padding-bottom: 7px;
   font-size: 13px;
   font-weight: normal;
  }
  
  
/* GALLERY LINK */
/* Styling for each of the gallery links */
.gallery {
  width: 700px;
  height: 76px;
  position: relative;
  margin: 10px auto;
  padding-top: 5px;
  padding-bottom: 0px;
  padding-left: 10px;
  background: #edecdd;
  border: 1px solid black;
}

/* This bit positions the gallery link image */
.gal_left {
 width: 99px;
 float: left;
 }
 
 /* This bit positions the text for the gallery link */
 .gal_right {
 width: 445px;
 float: right;
 }
 
/* Don't want borders around the link pictures */
.gallery a {
	text-decoration: none;
}
.gallery a:link {
	color: #545454;
}
.gallery a:active {
	color: #545454;
}
.gallery a:visited {
	color: #545454;
}
.gallery a:hover{
	color: #545454;
}

/* Use this for the gallery title */
.gallery h2 {
  text-align: left;
  font-size: 16px;
  margin: 2px auto;
 }

 /* Use this for the gallery description */
.gallery h3 {
  margin: 2px 10px 2px 2px;
  font-size: 12px;
  font-weight: normal;
  text-align: justify;
}

.gallery img {
  margin-bottom: 5px;
  border: 1px solid black;
 }


 

/* MAIN CONTENT STYLE ----------------------------------*/
/* This is all general styling for the content of each page */

/* Shove it to the right (the nav bar is on the left */
#content {
float: right;
width: 830px;
}

/* PURCHASE FORM STYLING -------------------------------------------------------- */    
 #purchase_form {
  position: relative;
  width:300px;
  margin: 0px auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0px;
  background: #ffffff;
  border: none;
  text-align: center;
 }

 
 #purchase_button_news {
  position: relative;
  width:300px;
  margin: 0px auto;
  padding-top: 5px;
  padding-bottom: 0px;
  padding-left: 0px;
  background: #edecdd;
  border: none;
  text-align: center;
 }

 #purchase_button {
  position: relative;
  width:300px;
  margin: 0px auto;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0px;
  background: #ffffff;
  border: none;
  text-align: center;
 }
 
/* THUMBNAILS STYLE -----------------------------------*/
/* When in a gallery this sorts out the styling for the thumbnails area */
#thumbnails {
  width:800px;
  height: 1%;
  position: relative;
  margin: 0px auto;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background: #ffffff;
  border: none;
}

/* Center thumbnails in the thumbnail area */
#thumbnails p {
   text-align: center;
}
/* No link border */
#thumbnails a {
   text-decoration: none;
}

#thumbnails img {
  border: 1px solid black;
}
/* IMAGE CLASS WITH BORDER ----------------------------------------*/
/* THis class can be used to dump an image into your content - it's not the class used for the photos in the gallery page*/

/* Sorts out the position. Basically centred with some margins */
#image_border {
   position: relative;
   margin-top: 30px;
   margin-bottom: 5px;
   }
#image_border p {
   text-align: center;
   margin-bottom: 0px;
}
#image_border img {
	border: 1px solid black;
}
   
   
   
/* IMAGE CLASS ----------------------------------------*/
/* THis class can be used to dump an image into your content - it's not the class used for the photos in the gallery page*/

/* Sorts out the position. Basically centred with some margins */
#image {
   position: relative;
   margin-top: 30px;
   margin-bottom: 5px;
   }
#image h1 {
   text-align: center;
   margin-bottom: 0px;
}

/* Use h2 for the picture title */
#image h2 {
   position: relative;
   top: 0px;
   text-align: center;
   margin-top: 0px;
   /*font-variant: small-caps; */
   font-size: 14px;
   /*letter-spacing: 0.2em; */
   color: #545454;
 }
 
 /* No borders if we're using links */
#image a {
	text-decoration: none;
	border: none;
}
#image img {
	border: none;
}
#image a:link {
	color: black;
}
#image a:active {
	color: black;
}
#image a:visited {
	color: black;
}
#image a:hover{
	color: black;
}
 

	
 /* PHOTO CLASS ----------------------------------------*/
 /* This is the class used for photos in the gallery page */
 #photo {
    position: relative;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    
 #photo a {
 	text-decoration: none;
 	border: none;
 }
 
 #photo img {
 	border: 1px solid black;
 	margin-top: 0px;
 	margin-bottom: 5px;
 }
 
 #photo h1 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
 }
 
 /* Use h2 for photo title */
 #photo h2 {
    position: relative;
    margin-top: 0px;
    /*font-variant: small-caps; */
    font-size: 14px;
    /*letter-spacing: 0.2em; */
    text-align: center;
    color: #545454;
 }
 

 #photo p {
    text-align: center;
 }

 /* Use p for any description of the image */
 #photo h3 {
    position: relative;
    margin-top: 0px;
    color: Grey;
    text-align: justify;
    font-size: 12px;
    font-family:arial;
    font-weight: normal;
    padding-left: 80px;
	padding-top: 0px;
    padding-right: 90px;
 }
 
 
 /* ARROW CLASS -------------------------------------*/
 /* The left and right and up arrows in the galleries */
 #larrow img{
 text-decoration: none;
 border: none;
 }
 
 #uarrow img{
  text-decoration: none;
  border:none;
 }
 
 #rarrow img{
  text-decoration: none;
  border:none;
 }



/* CLEAR FOOTER STYLE ----------------------------------*/
/* THis effectively clears space for the foot to sit in */
#clearfooter {
  clear:both;
  height:30px;
  overflow:hidden;
}




/* FOOTER STYLE ----------------------------------------*/
/* THis is the footer itself */
#footer {
  position:absolute;
  bottom:0;
  left: 1px;
  height:30px;
  background-color: #b3b1a1;
  width:998px;
  border-top: 1px solid black;
}

#footer p {
  margin:0;
  font-size:0.7em;
  text-align:left;
  margin-left:10px;
  margin-top: 5px;
}


#gallery_table td {
	width: 150px;
	border: 1px solid black;
}

#gallery_table img {
	margin: 10px;
}
#gallery_table h2 {
	font-size: 12px;
	margin: 5px;
}
#gallery_table table {
	background-color: #edecdd;
	text-align: center;
	border: 2px solid black;
	margin-left: auto;
	margin-right: auto;
}

/* Don't want borders around the link pictures */
#gallery_table a {
	text-decoration: none;
}
#gallery_table a:link {
	color: #545454;
}
#gallery_table a:active {
	color: #545454;
}
#gallery_table a:visited {
	color: #545454;
}
#gallery_table a:hover{
	color: #545454;
}

/* IE 6 FIX --------------------------------------------*/
* html #main {
  height:1px;
}


/