/* Feature presentation. Contains all site-specific styles. 
================================================================= */

/* 
Title: Master styles for screen media
Author: otti@ottimoto.com.au
==================================================================== */


/* 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. 
Extra fix for IE7 where bg image is moved to html tag in ie.css.*/
body
{
	text-align: center;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 100%;
	color: #323232;
	background-color: #FFFFFF;
	background-image: url(../images/ottimoto_body_bg.gif);
	background-repeat: repeat-x;
}

/* Same as above but different bg image for homepage. */
body.home
{
	text-align: center;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 100%;
	color: #323232;
	background-color: #FFF;
	background-image: url(../images/ottimoto_body_home_bg.gif);
	background-repeat: repeat-x;
}

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


/* Sticky Footer
================================== */
html, body 
{
	height: 100%;
}


/* Typography generic
================================== */
/* Standard paragraph. Text colour already set in body. Line-Height for leading. Padding bottom. */
p
{
	line-height: 135%;
	padding-bottom: 10px;
}

/* Orange colour and padding for h3 (big main heading). No padding bottom required. */
h1
{
	color: #DE8000;
	padding-top: 28px;
}

/* Orange colour and padding for h2 and h3. */
h2, h3, h4
{
	color: #DE8000;
	padding-top: 30px;
	padding-bottom: 25px;
}

/* Standard heading h1. Big font. */
h1
{
	font-size: 130%;
}

/* Standard heading h2. Bigger font. Line height for h2 going over more lines. */
h2
{
	font-size: 120%;
	line-height: 1.3;
}

/* Minor heading h3. Smaller font. */
h3
{
	font-size: 110%;
}

/* Smallest heading h4. Smaller font. */
h4
{
	font-size: 100%;
}

/* Class to format text in bold. */
.p_bold
{
	font-weight: bold;
}

/* Class to format text in italic */
.p_italic
{
	font-style: italic;
}


/* Fonts
================================== */

/* Create declaration that defines the embedded font name and source file. 
Creates arbitrary name for the font and associates it with the a direct link to the font itself. */
@font-face
{
	font-family: 'BP-replay';
	src: url('../fonts/bpreplay.eot'); /* IE */  
	src: local('BPReplay-Regular-Style'), url('../fonts/BPreplay.otf') format('opentype'); /* non-IE */ 
}

/* Use the font-family declared above. Also include fallback for non-supportive browsers ie FF below 3. */
h1, h2, h3, #navcontainer_prim ul li a, #navcontainer_sec ul
{
	font-family: 'BP-replay', Arial, Helvetica, Verdana, sans-serif;
}



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

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

/* Links to be blue. */
a:link
{
	color: #4196CC;
}

/* Visited links to be tint of blue (70%). */
a:visited
{
	color: #7AB6DB;
}

/* Hover and active links to be tint of blue (70%). */
a:hover, a:active
{
	color: #7AB6DB;
}



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

/* Order important for search engines. Calculations: 
645px (primary) + 315px (side) = 960px

/* 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. 
No background colour or image to allow bg filler to shine through. 
Sticky footer items. Bottom negative margin same height as footer. */
#wrapper
{
	width: 960px;
	padding: 0;
	text-align: left;
	min-height: 100%;	/* required for sticky footer */
	height: auto !important; /* required for sticky footer -> hack for IE6. */
	height: 100%; /* required for sticky footer -> hack for IE6 */
	margin: 0 auto -150px; /* required for sticky footer. */
}


/* Positioned graphics
================================== */
/* Relative positioned container for absolute positioned graphic. */
#image_relative
{
	position: relative;
	top: 0px;
	left: 0px;
}

/* Position graphic absolute inside relative container. Move into correct position from left and top. */
#image_absolute
{
	position: absolute;
	top: 200px;
	left: 760px;
}



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

/* Top header with same width as wrapper. Set height and bg colour. Position bg circle image. */
#header
{
	width: 960px;
	height: 180px;
	background-color: #323232;
	background-image: url(../images/ottimoto_cirlces_header.gif);
	background-repeat: no-repeat;
	background-position: 280px 70px;
}

/* Font colour for header text. */
#header p
{
	color: #B2B300;
}

/* Position logo inside header. */
#header #head_logo img
{
	padding-top: 38px;
	padding-left: 5px;
}

/* Three boxes inside header for logo, Utilities and main navigation. 
First box for logo to float left, set width and height (same height as second box on the right). */
#head_logo
{
	float: left;
	width: 410px;
	height: 130px;
}

/* Second box for Utilities on top right. Float right, set width (minus padding left) and height.
Set height to push third box down. Position text on the left. Margin left 5px. */
#head_top_float_right
{
	float: right;
	width: 545px;
	height: 130px;
	text-align: right;
	padding: 0px 5px 0px 0px;
}

/* Relative positioned container for absolute positioned home-button container. */
#home_relative
{
	position: relative;
	top: 0px;
	left: 0px;
}

/* Position home-button absolute inside relative container. Move into correct position from left. */
#home_absolute
{
	position: absolute;
	top: 0px;
	right: 5px;
}

/* Format hom button link. Move from top, display block. Set width and height. Hide overflow. */
#head_top_float_right a.homelink
{
	margin-top: 10px;
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

/* Hover state for home link button. Move other graphic in. */
#head_top_float_right a.homelink:hover
{
	display: block;
	text-indent: -24px;
}

/* Breadcrumb size to be very small. */
#head_top_float_right p
{
	font-size: 75%;
}

/* Move breadcrumbs down to allow for home button above. */
#head_top_float_right .breadcrumbs
{
	margin-top: 40px;
	padding-right: 5px;
}


/* Search form inside header
========================================================= */

/* Define fieldst around searchbox. Float right and set header bg colour. */
fieldset.search 
{
	float: right;
	background: #323232;
}

/* Both, input field and button, without border and float left. */
.search input, .search button 
{
	border: none;
	float: left;
}

/* Input field. Set text colour and slightly bigger font size. Set width of field and height. 
Additional padding (height+padding+border=28px). Set bg colour to lighter blue and margin left for distance to button. 
Also border around. BG colour as fallback if images are off (but slightly different colour). */
.search input.box
{
	color: #323231; /* Slightly different to avoid CSS warnings -> 1 instead of 2 last. */
	font-size: 1em;
	width: 180px;
	height: 20px;
	padding: 2px 5px 2px 5px;
	background: #8DC0E0;
	margin-right: 5px;
	border: 2px #4196CC solid;
}

/* The focus (when clicked inside). No outline and light blue.  */
.search input.box:focus 
{
	background: #CFE5F2;
	outline: none;
}

/* The search button. Se width and height. Place bg image. 
Specify type of cursor to be displayed whern hovering over button to "hand".*/
.search input.btn
{
	width: 28px;
	height: 28px;
	cursor: pointer;
	background-color: #323232;
	background-image: url(../images/ottimoto_search_button.gif);
	background-repeat: no-repeat;
	background-position: right;
}

/* Text Search. Line height same as box size. Padding right for distance to box. Float left. 
Set colour, font weight and font size. */
.searchHeading
{
	float: left;
	line-height: 28px;
	color: #B2B300;
	padding-right: 10px;
	font-size: 120%;
	font-weight: bold;
}



/* Primary navigation inside header
========================================================= */

/* Derived from Jeffrey Zeldman's DWWS menu. */
/* Third box to hold main navigation. Float right and set height so it can expand under logo to the left.
Whole container moved in by 5px from right. */
#navcontainer_prim
{
	float: right;
	margin: 0px 5px 0px 0px;
	height: 50px;
}

/* Unordered list for navigation. No bullet points. Center text. */
#navcontainer_prim ul
{
	list-style-type: none;
	text-align: center;
}

/* List items inside navcontainer. Display block to show links in one line. Float left and align text to center again. */
#navcontainer_prim ul li
{
	display: block;
	float: left;
	text-align: center;
}

/* Links list items. Set height to same height as navcontainer itself. Set width of each button and border right. 
Set text colour, no bullet points and align text to center. Display block again to display next to each other. 
Place gradient bg image (top part).Set line-height for centered text. BG colour as fallback if images are off (but slightly different colour).*/
#navcontainer_prim ul li a
{
	background-color: #B2B301; /* Slightly different to avoid CSS warnings -> 1 instead of 0 last. */
	background-image: url(../images/ottimoto_prim_nav_bg.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	width: 91.6px;
	height: 50px;
	border-right: 1px #323232 solid;
	color: #323232;
	text-decoration: none;
	display: block;
	text-align: center;
	line-height: 50px;
}

#navcontainer_prim ul li a:link
{
	background-position: 0px 0px;
}

#navcontainer_prim ul li a:hover
{
	background-position: 0px -50px;
}

#navcontainer_prim ul li a:active
{
	background-position: 0px -50px;
}

/* Highlight current page in navigation based on body class, combined with list id. */
body.web #navlist1 a#web, body.print #navlist1 a#print, body.portfolio #navlist1 a#portfolio, 
body.news #navlist1 a#news, body.about #navlist1 a#about, body.contact #navlist1 a#contact
{
	background-position: 0px -100px;
}



/* Header Two (Big main text)
========================================================= */

/* Second header with same width as wrapper. Set height and bg colour. Contains big main heading. */
#header_two
{
	width: 960px;
	height: 84px;
	background-color: #F0F0CC;
}

/* Center the heading inside header two for big text. */
#header_two h1
{
	text-align: center;
}

/* Header Three (Secondary navigation)
========================================================= */

/* Third header with same width as wrapper. Set height. Contains secondary navigation. */
#header_three
{
	width: 960px;
	height: 31px;
}

/* Rollover horizontal list navbar. */
/* Unordered list for secondary navigation. Load repeated gif.
Set height to avoid bg colour to shine through. Set height and also line-height for centered text. */
#navcontainer_sec ul
{
	background-image: url(../images/ottimoto_sec_nav_bg4.gif);
	background-repeat: repeat-x;
	/* color: #323232; */
	float: left;
	width: 100%;
	font-size: 90%;
	height: 31px;
	line-height: 31px;
}

/* Display all list elements inline -> inside the current block element. */
#navcontainer_sec ul li 
{
	display: inline; 
}

/* List item links inside unordered list. Set bg colour for link list items (default) and load repeated gif.
Set padding both sides of text. Set colour of link text. No underline. Float left. BG colour as fallback if images are off (but slightly different colour). */
#navcontainer_sec ul li a
{
	background-color: #B2B301; /* Slightly different to avoid CSS warnings -> 1 instead of 0 last. */
	background-image: url(../images/ottimoto_sec_nav_bg.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border-left: 1px #323232 solid;
	padding: 0em 1em 0em 1em;
	color: #323232;
	text-decoration: none;
	float: left;
}

/* Last item in secondary navigation to have border on right. */
#navcontainer_sec ul li .sec_last
{
	border-right: 1px #323232 solid;
}

#navcontainer_sec ul li a:link
{
	background-position: 0px 0px;
}

#navcontainer_sec ul li a:hover
{
	background-position: 0px -31px;
}

#navcontainer_sec ul li a:active
{
	background-position: 0px -31px;
}

/* Highlight current page in navigation based on body class, combined with list id. */
body.web-design #navlist2 a#web-design, body.web-development #navlist2 a#web-development, body.content-management #navlist2 a#content-management, 
body.search-engines #navlist2 a#search-engines, body.consulting #navlist2 a#consulting, body.print-design #navlist2 a#print-design, 
body.print-management #navlist2 a#print-management, body.web-portfolio #navlist2 a#web-portfolio, body.print-portfolio #navlist2 a#print-portfolio,
body.ottimoto #navlist2 a#ottimoto, body.web-design-process #navlist2 a#web-design-process
{
	background-position: 0px -62px;
}



/* 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. */
#primaryContent
{
	float: left;
	width: 960px;
	display: inline;
}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 645px+315px=960px. */
#twoColLayout #primaryContent
{
	float: left;
	width: 645px;
}

/* Specifying oneColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 960px. */
#oneColLayout #primaryContent
{
	float: left;
	width: 960px;
}

/* Padding for headings and p inside primary content. */
#primaryContent h1, #primaryContent h2, #primaryContent h3, #primaryContent p
{
	padding-left: 5px;
	padding-right: 90px;
}

/* Heading 3 inside primary content with less padding top and bottom (applied on Web Design Process page). */
#primaryContent h3
{
	padding-top: 10px;
	padding-bottom: 3px;
}

/* Unordered lists in lists (here sitemap) inside primary content. No list-style-type first for ul but arrow graphic. */
#primaryContent ul.sitemap_indent li
{
	list-style-type: none;
	margin-left: 7px;
	padding-left: 22px;
	background-image: url(../images/ottimoto_list_arrow.gif);
	background-repeat: no-repeat;
	background-position: 0.3em 0.4em;
}

/* Unordered lists in primaryContent with arrow as image. No list-style-type first for ul. */
#primaryContent .promise ul 
{ 
	list-style-type: none; 	
}

/* List iems with arrow graphic positioned. Slight left indent. */
#primaryContent .promise li
{
	padding-left: 25px;
	padding-bottom: 2px;
	background-image: url(../images/ottimoto_list_arrow.gif);
	background-repeat: no-repeat;
	background-position: 0.3em 0.4em;
}


/* News - Primary Content
================================== */

/* Allow for line under news excerpts on news page only. */
#primaryContent .newsText
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: #E3D9B7;
	margin: 0px 90px 0px 0px;
}

/* Horizontal rule under main news intro text (original first article). */
.rule
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: #E3D9B7;
	margin: 0px 90px 0px 0px;
}

/* Format buttons on news page to previous and next news. */
#primaryContent .previousNews, #primaryContent .nextNews
{
	padding-top: 5px;
}
#primaryContent .previousNews
{
	float: left;
	margin-bottom: 10px;
}
#primaryContent .nextNews
{
	float: right;
	margin-bottom: 10px;
}

/* Search Results - Primary Content
================================== */

#primaryContent .small
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: #E3D9B7;
	margin: 0px 90px 0px 0px;
}


/* Portfolio Web/Print - Primary Content
================================== */

/* SELECTION LIST ABOVE */
/* Unordered list for filter buttons above portfolio items. */
/* Negative margin on top for same starting point as for a paragraph. No padding, but padding left.  
Set height of buttons. Also set line height to have text aligned in center of button. */
ul#portfolio-filter
{
	margin-top: -10px;
	padding: 0;
	padding-left: 5px;
	height: 64px;
	line-height: 64px;
}
/* List items (buttons) to display inline for horizontal display. */
ul#portfolio-filter li
{ 
	display: inline;
}
/* Link buttons with right margin for distance to next button. Also padding top and bottom. */
ul#portfolio-filter a
{
	margin-right: 1em;
	padding: 0.5em 0em 0.5em 0em;
	text-decoration: none;
}
/* Current (active) list item to be in orange (same as headings). */
ul#portfolio-filter a.current
{ 
	color: #DE8000;
}

/* WEB */
/*  Unordered list for portfolio items. */
/* No padding but padding left. No underline. */
ul#portfolio-list
{ 
	padding: 0;
	padding-left: 5px;
	list-style: none;
}
/* Set width and height of each portfolio list item. Width same as image width + 2x border. Height to include text below image.
Display bock and float left for proper flow. Overflow hidden. Margin left and right. */
ul#portfolio-list li
{
	width: 160px;
	height: 165px;
	display: block;
	float: left;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
}
/* Each list button item to have same width as image. Border around image.
First border around whole li item -> no border for link text next. Height to be image height. 
Overflow hidden. 15px+4px+152px+4px+15px=190px width of whole list item. */
ul#portfolio-list li a
{
	display: block;
	width: 152px;
	height: 110px;
	overflow: hidden;
	border: 4px #E3D9B7 solid;
}
/* Border only around link image, not the lionk text. */
ul#portfolio-list li p a
{
	border: none;
}
/* Text under images with 2px padding on top. Smaller font size. */
ul#portfolio-list li p
{
	font-size: 80%;
	padding-top: 2px;
	padding-right: 4px;
}


/* Quick Links on home page
================================== */

/* Define three boxes on home page as classes (reusable in same layout). Float them all left and set width. 
Margin left and right for correct positioning. Set bg colour (just in case).
Rounded corners: border-radius for future (already Opera 10.5 and Chrome), webkit for Safari, moz for Firefox, khtml for Linux. 
Bg image placed in Conditional statement for IE inside inner box (only required for IE only in Conditional St.). */
#quickLinkBox .box
{
	float: left;
	width: 270px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	background-color: #E3D9B7;
	border-radius: 10px; /* CSS3 */
	-webkit-border-radius: 10px; /* Safari and Chrome */
	-moz-border-radius: 10px; /* Firefox */
	-khtml-border-radius: 10px; /* Linux browsers */
}

/* Middle box to have different marginleft and right for proper alignment and distance. */
#quickLinkBox #middleBox
{
	margin-left: 65px;
	margin-right: 65px;
}

/* The inner container (inside box). Set width and margin left and top. Place repeated bg image. */
#quickLinkBox .box .home-inner
{
	width: 250px;
	margin-left: 10px;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(../images/ottimoto_home_box_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Position images inside quick links correctly from left. */
#quickLinkBox .box .home-inner img#firstImg 
{
	padding-left: 20px;
}
#quickLinkBox .box .home-inner img#secondImg
{
	padding-left: 0px;
}
#quickLinkBox .box .home-inner img#thirdImg
{
	padding-left: 0px;
}

/* Bottom text bar inside boxes. Set width and height, Set bg colour.  */
#quickLinkBox .boxtext
{
	width: 250px;
	height: 33px;
	background-color: #323232;
}

/* Format text inside boxtext. Center text. */
#quickLinkBox .boxtext h2
{
	padding-top: 5px;
	text-align: center;
}


/* Styles for form on contact page
================================== */


/* Fieldset groups related block. Position properly, set orange border.*/
.zemContactForm fieldset
{
	margin: 5px 90px 0px 0px;
	padding: 0;
	border: 1px #DE8000 solid;
}

/* Define the section heading. 1em font size, small padding around. Also distance from left (lign up with label text).
Set text colour to orange and background colour to white. */
.zemContactForm legend
{
	font-size: 1em;
	padding: 8px 10px 8px 10px;
	margin-left: 20px;
	color: #DE8000;
	background: #FFFFFF;
}

/* Label for headings left of form input boxes. Set width, clear left and float left. Appropriate margin and padding. */
.zemContactForm label
{
	position: relative;
	clear: left;
	float: left;
	width: 8em;
	padding-left: 30px;
	margin-right: 5px;
	padding-right: 10px;
	text-align: left;
	/* color: #323232; */
}

/* Clear the break for proper display. */
.zemContactForm br 
{
   clear: left;
}

/* Format input and textarea. Margin bottom to achieve distance between items. Dark grey text. 
Set font and font size 1em. Set width. Set bg colour to 30% orange. Set border to none. Place bg image (top).*/	
.zemContactForm input, .zemContactForm textarea
{
	color: #323232;
	margin-bottom: 15px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 1em;
	width: 300px;
	border: none;
	background-color: #F5D9B2;
	background-image: url(../images/ottimoto_contact_form_input_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Creates anchor for user in field (Standard Browsers). 20% of orange. */
.zemContactForm input:focus, .zemContactForm textarea:focus
{
	background: #F8E6CC;
}

/* Limit dragable grip in Safari and Chrome. Not dragable in width, only in height. */
.zemContactForm textarea
{
	max-width: 300px;
}

/* Give distance for submit button from top, left and to bottom. Set colour and bg colour. 
Set width (otherwise same width as other input fields). BG colour as fallback if images are off (but slightly different colour). */  
.zemContactForm .zemSubmit
{
	font-size: 1em;
	width: 120px;
	margin: 8px 0 10px 30px;
	background-color: #4196CD; /* Slightly different to avoid CSS warnings -> D instead of C last. */
	background-image: url(../images/ottimoto_submit_bg.gif);
	color: #FFFFFF;
	padding: 8px 15px 8px 15px;
	border: none;
	background-repeat: repeat-x;
	cursor: pointer;
}

/* Hover effect over button. No bg image. Plain colour (70% blue as other visited or hovered links). 
BG colour as fallback if images are off (but slightly different colour). */
.zemContactForm .zemSubmit:hover 
{ 
	background-image: none;
	background-color: #7AB6DC; /* Slightly different to avoid CSS warnings -> C instead of B last. */
}

/* Error messages to be displayed without bullet points. Give distance on bottom. Colour red.
Margin and padding to zero to start at beginning of column. */
.zemContactForm ul.zemError li
{
	list-style: none;
	padding-bottom: 6px;
	color: #DF4527;
	margin-left: 0px;
	padding-left: 30px;
	padding-top: 5px;
	background-image: none;
}

/* Display message sent in red colour. Only works with message overwritten in TXP. */
.zemThanks
{
	color: #DF4527;
	padding-left: 30px;
}


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

/* Last comes the side content on the right hand side. Width 315px. (645+315=960). */
#sideContent
{
	float: right;
	width: 315px;
}

/* Padding for headings and p inside side content. */
#sideContent h1, #sideContent h2, #sideContent h3, #sideContent p
{
	padding-right: 5px;
}

/* News heading inside side content to have less padding bottom and top to allow for closeup with actual current news heading itself. */
#sideContent h2.newsHeading
{
	padding-top: 20px;
	padding-bottom: 10px;
}

/* Distance to footer after news section in side content. */
#sideContent #sideNewsBottom
{
	padding-bottom: 20px;
}

/* Less padding on heading three inside side content. */
#sideContent h3
{
	padding-top: 0px;
	padding-bottom: 2px;
}

/* Class for posted date inside news. Italic and smaller font. */
.p_italic_news
{
	font-style: italic;
	font-size: 80%;
}

/* Horizontal rule between side content items. Padding top for equal distances. */
#rule
{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #E3D9B7;
	margin: 25px 0px 0px 0px;
}


/*  ======= SideContent - Portfolio =======*/
/* Box for portfolio inside side content. Fixed width. Set bg colour. 
Position relative required for slider buttons to be positioned absolute (inside this container).
Rounded corners: border-radius for future (already Opera 10.5 and Chrome), webkit for Safari, moz for Firefox, khtml for Linux. 
Bg image placed in Conditional statement for IE inside inner box (not required for slider, so only in Conditional St.). */
#sideContent #portf
{
	width: 310px;
	background-color: #E3D9B7;
	position: relative; /* required for absolute position of slider buttons. */
	border-radius: 15px; /* CSS3 */
	-webkit-border-radius: 15px; /* Safari and Chrome */
	-moz-border-radius: 15px; /* Firefox */
	-khtml-border-radius: 15px; /* Linux browsers */
}

/* The slider container. Push left from top inside portfolio container. */
#slider
{
	margin-left: 25px;
	padding-top: 25px;
}

/* Easy Slider */
/* Define width and height of list item (slide). Entire slider area will adjust according to the parameters provided here. */
#slider li
{
	width: 260px;
	height: 220px;
	overflow: hidden;
}

/* Smaller font size for link text under slider. */
#slider p a
{
	font-size: 90%;
}


/* Both slider buttons as display block to use full width available and a new line before and after. 
Set the width and the height of the button. Position both buttons absoluite inside relative container (#portf).
Distance for both (first) from left to be 0px. Distance form top as centrer of portfolio box. Indent text to dissapear. */
#prevBtn, #nextBtn
{
	display: block;
	width: 20px;
	height: 40px;
	position: absolute;
	left: 5px;
	top: 90px;
	text-indent: -8000px;
}

/* Distance for next button to be to the left of slider. */
#nextBtn
{ 
	left: 285px;
}	

/* Links to act as buttons with display: block. Set height and width. Place previous image for both buttons first. */
#prevBtn a, #nextBtn a
{
	display: block;
	width: 20px;
	height: 40px;
	background-image: url(../images/ottimoto_btn_prev_small.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}	

/* Now replace the next button with the correct image. */
#nextBtn a
{
	background-image: url(../images/ottimoto_btn_next_small.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

/* Replace both buttons with images for hover stage. */
#prevBtn a:hover
{
	background-image: url(../images/ottimoto_btn_prev_small_hover.gif);
}
#nextBtn a:hover
{
	background-image: url(../images/ottimoto_btn_next_small_hover.gif);
}


/*  ======= SideContent - Testimonial =======*/
/* Box for testimonial inside side content. Fixed width. Set bg colour. 
Rounded corners: border-radius for future (already Opera 10.5 and Chrome), webkit for Safari, moz for Firefox, khtml for Linux. */
#sideContent #testimon
{
	width: 310px;
	margin-top: 35px;
	background-color: #E3D9B7;
	position: relative; /* required for positioning the end quote absolute. */
	border-radius: 15px; /* CSS3 */
	-webkit-border-radius: 15px; /* Safari and Chrome */
	-moz-border-radius: 15px; /* Firefox */
	-khtml-border-radius: 15px; /* Linux browsers */
}

/* Inner box for text inisde testimonial box. Padding important. Bg image placed in Conditional statement for IE. */
#testimon-inner
{
	padding: 25px;
}

/* Format both beginning and end curly quotes. Position end quote absolute in side relative container. */
.curly_start
{
	float: left;
	height: 45px;
	margin-top: -20px;
	padding-top: 45px;
	margin-bottom: -50px;
	font-size: 700%;
	color: #707070;
}

.curly_end
{
	float: right;
	height: 25px;
	margin-top: 0px;
	padding-top: 55px;
	font-size: 700%;
	color: #707070;
	position: absolute;
	right: 25px;
}

/* Signature with name and company to be italicised and different padding. */
.p_italic_testi
{
	font-style: italic;
	padding-bottom: 0px;
	padding-top: 15px;
}


/* Google Map
================================== */

/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid text in map showing up left of map. */
#map
{
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 0px;
	height: 360px;
	width: 310px;
	overflow: hidden;
}


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

/* Footer outside wrapper (sticky footer). Set height and bg colour. Cleared both sides. Place bg image bottom. */
#footer
{
	clear: both;
	height: 150px;
	background-color: #323232;
	background-image: url(../images/ottimoto_footer_lines.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
}

/* Extra div to center footer content inside sticky footer. Center again and set width since outside of wrapper. */
#footer_center
{
	width: 960px;
	margin: 0 auto;
}

/* Class required for sticky footer. Height same as footer height. Clear both to avoid footer creeping into long content. */
.push 
{
	height: 150px;
	clear: both;
}

/* Four footer columns. Float them left and set width (left and right minus margin sides). Margin top as well. */
#fcol1
{
	float: left;
	width: 235px;
	margin-left: 5px;
	margin-top: 10px;
}

#fcol2
{
	float: left;
	width: 240px;
	margin-top: 10px;
}

#fcol3
{
	float: left;
	width: 240px;
	margin-top: 10px;
}

/* Float 3 socail network link images left and allow for padding right to show them next to each other. */
#fcol3 img
{
	float: left;
	padding-right: 10px;
}

/* 5px smaller because of margin left for IE6. */
#fcol4
{
	float: left;
	width: 230px;
	margin-right: 5px;
	margin-top: 10px;
}

/* Format text inside footer. Margin top. Smaller font. Text colour and no padding on bottom. */
#footer p
{
	margin-top: 10px;
	font-size: 80%;
	color: #B2B300;
	text-align: left;
	padding-bottom: 0px;
}


/* Skiplinks 508 Requirements
================================== */
.skiplist 
{
	margin: 0; 
	padding: 0
} 
.skip 
{
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip 
{
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a 
{
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active 
{
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover 
{
	cursor: default
}


/* Self-Clear Floats
================================== */
/* Clear both after the boxes on the home page to allow for bg image to go down in all browsers. */
.clearing {
  height: 0;
  clear: both;
}