./***********************************************************
*                                                           *
*   MAIN STYLESHEET FOR THE WEBSITE www.bryanevans.com      *
*   ----------------------------------------------------    *
*   Version:   1.0                                          *
*   Author:    loudonwebdesign.co.uk                        *
*   Contact:   admin@loudonwebdesign.co.uk                  *
*                                                           *
*************************************************************/         




/************************************************
*
* GENERAL LAYOUT
*
*************************************************/

html{
  margin: 0;
}

/* BACKGROUND STYLING */

body{
  margin: 0px;
  font-family: ariel, sans-serif;
}

/* STYLING FOR CONTACT BY EMAIL LINKS */

#contactLink a{
  color: #fff;
}

#contactLink a:hover{
  color: #486380;}

/************************************************
*
* MAIN WRAPPER STYLING - to ensure that the page is 
* displayed consistently on all screen sizes. 
*
*************************************************/

.wrapper{
  background-color: transparent;   /* light blue-grey gradient*/
  margin: 0 auto;              /* centres main content */
  width: 980px;
  padding: 0;
}


/************************************************
*
*  CODE TO ENABLE USERS OF SCREENREADERS TO SKIP
*  EITHER TO CONTENT OR NAVIGATION.
*
************************************************/

 div.skip a, div.skip a:hover, div.skip a:visited 
{ 
  position:absolute; 
  left:0px; 
  top:-500px; 
  width:1px; 
  height:1px; 
  overflow:hidden;
} 
 
#skip a:active 
{ 
  position:static; 
  width:auto; 
  height:auto; 
}



/************************************************
*
* HEADING
* 
*************************************************/

.headFormat{
  color: #486380;           /* dark blue grey */
  font-family: Mistral, Georgia, sans-serif;                           
  font-size: 60pt;
  margin-left: 60px;        /* indents title from left*/
  padding-top: .8em;        /* position from top of page*/
}


/**********************************************
*
* IMAGE AT TOP OF PAGE
*
***********************************************/

.topImage{
  padding: 10px;                /* creates a blank edging in background colour */
  float: right;                 /* moves image to right */
  position: relative;           /* allows z-index to work */
  z-index: 30;                  /* makes image lie on top of horizontal lines */
  margin-top: -150px;           /* top position */
  margin-right: 40px;           /* right position */
  background-image:  url(images/gradBackground.gif); 
  background-repeat: repeat-x; 
  background-color: #afc7c7;
}

.topImage img{
  border: solid 3px #29537c;       /* white border around image */
}



/**********************************************
*
* MAIN LEGEND 
*
***********************************************/

.legend{
  float: right;
  font-size: 1.05em;
  font-weight: normal;
  padding: 20px;
  width: 660px;
  color: #486380;
  background-color: transparent;  
}


/**********************************************
*
*  INDIVIDUAL IMAGE DISPLAY PAGES
*
***********************************************/

.legend2{
  float: right;
  font-size: 1.05em;
  font-weight: normal;
  margin-left: 60px;
  width: 940px;
  color: #486380;
  background-color: transparent;  
}


.linkBack{ 
  font-size: 1.1em;
  margin-bottom: 5px; 
}

.linkBack a{
  color: #486380;
}

.linkBack a:hover{
  color: #fff;
}

.picDescrip{
  text-align: left; 
  float: right; 
  width: 330px; 
  margin-top: 200px; 
  margin-right: 50px; 
  padding: 10px 10px 10px 30px;
}


/**********************************************
*
* NAVIGATION 
*
***********************************************/

/* Set the width of the navigation */
#nav-menu{
  width: 260px;
  margin-top: 140px;
  float: left;
}


#navPosition{
  margin-top: -180px;
  width: 260px;
  float: left;
}

/* Ensure that there are no bullet points in the menu */
#nav-menu ul{
  list-style: none;
}

/* Set the spacing between the navigation and the content */
#nav-menu li{
  margin: 0;
}

/* Set the font styling and spacing of the navigation */
#nav-menu li a{
  color: #fff;            /* white font */
  display: block;         /* displays in a column */
  font-size: 1.3em;
  height: 1.8em;
  float: left;            /* moves navigation to left of page. */
  line-height: 2em;
  text-decoration: none;  /* removes default underline */
  text-align: center;     /* centres text within navigation block */

}

/* Set the font and background colour for navigation when mouse hovers over it. */
#nav-menu li a:hover{
  background-color: inherit;     /* has same colour as rest of page */
  color:  #29537c;                   /* dark blue font */
}


/* Hide from IE5-Mac \*/
#nav-menu li a{
  float: none
}
/* End hide */



/*******************************************
*
*FOOTER STUFF 
*
********************************************/

.footer{ width: 940px; margin: 0 auto; padding: 0 20px 20px; 
color: #486380; background-color: inherit;}

/* styling for the  links at the bottom of the page. */
#bottomLinks{margin-left: 15px;}
#bottomLinks a:link {color: #486380;}     /* unvisited link */
#bottomLinks a:visited {color: #486380;}  /* visited link */
#bottomLinks a:hover {color: #fff;}   /* mouse over link */
#bottomLinks a:active {color: #486380;}   /* selected link */ 

/* styling for the  links at the bottom of the page. */
#bottomLinks2{margin-left: 15px;}
#bottomLinks2 a:link {color: #486380;}     /* unvisited link */
#bottomLinks2 a:visited {color: #486380;}  /* visited link */
#bottomLinks2 a:hover {color: #fff;}   /* mouse over link */
#bottomLinks2 a:active {color: #486380;}   /* selected link */