/* --------------------------------------
   Global Styling
-------------------------------------- */
html {
	height: 100%;
}

body {
	color: #000;
	height: 100%;
	font: 0.75em/18px Arial, Verdana, Helvetica, sans-serif;
}

/* Print Only */
.print-only
{
    display: none !important;
}

/* Headings */
h1, h2, h3, h4, h5 { font-weight: normal; }
h1 { font-size: 2em; line-height: 1em; color: #fff; text-transform: uppercase; }
h2 { font-size: 2em; line-height: 1em; }
h3 { font-size: 1.5em; line-height: 1em; }
h4 { font-size: 1.255em; line-height: 1em; }
h5 { font-size: 1em; line-height: 1em; font-weight: bold; }

/* Anchors */
a, a:visited { text-decoration: underline; color: #000; }
a:hover { text-decoration: none; }
p a { z-index: 100; }


/* Base margin */
#content p, #content blockquote, #content ul, 
#content ol, #content h1, #content h2, 
#content h3, #content h4, #content h5 { margin-bottom: 1em; }


/* ULs, OLs & LIs */
#content ul { margin-left: 2em; }
#content ul li { list-style: disc; }

#content ol { margin-left: 3em; }
#content ol li { list-style: decimal; }

/* Blockquote */
blockquote { width: 80%; margin-left: 5%; padding: 10px; quotes: "\201C" "\201D"; }
blockquote:before { content: open-quote; font: bold 20px/12px Georgia, "Times New Roman", Times, serif; } 
blockquote:after { content: close-quote; font: bold 20px/12px Georgia, "Times New Roman", Times, serif; } 

/* Other styles */
small { font-size: 80%; }

/* Classes */
.right { float: right; }
.left { float: left; }
img.right { float: right; margin: 0 0 0 10px; }
img.left { float: left; margin: 0 10px 0 0; }
p img.right { float: right; margin: 0 0 10px 10px; z-index: 100; }
p img.left { float: left; margin: 0 10px 10px 0; z-index: 100;}
.last { border: 0!important; margin-right: 0!important; margin-bottom: 0!important; }
.error { background-color: #d5a2a2; color: #fff; border: 1px solid #c38e8e; }
.tleft { text-align: left; }
.tright { text-align: right; }
.tcenter { text-align: center; }
.formerror { background: #fff  url('../i/icon-formerror.gif') left center no-repeat; border: none!important; font-size: 0.91em; color: #447094; display: inline-block; margin-top: 1px; padding: 0.1em 0.95em 0.1em 2em!important; }
.nomarg { margin: 0!important; }
div.hr { width: 100%; height: 1px; border-top: 1px solid #eeeeef; margin-bottom: 1em; clear: both; }
div.clear { width: 100%; height: 1px; clear: both; }

/* --------------------------------------
   Center Wrap Section
-------------------------------------- */

#center {
	width: 970px;
	margin: 0 auto;
}

/* --------------------------------------
   PNG Fix
-------------------------------------- */
img {
	_behavior: url(/citycollection/css/iepngfix.htc); /* must be absolute URL, blank.gif must be next to iepngfix.htc */
}

/* --------------------------------------
   Header Section
-------------------------------------- */

#header-outer {
    background: #071c5d url('../i/bg-header.gif') left top repeat-x;
}

#header {
	height: 122px;
	width: 970px;
	margin: 0 auto;
}

#logo,
#logo a {	
    width: 340px;
	height: 70px;
	display: block;
	color: #fff;
	font-size: 30px;
	line-height: 60px;
	text-decoration: none;
}

#logo span {
	background-image: url('../i/logo-citycollection.gif');
}

/** Search **/
#search {
	position: absolute;
	right: 0;
	top: 23px;
	width: 275px;
}

#search label {
	display: none;
}

#search input {
}

#search div.text {
	float:left;
}

#search div.text input.text {
	background: #071C5D none;
	width: 200px;
	padding: 2px;
	color: #62B4EC;
	display: block;
	border-color: #3d7bad #a4c9e3 #b7d9ed #b5cfe7;
	border-style: solid;
	border-width: 1px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#search input.action,
#CustomSearchForm_SearchForm_action_results {
	background: #6fbaee url('../i/btn-search.gif') left top no-repeat;
	border: none;
	width: 61px;
	height: 22px;
	color: #071c5d;
	font: bold 11px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin-left: 5px;
	cursor: pointer;
	float: right;
}

#search input.action:hover {
	color: #fff;
	cursor: pointer;
}

#results-box,
#result-count,
#content .paging {
    margin: 10px 5px;
}

#content .paging ul
{
    margin: 0;
    padding: 0;
}

#content .paging ul li {
    list-style: none;
    padding: 5px;
    background: #e9f2f9 none;
    float: left;
    border: 1px solid #A9BCCA;
    font-size: 0.91667em;
    margin-right: 5px;
    line-height: normal;
}

#content .paging ul li a {
    color: #071C5D;
    text-decoration: none;
}

#content .paging ul li a:hover {
    text-decoration: underline;
}

#content .paging ul li.selected {
    background: #A9BCCA none;
}

#CustomSearchForm_SearchForm_action_results {
    background: transparent url('../i/bg-search.png') left top no-repeat;
	_behavior: url(/citycollection/css/iepngfix.htc);
    float: none;
    margin-left: 170px;
}

#results-box ol#search-results
{
    margin: 0;
    padding: 0;
}

#results-box ol#search-results li
{
    list-style: none;
    margin-bottom: 10px;
}

#results-box ol#search-results li img {
    border: 3px solid #fff;
}

#results-box ol#search-results li h3 {
    margin-bottom: 0;
    width: auto;
}

#results-box ol#search-results li .result-content {
    padding: 5px;
}

#results-box ol#search-results li div.image-border {
    float: left;
    border: 1px solid #A9BCCA;
    margin-right: 10px;
    width: 106px;
}
#results-box ol#search-results li a.image-wrapper {
    display: block;
    height: 125px;
	overflow: hidden;
	border-bottom: 3px solid #fff;
}

#results-box ol#search-results li .detail {
    width: 515px;
    float: left;
}

/* --------------------------------------
   Container Template
-------------------------------------- */
#content-outer {
    background: #fff url('../i/bg-body.gif') left top repeat-x; /* repeating body background (blue fade) */
}

#content {
    background: #fff url('../i/bg-content.jpg') center top no-repeat; /* sits on top to make the content area brighter */
	padding: 10px 0 30px;
	min-height: 440px;
	width: 970px;
}

#content-home {
    float: left;
    padding-top: 20px;
}

#home-hero {
    float: right;
    overflow: hidden;
    height: 440px;
    width: 663px;
    position: relative;
}

#home-hero img {
    position: absolute;
}
/* note - other homepage styles are in the /mysite/code/HomePage.php class */

/** 2 Column Layout **/
.two-columns {
	clear: both;
	width: 970px;
}

.two-columns .left-column {
	width: 650px;
	float: left;
	background-color: transparent;
}

.two-columns .right-column {
	width: 260px; /* removed 20px to allow for left & right padding */
	float: right;
}

.two-columns .right-column .right-col-item,
.three-columns .right-column .right-col-item {
    margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #a9bcca;
	background: #fff url('../i/bg-rightsidebar.jpg') left top no-repeat;    
}

.two-columns .right-column .not-first-item .right-col-item,
.three-columns .right-column .not-first-item .right-col-item {
	background: #fff url('../i/bg-rightsidebar-bottom.jpg') left top no-repeat;    
}


/** 3 Column Layout **/
.three-columns {
	clear: both;
	width: 970px;
}

.three-columns .left-column {
	width: 300px;
	margin-right: 10px; 
	float: left;
	background-color: transparent;
}

.three-columns .mid-column {
	width: 370px;
	margin-right: 0; 
	float: left;
	background-color: transparent;
}

.three-columns .right-column {
	width: 260px; /* removed 20px to allow for left & right padding */
	padding: 0 10px 10px 10px;
	float: right;
}

/** 3 Column Layout for coord page **/
.three-columns-coord {
	clear: both;
	width: 970px;
}

.three-columns-coord .left-column {
	width: 300px;
	margin-right: 10px; 
	float: left;
	background-color: transparent;
}

.three-columns-coord .mid-column {
	width: 325px;
	margin-right: 10px; 
	float: left;
	background-color: transparent;
}

.three-columns-coord .right-column {
	width: 325px;
	float: right;
}

/* --------------------------------------
   Content Styles
-------------------------------------- */
#content h1, #content h2 {
	margin-bottom: 0.3em!important;
}

#content h1 {
    font-size: 2.5em;
}

#content h2 {
	color: #204584;
	font-weight: normal;
	text-transform: uppercase;
}

#content h3 {
	width: 270px;
	text-transform: uppercase;
	color: #071c5d;
	background-color: #62b4ec;
	font-size: 1em;
	font-weight: bold;
	padding: 5px 0 5px 5px;
}

#content p {

}

#content ul, #content ol {

}

#content ul li {
	list-style: none;
	padding-left: 1.5em;
	margin-bottom: 0.2em;
	background: url('../i/bullet-disc.gif') left 0.6em no-repeat;
}

#content .right-column ul li {
	background: url('../i/bullet-arrow.gif') left 0.6em no-repeat;
}

#content .right-column ul {
	margin-left: 1em;
}

#content ul li, #content ol li {

}

/* contact us box */
#content .right-column .right-col-item ul li strong {
    display: block;
    float: left;
    width: 60px;
}
#content .right-column .right-col-item ul li span {
    display: block;
    float: left;
}

/** Overview features list **/

#content .product-overview {
	margin-bottom: 1em;	
	margin-top: -1em;
}

#content .product-overview div {
	display: block;
	padding: 2px 5px;
	background-color: #e1edf5;
}

#content .product-overview div.alt {
	background-color: transparent;
}

#content .product-overview div span {
	display: block;	
	float: left;
}

#content .product-overview div span.title {
	width: 80px;
	color: #1679bd;
}

/** Catalogue Section **/
.catalogue-section {
	width: 315px;
	margin: 0 10px 1em 0;
	float: left;
	height: 170px;
}

.catalogue-section img {
    border: 3px solid #fff;
}

.catalogue-section div.image-border {
    float: left;
    border: 1px solid #A9BCCA;
    margin-right: 10px;
    width: 106px;
}
.catalogue-section a.image-wrapper {
    display: block;
    height: 125px;
	overflow: hidden;
	border-bottom: 3px solid #fff;
}

.catalogue-section .detail {
    width: 195px;
    float: left;
}

/** PDF list **/

#content ul.filelist {
	margin: 0 0 1em 0;
	width: 372px;
}

#content ul.filelist li {
	 margin: 0 3px 5px 0;
	 padding: 0;
	 display: block;
	 border: 1px solid #b7d5eb;
	 float: left;
}

#content ul.filelist li a {
	 width: 146px;
	 height: 23px;
	 padding: 5px 0 0 25px;
	 margin: 0;
	 display: block;
	 background: #fff url('../i/icon-default.gif') 5px center no-repeat;
	 font-size: 0.916em;
	 text-decoration: none;
}

/** PDF list for coords page **/

#content .three-columns-coord ul.filelist {
	width: 332px;
}

#content .three-columns-coord ul.filelist li a {
	width: 136px;
}

/* TODO: insert all icons here */
#content ul.filelist li.psd a {
	 background: #fff url('../i/icon-psd.gif') 5px center no-repeat;
}
#content ul.filelist li.pdf a {
	 background: #fff url('../i/icon-pdf.gif') 5px center no-repeat;
}

#content ul.filelist li a:hover {
	 background-color: #eff8ff;
}

#content ul.filelist li a span {
	 color: #62b4ec;
}

/** Colour list **/
#content ul.colours {
	margin: 0 0 1em 0;
}

#content ul.colours li {
	float: left;
	padding: 0;
	margin-right: 15px;
	background: none;
	display: block;
	width: 93px;
}

#content ul.colours li a {
	display: block;
	text-decoration: none;
	line-height: 2.5em;
}

#content ul.colours li a span.swatch-border {
	border: 1px solid #bcd3e2;
    padding: 3px;
	margin-right: 5px;
	float: left;
}

#content ul.colours li a span.swatch {
	display: block;
	height: 22px;
	width: 22px;
	margin: 0;
	background: transparent none;
}

#content ul.colours li a img {
	float: left;
	padding: 0;
	margin-right: 5px;
	background: #fff;
	padding: 3px;
	border: 1px solid #bcd3e2;
}

#content ul.colours li a:hover img {
	border-color: #62B4EC;
}

#content ul.colours li a:hover span.swatch-border {
	border-color: #62B4EC;
}

/** Collection list **/
#content .collection-item {
	width: 100px;
	height: 157px;
	overflow: hidden;
	padding: 3px;
	background-color: #e4f0f8;
	border: 1px solid #A9BCCA;
	float: left;
	margin: 0 20px 20px 0;
	font-size: 0.913em;
	line-height: 1.2em;
}

#content .collection-item a {
	color: #071c5d;
}

#content .collection-item span.item-id {
	color: #5b5b5b;
	display: block;
}

#content .collection-item .collection-image a {
	display: block;	
	height: 120px;
	overflow: hidden;
}

#content .left-column #main-image span {
	display: none;
}

#content .left-column #main-image:hover span {
	display: block;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 110;
	background: transparent url('../i/icon-zoom.png') left top no-repeat;
}

#content .collection-item .collection-image a span {
	display: none;
}

#content .collection-item .collection-image a:hover span {
}

/* Main image*/
#main-image {
	display: block;
    height: 425px;
    overflow: hidden;
}
	

/* --------------------------------------
   Right-column Styles
-------------------------------------- */

#content .two-columns .right-column h2,
#content .three-columns .right-column h2 {
	color: #204584;
	text-transform: uppercase;
	font-size: 2em;
	margin-bottom: 0!important;
}

/** Image-text **/
#content .image-text {
	width: 100%;
	padding-bottom: 1em;
}

#content .image-text .image {
	float: left;
	width: 60px;
}

#content .image-text .image a {
    height: 110px;
    overflow: hidden;
    display: block;
}

#content .image-text .text {
	float: right;
	width: 170px;
}

#content .image-text .text a {
	color: #071c5d;
}

#content .image-text .text p {
	margin-bottom: 0;
	color: #5b5b5b;
}

/* --------------------------------------
   Homepage content section
-------------------------------------- */
#content #content-home #welcome,
#content #content-home #our-catalogue-preview {
    width: 255px; /* minus 30 to allow for padding */
    color: #d5d5d5;
    padding: 15px;
}

#content #content-home #welcome a,
#content #content-home #our-catalogue-preview a {
    color: #d5d5d5;
}

#content #content-home #welcome h2,
#content #content-home #our-catalogue-preview h2 {
    margin-bottom: 0.2em !important;
    color: #ffffff; 
    text-transform: uppercase;
}

#content #content-home #welcome h2 {
    color: #62b4ec;
}

#content #content-home #welcome p,
#content #content-home #our-catalogue-preview p {
    margin: 0;
}

#content #content-home #welcome {
    background-color: #1d1b1f;
}

#content #content-home #our-catalogue-preview {
    background-color: #16295e;
    border-top: 4px solid #0b1d51;
}

#content #content-home #our-catalogue-preview .detail {
    float: left;
    width: 125px;
    margin-right: 10px;
}

#content #content-home #our-catalogue-preview img {
    float: right;
}

#content #content-home #our-catalogue-preview .detail ul {
    margin: 1em 0 0.5em 20px;
}

/* --------------------------------------
   Main Navigation Section
-------------------------------------- */

#main-navigation-outer {
    position: absolute;
	top: 70px;
	height: 33px;
	background: #1f4584;
	z-index: 1000;
	font-weight: bold;
	font-size: 0.916em;
	width: 100%;
}

/** Menu level 1 **/
#main-navigation {
	width: 970px;
	margin: 0 auto;
}

#main-navigation ul { /** First level un-ordered list **/
	padding: 3px 0 0 0;
	width: 970px;
}

#main-navigation ul li { /** First level un-ordered list items **/
	display: block;
	float: left;
	color: #fff;
	margin-right: 1px;
}

#main-navigation ul li a, #main-navigation ul li a:visited {  /** First level anchor static-state **/
	text-decoration: none;
	padding: 6px 7px;
	color: #fff;
	display: inline-block;
}

#main-navigation ul li a:hover,
#main-navigation ul li:hover a,
#main-navigation ul li.hover a,
#main-navigation ul li a.active { /** First level anchor hover-state **/
	background: #071c5d url('../i/bg-navitem.gif') right top no-repeat;
	color: #62b4ec;
}

#main-navigation ul li a:hover span,
#main-navigation ul li:hover a span,
#main-navigation ul li.hover a span,
#main-navigation ul li a.active span { /** First level anchor hover-state **/
	display: block;
	width: 5px;
	height: 5px;
	left: 0;
	top: 0;
	position: absolute;
	background: #071c5d url('../i/bg-navitem.gif') left top no-repeat;
	color: #62b4ec;
}

/** Menu level 2 **/
#main-navigation ul li ul { /** Second level un-ordered list - when hidden **/
	display: none;
}

#main-navigation ul li:hover ul,  /** Second level un-ordered list - when visible **/
#main-navigation ul li.hover ul {
	display: block;
	position: absolute;
	left: -1px;
	margin: 0;
	background-color: #071c5d;
	border: 1px solid #1f4584;
	border-top: none;	
	height: auto;
	width: 130px;
	padding: 1px 0 0;
}

#main-navigation ul li ul li { /** Second level un-ordered list items **/
	clear: both;
	width: 100%;
}

#main-navigation ul li ul li a,
#main-navigation ul li:hover ul li a,
#main-navigation ul li.hover ul li a,
#main-navigation ul li ul li a:visited {  /** Second level anchor static-state - must cancel out first level anchors **/
	text-decoration: none;
	background: transparent;
	background-image: none;
	border-bottom: 1px solid #1f4584;
	padding: 6px 0 6px 10px;
}

#main-navigation ul li ul li a:hover,
#main-navigation ul li ul li:hover a,
#main-navigation ul li ul li.hover a {  /** Second level anchor hover-state **/
	background: #1f4584;
	background-image: none;
	border-bottom: 1px solid #62b4ec;
}

/** Menu level 3 **/
#main-navigation ul li:hover ul li ul,
#main-navigation ul li.hover ul li ul,
#main-navigation ul li ul li ul { /** Third level un-ordered list - when hidden **/
	display: none;
}

#main-navigation ul li:hover ul li:hover ul,  /** Third level un-ordered list - when visible **/
#main-navigation ul li.hover ul li.hover ul {
	display: block;
	position: absolute;
	left: 100%;
	top: 0;
	margin: 0;
	padding: 0;
	background-color: #1f4584;
	width: 150px;
}

#main-navigation ul li ul li ul li { /** Third level un-ordered list items **/
	clear: both;
	width: 100%;
}

#main-navigation ul li ul li ul li a,
#main-navigation ul li ul li:hover ul li a,
#main-navigation ul li ul li.hover ul li a,
#main-navigation ul li ul li ul li a:visited {  /** Third level anchor static-state - must cancel out first level anchors **/
	text-decoration: none;
	background-color: transparent;
	border-top: 1px solid #3268c1;
	border-bottom: none;
	padding: 6px 50px 6px 10px;
}

#main-navigation ul li ul li ul li a:hover {  /** Third level anchor hover-state **/
	background-color: #62b4ec;
	border-top: 1px solid #071c5d;
	width: 100%;
}

/* login button */
#main-navigation ul li#login-button,
#main-navigation ul li#login-button a,
#main-navigation ul li#login-button:hover,
#main-navigation ul li#login-button a:hover,
#main-navigation ul li#logout-button,
#main-navigation ul li#logout-button a,
#main-navigation ul li#logout-button:hover,
#main-navigation ul li#logout-button a:hover {
    background: none !important;
    cursor: default;
}

#main-navigation ul li#login-button,
#main-navigation ul li#login-button a,
#main-navigation ul li#login-button a span,
#main-navigation ul li#logout-button,
#main-navigation ul li#logout-button a,
#main-navigation ul li#logout-button a span {
    height: 22px;
    width: 55px;
    padding: 0;
    margin: 0;
}

#main-navigation ul li#login-button,
#main-navigation ul li#logout-button {
    padding-top: 3px;
    float: right;
}

#main-navigation ul li#login-button a span {
    background: transparent url(../i/btn-login.gif) left top no-repeat;
}

#main-navigation ul li#login-button a:hover span {
    background: transparent url(../i/btn-login.gif) left -22px no-repeat;
}

/* logout button */
body #main-navigation ul li#logout-button a span {
    background: transparent url(../i/btn-login.gif) left -44px no-repeat;
}

body #main-navigation ul li#logout-button a:hover span {
    background: transparent url(../i/btn-login.gif) left -66px no-repeat;
}

/* --------------------------------------
   Footer Section
-------------------------------------- */
#footer-outer {
    width: 100%;
}

#footer {
	height: 60px;
	padding-top: 10px;
	font-size: 0.916em;
	width: 970px;
	margin: 0 auto;
}

#footer #footer-navigation {
	float: left;
	margin-bottom: 1em;
}

#footer #legal-navigation {
	float: right;
	margin-bottom: 1em;
}

#footer #footer-navigation li {
	float: left;
	margin-right: 10px;
}

#footer #legal-navigation li {
	float: left;
	margin-left: 10px;
}

#footer #footer-navigation li a,
#footer #legal-navigation li a {
	text-decoration: none;
}

#footer #footer-navigation li a:hover,
#footer #legal-navigation li a:hover {
	text-decoration: underline;
}

/* --------------------------------------
   NOW/media Credit
-------------------------------------- */

a.credit {
	width: 66px;
	height: 25px;
	font: 10px Arial, Helvetica, sans-serif;
	float: right;
	clear: both;
}

a.credit span {
	background-image: url('../i/logo-nowmedia.gif')
}

/* --------------------------------------
   Form Styles
-------------------------------------- 

.form {
	width: 480px;
}
.form-item {
	padding: 5px 0;
	margin-bottom: 5px;
	display: block;
}

.form-item label {
    display: inline-block;
	clear: both;
	margin-bottom: 0.2em;
}

.text input {
    width: 215px;
	padding: 3px;
	display: block;
	border: 1px solid #e9e9e9;
}

.form-item textarea {
    width: 468px;
	height: 100px;
	padding: 3px;
	display: block;
	font-size: 1.2em;
	border: 1px solid #e9e9e9;
	font-family: Arial, Verdana, Helvetica, sans-serif;
}

.postcode input {
    width: 4em;
}

.select select {
    width: 225px;
	padding: 3px;
	display: block;
	border: 1px solid #e9e9e9;
}

.required label {
}

.submit {
    text-align: right;
}


.submit input.image {
   background: none;
   height: 27px;
   width: 101px;
   border: none;
   margin: 0;
   background: transparent url('../i/btn-submit.gif') left top no-repeat;
}

.submit input.image:hover,
.submit input.hover {
   background-position: left -27px;
   cursor: pointer;
}

.submit input.image:active,
.submit input.active {
   background-position: left -54px; 
}

input[type="submit"]:focus::-moz-focus-inner{ border-color:transparent!important }


input.error,
select.error,
textarea.error {
	border: 1px solid #6aa0cc;
	background-color: #e1effa;
	color: #000;
}

.form-item span {
	display: block;
	padding: 1px;
	border: 1px solid #ccc;
}
*/