/*

Author: URBAN EXPRESSION 
Site: XYZ Innovation

Colours:
 - grey: #222122
 - background: #151515
 - black: #070707
 - footer: #151515
 
*/

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0; }

a img,:link img,:visited img { border: none; }
a:hover { 
  text-decoration: underline;
}

li a:hover {
  text-decoration: none;
}

h1.page-title {
  background: #222122;
  line-height: 20px;
  padding: 10px;
  margin: -15px -15px 10px -15px;
  font-weight: bold;
}

h1.page-title.green {
  background: url(../images/green-background.jpg) repeat-x;
  color: #000;
}
h1.page-title.red {
  background: url(../images/red-background.jpg) repeat-x;
  color: #000;
}
h1.page-title.blue {
  background: url(../images/blue-background.jpg) repeat-x;
  color: #000;
}


h1 {
  padding: 5px;
  font-size: 1.4em;
  font-weight: normal;
}

h2 {
  margin: 15px 0;
}

ul { list-style: none; }

#cms-content ul, #right-col ul { list-style-type: disc; list-style-position: inside; }

p {
  margin: 10px 0;
}
.floatfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

strong.highlight {
  background-color: #283991;
}

.grey {
  color: #231f20;
}

div.float-fix {
	overflow:hidden;
	clear:both;
	height:0;
	}

#logo a { 
  margin-top: 50px;
  width: 150px;
  height: 163px;
  display: block;
  background: url(../images/logo.jpg) left no-repeat;
}

#logo a span {
  display: none;
}

label {
  cursor:pointer;
  color: #555;
}

/* NAV */
#nav ul {
  margin: 0;
  padding: 0;
  position: relative;
}

#nav ul li {
  float: left;
  margin: 0;
	float: left;
	position: relative;
	z-index: 10;
	zoom: 1;
}

#nav ul li a {
  list-style: none;
  display: block;
  border-left: dashed #B2B2B2 1px;
  padding: 0;
  width: 113px;
  line-height: 31px;
  text-align: center;
  color: #B2B2B2;
}
#nav ul li ul li a {
  color: #000;
}

#nav ul li.first a {
  border: none;
}

#nav ul li:hover ul, #nav ul li a:hover ul {
  left: auto;
}
#nav ul li a, #nav ul li span {
  display: block;
  margin: 0;
}

#nav li ul {
  top: 31px;
  padding: 0;
  background: #222122;
	position: absolute;
	left: -999em;
	border-bottom: dashed #B2B2B2 1px;
}

#nav li ul li {
  padding: 0;
  float: left;
  clear: left;
  font-size: 0.9em;
}

#nav li ul li a {
  border-left: dashed #B2B2B2 1px;
  border-right: dashed #B2B2B2 1px;
  border-top: dashed #B2B2B2 1px;
  padding: 5px 0;
  line-height: 16px;
}

ul#left-subnav {
  margin-top: 60px;
  border-bottom: dashed #B2B2B2 1px;
}

ul#left-subnav li a {
  display: block;
  border-top: dashed #B2B2B2 1px;
  padding: 8px;
  /*width: 183px;*/
  height: auto;
  text-align: right;
  color: #B2B2B2;
}

#nav li.active a, #left-subnav li.active a {
  color: #F5D953;
}

#nav .i1:hover, #nav .i7:hover, ul#left-subnav li a:hover, #nav .i1 ul {
  background-color: #cccccc;
  color: #151515;
}

#nav .i2:hover, #nav .i2 ul {
  background-color: #3c61b1; /*DE401E;*/
  color: #ddd;
}

#nav .i3:hover, #nav ul li.i3 ul {
  background-color: #6aae37;
  color: #ddd;
}

#nav .i4:hover, #nav ul li.i4 ul {
  background-color: #3c61b1;
  color: #ddd;
}

#nav .i5:hover, #nav ul li.i5 ul {
  background-color: #c72928;
  color: #ddd;
}

#nav .i6:hover, #nav ul li.i6 ul {
  background-color: #ECA42A;
  color: #fff;
}

#nav .i7:hover, #nav ul li.i7 ul {
  background-color: #888;
  color: #ddd;
}

#nav ul li ul li a:hover {
  background-color: #333 !important;
}

/* FORMS */

input[type=text] {  
  border: solid 1px #ccc;
  font-size: 1em;
  padding: 1px;
}

.search-submit-image {
  padding: 5px 0 0 5px;
  vertical-align: center;
}

fieldset {
  border: none;
}

div.form-row {
  padding: 2px;
  clear: left;
}

div.form-row label {
  color: #ccc;
  display: block;
  width: 120px;
  margin-right: 20px;
  float: left;
}

div.form-row div {
  margin-left: 140px;
}

div.validation-advice {
  margin: 4px 30px 4px 70px;
  border: solid 1px red;
  background-color: #FFA7A7;
  padding: 3px;
  color: #000;
}

input.validation-failed {
  border: solid 1px red;
}

input.validation-passed {
  border: solid 1px green;
}

#footer span {
  color: #B2B2B2;
}

/* Product display */

.product {

}

.product-photo {
  float: left;
  /*width: 180px;*/
  margin: 30px;
}

.product-description {
  /*margin-top: 20px;*/
}

.product-title {
  font-size: 1.4em;
  margin-left: 188px;
  padding: 10px;
}

.product-attributes { 
  margin-top: 5px;
  padding-bottom: 10px;
}

.product-attributes .attribute {
  font-size: .9em;
  width: 86.6px;
  height: 88px;
  margin-right: 5px;
  float: left;
  padding: 4px;
  background: #070707;
}

.product-attributes .attribute-title {
  color: #aaa;
  margin-bottom: 8px;
}

#search-results {
  border-top: 1px dashed #ccc;
}

#search-results .result {
  padding: 10px 5px;
  border-bottom: 1px dashed #ccc;
}

#search-results .result .result-body {
  margin-top: 5px;
}