/* Generic
================================== */
/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt. */
img
{
	border-width: 0pt;
}


/* Typography generic
================================== */

/* Sets the generic font and font size for body. Also sets background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Margin for top. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	margin-top: 30px;
	background-color: #1D3855;
}

/* Standard paragraph. Left, right and bottom padding. Set dark blue colour. 
Line-Height for leading.*/
p
{
	padding: 0 10px 10px 10px;
	color: #1D3855;
	line-height: 130%;
}

/* Standard heading h2. Same padding and colour as paragraph. Bigger font. */
h2
{
	padding: 0 10px 10px 10px;
	color: #1D3855;
	font-size: 110%;
}

/* Bold text for names under reviews. */
.p_bold
{
	padding: 0 10px 10px 10px;
	color: #1D3855;
	line-height: 130%;
	font-weight: bold;
}

/* Bold text inline. */
.p_inline_bold
{
	padding: 0 10px 10px 0px;
	color: #1D3855;
	line-height: 130%;
	font-weight: bold;
}


/* Links generic
================================== */

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */
a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

/* Links to be orange. */
a:link
{
	color: #FF6501;
}

/* Visited links to be brown. */
a:visited
{
	color: #5B3A17;
}

/* Hover and active states to be lighter blue. */
a:hover, a:active
{
	color: #617488;
}


/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
190px(side) + 390px(primary) + 170px(secondary). */

/* Main wrapper with centres the whole page with set width. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. 
Background filler image for faux-columns. */
#wrapper
{
	width: 750px;
	margin: 0 auto;
	background-color: #FFF;
	padding: 0;
	text-align: left;
	background-image: url(../images/Faux_Filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


/* Header
================================== */

/* Top header with same width as wrapper and set height.
Background image is header image. Logo positioned in html. */
#header_one
{
	width: 750px;
	height: 140px;
	background-image: url(../images/Header_560.gif);
	background-repeat: repeat-y;
	background-position: 190px 0px;
}

/* Positions logo correctly with margin. Margin instead of padding for IE5.5. */
#header_one img
{
	margin: 14px 0px 0px 63px;
}

/* Second header with same width as wrapper and set height. 
Background image positioned. Font size + line height 0 to achieve same height in all browsers,
since header two is an empty div. */
.header_two
{
	width: 750px;
	min-height: 10px;
	background-image: url(../images/Header_Two.gif);
	background-repeat: repeat-y;
	background-position: left top;
	font-size: 0;
	line-height: 0;
}

/* Hack for IE. IE does not understand min-heigt, but understands height. */
* html .header_two 
{ 
	height: 10px; 
}


/* PrimaryContent (middle column)
================================== */

/* Three main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. Margin bottom. */
#primaryContent
{
	float: left;
	width: 750px;
	display: inline;
	margin: 0;
}

/* Specifying threeColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 390. Margin on left to allow for sideContent with 170px width. */
#threeColLayout #primaryContent
{
	float: left;
	width: 390px;
	margin: 0 0 0 190px;
}

/* ID for box inside primaryContent. Margin all around. */
#boxPrimary
{
	margin: 10px 10px 10px 10px;
}


/* SecondaryContent (right column)
================================== */

/* Secondly content to the right of primary content. Float left and set width to 190px. */
#secondaryContent
{
	float: left;
	width: 170px;
}

/* ID for box inside secondaryContent. Move image down. */
#boxSecondary
{
	margin: 38px 10px 10px 10px;
}

/* ID for box inside secondaryContent, for first short image. Move image down. */
#boxSecondaryShortOne
{ 
	margin: 38px 10px 10px 10px;
}

/* ID for box inside secondaryContent, for second and third short image. Move image down. */
#boxSecondaryShortTwo, #boxSecondaryShortThree
{ 
	margin: 18px 10px 10px 10px;
}

/* Smaller font for text under images inside secondary content. Center text.
Padding on right only since box is bigger than image. */
#boxSecondary p
{
	font-size: 88%;
	text-align: center;
	padding-right: 30px;
}

/* ID for box inside secondaryContent, below images, for quote. */
#boxSecondaryQuote
{ 
	margin: 15px 10px 10px 10px; 
}

/* Smaller font for text under images inside secondary content. Center text.
Padding on right only since box is bigger than image. */
#boxSecondaryQuote p
{
	font-size: 95%;
	margin-right: 20px;
	background-color: #D5C405;
	color: #5B3A17;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* SideContent (left column)
================================== */

/* Last comes the side content on the left hand side. 
Width 170px and negative margin of -750px to the left. */
#sideContent
{
	float: left;
	width: 190px;
	margin: 0 0 0 -750px;
	border-right: 1px #1D3855 solid;
}

/* ID for box inside SideContent. Contains navigation. 
Padding set for proper position inside sideContent. */
#boxSideContent 
{ 
	padding: 38px 10px 10px 27px; 
}

/* Books in italics and indented. */
.booksItalicIndent
{
	padding-left: 7px;
	font-style: italic;
}

/* Unordered list inside boxSideContent. Set width. Smaller font size.
Margin and Padding set to zero for correct distances between list items in IE6. */
ul#navlist
{
	width: 155px;
	font-size: 90%;
	margin: 0;
	padding: 0;
}

/* Hack for IE with 2px less width. */
* html ul#navlist
{
	w\idth: 153px;
	margin: 0;
	padding: 0;
}

/* List items inside navlist (inside boxSideContent). No bullet points. Border on top.
Orange link colour. */
ul#navlist li
{
	list-style: none;
	border-top: 1px solid #5B3A17;
}

/* Links inside list display block to act as buttons. Padding for distance around text. 
Bottom margin for distance between list items. Big right border. Set background colour. */
ul#navlist li a
{
	display: block;
	padding: 4px 5px 4px 5px;
	margin-bottom: 5px;
	border-right: 10px solid #FF6501;
	background-color: #D5C405;
}

/* Hack for IE6 to achieve correct ditance between link boxes. */
* html ul#navlist li a
{
	margin-bottom: 0;
}

/* All link text to be brown colour inside navigation. */
ul#navlist li a:link 
{ 
	color: #5B3A17;
}

/* Highlight active page in navigation with this selectors. Ech page has got the appropriate
class assigned in the body tag *changes on every page). Text colour and big border set to dark blue. */
body.home ul#navlist li a:link#home, body.books ul#navlist li a:link#books, 
body.ac ul#navlist li a:link#ac, body.st ul#navlist li a:link#st, 
body.fd ul#navlist li a:link#fd, body.frank ul#navlist li a:link#frank, 
body.links ul#navlist li a:link#links, body.contact ul#navlist li a:link#contact
{
	color: #1D3855;
	border-right: 10px solid #1D3855;
}

/* All visited link text and big border on side to be brown coloured. */
#boxSideContent li a:visited 
{ 
	color: #5B3A17;
	border-right: 10px solid #5B3A17;
}

/* On hover change color of text to lighter blue for text and big border. */
ul#navlist li a:hover
{
	color: #617488;
	border-right: 10px solid #617488;
}



/* Fieldset styles for contact form
================================== */

.zemContactForm fieldset
{
	border: none;
	margin-left: 10px;
	color: #1D3855;
}

.zemContactForm legend
{
	padding: 0.5em 0 0.5em 0;
	width: 60px;
}

.zemContactForm label
{
	float: left;
	width: 60px;
	margin: 0.7em 0 0.7em 0;
	text-align: left;
}

.zemContactForm br 
{
   clear: left;
}
   
.zemContactForm .zemSubmit 
{ 
	margin: 0.5em 0 0 60px; 
}

/* Error messages to be displayed without bullet points. */
.zemError ul, li
{
	list-style: none;
	padding-bottom: 3px;
	color: #F03;
}


/* Footer
================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Footer contains Admin Login and link to ottimoto. Different background filler image for faux-columns. */
#footerBar
{
	clear: both;
	width: 750px;
	background-color: #D5C405;
	background-image: url(../images/Faux_Filler_Footer.gif);
	background-repeat: repeat-y;
	background-position: left top;
}

/* Paragraph style for footer text. Centred and smaller. 
Padding top and bottom to even out vertically. */
#footerBar p
{
	font-size: 88%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}