/* CSS Document */

*{
	margin:0;
	padding:0;
}

html, body {
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:88%;
	background:#A81D22 url(../Images/Core/Background.gif) repeat-x 0 0;
	color:#fff;
}

#wrapper {
	margin:0 auto;
	padding:0;
	width:750px;
	text-align:left;
}


/* = Header Elements 
========================================================================= */
#Header{
	position:relative;
	height:164px;
	width:100%;
	background-color:#F8F8F8;
}

#Logo{
	position:absolute;
	top:56px;
	left:0;
	border:none;
}

#HeadImage{
	position:absolute;
	top:3px;
	left:260px;
}

#OpeningHours{
	position:absolute;
	right:5px;
	top:70px;
	width:290px;
	font-size:90%;
}
#OpeningHours .Day{
	font-weight:bold;
	color:#2C2E7F;
	padding:3px 0;
}
#OpeningHours .time{
	font-weight:bold;
	color:#303361;
}

#HeaderA{
	position:relative;
	color:#FFF;
	padding:18px 0 0 5px;
}
#HeaderA a{
	color:#FFF;
	font-weight:bold;
	font-size:105%;
	text-decoration:none;
}
#HeaderA a:hover{
	color:#F7C63B;
}

#ContactNumber{
	position:absolute;
	right:5px;
	top:18px;
	color:#FFF;
}

/* = Main navigation elements
============================================================================ */
#MainNav{
	list-style:none;
	margin:0;
	margin-top:17px;
    position: relative;
}
#MainNav li{
	float:left;
    position: relative;
}
#MainNav li a{
	display:block;
	height:25px;
	margin:0;
	padding:0 15px 0 5px;
	background:url(../Images/Core/NavSep.gif) no-repeat right top;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	font-size:95%;
    float:left;
}
#MainNav li a:hover{
	color:#F7C63B;
}
#MainNav li span.new{display:block; width:35px; height:29px; margin: -18px 0 0 0; background: url(/Images/newitem.gif) no-repeat bottom right; float: left; }
/* Hide end nav sep */
#MainNav li .end{
	background:none;
}
#MainNav li .row2{
	margin-top:-10px;
}
/* = Main Content Elements
================================================================ */

/* -- Content ------------------------- */
#ContentContainer{
	width:100%;
	margin-top:60px;
}
#LeftContent{
	float:left;
	width:360px;
	padding:5px;
	
	margin-bottom:10px;
}
#RightContent{
	float:right;
	width:360px;
}


/* = Footer ------------------------ */
#Footer{
	clear:both;
	height:116px;
	width:100%;
}
#Footer img{
	float:right;
}
#FooterLinks{
	float:left;
	width:630px;
	color:#fff;
	font-weight:bold;
	font-size:85%;
	padding-top:40px;
}
#FooterLinks a{
	float:left;
	display:block;
	height:25px;
	margin:0;
	padding:0 15px 0 5px;
	background:url(../Images/Core/NavSep.gif) no-repeat right top;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
}
#FooterLinks a:hover{
	color:#F7C63B;
}

/* Hide end nav sep */
#FooterLinks .end{
	background:none;
}

#CopyRight{
	font-weight:normal;
	margin-left:5px;
	clear:left;
}

/* = Page specific elements
==================================================== */
/* = HomePage --------------------------------*/
#SpaceEstimator{
	position:relative;
	width:360px;
	height:138px;
	background:url(../Images/Core/SpaceEstimatorBackground.gif) repeat-x 0 0;
}
#EstimatorLeft{
	position:absolute;
	left:0;
	top:0;
}
#EstimatorRight{
	position:absolute;
	right:0;
	top:0;
}
#SpaceCalcContent{
	width:220px;
	margin-left:15px;
	padding-top:10px;
} 
#SpaceCalcContent a{
	color:#000033;
}

.StorageInfo{
	height:163px;
	width:100%;
	margin-bottom:20px;
	background:url(../Images/Core/HomeSectionBackground.gif) repeat-x 0 0;
}
.StorageInfoContent{
	padding:5px;
}
.StorageInfo img{
	float:left;
	margin-right:5px;
}

/* = Space Calculator -------------------------------*/
#Calculator #LeftContent{
	position:relative;
	float:none;
	width:740px;
	padding:5px;
}

#SpaceCalc{
	width:545px;
}
#SpaceCalc th{
	height:28px;
	vertical-align:middle;
	padding-left:10px;
	background-color:#921A1C;
	border-bottom:3px solid #A81D22;
	color:#F7C63B;
}
#SpaceCalc td{
	padding:5px 0 0 10px;
	margin-bottom:5px;
	border-bottom:5px solid #A81D22;
	background-color:#C61D24;
	font-weight:bold;
}
#SpaceCalc .CalcSpace{
	background:#C61D24 url(../Images/Core/SpaceCalcCellSep.gif) repeat-y 0 0;
}
#SpaceCalc td p{
	margin-bottom:4px;
}
#SpaceCalcInfo{
	position:absolute;
	right:0;
	top:80px;
	width:190px;
}
#SpaceCalcInfo strong{
	font-size:110%;
	color:#F7C63B;
}

/* = Contact Us Details ---------------------------------- */
#ContactDetails{
	margin-left:15px;
	color:#F6C724;
	font-weight:bold;
	line-height:16px;
}

#ContactFormFrame{
	background-color:#C61D24;
	padding:10px 0 5px 10px;
	margin-bottom:20px;
}
#ContactForm label{
	color:#F6C724;
	font-weight:bold;
}
#ContactForm input, #ContactForm textarea{
	margin-top:3px;
}

#ErrorMessage{
	font-weight:bold;
	color:#F6C724;
}
#ErrorMessage ul{
	margin-right:25px;
	margin-bottom:10px;
	list-style:square;
}

#errorList{
	font-weight:bold;
	margin-right:25px;
	margin-bottom:10px;
	list-style:square;
}
#errorList li{color:#FFFF00;}

/* = Prices ---------------------------------- */
#PriceList, .table{
	width:340px;
	text-align:center;
}

#PriceList th, .table th{
	height:28px;
	vertical-align:middle;
	background-color:#921A1C;
	border-bottom:3px solid #A81D22;
	color:#F7C63B;
}
#PriceList td, .table td{
	padding:5px 0;
	background-color:#C61D24;
	font-weight:bold;
}
#PriceList.datastorage, #PriceList.packaging{
	width:95%;
	text-align:left;
}
#PriceList.datastorage td, #PriceList.packaging td, #PriceList.datastorage th, #PriceList.packaging th{
	padding:5px 3px;
}

.table{text-align:left;}

/* = Home Storage -------------------------------- */
#Features{
	width:100%;
	background-color:#C61D24;
	padding:5px 0 5px 0;
}

#Features ul li{
	margin:10px 0;
}

#HomeStorage #RightContent strong, #BusinessStorage #RightContent strong, #DocumentStorage #RightContent strong, #Security #LeftContent strong{
	color:#F7C63B;
}

/* = Find Us --------------------------------------- */
#FindUs #LeftContent{
	position:relative;
	float:none;
	width:740px;
	padding:5px;
}

#FindUs #OtherInfo{
	position:absolute;
	top:40px;
	right:5px;
	width:200px;
	font-weight:bold;
}

/* = Security & news -------------------------------------- */
#Security #LeftContent{
	position:relative;
	float:none;
	width:740px;
	padding:5px;
}
#SecurityList li, #NewsList li{
	margin:20px 0;
}

#NewsList li h3{color:#F7C63B;}

/* = Photos ---------------------------------------- */
#image_gallery {
position: relative;
overflow: hidden;
}

.photolist{
	clear:both;
	list-style:none;
}
.photolist li{
	position:relative;
	float:left;
	width:200px;
	margin-right:20px;
	background: none;
	display: inline;
}
.photolist li img {
	margin-bottom:5px;
	border:1px solid #fff;
}
.photolist li p{
	text-align:center;
}

.thumb img { /* styles thumbnail previews */
background: #fff;
border: 1px solid #ddd;
}
.thumb:hover img {
background-color: transparent;
}
.thumb span { /* hides large previews */
visibility: hidden;
position: absolute;
}
.thumb span img { /* styles large previews */
background: #fff;
border: 2px solid #000;
}
.thumb:hover span { /* displays preview while hovering over thumb */
visibility: visible;
top: 80px; /* absolute positioning to control where previews are displayed */
left: 0;
z-index: 100;
}
.thumb.thumbright:hover span { /* displays preview while hovering over thumb */
left: -200px;
}
.thumb.thumbmiddle:hover span { /* displays preview while hovering over thumb */
left: -100px;
}
.thumb.bottom{
	top:0;
}


/* = Xmas page
----------------------------------------------- */
.xmas_message{font-weight:bold; color:#FFFF00; font-size:110%; margin:10px 0;}


/* = Page Link Highlights -------------------------- */
#homepage #homeLink, #ContactUs #ContactLink, #HomeStorage #HomeStorageLink, #BusinessStorage #BusinessStorageLink, #DocumentStorage #DocLink, #Security #SecurityLink, #Prices #PriceLink, #Calculator #Calc, #FindUs #FindUsLink, #Photos #PhotosLink, #Packaging #packaginglink, #Data #DataLink{
	font-size:110%;
	color:#F7C63B;
}
		
/* = Page elements
==================================================== */
a{color:#F7C63B;}
a:hover{text-decoration:none;}

h1, h2{
	font-size:130%;
	color:#fff;
	margin:0;
	margin-bottom:8px;
}
h2{
	font-size:110%;
	color:#F7C63B;
	margin:10px 0 0.5em 0;
}

h3{
	font-size:100%;
	color:#203455;
	margin:10px 0 0.5em 0;
}
ul{
	list-style:square;
	margin:0 0 1em 25px;
}
ul li{
	margin:4px 0;
}

p{margin-bottom:1em;}

.clear{
	clear:both;
}	
.bold{font-weight:bold;}
.example{
	color:#CC0000;
	font-style:italic;
}

.image{
	border:1px solid #fff;
	margin-bottom:10px;
}
.toppad{margin: 5px 0 0 0;}

.noborder{border:none;}

/* used to hide elemtns used to aid People with disabilities to use the site, from normal users */
.hide{
	position:absolute;
	left:-9000px;
}

/* CLEARING FLOATS -------------------------------------------------------------------------------------------------------------- */
/* The following selectors keep floats from overflowing out of their parent elements. This is done by generating a character within the parent but after the float, so that the parent must expand to hold the generated character, appearing to contain the floats in the process. */
.clearfix:after {
	content: "."; /* This dot is the actual content that will be appended to the end any div this class is applied to. */
	clear: both; /* Makes the generated content appear after the floats. */
	height: 0; /* Sets its height to zero so it doesn't show. */
	visibility: hidden; /* Sets its visibility to hidden so it doesn't show. */
	display: block; /* Overwrites the default inline display of the generated content. Needed because only blocks can have clear set on them. */
}
 
.clearfix {
	display: inline-block; /* Makes it work in MacIE. MacIE does not support generated content but will automatically contain a float if the container has this display property. */
	}

/* The first selector below makes it work in WinIE. WinIE does not support generated content, but will automatically contain a float if the container has a width or height assigned. "height: 1%" can be used because WinIE will not honor this height and will expand the div to whatever height necessary to show the content. */
/* The second selector below overwrites the inline-block display used to help MacIE. */
/* Hides from MacIE \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from MacIE */