/* (c)2006 www.cogentmedia.co.uk. All rights reserved. */

/* GENERAL DEFINITIONS --------------------------------------------------------------- */
* {margin: 0px; padding: 0px; border: 0px;}

html {height: 100%; background: #FF0000 url(resources/mainImage01.jpg) top left repeat-x;}
#homePage {/* background: #FF0000 url(resources/mainImage01.jpg) top left repeat-x; */}
#forPrintPage {background: #FF0000 url(resources/mainImage02.jpg) top left repeat-x;}
#forWebPage {background: #FF0000 url(resources/mainImage03.jpg) top left repeat-x;}
#contactPage {background: #FF0000 url(resources/mainImage04.jpg) top left repeat-x;}
#loginPage {background: #FF0000 url(resources/mainImage04.jpg) top left repeat-x;}
#servicesPage {background: #FF0000 url(resources/mainImage01.jpg) top left repeat-x;}
#errorPage {background: #FF0000 url(resources/errorBG.gif) top left repeat-x;}

body
{	min-width: 740px;
	min-height: 320px;
	padding: 270px 0px 0px 0px;
	background: url(resources/cogentTopBG.gif) top left repeat-x;
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #666666;
	text-align: left;
}

h1 {font-size: 16px; font-weight: bold; color: #333333; margin-top: 0px; margin-bottom: 4px;}
h2 {font-size: 14px; line-height: 16px; font-weight: bold; color: #333333; margin-top: 0px; margin-bottom: 4px;}
h3 {font-size: 12px; font-weight: bold; color: #FF0000; margin-top: 0px; margin-bottom: 6px;}
h4 {font-size: 10px; font-weight: bold; color: #000000; margin-top: 0px; margin-bottom: 4px;}
h5 {font-size: 9px; font-weight: bold; line-height: 10px; color: #000000; margin-top: -4px; margin-bottom: 8px;}
p {margin-top: 0px; margin-bottom: 8px;}
a {color: #333333; font-weight: bold; text-decoration: none;}
a:hover {text-decoration: underline;}

table {width: 100%; border: 0px; padding: 0px;}
td {vertical-align: top;}
img {display: block;}

em {text-decoration: underline;}
strong {color: #333333; font-weight: bold;}
small {font-size: 80%;}

.floatLeft {float: left;}
.floatRight {float: right;}
.floatCentre {margin: auto;}

/* LAYOUT DEFINITIONS --------------------------------------------------------------- */

#container {position: relative; width: 100%;}
.content {float: left; position: relative; width: 100%; padding-top: 10px; padding-bottom: 115px; background: #FFFFFF url(resources/cogentBottomBG.gif) bottom left repeat-x;}
#menu {float: left; position: relative; left: 0px; width: 150px; height: 300px;}
.main {position: relative; margin-left: 150px;}
#minHeightBlock {min-height: 390px;}
.fullColumn {float: left; position: relative; width: 97%; padding-left: 1%; padding-right: 1%;}
.halfColumn {float: left; position: relative; width: 47%; padding-left: 1%; padding-right: 1%;}
.thirdColumn {float: left; position: relative; width: 31%; padding-left: 1%; padding-right: 1%;}

/* MENU DEFINITIONS --------------------------------------------------------------- */

#menu h3 {padding-left: 15px;}
.menuList {list-style-type: none; margin-bottom: 10px;}
.menuList a {display: block; width: 135px; padding: 4px 0px 2px 15px; background: url(resources/qlMenuBG.gif) bottom left no-repeat; color: #000000; text-decoration: none; font-weight: normal;}
.menuList a:hover {color: #FF0000; text-decoration: none;}
.menuList a span {display: none;}
.menuList a:hover span {display: inline;}

/* DESIGN DEFINITIONS --------------------------------------------------------------- */

#cogentLogo {position: absolute; top: 9px; left: 10px;}
#productMontage {position: absolute; top: 0px; right: 13px;}
#highlightBox {position: absolute; top: 95px; left: 15px; width: 350px;}
#highlightBox * {color: #FFFFFF;}
#highlightBox em {font-style: italic; text-decoration: none;}
#highlightBox h2 {text-transform: uppercase;}

.introImage {float: right; position: relative; margin: 0px 0px 10px 10px; display: none;}
.sampleImage {float: right; position: relative; margin: 0px 10px 10px 10px;}
.introBoxLeft, .introBoxRight {float: left; position: relative; width: 100%; margin-bottom: 10px;}
.introBoxRight h2, .introBoxRight h3 {visibility: hidden;}
.sampleBox {float: left; position: relative; width: 98%; margin-bottom: 10px; padding: 10px 0px 0px 0px; border-top: 1px solid #E3E3E3; border-right: 12px solid #E3E3E3;}

.contactForm
{	padding: 5px 10px 10px 10px;
	margin-bottom: 10px;
	border: 1px solid #AAAAAA;
	background-color: #EEEEEE;
	color: #333333;
}
.contactForm table {width: 100%;}
.contactForm td {padding: 5px 10px 0px 0px; vertical-align: middle;}
.contactForm .inputLabel {width: 25%;}
.contactForm .inputLabelFixed {width: 100px;}
.contactForm .inputCell {width: 70%;}
.contactForm .inputField {width: 100%; height: 20px;}
.contactForm .inputFieldShort {width: 150px; height: 20px;}
.contactForm .inputFieldVShort {width: 50px; height: 20px;}
.contactForm .optionField {width: 100%;}
.contactForm .textAreaInput {width: 100%;}

.inputField, .inputFieldShort, .inputFieldVShort, .optionField, .optionFieldSmall, .textAreaInput {border: 1px solid #AAAAAA;}

.formButton {float: left; width: 86px; height: 22px; margin-right: 5px;}
#submitButton {background: url(resources/formButtonSubmitUp.gif) top left no-repeat;}
#resetButton {background: url(resources/formButtonClearUp.gif) top left no-repeat;}
#submitButtonHover {background: url(resources/formButtonSubmitDown.gif) top left no-repeat;}
#resetButtonHover {background: url(resources/formButtonClearDown.gif) top left no-repeat;}

/* FOOTER DEFINITIONS --------------------------------------------------------------- */

#footer {position: absolute; bottom: 0px; left: 0px; width: 100%;}
#footer h4 {font-size: 10px; color: #FFFFFF;}
#footer .floatLeft {position: relative; left: 15px; margin-right: 15px;}
#footer .floatRight {position: relative; right: 15px; margin-left: 15px;}
#footer a {font-weight: bold; color: #FFFFFF;}
.validationIcon {position: relative; left: 15px; width: 88px; height: 31px; padding-bottom: 5px;}

/* SEO & W3C DEFINITIONS ------------------------------------------------------------ */
.listing {text-transform: capitalize;}
.listingCell {padding: 0px 5px 5px 5px;}
.listingCell a {text-decoration: underline;}

/* ERROR PAGE DEFINITIONS ---------------------------------------------------------- */
#errorForm {padding: 5px 10px 10px 10px; margin-bottom: 10px; border: 1px solid #AAAAAA; background-color: #EEEEEE;	color: #333333;}
#errorFormTable {width: 100%;}
#errorFormTable td {padding: 5px 10px 5px 0px; vertical-align: top;}
#errorFormTable th {width: 100px; padding: 5px 10px 5px 0px; text-align: left; font-weight: normal; vertical-align: top;}
.errorInputField {width: 100%; height: 20px; border: 1px solid #AAAAAA;}
.errorInputArea {width: 100%; border: 1px solid #AAAAAA;}