/* custom1 CSS Document */

/* === Global ==============*/
* {
	margin: 0;
	padding: 0;
}

body {
	padding: 0; /* added for Chrome */
	width: 100%;
	height: 100%; /* all added for Chrome */
	background-color: #dddddd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	letter-spacing: 0.1em;
}

#siteContainer { /* for all pages except enlarged email pages */
	border: 1px solid #888888;
	background-color: #dddddd;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px; /*reduced from 20px */
	width: 990px; /* Designed for 1024x768 screen. 990px + 34px for scrollbar */
	min-height: 288px; /* add footer 30px, colours 10px, nav 20px, top margin 20px, toolbars etc 150px = 768px (Designed for 1024 x 768 screen res) */
}

#break { /* used to prevent major layout changes when page resizing */
	clear: both;
}

#breakFoot { /* at footers: used to prevent layout changes in browsers */
	clear: both;
}

h1 {
	color: #000000;
	font-size: 1em;
}

h2 {
	font-weight: lighter;
	font-size: 1em;
	margin: 0em 0.3em 0.3em 0.3em;
}

h3 {
	font-weight: lighter;
	font-size: 0.9em;
	margin: 0em 0.3em 0.1em 0.3em;
	padding-top: 0.5em;
}

p {
	padding: 0.3em; /* can't be margin otherwise container divs break apart */
	font-size: 0.8em;
	color: #333333;
}

.white {
	color: #cccccc;
	padding-top: 10px;
}


a:link {
	text-decoration: underline;
	color: #222222;

}

a:visited {
	text-decoration: underline;
	color: #222222;
}

a:hover {
	text-decoration: none;
	color: #444444;
}

.small_text {
	font-size: 0.7em;
}

/*==== Accessibility and Display Options ======*/
#accessibility {
	width: 990px;
	height: 18px;
	font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
  	font-size: 0.8em;
	text-align: right;
	line-height: 1em;
	color: #000000;
	background: url(../images/accessBKG.jpg) repeat-x 0% 0%;
}

#accessibility a:link {
	text-decoration: none;
}
#accessibility a:hover {
	text-decoration: none;
}
#accessibility a:visited {
	text-decoration: none;
}
#accessibility a:active {
	text-decoration: underline;
}

#DisplayleftContent {
	width: 320px;
	min-height: 328px;
	float: left;
}

#DisplayleftContent img {
	padding: 0 0 0 30px;
	margin: 0;
}

#DisplayrightContent {
	width: 330px;
	min-height: 328px;
	float: right;
}

#DisplayrightContent img {
	padding: 0 0 0 30px;
	margin: 0;
}

/*=== Top Navigation ================*/

#navigation {
	border-top: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	width: 985px;
	height: 25px;
}

#menu {
  	font-size: 0.8em;
	line-height: 1.5em;
 }

/* Each menu name */
#menu li {
	float: left;
	list-style-type: none;
	width: 132px;
	text-align: left;
	padding-left: 0.3em;
}

/* each main menu link */
#menu li a {
  	color: #000000;
	text-decoration: underline;
/*  border: 1px solid pink; */
/*	display: block; */
}

#menu li a:visited {
	text-decoration: underline;
  color: #000000;
}

#menu li a:hover {
  	text-decoration: none;
  color: #663399;
}



/*=== colorsArea ==========*/


/*=== main area =====*/

#contentArea {
	border-left: 1px solid #ffffff;
	background-color: #ffffff;/*#ece9d8; /*#ffffff;*/
	width: 680px;
	min-height: 328px;
	float: right;
	padding-top: 20px;
}

#leftContent { /* holds img */
/*	border: 1px solid red;
*/	width: 320px;
	min-height: 328px;
	float: right;
}

#leftContent img {
	position: relative;
	top: 0px;
}

#rightContent {
/*	border: 1px solid blue;
*/	width: 350px;
	min-height: 328px;
	float: right;
}

/*=== titleArea ============*/
#titleArea {
	background-color: #dddddd;/*was #d0c0b1;*/
	width: 300px;
	min-height: 328px;
	float: left;
}

#titleArea h1 {
	padding-top: 120px;
	padding-bottom: 10px;
	margin-left: 10px;
	font-weight: lighter;
	text-align: center;
}

/*=== footer (all pages except enlarged email pages ===*/
#footer {
/*	border: 1px solid blue;
*/	width: 990px;
	height: 40px;
	clear: both;
	text-align: right;
	font-size: 1em;
	line-height: 2.2em;
	background: url(../images/footerBKG.jpg) repeat-x 0% 0%;
/*	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
*/	border-bottom: 1px solid #888888;
}

#footer p {
	color: #111111; /*was #222222;*/
}

#footer a:link {
	color: #111111; /*was #222222;*/
	text-decoration: none;
}

#footer a:visited {
	color:#111111; /*was #222222;*/
	text-decoration: none;
}

#footer a:hover {
	color: #333333; /*was #222222;*/
	text-decoration: none;
}

/*=== Page specific styles ====*/

/*=== Sub-menus ===============*/
#subMenu {
/*	border: 1px solid red;
	border-left: 2px dotted #ffffff;
*/	width: 250px;
	margin-left: 0px;
	padding: 0 0 0 1em;
	font-size: 0.7em;
	line-height: 1.4em;
}

#subMenu li {
	list-style-type: none;
}

#subMenu li a:link {
	text-decoration: underline;
	color: #000000;
	display: block;
}

#subMenu li a:visited {
	text-decoration: underline;
	color: #000000;
	display: block;
}

#subMenu li a:hover {
	text-decoration: none;
	color: #663399;
	display: block;
}


/*=== Index page ==============*/
.indexIMG {
	padding-top: 0px;	
}

h2.indexTitle {
	text-align: center;
	color: #000000;
	font-size: 0.8em;
}

.HomeFlashLink {
}

/*=== websites page ===========*/
#titleArea2 {
	border-left: 2px solid #ffffff;
	background-color: #dddddd;
	width: 300px;
	min-height: 328px;
	float: left;
}

#titleArea2 h1 {
	padding-top: 20px;
	padding-bottom: 10px;
	margin-left: 10px;
	font-weight: lighter;
}

.websiteIMG {
	padding: 0;
	margin: 5px 0 0 100px;
}

/*=== Email pages ================*/

.emailsmallIMG {
	padding: 25px 0 0 0;
}

/*=== Email enlarged pages =======*/
#contentAreaLarge {
	background-color:  #ffffff;/*#ece9d8; /*#ffffff;*/
	width: 660px;
	min-height: 878px;
	float: right;
}

#titleAreaLarge {
	border-left: 2px solid #ffffff;
	background-color: #dddddd; /*was #b0a090; #d0c0b1;*/
	width: 320px;
	min-height: 879px;
	float: left;
}

#titleAreaLarge h1 {
	text-align: center;
	padding-top: 120px;
	font-weight: lighter;
}

#contentAreaLarge2 {
/*	border: 1px solid black;
*/	background-color:  #ffffff;/*#ece9d8; /*#ffffff;*/
	width: 660px;
	min-height: 640px;
	float: right;
}

#contentAreaLarge2 img {
	padding: 0;
	margin: 0;
}

#titleAreaLarge2 {
	border-left: 2px solid #ffffff;
	background-color: #dddddd; /*was #b0a090; #d0c0b1;*/
	width: 320px;
	min-height: 640px;
	float: left;
}

#titleAreaLarge2 h1 {
	text-align: center;
	padding-top: 140px;
	font-weight: lighter;
}

#titleAreaLarge3 {
	border-left: 2px solid #ffffff;
	background-color: #dddddd; /*was #b0a090; #d0c0b1;*/
	width: 320px;
	min-height: 687px;
	float: left;
}

#titleAreaLarge3 h1 {
	text-align: center;
	padding-top: 140px;
	font-weight: lighter;
}

#titleAreaLarge4 {
/*	border: 1px solid green;
*/	background-color: #dddddd; /*was #b0a090; #d0c0b1;*/
	width: 320px;
	min-height: 1041px;
	float: left;
}

#titleAreaLarge4 h1 {
	text-align: center;
	padding-top: 140px;
	font-weight: lighter;
}

/* footer details for these pages only */
#footerLarge {
/*	border: 1px solid blue;
*/
	width: 990px;
	height: 40px;
	clear: both;
	text-align: right;
	font-size: 1em;
	line-height: 2.2em;
	background: url(../images/footerBKG.jpg) repeat-x 0% 0%;
	border-bottom: 1px solid #888888;
}

#footerLarge p {
	color: #111111; /*was #222222;*/
}

#footerLarge a:link {
	color: #111111; /*was #222222;*/
	text-decoration: none;
}

#footerLarge a:visited {
	color: #111111; /*was #222222;*/
	text-decoration: none;
}

#footerLarge a:hover {
	color: #333333; /*was #222222;*/
	text-decoration: none;
}

.back_link {
	padding-right: 250px;
}

/*=== Technical page =============*/
.technicalIMG {
	padding-top: 0px;	
}

.w3c {
	padding: 15px 0 0 70px;
}

h3.tech {
	margin: 0;
	padding: 1em 0 0 0.2em;
}

/*=== Creation Pages =============*/
.creationIMG {
	padding-top: 0px;	
}

/* each line of text on logos.php page - using px, not em, due to less movement when enlarging website text */
.logo_line1 {
	margin: 0 0 0 3px;
}

.logo_line2 {
	margin: 10px 0 0 3px;
}

.logo_line3 {
	margin: 0px 0 0 0;
}

.logo_line4 {
	margin: 25px 0 0 3px;
}

.logo_line5 {
	margin: 0px 0 0 0;
}

.logo_line6 {
	margin: 30px 0 0 3px;
}

.logo_line7 {
	margin: 0px 0 0 0;
}

.emsIMG {
	padding: 0em 0 0em 0;
}

.emsOrig {
	float: right;
	padding: 0.5em 2em 0 0;
}

.creationText1 {
	padding: 0.3em 0 0 2em;
}

.logoIMG {
	padding-bottom: 2em;
}

.wedIMG {
	padding: 2em 0 0 6.5em;
}


/*=== UI Enlarge page ==========*/
#contentUILarge {
/*	border: 1px solid black;
*/	background-color:  #ffdbb7;/*#ece9d8; /*#ffffff;*/
	width: 585px; /* this plus titleAreaEmailLarge width should equal EmailLargeContainer width */
	height: 683px; /* required to stop bkg color showing - relates to image size */
}

#contentUILarge img {
	padding: 0;
}

#titleAreaUILarge {
	background-color: #b0a090;
	width: 70px; /* this plus contentAreaLarge width should equal EmailLargeContainer width */
	height: 683px;
	float: right;
}

/*=== Flash page ===============*/
#FlashContainer {
/*	border: 1px solid red;
*/	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 780px; /* total of titleAreaFlash width plus contentAreaFlash width - relates to image size */
}

#contentAreaFlash {
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	background-color:  #000000;/*#ece9d8; /*#ffffff;*/
	width: 730px; /* this plus titleAreaFlash width should equal FlashContainer width */
	height: 300px; /* was 200px */
	margin: 0;
	padding: 20px 0px 0px 20px;
	float: right;
}

#contentAreaFlash img {
	padding-top: 0;
}

#titleAreaFlash {
	background-color: #dddddd;
	border-left: 2px solid #ffffff;
	width: 232px; /* this plus contentAreaFlash plus padding width should equal FlashContainer width. */
	height: 320px; /*was 220px. this plus padding of contentAreaFlash equals height of contentAreaFlash */
	float: left;
	margin: 0; /* not really necessary */
	padding: 0; /* not really necessary */
}

#titleAreaFlash h1 {
	padding-top: 40px;
	padding-bottom: 10px;
	text-align: center;
	font-weight: lighter;
}

h2.flashTitle {
	text-align: center;
	color: #000000;
	font-size: 0.8em;
}

.flashPageLink {
	position: relative;
	top: 20px;
}

.flashPageLink a:link {
	color: #cccccc;
}

.flashPageLink a:visited {
	color: #cccccc;
}

.flashPageLink a:hover {
	color: #999999;
}

/*=== Contact Page ==================*/
.contactIMG {
	padding-top: 0px;
}

table {
	margin: 0 0 0 75px;
	border-collapse: collapse;
}

th {
	padding: 5px;
	font-weight: lighter;
	font-size: 0.8em;
	text-align: right;
}

td {
	padding: 2px;
}

.real_form {
  display: none;
}

.submitbutton {
text-align: center;
  width: 170px; /* button width */
}