/* By www.meercommunicatie.nl */
/* This stylesheet sets advanced styling and layout (positioning, floating etcetera) for high resolution screens. */
/* It will be used by CSS-capable user agents that understand the mediatype "screen". */

/* some useful hacks:

Show only to IE/MAC:
*>html body element {}

Show only to IE/WIN/MAC
* html element {}

Show to modern browsers like Opera, Safari, Mozilla and Firefox, but also IE/MAC
html>body element {}
}

When an element visually disappears in IE/WIN, try to apply position: relative to the element, or apply a width or height to the element.
When unwanted white space is visible in IE/WIN, try to set a height of 1px for that element using a hack that only feeds to IE/WIN.

*/

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
}

/* z-indexes */

/* Hide elements that are not needed on high resolution screens: */

.skip {
	display: none;
}

/* #wrapper */

#wrapper {
	position: relative;
	left: 50%;
	width: 1000px;
	margin-left: -500px;
	height: 100%;
}

/* #logo */

#logo {
	display: block;
	background: silver;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 250px;
	height: 205px;
	background: url(../img/branding/visual_skyline.gif) -140px 0;
}

#logo img {
	display: none;
}


/* #content */

#content {
	position: absolute;
	top: 77px;
	width: 100%;
}

#content .frame {
	margin: 0 20px;
}

#primaryContent {
	position: absolute;
	width: 500px;
}


body.home #primaryContent,
body.home #secondaryContent,
body.home #tertiaryContent {
	position: absolute;
	width: 250px;
}

#primaryContent {
	position: absolute;
	left: 250px;
	border-right: 1px solid #CAD401;
}

#secondaryContent {
	position: absolute;
	left: 500px;
	border-right: 1px solid #CAD401;
}

#tertiaryContent {
	position: absolute;
	left: 750px;
}

body.home #tertiaryContent {
	left: 500px;
	width: 500px;
}

body.home #tertiaryContent h2 {
	display: none;
}

body.home #tertiaryContent li,
body.home #tertiaryContent ul {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}

body.home #tertiaryContent li {
	line-height: 1.25em;
	width: 48%;
 	margin: 0 1% 4px 0;
	float: left;
}

#tertiaryContent li img	{
	display: none;
}


body.home #tertiaryContent li img {
	display: block;
	float: left;
	margin: 0 8px 0 0;
}

/* #frm_search_product_categories */

body.home #frm_search_product_categories {
	float: right;
	height: 28px;
	width: 50%;
}


#frm_search_product_categories input.text {
	width: 160px;
}

#frm_search_product_categories input.submit {
	width: 20px;
}

/*body.home #frm_search_product_categories {
	position: absolute;
	top: -2px;
	left: 255px;
}*/

/* #ul_categories */

#ul_categories {
/*	line-height: 1.5em;*/
}


#ul_categories a {
	color: black;
}


/* #menu */

#menu {
	position: absolute;
	top: 114px;
	left: 77px;
	width: 150px;
}

#menu h2 {
	display: none;
}

#menu ul,
#menu ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
}

/* whitespace bugfix in IE/WIN */
* html #menu ul li {
	height: 1px;
}

#menu ul li a {
	font-size: 100%;
	text-decoration: none;
	display: block;
	padding: .33em 0;
	color: white;
	border-bottom: 1px solid #CAD401;
}

#menu ul li a:hover,
#page_home #mi_home a,
#page_about_us #mi_about_us a,
#page_terms_and_conditions #mi_terms_and_conditions a,
#page_shipping_and_costs #mi_shipping_and_costs a,
#page_payment_methods #mi_payment_methods a,
#page_contact #mi_contact a,
#page_company_details #mi_company_details a,
#page_specially_featured #mi_specially_featured a {
	font-weight: bold;
}

/* #skyline */

#skyline {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 83px;
	background: url(../img/branding/visual_skyline.gif) bottom;
}

#filmstrip {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 65px;
	background: url(../img/branding/pattern_filmstrip.gif) repeat-x;
}

#filmstrip h2 {
	display: none;
}

#filmstrip div {
	margin-top: 12px;
	height: 33px;
	overflow: hidden;
}

