@charset "utf-8";

.nowrap {
	white-space:nowrap;
}

body{
	overflow-y:scroll;
	font-family:'Open Sans', Arial, sans-serif;
	background-color:#0088cb;
	margin:0;
}

h1, h2, h3 {
	color:#FFF;
	margin:0 0 5px 0;
}

.center {
	text-align:center;
}

.bold {
	font-weight:bold;
}

.italic {
	font-style:italic;
}

.nowrap {
	white-space:nowrap;
}

.floatLeft {
	float:left;
	margin-right:15px;
	margin-bottom:15px;
}

.floatRight {
	float:right;
	margin-left:15px;
	margin-bottom:15px;
}

.clearBoth {
	clear:both;
}

.borderedImage {
	border:solid 2px #FFF;
	box-shadow:3px 3px 3px #2A3F55;
}

#main-container {
	max-width:100%;
	margin:50px 0 0 0;
}

@media only screen and (min-width: 1065px) {
	#main-container {
		max-width:1044px;
		margin:20px auto;
	}
}

/* HEADER ----------------------------------------------------------------------------------------- */

#header {
	width:100%;
	margin:0 auto 15px auto;
}

#header:after {
    content: "";
    clear: both;
    display: block;
}

#header_logo {
	display:none;
	width:100%;
	text-align:center;
	margin:0 auto;
}

#header_logo_mobile {
	width:100%;
	text-align:center;
	margin:0 auto;
}

@media only screen and (min-width: 400px) {
	#header_logo {
		width:550px;
		padding-top:15px;
	}
	
	#header_logo_mobile {
		display:block;
	}
}
@media only screen and (min-width: 1065px) {
	#header_logo {
		display:block;
		text-align:left;
		float:left;
	}

	#header_logo_mobile {
		display:none;
	}
}

#header_logo img {
	border:none;
	margin:auto;
}

#header_info {
	margin:18px auto;
	text-align:center;
	width:100%;
}

#search_block {
	margin:18px auto;
	text-align:center;
	width:90%;
}

@media only screen and (min-width: 1065px) {
	#header_info {
		float:right;
		width:490px;
		height:72px;
		margin:14px 0 0 0;
		display:table;		
	}
}

@media only screen and (min-width: 1065px) {
	#search_block {
		float:right;
		width:480px;
		height:30px;
		margin:10px 0 14px 0;
	}
}

.header_item {
	color:#FFF;
	width:100%;
	height:100%;
	border:none;
	border-bottom:solid 1px #fff;
	text-align:center;
}

.header_item a, .header_item a:visited {
	text-decoration:none;
	color:#FFF;
}

.header_item p {
	margin:5px 0;
}

@media only screen and (min-width: 1065px) {
	.header_item p {
		margin:0;
	}
}

@media only screen and (min-width: 1065px) {
	.header_item {
		color:#FFF;
		border:none;
		border-right:solid 1px #fff;
		text-align:center;
		vertical-align:middle;
		display:table-cell;
		margin:0;
	}
}

@media only screen and (min-width: 1065px) {
	.header_item.end {
		border-right:none;
	}
}

@media only screen and (min-width: 1065px) {
	.header_item.wide {
		width:264px;
	}
}

@media only screen and (min-width: 1065px) {
	.header_item.narrow {
		width:120px;
	}
}

@media only screen and (min-width: 1065px) {
	.header_item.normal {
		font-size:18px;
	}
}

@media only screen and (min-width: 1065px) {
	.header_item.large {
		font-size:28px;
	}
}

.searchBar {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('/images/icons/search.png');
    background-position: 7px 6px; 
    background-repeat: no-repeat;
    padding: 6px 6px 6px 40px;
	outline:none;
}

.searchBar:focus {
	background-color:#ffdf51;
}

/* MENU ------------------------------------------------------------------------------------------- */

#navbar {
	position:fixed;
	top:0;
	margin:0 auto;
	z-index:30;
	width:100%;
	}

@media only screen and (min-width: 1065px) {
	#navbar {
		position:relative;
	}
}

#mobile_menu {
    display:block;
    width:100%;
    color:#fff;
	background-color:#d90303;
    text-align:right;
    text-decoration:none;
	height:40px;
}

@media only screen and (min-width: 1065px) {
	#mobile_menu {
		display:none;
	}
}

#mobile_menu_toggle {
	cursor:pointer;
}

#mobile_menu i {
	margin:4px 10px;
}

ul#nav {
	display:none;
}

@media only screen and (min-width: 1065px) {
	ul#nav {
		display:block;
	}
}

#nav li.main {
    width:100%;
}

@media only screen and (min-width: 1065px) {
	#nav li.main {
		float:left;
		width:209px;
	}
	
	#nav li.main.last {
		width:208px;
	}
}

.popout {
	display:none;
	width:100%;
	z-index:20;
}

@media only screen and (min-width: 1065px) {
	.popout {
		width:208px;
			position:absolute;
	}
}

#nav li.sub {
	float:none;
	margin:0 8px;
}

ul#nav, .popout ul {
	font-family:'Open Sans', Arial, sans-serif;
	font-weight:400;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
	text-transform:uppercase;
}

#nav .sub a:link, #nav .sub a:visited {
    display:block;
    color:#fff;
	background-color:#44a7d8;
    text-align:center;
    padding:6px 0;
    text-decoration:none;
	border:none;
}

#nav .sub a:hover, #nav .sub a:active {
	color:#000;
}

.main a:link.main, .main a:visited.main {
    display:block;
    width:100%;
	height:40px;
	line-height:40px;
	border-right:solid 1px #fff;
    color:#fff;
	background-color:#0080bf;
	background-image:linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image:-o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image:-moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image:-webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image:-ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
    text-align:center;
    padding:0;
    text-decoration:none;
}

@media only screen and (min-width: 1065px) {
	.main a:link.main, .main a:visited.main {
		width:200px;
		padding:4px;
	}
}

.main a:link.last, .main a:visited.last {
	border:none;
}

.main a:hover.main, .main a:active.main {
    background-color:#ffd726;
	color:#000;
}

/* SIDE BLOCK - LEFT ------------------------------------------------------------------------------ */

#left_block {
	width:90%;
	margin:10px auto;
}

@media only screen and (min-width: 1065px) {
	#left_block {
		width:260px;
		float:left;
		margin:20px 0;
	}
}

.left_block_item {
	border-style:solid;
	border-width:3px;
	border-radius:15px 0 15px 0;
	margin-bottom:15px;
	text-align:center;
	padding:5px;
}

.left_block_item p {
	padding:5px;
	margin:0;
}

.left_block_item .price {
	font-size:40px;
	font-weight:bolder;
	color:#d90303;
	text-shadow: 2px 2px 4px #000000;
}

.left_block_item .price .label {
	font-size:14px;
	font-weight:bold;
	color:#000;
	text-shadow: none;
}

.yellow {
	border-color:#ffd726;
	background-color:#ffd726;
}

.blue {
	border-color:#fff;
	background-color:#0080bf;
}

.white {
	border-color:#d90303;
	background-color:#FFF;
	color:#000;
}

.white h2, .yellow h2 {
	color:#000;
}

.yellow .listingLogo {
	border-radius:6px;
	padding:5px;
	background-color:#fff;
}

.info_button {
	font-family:'Open Sans', Arial, sans-serif;
	font-weight:300;
    margin: 0;
    padding: 0;
    overflow: hidden;
	text-transform:uppercase;
}

.info_button a:link, .info_button a:visited {
    display: block;
    width: 180px;
	height:30px;
	line-height:30px;
	border:solid 1px #FFF;
	border-radius:10px;
	box-shadow: 2px 2px 4px #000000;
	margin:10px auto;
    color: #FFFFFF;
	background-color: #d90303;
	background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.2) 0%);
    text-align: center;
    padding: 4px;
    text-decoration: none;
}

.info_button a:hover, .info_button a:active {
    background-color: #f36262;
	color:#701919;
}

.searchFilters {
	font-size:12px;
	text-align:left;
}

.searchFilters td {
	vertical-align:top;
	padding:5px 0;
}

.searchFilters th {
	border-bottom:solid 1px #FFF;
	padding:5px 0;
	font-weight:bold;
}

.searchFilters label {
  cursor: pointer;
  display:inline-block;
  width:90px;
  vertical-align:top;
  position:relative;
  top:1px;
  left:3px;
}

.searchFilters .resultTotal {
	font-size:9px;
	color:#FFF;
	font-style:italic;
	font-weight:normal;
}

.searchFilters input[type="checkbox"]:disabled + label {
	color:#777;
}

/*
.searchFilters input[type="checkbox"]:after {
  border: 1px solid #ffffff;
  content: "\00a0";
  display: inline-block;
  font: 12px/1em sans-serif;
  height: 12px;
  margin: 0 .25em 0 0;
  padding:0;
  vertical-align: top;
  width: 12px;
}

.searchFilters input[type="checkbox"]:checked:after {
  background: #fff;
  color: #666;
  content: "\2713";
  text-align: center;
}
*/

/* SIDE BLOCK - RIGHT ----------------------------------------------------------------------------- */

#right_block {
	width:90%;
	margin:10px auto;
}

@media only screen and (min-width: 1065px) {
	#right_block {
		width:740px;
		float:right;
		margin:20px 0;
	}
}

#banner {
	display:none;
	border:solid #FFF;
	background:#FFF;
	margin:10px auto;
}

@media only screen and (min-width: 700px) {
	#banner {
		display:block;
		width:600px;
		height:353px;
		border-width:3px;
	}
}

@media only screen and (min-width: 1065px) {
	#banner {
		display:block;
		width:732px;
		height:431px;
		border-width:4px;
		margin:0;
	}
}

/* FULL BLOCK ------------------------------------------------------------------------------------- */

#full_block {
	width:95%;
	margin:10px auto;
}

@media only screen and (min-width: 1065px) {
	#full_block {
		margin:20px auto;
	}
}

#full_block a:link, #right_block a:link, #full_block a:visited, #right_block a:visited {
	text-decoration:none;
	color:#000;
}

#full_block a:hover, #right_block a:hover, #full_block a:active, #right_block a:active {
	text-decoration:none;
	color:#FFF;
}

/* FOOTER ----------------------------------------------------------------------------------------- */

#footer {
	clear:both;
	background-color:#3399cb;
	margin:30px auto 0 auto;
	padding:5px 25px;
	font-size:70%;
	position:relative;
}

#footer a:link, #footer a:visited {
	text-decoration:none;
	color:#000;
}

#footer a:hover, #footer a:active {
	text-decoration:none;
	color:#FFF;
}

.footer_block {
	display:block;
}

@media only screen and (min-width: 1065px) {
	.footer_block {
		display:inline-block;
		margin-right:40px;
		vertical-align:top;
	}
}

#footer .manufacturer_logos {
	width:90%;
	text-align:center;
	margin:40px auto 0 auto;
}

@media only screen and (min-width: 1065px) {
	#footer .manufacturer_logos {
		position:absolute;
		right:15px;
		bottom:15px;
		width:500px;
		text-align:center;
		margin:0;
	}
}

#footer .manufacturer_logos img {
	margin:7px;
}

/* SEARCH RESULTS ---------------------------------------------------------------------------------------- */

.changeDisplayNumber {
	font-size:12px;
	text-align:center;
}

@media only screen and (min-width: 1065px) {
	.changeDisplayNumber {
		font-size:10px;
		text-align:right;
	}
}

.changeDisplayNumber a, .changeDisplayNumber a:visited {
	color:#FFF;
}

/* ITEM LISTINGS ----------------------------------------------------------------------------------------- */

.detailBox {
	box-sizing:border-box;
	margin:15px 0;
	width:100%;
	background-color:#FFF;
	border:double 8px #0088cb;
	border-radius:15px 0 15px 0;
	padding:10px;
}

.itemInfo {
	width:100%;
}

@media only screen and (min-width: 1065px) {
	.itemInfo {
		width:calc(100% - 180px);
		display:inline-block;
		vertical-align:top;
	}
}

.listingLineOne, .listingLineTwo, .listingLineThree, .listingLineFour {
	width:100%;
}

.listingLineOne {
	height:30px;
	overflow:hidden;
}

.listingLineTwo, .listingLineThree, .listingLineFour {
	margin-bottom:10px;
}

.itemInfoItem {
	display:inline-block;
	vertical-align:top;
	margin-right:10px;
}

.itemInfoIcon {
	margin-right:5px;
}

.itemInfoText {
	font-size:10px;
	position:relative;
	top:-3px;
}	

.itemCode {
	display:inline-block;
	vertical-align:middle;
	margin-left:5px;
	font-size:18px;
	font-weight:bold;
	width:calc(100% - 90px);
	white-space:nowrap;
	overflow:hidden;
}

.listingLogo {
	display:inline-block;
	vertical-align:middle;
}

.itemName {
	font-size:22px;
	font-weight:bold;
}

.itemDescription {
	font-size:14px;
	font-style:italic;
}

.pricingBlock {
	width:150px;
	margin:0 auto;
	text-align:center;
}

@media only screen and (min-width: 1065px) {
	.pricingBlock {
		display:inline-block;
		vertical-align:top;
		margin-left:20px;
	}
}

.itemImage {
	text-align:center;
	margin:0 0 10px 0;
}

.pricingBlock .price {
	font-size:30px;
	font-weight:bolder;
	color:#d90303;
	text-shadow: 2px 2px 3px #999;
}

.pricingBlock .price .label {
	font-size:14px;
	font-weight:bold;
	color:#000;
	text-shadow:none;
}

.detailBox .orderButton, .basketButton, .contactButton, .loginButton {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	margin:5px 0;
	padding:5px;
	width:150px;
	border-radius:5px;
	box-sizing:border-box;
}

.detailBox .orderButton, .basketButton, .contactButton, .loginButton {
    background-color: #FFF;
	border:solid 2px #555555;
    color:#000;
}

.detailBox .orderButton:hover, .basketButton:hover, .contactButton:hover,  .loginButton:hover {
    background-color: #555555;
    color:#FFF;
	cursor:pointer;
}

.detailBox .orderButton:disabled, .basketButton:disabled, .contactButton:disabled, .loginButton:disabled {
    background-color: #FFF;
	border:solid 2px #555555;
    color:#000;
	cursor:not-allowed;
	opacity:0.6;
}

.strikethrough {
	text-decoration:line-through;
}

/* FORMS ----------------------------------------------------------------------------------- */

.contactForm .inputField, .loginForm .inputField, .updateForm .inputField {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    padding: 6px 6px 6px 6px;
	outline:none;
	margin-top:5px;
}

.contactForm textarea {
	height:120px;
}

.contactForm .inputField:focus, .loginForm .inputField:focus, .updateForm .inputField:focus {
	background-color:#ffdf51;
}

.contactForm label, .loginForm label, .updateForm label {
	font-weight:bold;
}

.disclaimer {
	font-size:80%;
}

.hidden {
	display:none;
}

/* UPDATE SECTION ----------------------------------------------------------------------------------- */

.updateOptionButton {
	width:100%;
	text-align:center;
	margin:15px auto;
}

.updateOptionButton img, .update_header_item img {
	width:95%;
	width:calc(100% - 4px);
	max-width:611px;
	margin:auto;
}

.update_header_item {
	color:#FFF;
	width:100%;
	height:100%;
	border:none;
	text-align:center;
}

.update_header_item p {
	margin:5px 0;
}

@media only screen and (min-width: 1065px) {
	.update_header_item p {
		margin:0;
	}
}

@media only screen and (min-width: 1065px) {
	.update_header_item {
		color:#FFF;
		border:none;
		text-align:center;
		vertical-align:middle;
		display:table-cell;
		margin:0;
	}
}

.updateFilters label {
  cursor: pointer;
  display:inline-block;
  vertical-align:top;
  position:relative;
  top:1px;
  left:3px;
}

.updateFilters td {
	vertical-align:top;
	padding:5px 0;
}

.updateFilters {
	font-size:12px;
	text-align:left;
}

.updateFilters th {
	border-bottom:solid 1px #FFF;
	padding:5px 0;
	font-weight:bold;
}

.updateFilters .resultTotal {
	font-size:10px;
	color:#FFF;
	font-style:italic;
	font-weight:normal;
}

.announceBlock {
	display:none;
	margin-bottom:0;
	background-color:#b01515;
	color:#FFF;
	padding:6px;
	font-weight:bold;
}

.detailBoxUpdateFields .inputField {
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    padding: 6px 6px 6px 6px;
	outline:none;
	margin-top:5px;
	margin-bottom:5px;
	margin-right:10px;
}

.detailBoxUpdateFields textarea {
	height:120px;
}

.detailBoxUpdateFields .inputField.small {
	width:70px;
}

@media only screen and (min-width: 1065px) {
	.detailBoxUpdateFields .inputField.small {
		width:110px;
	}
}

.detailBoxUpdateFields .inputField.medium {
	width:100%;
}

@media only screen and (min-width: 1065px) {
	.detailBoxUpdateFields .inputField.medium {
		width:350px;
	}
}

.detailBoxUpdateFields .inputField.large {
	width:100%;
}

@media only screen and (min-width: 1065px) {
	.detailBoxUpdateFields .inputField.large {
		width:100%;
	}
}

.detailBoxUpdateFields .inputField:focus {
	background-color:#ffdf51;
}

.detailBoxUpdateFields label {
	font-weight:bold;
}

.inputField.priceField {
    background-image: url('/images/icons/gbp.png');
    background-position: 7px 6px; 
    background-repeat: no-repeat;
    padding: 6px 6px 6px 30px;
}

.detailBoxUpdateFields .updateButton {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	margin:5px;
	padding:5px;
	width:49%;
	border-radius:5px;
	box-sizing:border-box;
}

@media only screen and (min-width: 1065px) {
	.detailBoxUpdateFields .updateButton {
		width:130px;
	}
}

.detailBoxUpdateFields .updateButton {
    background-color: #FFF;
	border:solid 2px #555555;
    color:#000;
}

.detailBoxUpdateFields .updateButton:hover {
    background-color: #555555;
    color:#FFF;
	cursor:pointer;
}

.detailBoxUpdateFields .updateButton:disabled {
    background-color: #FFF;
	border:solid 2px #555555;
    color:#000;
	cursor:not-allowed;
	opacity:0.6;
}

#full_block .detailBox.detailBoxUpdateFields a:hover, #full_block .detailBox.detailBoxUpdateFields a:active {
	text-decoration:underline;
	color:#0088cb;
}

.deleteBox {
	width:70%;
	padding:20px;
	margin:15px auto;
	background-color:#CC0000;
	border-style:solid;
	border-width:5px;
	border-color:#FF0000;
	color:#FFFFFF;
	text-align:center;
	font-weight:bold;
}

@media only screen and (min-width: 1065px) {
	.deleteBox {
		width:600px;
	}
}

.detailBoxUpdateFields .allignedField {
	position:absolute;
	left:140px;
	vertical-align:middle;
}