html {
overflow-x: scroll;
}

body {
    font-family: verdana,helvetica,arial,serif; 
    font-size: 12px; 
    background: #e8f7fc url(images/bg.jpg) repeat-x;
    margin-bottom: 40px;
    
}
.button { display: inline; }
.button {
    display: inline-block;
    background: #67b8de; 
    text-align: center; 
    color: #fff; 
    text-transform: uppercase; 
    border: 0;
    text-decoration: none; 
    padding: 5px 15px; 
    cursor: pointer;
    min-width: 100px;
    font-weight: bold;
	font-size: 11px;
}

.button.white {
    background: #fff;
    color: #67b8de;
}

button {
   background: #67b8de;  
   font-weight: bold;
   cursor: pointer;
   height: 30px;
   color: #fff;
   border: 0;
}

button.white {
    background: #fff;
    color: #0073af;
}

.form-table { padding: 10px; background: #f2f2f2; border: 1px solid #ccc; }

.form-table td { padding: 3px 5px; }

.form-table .input input { width: 250px; }

/* ================ */
/* = The 1Kb Grid = */     /* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:660px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
	margin: 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 -10px;
	width: auto;
	display: inline-block;
}
/* ================ */
/* = The 1Kb Grid = */     /* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

h1 { 
    font-size: 26px; 
    margin-bottom: 7px; 
    color: #0073af; 
    letter-spacing: -1px;
}
h2 { font-size: 16px; line-height: 21px; font-style: italic; color: #0073af; font-weight: normal; margin-bottom: 10px; }
h3 { margin-bottom: 2px; }
h4 {}
p { font-size: 12px; line-height: 19px; color: #333; margin-bottom: 15px; }

a {
    color: #67b8de;
	color: #4886D2;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

input {padding: 5px; background: #fff; border: 1px solid #999; font-size: 13px; color: #303030;}
input.ghost { color: #777; font-style: italic; }

.quote { 
    width: 75%;
    font-size: 26px; 
    color: #555; 
    font-style: italic; 
    font-weight: bold;
    line-height: 36px; 
    font-family: Georgia; 
    background: #eee; 
    padding: 10px; 
    margin: 0 auto; 
}

.quote:before {
    content: "“"
}

.quote:after {
    content: "„"
}

#header {
    height: 90px; line-height: 90px;
    background: #d3f1ff;
}

#header .logo { padding-top: 22px; }

#nav {
    height: 50px;
    background: #67b8de;
    overflow: hidden;
}

#nav .menu { overflow: hidden; }

#nav .menu li {
    height: 50px;
    float: left;
}

#nav .menu li a {
    display: block;
    height: 50px; line-height: 50px;
    padding: 0 15px;
    text-decoration: none; text-transform: uppercase;
    font-size: 14px; color: #fff;
}

#nav .menu li a:hover {
    background: #becb3d;
    background: #d3f1ff;
    color: #333;
}

#nav .menu li a.hover {
    background: #becb3d;
    background: #d3f1ff;
    color: #333;
}

#nav .menu li a.active {
    background: #2a5c7d;
    color: #fff;
}

#nav .menu li a.active:hover {
    background: #becb3d;
    background: #d3f1ff;
    color: #333;
}
#nav .menu li a.active.hover {
    background: #becb3d;
    background: #d3f1ff;
    color: #333;
}

#nav .sub-menu {
    display: none;
    position: absolute; z-index: 1000;
    left: 10px; top: 140px;
    background: #becb3d;
    background: #d3f1ff;
    min-width: 150px;
}

#nav .sub-menu li a {
    color: #000;
    text-decoration: none;
    font-size: 13px;
    display: block;
}


#nav .sub-menu li {
    display: block;
    padding: 10px 15px;
}

#nav .sub-menu li:hover {
    background: darkgreen;
    background: #2a5c7d;
}

#nav .sub-menu li:hover a {
    color: #fff;
}

#nav .sub-menu li.subcat {
    
}

#nav .search {
    float: left;
    margin-top: 12px;
    border: 0px;
    width: 178px;
}

#nav .srcButton {
    min-width: 0;
    width: 40px;
    float: right;
    background: #2a5c7d;
    margin-top: 12px;
    height: 16px;
    line-height: 16px;
}

#main-content {
    margin: 40px 0;
}

#main-content .categories 
{
    padding: 20px;
    background: #fefefe;
    border: 1px solid #5d89a2;
}

#main-content .categories ul {border-bottom: 1px solid #d0d8dd; }

#main-content .categories ul li {
    border-top: 1px solid #d0d8dd; 
}

#main-content .categories ul li a {
    display: block; 
    padding: 5px 5px 5px 5px; 
    color: #0073af; 
    font-size: 11px;
    text-decoration: none;
}

#main-content .categories ul li a:hover {
    background: #d3f1ff;
    color: #333;
}

#main-content .categories ul li a.active {
    background: #d3f1ff;
    color: #000;
}

#main-content .categories ul li.subcat {
    padding-left: 10px;
    border:0;
}

#main-content .categories ul li.subcat a {
    color: #333;
    font-size: 10px;
}

#main-content .categories ul li.subcat a.active {
    background: none;
    font-weight: bold;
}
    
#main-content .article {
    padding: 20px;
    background: #fefefe; 
    border: 1px solid #5d89a2;   
}

.debug-trace {
    position: absolute;
    right: 10px; top: 10px;
    background: #f4f4f2;
    height: 250px; width: 200px;
    border: 1px solid #333;
}

.breadcrums {
    display: block;
    margin-bottom: 20px;
}

.breadcrums li {
    display: block;
    float: left;
    padding: 5px;
}

.breadcrums li.crum {    
    min-width: 90px;
    background: #67b8de;
    margin-right: 1px;
}

.breadcrums li a {
    color: #fff;
    display: block;
}

.breadcrums li.active {
    background: #becb3d;
}

.productlist { margin: 0; padding: 0; }

.productlist li {
    margin: 0; padding: 0;
    margin-bottom: 1px; 
    
    overflow: hidden;
}

.productlist li {
    background: #f2f2f2;
    margin-bottom: 10px;
}

.productlist li:hover {
    background: #fffff1;
}

.productlist li.alt {
    background: #fff;
}

.productlist li.alt:hover {
    background: #fffff1;
}

.productlist li .image {
    float: left;
    width: 100px; height: 100px;
    background: #fff;
    border-right: 2px solid #fff;
    
}

.productlist li .info {
    float: left;
    padding: 10px;
    width: 320px;
}

.productlist li .info .product-id {
    font-size: 11px;
    display: block;
    margin-bottom: 3px;
    color: #888;
}

.productlist li .info h3 {
    font-size: 15px; line-height: 19px;    
}

.productlist li .info p {
    font-size: 12px; line-height: 17px;
    color: #333;
}

.productlist li .action {
    float: right;
    width: 150px; height: 80px;
    padding: 10px;
}

.productlist li .action .variations {
    color: #2a5c7d;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 34px;
}

.productlist li .action .button {
    display: block;
    height: 50px; line-height: 25px;
}

.productlist li .action .price {
    font-size: 14px;
    color: #303030;
    font-weight: bold;
}

.productlist li a {
    text-decoration: none;
    display: block;
    cursor: pointer;
    overflow: hidden;
}

.product {
   
}

.product .part_number {
    color: #777;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-top: 3px;
}

.product .supplied_text {
    font-size: 14px;
    font-weight: bold;
}

.product .content {
    overflow: hidden;
}

.product .content ul, .product .content ol {
    margin-left: 40px;
    list-style: disc;
}

.product .content ul li, .product .content ol li {
    padding-left: 0px;
}

.product .content .image {
    float: left;
    width: 300px;
    min-height: 300px;
}

.product .content .image.noHeight { min-height: 200px; }

.product .content .image img {
    max-width: 300px;
    max-height: 300px;
    border: 1px solid #ddd;
}

.product .content .image .gallery {
    margin: 0; padding: 0; list-style: none;
    margin-top: 7px;
    margin-bottom: 1px;
}

.product select {
	margin-bottom: 15px;
}

.product .content .image .gallery li {
    float: left;
    width: 50px; height: 50px;
    margin-right: 10px; margin-bottom: 10px;
    border: 1px solid #fff;
}

.product .content .image .gallery li img {
    max-width: 48px;
    max-height: 48px;
    cursor: pointer;
    
}

.product .content .image .gallery li.active {
    border: 1px solid #000;
}

.product .content .image img.active {
    /*outline: 2px solid #000;*/
    border: 1px solid #000;
}

.product .content .description {
    float: left;
    margin-left: 20px;
    width: 330px;
}

.product .content .image.preview a { display: block; min-height: 300px; overflow: hidden; }

.product .notefield > * {
    margin: 0;
    padding: 0;
}

.product .info {
    overflow: hidden;
    margin-top: 40px;
    background: #5FB9E0;
	background: #333;
    padding: 7px;
}

.product .info .price {
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.product .info .price .stock {
    font-size: 11px;
	font-weight: normal;
    margin-top: 5px;
}

.product .info .addToBasket {
    float: right;
	overflow: hidden;
}

.product .info .addToBasket input {
    background: #fff;
    border: 0;
    font-size: 16px;
    width: 30px;
    text-align: right;
    font-weight: bold;
	float: left;
	margin-right: 2px;
}

.product .info .addToBasket .button {
	display: block;
    height: 19px;
	line-height: 19px;
	float: left;
	width: 100px;
}

.product .table {
    border: 1px solid #7DCFF6; 
    border-left: 0; 
    border-bottom: 0;
    margin-top: 15px;
}

.product .table td {
    border-bottom: 1px solid #7DCFF6; 
    border-left: 1px solid #7DCFF6;  
    padding: 5px;
    vertical-align: middle;
}

.product .table .name {
    background-color: #bce6fa; 
    text-align: right; 
    width: 160px;
}

.product .table .value {
}

.basket {
    text-align: right;
    font-size: 14px;
    line-height: 17px;
    padding-top: 17px;
}

.basket b {
    font-size: 16px;
}

.basket .button {
    margin-top: 3px;
}

.login {
    text-align: right;
    line-height: 17px;
    padding-top: 13px;
}

.login .button {
    margin-top: 3px;
    margin-right: 5px;
}

.search_result {}

.search_result h3 { font-size: 14px;}

.search_result .url { color: #2a5c7d; }

.search_result li { margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid #ccc; }

.search_result .highlight {
    background: yellow;
}

.datatable {
width: 100%;
}

.datatable .header {
    font-size: 12px;
    font-weight: bold;
    padding: 5px 5px;
    border-bottom: 2px solid #888;
}


#user-account {
	position: absolute;
	height: 80px;
	padding-top: 20px;
	background: #333;
	left: 0;
	right: 0;
	color: #999;
	top: -95px;
	line-height: normal;
}

.missing-input {
	background: lightyellow;
}

.account-products {
	margin-top: -5px;
}

.account-products li {
	padding: 5px;
	float: left;
	background: #444;
	margin-right: 10px;
	min-width: 180px;
	height: 50px;
}

.account-products li img {
	float: left;
	margin-right: 10px;
	height: 50px;
	width: 50px;
}

.account-products li .title {
	font-size: 11px;
	color: #ffF;
	font-weight: bold;
}

.account-products li b {
	color: #fff;
}

.product-controls {
	margin-top: 3px;
}

.product-controls li {
	float: left;
	margin-right: 1px;
	background: #000;
	color: #fff;
	font-size: 11px;
	height: 21px;
	line-height: 21px;
	min-width: 25px;
	text-align: center;
	padding: 0 3px;
}

.product-controls li a {
	text-decoration: none;
}

.basket-notice {
	text-align: center;
	line-height: 60px;
	font-size: 21px;
}


#login_submit {
	height: 26px;
	width: 100px;
	margin-top: 2px;
	float: left;
}

#user-account label {
	display: block;
	font-size: 12px;
	margin-bottom: 3px;
	color: #fff;
	font-weight: bold;
}

#user-account input {
	border: 1px solid #000;
	width: 200px;
}

#user-account .content {
	width: 960px;
	margin: 0 auto;
	padding: 0 15px;
}

#user-account-button {
	float: right;
	height: 25px;
	line-height: 25px;
	color: #fff;
	padding: 3px 10px;
	background: #333;
}

#user-account-button a { color: #fff; text-decoration: underline; }

.order-table-header li {
	float: left;
	font-weight: bold;
}

.order-table li.item {
	overflow: hidden;
	border-top: 1px solid #999;
	padding-top: 10px;
	padding-bottom: 10px;
}

.order-table li.item .preview {
	width: 100px;
	height: 100px;
	float: left;
	margin-right: 20px;
	background-repeat: no-repeat;
	background-position: center center;
}

.order-table li img {
	max-width: 100px;
	max-height: 100px;
	float: left;
	margin-right: 10px;
}

.order-table .info li {
	float: left;
}

.order-table .info {
	overflow: hidden;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

.order-table .info li:last-child {
	float: right;
}

.order-table .info .amount input {
	width: 30px;
	font-size: 13px;
	padding: 2px;
	text-align: right;
}

.order-table .info .title {
	font-size: 12px;
	font-weight: bold;
	width: 230px;
	line-height: 27px;
	color: #333333;
}

.order-table .info .unit_price {
	line-height: 27px;
	text-align: right;
	width: 125px;
	margin-right: 20px;
}

.order-table .info .total_price {
	font-size: 13px;
	font-weight: bold;
	line-height: 27px;
	text-align: right;
	width: 125px;
}

.order-table .part-number {
	margin-top: 7px;
	font-size: 11px;
	color: #999;
	float: left;
}

.order-table .controls {
	margin-top: 7px;
	font-size: 11px;
	color: #999;
	float: right;
}

.order-table-comment {
	border-top: 1px solid #999;
	overflow: hidden;
	padding: 10px 0;
}

.order-table-comment textarea {
	width: 98%;
	height: 100px;
}

.order-table-footer {
	border-top: 1px solid #999;
	padding-top: 10px;
	overflow: hidden;
}

.order-table-footer .row {
	float: right;
	clear: both;
	overflow: hidden;
	color: #666;
	margin-bottom: 3px;
}

.order-table-footer .row .label {
	float: left;
	text-align: right;
	
}

.order-table-footer .order-total {
	border-top: 1px solid #ccc;
	margin-top: 5px;
	padding-top: 5px;
	font-weight: bold;
	font-size: 13px;
}

.order-table-footer .row .price {
	display: block;
	float: left;
	width: 140px;
	text-align: right;
}

.order-table-footer .order-total .price {
	width: 155px;
}

.box { }
.box .item { border: 1px solid #eee; background: #fafafa; padding: 2px; margin-bottom: 2px; }
.box .item label { display: inline-block; width: 100px; text-align: right; padding-right: 5px; }
.box .item input { border: 1px solid #ccc; padding: 3px; font-size: 12px; }
.box .item textarea { border: 1px solid #ccc; padding: 3px; font-size: 12px; }
.box .item .required { font-size: 14px; font-weight: bold; color: #900; }

.account-orders {
}

.account-orders .item {
    border-bottom: 1px solid #999;
    padding: 3px 0;
}