﻿/*----------------------------------
*Filename: layout.css
*Description: CSS used on every page
*Author: Greg Rafferty
*Date: 2009-12-08
*Website: www.themedicinecabinet.co.uk
----------------------------------*/

/**********************************
Colours

*Text*
Header Text: #0A3369;
Link/Active Text: #74BFF8;
Main Text: #9A9A9A;
Nav Text: #9A9A9A;
Footer Text: #FFF;

*Outlines*
Borders: #E6E6E6;
Category Top: #E6E6E6;
Category Bottom: #FFF;


**********************************/

/** Master Page Layouts **/

body
{
	background: #e8f4fd url(../images/Background.jpg) no-repeat center top;
	padding:20px 0;
}

#header
{
	height: 103px;
	background: Transparent url(../images/HeaderGlass.png) no-repeat left top;
	position:relative;
	margin-bottom:10px;
}

#header #site-logo
{
	position:absolute;
	top:10px;
	left:15px;
}

#header #company-logo
{
	position:absolute;
	top:36px;
	right:25px;
}

#search-bar
{
	background: Transparent url(../images/BodyBG.png) no-repeat left top;
	height: 50px;
}
#search-bar .search-box
{
	margin: 6px 0;
	background: Transparent url(../images/SearchBox.png) no-repeat left top;
	position:relative;
	height:23px;
}

#search-bar .search-box .search-text-input
{
	background: none;
	border:none;
	width:200px;
	height:23px;
	position:absolute;
	top:2px;
	left:2px;
	
}

#search-bar .search-box .search-button
{
	background: Transparent url(../images/SearchIcon.png) no-repeat left top;
	border:none;
	width:24px;
	height:23px;
	overflow:hidden;
	padding:20px 0 0 0;
	position:absolute;
	top:0;
	left:190px;
	cursor:pointer;
}

#main-body
{
	background: #fff;
}

/* Navigation */
#nav
{
	margin: 10px 0;
}
#nav .hd
{
	height: 35px;
	background:#fff url(../images/PromoPod.png) no-repeat left top;
}
#nav .bd
{
	text-align: left;
	background:#fff url(../images/NavGradient.png) no-repeat left top;
}
#nav .ft
{
	height: 3px;
	background:#fff url(../images/PromoPod.png) no-repeat left bottom;
}

#nav ul
{
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin:0;
	padding: 0 0 10px;
}
#nav ul.categories > li
{
	border-top: solid 1px #fff;
	border-bottom: solid 1px #E6E6E6;
}
#nav ul.categories > li:first-child
{
	border-top: none;
	border-bottom: solid 1px #E6E6E6;
}
#nav li
{
	margin: 0 5px;
	padding: 0 0 0 10px;
}
#nav .nav-title
{
	color: #0A3369;
	font-weight: bold;
	font-size: 120%;
	margin: 0px;
	padding: 7px 0 0 10px;
}

#nav .nav-brand-title
{
	border-top:1px solid #e6e6e6;
	background:#fff url(../images/NavBrandShadow.png) no-repeat center top;
}

#nav li.category span
{
	font-weight: bold;
	cursor: pointer;
	color: #9A9A9A;
}
#nav ul.categories
{
	min-height:100px;
}
#nav ul.products
{
	background:#fff;
}
#nav ul.products li.highlight
{
	color: #0000cc;
	font-weight: bold;
}

/* Content areas */
#main-content
{
	min-height: 500px;
	margin: 10px 0;
}
#cross-sell
{
	margin: 10px 0;
}
#footer
{
	height: 65px;
	background: Transparent url(../images/BodyBG.png) no-repeat left bottom;
}

#footer .links
{
	padding:30px 10px 0;
}

/* Image Wrapper Layouts */

/** General Image Wrapper Classes */
.hd
{
}

.bd
{
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #E6E6E6;
	text-align: center;
	background: #fff;
}

.bd img
{
	vertical-align: middle;
}

.ft
{
}

/** Home Page Wrapper Classes */
.main-image
{
	background: #fff;
	overflow: hidden;
	margin: 0 0 10px ;
}
.main-image .hd
{
	background:#fff url(../images/HomeImageFrame.png) no-repeat left top;
	height: 3px;
}
.main-image .bd
{
	line-height: 270px;
}
.main-image .bd img
{
	max-width: 698px;
	max-height: 270px;
	vertical-align: middle;
}
.main-image .ft
{
	background:#e6e6e6 url(../images/HomeImageFrame.png) no-repeat left bottom;
	height: 3px;
}

/** Product Page Wrapper Classes */
.product-image
{
	background: #fff;
	overflow: hidden;
	margin: 0 0 10px;
	width:460px;
}
.product-image .hd
{
	background:#fff url(../images/ProductPagePod.png) no-repeat left top;
	height: 72px;
	padding: 19px 0 0 17px;
	position: relative;
	width:460px;
}
.product-image .hd h3
{
	position:absolute;
	top:42px;
	font-size:14px;
}
.product-image .hd .product-logo
{
	position: absolute;
	height:60px;
	width:142px;
	background:url(../images/LogoHolder.png) no-repeat left top;
	top:11px;
	right:29px;
}

.product-image .hd .product-logo img
{
	position: absolute;
	top:3px;
	left:2px;
	bottom:5px;
	right:10px;
	overflow:hidden;
	max-height:55px;
	max-width:138px;
}

.product-image .bd
{
	line-height: 200px;
}
.product-image .bd img
{
	max-width: 458px;
	max-height: 300px;
	vertical-align: middle;
}
.product-image .ft
{
	background:#fff url(../images/ProductPagePod.png) no-repeat left bottom;
	height: 3px;
}

/** Promo box image wrapper classes */
.promo-image
{
	background: #fff;
	overflow: hidden;
	margin: 0 0 10px;
	width:220px;
}
.promo-image .hd
{
	background:#fff url(../images/PromoPod.png) no-repeat left top;
	height: 27px;
	padding: 8px 0 0 10px;
}
.promo-image .bd
{
	line-height: 150px;
}
.promo-image .bd img
{
	max-width: 218px;
	max-height: 140px;
	vertical-align: middle;
}
.promo-image .ft
{
	background:#fff url(../images/PromoPod.png) no-repeat left bottom;
	height: 3px;
}

.home-cross-sell .promo-image
{
	float:left;
	margin:0 5px;
}

/* Pricing Tables */
.prices th.size
{
	background:#FFFFFF url(../images/PromoPod.png) no-repeat scroll left top;
}

.prices th.rrp
{
	background:#FFFFFF url(../images/PromoPod.png) no-repeat scroll right top;
}
.prices th.rrp,
.prices th.size
{
	height:27px;
	padding:8px;
}
.prices th.size
{
	width:100px;
}

.prices th.rrp
{
	width:50px;
}

.prices div.size
{
	border-left:solid 1px #E6E6E6;
	padding:4px 0 0 8px;
}

.prices div.rrp
{
	border-right:solid 1px #E6E6E6;
	padding:4px 0 0 8px;
}

.prices td.ft-l
{
	height:3px;
	background:#FFFFFF url(../images/PromoPod.png) no-repeat scroll left bottom;
}
.prices td.ft-r
{
	height:3px;
	background:#FFFFFF url(../images/PromoPod.png) no-repeat scroll right bottom;
}

/* Removing this style at present */ /*
#main-content ul
{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

#main-content ul li
{
	background:#FFFFFF url(../images/Bullet.png) no-repeat scroll left 3px;
	margin:10px 0 10px 3px;
	padding:0 0 0 20px;
}
*/