﻿/*-----------------------------------------------------------------------------
Metplate Style Sheet 

version:   1.0
author:    james southorn
email:     james@pixelfuze.co.uk
website:   http://www.pixelfuze.co.uk
-----------------------------------------------------------------------------
 General
-----------------------------------------------------------------------------
 Class for clearing floats */
.clear {
clear:both
}

#subFooter div:after,#header div:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden
}

/* Remove border around linked images */
img {
border:0
}

#container {
background:url(../img/body_bg.jpg) repeat-y 50% 0;
margin:0 auto;
min-height:600px;
min-width:975px;
padding:0;
position:relative;
width:100%
}

.left {
float:left
}

.right {
float:right
}

a {
color:#8996A9;
text-decoration:none
}

a:hover {
text-decoration:underline
}

/* Set fixed width of central column */
#header div,#login div,#content div,#subFooter div,#footer div {
margin:0 auto;
position:relative;
width:925px
}

/* Remove fixed width for nested divs */
#header div div,#login div div,#content div div,#subFooter div div,#footer div div,#content div div {
margin:0 auto;
width:auto
}

/* Typography
-----------------------------------------------------------------------------*/
html {
font-size:76%
}

body {
font-family:"Myriad Pro", "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size:1.2em;
margin:0;
padding:0
}

/* Headings
-----------------------------------------------------------------------------*/
#header {
background:#eed4ef url(../img/header_bg.jpg) repeat-x;
border-bottom:1px solid #fff;
padding:77px 0 15px 0;
}

#header h1 a {
color:#000;
float:left;
font-size:50px;
text-decoration:none
}

#header h1 a span {
color:#0064af;
}

h1,h2,h3,h4,ul {
margin:0
}

/* Banner
-----------------------------------------------------------------------------*/
#banner {
background:#fff url(../img/banner_bg.jpg) repeat-x;
color:#333;
font-size:1.2em;
}

#banner #image {
background:url(../img/banner_image.jpg) no-repeat center top;
padding:30px 0px 40px 0;
height:285px;
z-index:1
}

#banner div div {
margin:0 auto;
padding:0 20px 0 0;
position:relative;
width:450px
}
#banner #image .first_p {
margin:0 auto;
padding:0 20px 0 0;
position:relative;
width:925px;
}
#banner #image .first_p  h2 { margin:0 0 0 30px;}
#banner #image .first_p  p {margin:0 0 0 30px; width:550px; }
#banner #image .first_p  p  a{color:#00497F; text-decoration:underline; }
#banner #image .first_p  p  a:hover{text-decoration:none; }
#banner * {
position:relative;
z-index:2
}

#banner h2 {
font-size:2.3em;
font-weight:400
}

/* Main Nav
-----------------------------------------------------------------------------*/
#login {
background:url(../img/login_bg.jpg) repeat-x;
height:35px
}

#login ul {
color:#fff;
font-weight:400;
list-style-type:none;
clear:both;
margin:0 auto;
width:900px;
}

#login li {
float:left;
font-size:1.3em;
padding:2px 0 0 23px
}

#login li.blank {
padding-left:0
}

#login li a {
color:#fff;
cursor:pointer;
height:33px;
overflow:hidden;
text-decoration:none
}

#login li a span {
cursor:pointer;
height:33px;
line-height:33px;
overflow:hidden;
}

#login li a:hover {
color:#1B2765;
}

#login li a:hover span {

}


/* Main Content
-----------------------------------------------------------------------------*/
#content {
background:url(../img/content_bg.jpg) repeat-x;
height:210px
}

#content #rightColumn *,#content #leftColumn * {
position:relative;
z-index:2
}

#content #leftColumn .leftGlow {
background:url(../img/glow.png) no-repeat;
left:0;
padding:175px 302.5px;
position:absolute;
top:0;
z-index:1
}

#content a {
color:#DEE1E7
}

#content #leftColumn {
background:#4695d0 url(../img/content_div.jpg) no-repeat 3%;
float:left;
height:240px;
padding:25px 25px 45px 40px;
width:540px
}

#leftColumn h3 {
color:#586579;
font-size:2.2em;
font-weight:400;
padding:10px 0
}
#leftColumn p, #mainColumn p { color:#fff;}
#content #mainColumn {
	background: #4695D0 url(../img/content_div.jpg) no-repeat 3%;
	height:auto;
	padding:25px 25px 25px 40px;
	}
#content #mainColumn p { margin:0 0 10px 0;}
#mainColumn h3 {
	color:#586579;
	font-size:2.2em;
	font-weight:400;
	padding:10px 0;
	}
#content .banner a {
background:url(../img/content_imageborder.png) no-repeat;
border:none;
color:#000;
display:block;
height:34px;
padding:20px 20px 20px 150px;
width:348px
}

.banner {
background:url(../img/content_image.jpg) no-repeat 7px 7px;
z-index:2
}

.banner span {
bottom:3px;
color:#fff;
position:absolute !important;
right:25px
}

/* About Page */
#leftColumn .aboutImage {
float:left;
padding:0 20px 10px 0
}

#leftColumn ul {
padding-left:25px
}

/* Secondary Content
-----------------------------------------------------------------------------*/
#content #rightColumn {
background:#00497f;
color:#fff;
float:right;
height:280px;
padding:15px;
width:290px
}

#content #rightColumn .rightGlow {
background:url(../img/glow_right.png) no-repeat;
left:0;
padding:175px 160px;
position:absolute;
top:0;
z-index:1
}

#rightColumn h3 {
font-size:1.6em;
font-weight:400;
padding:10px 0 0 15px
}

#rightColumn ul.listText,#rightColumn ul.listTick,#rightColumn p {
list-style-type:none;
margin:10px 0 10px 15px;
padding:0;
position:relative;
z-index:2
}

#rightColumn ul.listText li {
background:url(../img/script.png) no-repeat left center;
padding:5px 0 10px 30px;
position:relative;
z-index:2
}

#rightColumn .divider {
background:url(../img/content_right_div.jpg) no-repeat center bottom;
padding:0 0 20px
}

.quote {
background:transparent url(../img/quote_right.jpg) no-repeat 100% 100%;
padding-right:20px
}

blockquote {
background:url(../img/quote_left.jpg) no-repeat 0 0;
margin:15px;
padding:0 0 0 30px
}

#rightColumn ul.listTick li {
background:url(../img/bullet_tick.png) no-repeat left center;
font-weight:700;
padding:5px 0 10px 30px
}

/* Contact Page */
#details {
float:left;
font-size:1.1em;
list-style-type:none;
padding:20px
}

#details li {
padding:10px 10px 10px 30px
}

#details li.name {
background:url(../img/16-member.png) no-repeat left center
}

#details li.address {
background:url(../img/book_addresses.png) no-repeat left center
}

#details li.email {
background:url(../img/email.png) no-repeat left center
}

#details li.phone {
background:url(../img/phone.png) no-repeat left center
}

/* Sub Footer
-----------------------------------------------------------------------------*/
#subFooter {
background:#363c44 url(../img/subFooter_bg.jpg) repeat-x;
border-bottom:1px solid #42474c;
border-top:1px solid #333;
clear:both;
min-height:264px
}

#subFooter .leftBox {
float:left;
padding:40px 0;
width:410px
}

#subFooter * {
z-index:2
}

#subFooter .leftBox a {
color:#000;
float:right;
font-style:italic
}

#subFooter .leftBox h4 {
font-size:1.3em
}

#subFooter .leftBox h3 {
font-size:1.5em
}

#subFooter .leftBox p {
border-bottom:1px solid #000;
padding-bottom:10px
}

#subFooter .box {
background:url(../img/subFooter_box.png) no-repeat;
float:right;
margin-top:18px;
padding:35px 0 50px;
width:506px;
z-index:2
}

#subFooter .box div {
padding:0 35px
}

#subFooter .box h3,table tfoot tr td a {
color:#000;
font-size:1.5em;
font-weight:700;
padding-top:5px;
text-align:right
}

#subFooter .subFooterGlow {
background:url(../img/subFooter_glow.png) no-repeat;
left:0;
padding:163px 475px;
position:absolute;
top:0;
z-index:1
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
background:#000 url(../img/footer_bg.jpg) repeat-x;
min-height:140px
}

#footer .footerGlow {
background:url(../img/footer_glow.png) no-repeat;
left:100px;
padding:62.5px 357.5px;
position:absolute;
top:0;
z-index:0
}

#footer ul {
color:#363a42;
float:left;
font-size:.8em;
font-weight:400;
list-style-type:none;
margin-top:45px;
padding:0;
position:relative;
top:9px;
z-index:1
}

#footer li {
float:left;
font-size:1.3em;
padding:10px
}

#footer li a {
color:#363a42;
margin-right:20px;
text-decoration:none
}

#footer li a:hover {
color:#8996A9
}

#footer span {
color:#363a42;
margin-top:57px;
padding-top:8px;
position:absolute;
right:0;
top:0;
z-index:1
}

#footer p.right {
border-top:1px solid #363a42;
color:#363a42;
padding-top:10px;
text-align:right;
width:925px;
z-index:1
}

/* Forms
-----------------------------------------------------------------------------
 Removes fieldset borders */
fieldset {
border:1px solid transparent;
margin:0;
padding:0
}

#contact legend {
display:none
}

#contact label {
display:block
}

#contact input {
width:420px
}

/* Tables
-----------------------------------------------------------------------------*/
table {
border-collapse:collapse;
border-spacing:0
}

caption {
font-size:1.5em;
font-weight:700;
padding:0 0 10px;
text-align:left
}

table thead th {
border-bottom:1px solid #222;
font-size:1.1em;
font-weight:400
}

table tbody td {
font-size:1.1em;
font-weight:400;
text-align:center
}

table tbody td,table thead th {
border-left:1px solid #222;
padding:18px
}

table .first {
border-left:0
}

table tfoot td {
padding:7px 0 0;
text-align:right
}

table td:hover,thead th:hover,tfoot td a:hover {
color:#8996A9;
cursor:pointer
}
.perfumes_club {
	margin:4px;
	position: absolute;
	right:0;
	top:0;
	z-index:9;
	}
.perfumes_club span{
	background:#00497F;
	color:#fff;
	display:block;
	font-size:12px;
	padding:0 0 2px 4px;
	}
.perfumes_club a {color:#c1d6e5; text-decoration:underline;}
.perfumes_club a.perfumes_link {
	background:url(../img/bullet.gif) no-repeat right 2px;
	padding:0 18px 0 0;
}
.perfumes_club a:hover { text-decoration:none;}
.perfumes_club img {
	background:#fff;
	border:solid 2px #00497F;
	display:block;
	padding:2px;
	}
	
