﻿/* --------------------------------------------------------------------------------------------------------------------
Main formatting rules for the main components of the website
-----------------------------------------------------------------------------------------------------------------------


/* html and body tag formatting - no need to edit this
-------------------------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		padding-bottom: 30px;
		}

* {
		margin: 0;
		padding: 0;
		}


/* Container formatting - sets the width of the entire frame of site and places it in middle of browser
-------------------------- */
	
#container {
		width: 900px;
		margin: 0 auto; 
		}


/* Image formatting - removes borders from hyperlinked images
-------------------------- */

a img {
		border: 0;
		}	
			
				
/* Heading one formatting - used for main headings
-------------------------- */
		
h1, h1 a {
    width: 897px;
    font: bold 2.5em Arial;
    color: #ffffff; 
    text-align: left;
    text-decoration: none;
    border-top: solid 2px;
    padding-left: 3px;
    margin-bottom: 16px;
    margin-top: 15px;
    }


/* Heading two formatting - used for paragraph headings
-------------------------- */

h2, h2 a {
		font: bold 1.8em Arial;
		color: #000000;
	  text-align: left;
	  text-decoration: none;
	  margin-bottom: 10px;
	  margin-left: 5px;
		}
	
	
/* Heading three formatting - used for side box headings
-------------------------- */
		
h3 {
		font: bold 1.5em Arial;
		color: #000000;
	  text-align: center;
	  margin-bottom: 10px;
		}


/* Heading four formatting - used for the footer heading
-------------------------- */

h4 {
    float: left;
    clear: left;
		font: 1.2em Arial;
		color: #000000;
	  text-align: left;
	  margin-top: 5px;
	  }


/* Paragraph formatting - used for paragraphs
-------------------------- */
	
p {
	  width: 600px;
		font: 1.4em arial;
		color: #000000;
	  text-align: left;
	  margin-left: 10px;
	  margin-right: 10px;
		}
		

/* Hyperlink formatting
-------------------------- */

a {
		color: #000000;
		}


/* Image formatting for information centre image
-------------------------- */
 
 #headerNav img {
  height: 60px;
  width: 100px;
  margin-left: 5px;
  margin-top: 10px;
  }
		
		
/* Formatting for the area that contains the 
-------------------------- */
 
#logo {
    height: 190px;
    width: 900px;
		}   
		  
    
/* ---------- */

#contentArea {
    width: 900px;
    }

#textContent {
    background-color: #f8efdd;
    width: 620px;
    float: left;
    clear: left;
    padding-bottom: 10px;
    margin-bottom: 16px;
    }


/* ---------- */

#sideBox {
    width: 270px;
    float: right;
    }

/* ---------- */

#footerGap {
    background-color: #f8efdd;
    width: 900px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    }

#footerArea {
    clear: both;
    width: 900px;
    border-top: solid 2px;
    margin-top: 16px;
    }
    
#copyright ul {
    margin-top: 5px;
    float: right;
		}

#copyright li {
		display: inline;
		}

#copyright a {
		font:  1.2em Arial;
		color: #000000;
		text-decoration: none;
		padding: 0px 16px;
		}

		
/* ----------------------------------------------------------------------------------------- /*
	
  Cascading Style Sheet for Lakes District Museum & Gallery website

  Copyright 2010 Lakes District Museum & Gallery
  
  Designed and by developed by Michael Bowen 2009-2010