/**********************************************************************************************

	Title: Breslin Products
	Author: Tine Haugen (thaugen@optimum.net)
	Date: February 2010

***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Default Styles

	2. LAYOUT
			2.1 Structure
			2.2 Header
			2.3 Navigation
			2.4 Intro
			2.5 Content
			2.6 Footer

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/

	html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	q { quotes: none; }
	q:before, q:after { content: ""; content: none; }
	a, ins, del { text-decoration: none; }
	table { border-collapse: collapse; border-spacing: 0; }
	th, td { vertical-align: top; }
	th { text-align: left; }

/* 1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/

	#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3  Default Styles
-----------------------------------------------------------------------------------------------*/

	body { background: #DADBD6; color: #fff; font: 62.5%/1.3 "Arial", "Helvetica", sans-serif; text-align: center; }
	hr { display: none; }
	strong { font-weight: bold; }
	em { font-style: italic; }
	del { text-decoration: line-through; }
	th { font-weight: normal; }
	address, cite, dfn { font-style: normal; }
	li { list-style: none; }
	abbr, acronym { border-bottom: none; cursor: help; }
	input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; }
	a { color: #2e5097; text-decoration: underline; }
	a:hover, a:active { color: #f0c148; text-decoration: underline; }
	
	h1, h2 { margin-bottom: 18px; font-family: Tahoma, Geneva, sans-serif; color: #2e5097; }
	h1 { font-size: 1.5em; }
	h2 { font-size: 1.2em; }
	p { margin-bottom: 26px; line-height: 1.5; }
	
	
	/* box */
	.box { position: relative; width: 343px; padding: 15px 10px 24px 10px; margin-bottom: 8px; background: url(../images/bg_box_medium.png) no-repeat; }
	.box h2 { font-size: 1.4em; margin-bottom: 4px; padding: 0 0 4px 2px; border-bottom: 1px solid #fff; }
	.box p { margin-bottom: 0; padding: 4px 0 4px 86px; line-height: 1.2; background-repeat: no-repeat; background-position: 0 50%; }
	.box .b { display: block; position: absolute; bottom: 0; left: 0; width: 363px; height: 15px; z-index: 999; background: #fff url(../images/bg_box_medium.png) 0 100%; }

	.help .email { margin-bottom: 10px; background-image: url(../images/ico_email.png); }
	.help .phone { background-image: url(../images/ico_phone.png); }
	.company-information p { padding-top: 14px; padding-bottom: 14px; background-image: url(../images/ico_contact.png); }
	
	/* box: homepage */
	.page-home .box { width: 434px; padding: 14px 14px 24px 14px; }
	.page-home .box,
	.page-home .box .b { background-image: url(../images/bg_box_large.png); }
	.page-home .box .b { width: 462px; }


/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

	.container { width: 960px; overflow: hidden; position: relative; margin: 0 auto; text-align: left; font-size: 1.5em; }
	#top .container { padding-top: 42px; }
	#bottom .container { font-size: 1.4em; }
	#footer .container { padding: 4px 0; }

	#top { background-color: #000; border-bottom: 1px solid #e9e9e6; }
	#intro { background-color: #2852a8; }
	#middle { background-color: #dadbd6; }
	#content { width: 940px; overflow: hidden; padding: 20px 10px; background: #fff url(../images/bg_content.png) repeat-x; color: #333; }
	#bottom { padding-bottom: 40px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
	#footer { background-color:#2852a8; width:960px; margin:0 auto 6px auto; background-image:url(../images/footer-bg.jpg); background-position:bottom; background-repeat:no-repeat; }


/* 2.2 Header
-----------------------------------------------------------------------------------------------*/

	#header { float: left; color: #c1c1c1; text-transform: uppercase; }
	#header p { width: 420px; text-align: right; margin-bottom: 0; line-height: 1; }
	#header .site-name,
	#header .site-name span { display: block; overflow: hidden; width: 420px; height: 35px; }
	#header .site-name { position: relative; margin-bottom: 8px; font-size: 1.6em; color: #f0c148; text-decoration: none; }
	#header .site-name span { background: url(../images/logo.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; }
	#header a.site-name span { cursor: pointer; }
	
	
/* 2.3 Intro
-----------------------------------------------------------------------------------------------*/

	#intro { background: url(../images/bg_intro.jpg) repeat-x; border-top: 2px solid #dadbd6; }
	#intro .container { width: 260px; height: 220px; padding: 53px 700px 0 0; background: url(../images/bg_intro_container.png) no-repeat; }
	#intro h2 { margin-bottom: 8px; }
	#intro h2,#intro p { margin-left: 6px; }
	#intro h2, #intro p, #intro a { display: block; position: relative; text-indent: -999em; }
	#intro h2 span,	#intro p span, #intro a span { display: block; overflow: hidden; position: relative; background: url(../images/txt_intro.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; }
	#intro h2, #intro h2 span { width: 234px; height: 27px; color: #f0c148; }
	#intro p { margin-bottom: 15px; }
	#intro p, #intro p span { width: 217px; height: 53px; background-position: 0 -40px;  }

	#intro a,
	#intro a span {  width: 260px; height: 101px; }
	#intro a { position: relative; font-size: 1em; line-height: 100px; text-align: center; color: #f0c148; }
	#intro a span { background-position: 0 -100px; cursor: pointer; }
	#intro a:hover span { background-position: 0 -200px; }
	


/* 2.4 Navigation
-----------------------------------------------------------------------------------------------*/

	#navigation { float: right; padding-top: 44px; }
	#navigation li { float: left; line-height: 1; background: url(../images/bg_nav_border.png) no-repeat 100% 1px; }
	#navigation .last { background-image: none; }
	#navigation a { padding: 0 22px 16px 22px; display: block; color: #fff; text-transform: uppercase; text-decoration: none; background: url(../images/bg_nav.png) no-repeat 50% 100%; }
	#navigation a:hover { color: #f0c148; background-image: url(../images/bg_nav_over.png); }

/* 2.5 Content
-----------------------------------------------------------------------------------------------*/

	#content .inner-left { float: left; width: 546px; }
	#content .inner-right { float: right; width: 363px; }
	
	/* websites */
	.websites h2 { color: #000; font-family: Arial, Helvetica, sans-serif; }
	.websites li { width: 940px; overflow: hidden; padding: 0 0 5px 0; margin-bottom: 25px; border-bottom: 1px solid #dadbd6; }
	.websites .last { border: none; margin-bottom: 0; padding-bottom: 0; }
	.websites a span { display: block; width: 334px; height: 209px; margin-bottom: 20px; padding-top: 7px; background: url(../images/bg_photo.png) no-repeat; }
	.websites a { font-size: 1.1em; }
	.websites .details { float: left; width: 500px; }
	.websites .box { float: right; text-align: center; }

	
	/* homepage */
	.page-home h2 { color: #2e5097; }
	.page-home #content .inner-left { width: 460px; }
	.page-home #content .inner-left h2 { font-size: 1.8em; }
	.page-home #content .inner-right { width: 462px; }
	
	

/* 2.6 Footer
-----------------------------------------------------------------------------------------------*/
	
	#footer h2 { margin-bottom: 0; font-size: 1em; font-weight: normal; color: #faea78; }
	#footer p { margin-bottom: 0; }
	#footer a { color: #fff; }
	
	#footer .company-information { float: right; margin-right:20px; padding: 6px 0 0 10px;  font-size: 1.15em; line-height: 1.4; }
	#footer .company-information p { padding-top: 0; background-image: none; }
	
	#footer .site-navigation { float: right; width: 480px; overflow: hidden; padding-top: 10px; text-transform: uppercase;  background: url(../images/bg_site_navigation.png) repeat-y; }
	#footer .site-navigation a { text-decoration: none; }
	#footer .site-navigation a:hover { color: #faea78; }
	#footer .site-navigation ul { float: left; width: 230px; padding-left: 10px; }
	
	.copyright { font-size: 1.2em; }