/*
Quick CSS explaination
----------------------
A full stop preceding the class name refers to a class e.g. .test refers to <p class="test">
A preceding hash refers to an id e.g. #test refers to <p id="test">
If nothing precedes the class name then it will redefine an existing html tag e.g. p would refer to <p>

This CSS sheet will redefine the way the html will be displayed to the browser. If CSS is disabled then a clear linear layout will be displayed
*/


/* Set font for whole page and grey background */
body {
	background-color: #666;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	margin: 0px;
}
#verticallyCentreContentTable {
	display: table;
}
#verticallyCentreContent {
	display: table-cell;
	vertical-align: middle;
}
/* This site is a fixed width so this main container centres the content and contains everything */
#mainContainer {
	background-color: #FFFFFF;
	height: 633px;
	width: 984px;
	text-align: left;
	position: relative;
	margin: auto;
	background-image: url(images/background.gif);
	background-repeat: no-repeat;
}
/* Hide main logo when CSS is used.  The logo is on the main background so is not necessary */
#logo {
	visibility: hidden;
}
#design {
	position: absolute;
	left: 485px;
	top: 80px;	
}
/* This is the page name and submenu area */
#subMenu {
	position: absolute;
	left: 48px;
	top: 453px;
}
h1 {
	font-size: 1.3em;
	color: #666;
	font-weight: bold;
	margin-top: 0;
	float: left;
}
h2 {
	font-size: 1.3em;
	color: #D22F4F;
	font-weight: bold;
	margin-top: 0;
	float: left;
}
h3 {
	font-size: 0.9em;
	color: #D22F4F;
	font-weight: bold;
	margin-top: 0;
	float: left;
}
h4 {
	font-size: 0.9em;
	color: #666;
	font-weight: bold;
	margin-top: 0;
	float: left;
}
/* Format and position the submenu */
#subMenu ul {
	list-style: none;
	float: left;
	margin-top: 0;
	position: relative;
	left: -30px;
}
#subMenu ul li {
	list-style: none;
	display: inline;
}
#subMenu ul li.activePage a {
	color: #D22F4F;
}
#subMenu ul a, #subMenu ul a:visited {
	padding: 5px 5px;
	color: #000;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
}
#subMenu ul a:hover {
	text-decoration: none;
	color: #CC0033;
}
/* This container holds any content within the left red panel */
#leftContent {
	position: absolute;
	height: 272px;
	width: 686px;
	top: 163px;
	left: 15px;
	overflow: auto;
	background-repeat: no-repeat;
}
#leftContent p {
	color: #FFFFFF;
	width: 620px;
	padding-left: 33px;
}
#leftContent p.first {
	padding-top: 30px;
}
/* This container holds any content within the right red panel */
#rightContent {
	position: absolute;
	height: 266px;
	width: 191px;
	top: 163px;
	right: 15px;
	background-color: #FFFFFF;
	overflow: auto;
	background-repeat: no-repeat;
}
#rightContent .grey {
	color: #999;
	font-size: 0.8em;
	margin-top: 4em;
}
/* Remove the space that is automatically put in above a paragraph tag in the content sections */
#leftContent p, #rightContent p {
	margin-top: 0px;
}
/* Add space to right of text in right content section */
#rightContent p {
	margin-right: 20px;
	margin-bottom: 10px;
}
#rightContent a, #rightContent a:visited {
	color: #D22F4F;
	text-decoration: none;
}
#rightContent a:hover {
	text-decoration: underline;
}
/* Position other items on the page */
#pageIcon {
	position: absolute;
	left: 48px;
	bottom: 40px;
	margin: 0;
}
#fullImage a, #fullImage a:visited {
	position: absolute;
	left: 48px;
	bottom: 30px;
	display: block;
	padding-left: 60px;
	padding-top: 20px;
	background-image: url(images/iconPhotographyRed.gif);
	background-repeat: no-repeat;
	position: absolute;
	margin: 0;
	color: #666;
	text-decoration: none;
	font-weight: bold;
	height: 44px;
	font-size: 0.9em;
}
#fullImage a:hover {
	color: #CC0033;
	text-decoration: none;
	background-image: url(images/iconPhotographyBlack.gif);
}
#quote {
	position: absolute;
	top: 497px;
	left: 48px;
	margin-top: 0px;
	width: 650px;
	color: #666;
}
#contact {
	position: absolute;
	top: 453px;
	left: 779px;
	margin-top: 0px;
}
/* Format the hyperlink in the contact section */
#contact a, #contact a:visited {
	color: #666;
	text-decoration: none;
}
#contact a:hover {
	text-decoration: underline;
	color: #CC0033;
}
/* Position and format the main menu */
ul.menu {
	list-style: none;
	position: absolute;
	bottom: 475px;
	left: 48px;
	margin: 0px;
	padding: 0px;
}
ul.menu li {
	list-style: none;
	display: inline;
}
ul.menu li#first a {
	border-left: 0;
	padding-left: 0;
}
ul.menu li.activePage a {
	color: #D22F4F;
}
ul.menu a, ul.menu a:visited {
	border-left: 1px solid #666;
	padding: 0px 9px;
	color: #666;
	font-weight: bold;
	text-decoration: none;
	font-size: 0.9em;
}
ul.menu a:hover {
	text-decoration: none;
	color: #CC0033;
}
/* Re-position the features menu */
ul#featuresMenu {
	top: 453px;
	right: 280px;
	left: auto;
}
.webLink {
	position: absolute;
	top: 453px;
	right: 274px;
	color: #666;
	font-weight: bold;
	text-decoration: none;
	padding: 0px 9px;
}
a.webLink:hover {
	text-decoration: underline;
	color: #CC0033;
}
/* Position Design and Branding / Photography images */
.mainMenu {
	position: absolute;
	left: 451px;
	top: 76px;
	margin: 0px;
}
/* Set and change image on menu rollover */
.mainMenu img {
	visibility: hidden;
}
.mainMenu a {
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	display: block;
	float: left;
}
#mainMenuPhoto a#photo:hover {
	background-image: url(images/menuPhotographyBlack.gif);
}
/* Homepage menu, format and position within leftContent region */
.homepageMenu {
	color: #FFFFFF;
	font-size: 1.2em;
	margin: 0px;
	padding: 0px;
	position: absolute;
	right: 50px;
	bottom: 50px;
}
.homepageMenu li {
	display: inline;
}
.homepageMenu a, .homepageMenu a:visited {
	color: #FFFFFF;
	display: block;
	float: left;
	padding-top: 60px;
	margin: 0 10px 0;
	text-decoration: none;
}
.homepageMenu a:hover {
	text-decoration: underline;
}
.homepageMenu a.homepageIconDesign {
	background-image: url(images/iconDesign.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
.homepageMenu a.homepageIconPhoto {
	background-image: url(images/iconPhotography.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.homepageMenu a.homepageIconDesign:hover {
	background-image: url(images/iconDesignBlack.gif);
}
.homepageMenu a.homepageIconPhoto:hover {
	background-image: url(images/iconPhotographyBlack.gif);
}