/**
 * Title: Janijko b.v.
 * Description: This stylesheet defines the layout of the website of Janijko b.v.
 * Copyright: Pronamic Internet, Vormgeving en Software
 * Company: Pronamic Internet, Vormgeving en Software
 * Author: Jelke Boonstra
 * Version: 1.0
 */

body {
	background: #ECECEC url("background.png") repeat-x;

	font-size: 80%;
	font-family: Arial, Verdana, Helvetica, sans-serif;

	margin: 0;
	padding: 0;
}

/**
 * Anchors
 */
a {
	color: #137bc0;
}

a:visited {
	color: #666;
}

a:hover {
	color: #000;
}

hr { display: none; }

/**
 * Images
 */
a img {
	border: none;
}

img.decoration-image-left {
	float: left;

	margin: 25px 25px 0 0;
}

img.decoration-image-right {
	float: right;

	margin: 0 0 25px 25px;
}

/**
 * Other
 */
address {
	font-style: normal;
}
 
/**
 * Headings
 */
h1 {
	border-bottom: solid 1px #d6e2eb; 

	color: #137bc0;

	font-size: 160%;

	margin: .67em 0;
}

h2 {
	color: #8A7460;

	font-size: 120%;

	margin: .83em 0;
}

h3 {
	margin: 1em 0;
}

/**
 * Lists
 */
ul {
	list-style: square;
}

/**
 * Table
 */
table {
	border-collapse: collapse;

	width: 100%;
}

th, 
td {
	border-bottom: 1px solid #CCC;

	padding: 5px;

	text-align: left;
}

tfoot td {
	border-bottom: none;
}

tfoot .price-label {
	font-weight: bold;

	text-align: right;
}

tfoot .price-label span {
	font-weight: normal;
}

/**
 * Other
 */
.clear {
	clear: both;
}

/**
* Container
*/
#container {
	margin: 0 auto;

	width: 930px; 
}

/**
 * By pass
 */
#by-pass-section {
	display: none;
}

/**
* Navigation
*/
#nav {
	background: #137BC0 url("menu-bottom.gif") no-repeat;
	background-position: bottom left;

	font-size: 110%;

	min-height: 45px;
}

#nav ul {
	float: right;

	list-style: none;

	margin: 5px 20px 0 0;
}

#nav li {
	float: left;
}

#nav a {
	color: #FFF;

	display: block;

	text-decoration: none;
}

#nav a span {
	display: block;

	padding: 10px 10px 14px 10px;
	margin: 0;
}

#nav .active, 
#nav li:hover a, 
#nav li.hover a {
	background: url("nav-left.gif") no-repeat top left;

	color: #000;
}

#nav .active span, 
#nav li:hover span,
#nav li.hover span {
	background: url("nav-right.gif") no-repeat top right;
}

#nav li.parent:hover a,
#nav li.parent.hover a { 
	background-image: url("child-hover.gif");
}

#nav li.parent:hover span,
#nav li.parent.hover span { 
	background-image: url("child-hover-right.gif");
}

/**
 * Drop down menu
 */
#nav li ul {
	background: #FFF;

	border: solid 1px #0c476f;
	border-top: none;

	/* move it of the screen so it is not visible */
	position: absolute;

	left: -999em;

	font-size: 90%;

	margin: 0;
	padding: 0;

	width: 150px;

	/* It should overlap other components */
	z-index: 10;
}

#nav li li {
	float: none;
}

#nav li li a {
	background: #0c476f;
	border-top: solid 1px #D8DDE1;

	color: #000;

	margin: 0;
}

#nav .first a {
	border-top: none !important;
}

#nav li.parent:hover li a,
#nav li.parent.hover li a {
	background: #FFF;

	color: #000;
}

#nav li.parent:hover li a:hover,
#nav li.parent.hover li a:hover {
	background: #137BC0;

	color: #FFF;
}

#nav li.parent:hover li span,
#nav li.parent.hover li span { 
	background: transparent;
}

#nav li:hover ul,
#nav li.hover ul {
	left: auto;
}

/**
* Company Name
*/
#name {
	border: none;

	margin: 10px 10px;
	padding: 0;
}

#name a{
	background: url("logo.gif") no-repeat;

	float: left;

	width: 250px;
	height: 70px;
}

#name a span{
	display: none;
}

/**
* Sub Navigation
*/
#sub-navigation {
	float: right;

	margin: 50px 0 10px 0; 
}

#sub-navigation ul {
	list-style: none;
}

#sub-navigation li {
	float: left;
}

#sub-navigation a {
	padding: 5px 10px;

	text-decoration: none;
}

#sub-navigation a:hover {
	text-decoration: underline;
}

#header {
	clear: both;
}

#header-image {
	background: url("/header.jpg") no-repeat;

	float: left;

	margin: 0 0 20px 0;
	padding: 0;

	width: 930px;
	height: 300px;
}

/**
* Core
*/
.item {
	background-repeat: no-repeat;
	background-position: top left;

	padding: 10px 25px;
}

.close-item {
	background-repeat: no-repeat;
	background-position: bottom left; 

	padding: 3px 10px;
	margin-bottom: 10px;
}

/** 
 * Articles
 */
.article {
	border-bottom: solid 1px #d6e2eb; 

	position: relative;

	margin-bottom: 25px;
	padding: 0 0 15px 0;
}

.article h2 { margin: 0 0 0 120px; }

.article h2 a { 
	color: #8A7460;

	text-decoration: none; 
}

.article h2 a:hover { text-decoration: underline;}


.date {
	color: #666;

	font-size: 90%;

	margin: 0 0 0 120px;
}

.article img {
	border: solid 1px #D6E2EB;
	padding: 1px;
}

.article .news-image {
	float: left;

	position: absolute;

	margin: 0 20px 10px 0;

	top: 0;
	left: 0;
}

.article .core {
	margin: 0 0 0 120px;
}

/**
* Content 1
*/
#content-1 {
	float: left;

	margin-right: 10px;

	width: 70%;
}

#content-1 .item {
	background-image: url("content-1-back.gif");
}

#content-1 .close-item {
	background-image: url('content-1-back-bottom.gif');
}

#content-1 p.lead {
	font-size: 130%;
	font-weight: normal;
}

.image-decoration {
	float: left;

	margin-right: 10px;
}

.image-decoration img {
	border: solid 1px #217dbc;

	padding: 1px;
	margin: 5px;
}

/**
* Images list
*/
.images-list {
	background: #FBFBFB;

float: left;

clear: both;

	border: solid 1px #e2dddd;

	list-style: none;

	margin: 0;
	padding: 5px;
}

.images-list li {
	border: solid 1px #137bc0;

	float: left;

	padding: 0;
	margin: 5px;

}

.images-list a {
	display: block;

	height: 100px;

	padding: 1px;
	margin: 0;
}

/**
* Actions
*/
.product {
	border-bottom: solid 1px #d6e2eb; 

	margin-bottom: 10px;
	padding: 10px 0 20px 0;

	float: left;

	width: 100%;
}

.product h2 {
	margin: 0;
}

.product .info {
	color: #000;

	float: left;
	margin: 0 0 0 10px;
	width: 70%;
}

.product .order-link {
	float: right;
}

.product .price {
	color: #217dbc;
}

.product .images {
	float: left;

	text-align: center;

	width: 27.5%;
}

.product .order-element {
	background: #f3faff;

	border: solid 1px #d6e2eb;

	float: left;

	margin: 20px 0;
	padding: 15px 10px;

	width: 95%;
}

/* Images */
.product .images ul {
	list-style: none;

	margin: 10px 0 0 0;
	padding: 0;
}

.product .images li {
	border: 1px solid #d6e2eb;

	float: left;

	margin: 0 0 0 5px;
	padding: 0;
}

.product .images li img {
	display: block;
}

.product .images .extra-image {
	display: none;
}

/**
 * Buttons
 */
button {
	background: #0198CB no-repeat;
}

.order-link,
.place-order-link,
.shop-further-link, 
.update-link,
.previous-link, 
.next-link {
	background-repeat: no-repeat;

	cursor: pointer;

	display: block;

	margin: 10px 0 0 0;

	height: 24px;
	width: 75px;

	border: none;
}

.send-link {
	background-repeat: no-repeat;

	cursor: pointer;

	display: block;

	float: left;

	margin: 10px 0 0 0;

	height: 24px;
	width: 75px;

	border: none;
}

.order-link { width: 73px; background-image: url("buttons/bestel.gif"); }
.place-order-link { width: 141px; background-image: url("buttons/plaats-bestelling.gif"); }
.shop-further-link { width: 142px; background-image: url("buttons/verder-winkelen.gif"); }
.update-link { width: 83px; background-image: url("buttons/update.gif"); }
.previous-link { width: 77px; background-image: url("buttons/vorige.gif"); }
.next-link { width: 97px; background-image: url("buttons/volgende.gif"); }
.send-link { width: 106px; background-image: url("buttons/verzenden.gif"); }

.order-link span, 
.place-order-link span,
.shop-further-link span,
.update-link span,
.previous-link span,
.next-link span,
.send-link span {
	display: none;
}

/**
 * Order navigation
 */
.order-navigation {
	float: left;

	width: 100%;
}

.order-navigation .shop-further-link,
.order-navigation .previous-link {
	float: left;

	margin-right: 10px;
}

.order-navigation .order-link, 
.order-navigation .update-link, 
.order-navigation .next-link {
	float: right;

	margin-left: 10px;
}

/* Delete link */
.order-table .delete-link {
	background: url("delete-icon.gif") no-repeat;

	display: block;

	width: 17px;
	height: 17px;
}

.order-table .delete-link span {
	display: none;
}

/**
* Pagination
**/
.pagination a {
	border: solid 1px #ececec;

	color: #527dbc;

	padding: 5px;

	text-decoration: none;
}

.pagination a:hover {
	border: solid 1px #000;

	color: #000;

	text-decoration: none;
}

.pagination .active:hover,
.pagination .active {
	border: solid 1px #000;
	color: #000;

	text-decoration: none;
}

.pagination .disabled:hover,
.pagination .disabled {
	border: none;

	color: #ececec;

	text-decoration: none;
}

/**
* Content 2
*/
.banner a{
	background: url('banner.jpg') no-repeat top left;

	display: block;

	margin: 0 0 10px 0;

	width: 267px;
	height: 223px;
}

.banner span {
	display: none;
}

#content-2 {
	float: right;

	width: 28.8%;
}

#content-2 .item {
	background-image: url("content-2-back.gif");
}

#content-2 .close-item {
	background-image: url("content-2-back-bottom.gif");
}

.opening {
	font-size: 96%;
}

/**
* Shopping cart
*/
#shopping-cart p {
	margin: 0 0 .5em 0;
}

#shopping-cart .core {
	background: url("shopping-cart.gif") no-repeat;

	padding-left: 75px; 
}

#shopping-cart .sub-total {
	color: #137BC0;
}

#shopping-cart .order-link {
	float: right;
}

/**
 * Footer
 */
#footer {
	background: #FFF url("footer-bottom.gif") no-repeat bottom left;

	clear: both;

	padding: 5px 15px;
}

#footer p { 
	margin: 1em 0; 
}

#footer a {
	padding: 0 5px;
}

/**
 * Copyrights
 */
#copyrights {
	float: left;
}

/**
 * Internal links
 */
#intern-links {
	float: right;
}

/**
 * Creator
 */
#creator {
	color: #9F9D9E;

	float: left;

	margin-top: 10px;
	padding-left: 10px;
}

/**
 * Sponsors
 */
#sponsors {
	float: right;
}

/**
 * Forms
 */
form {

}

/* Field */
.field {
	float: left;

	clear: both;

	float: left;

	margin-bottom: 15px;

	width: 40em;
}

.field label {
	cursor: pointer;

	display: block;

	font-weight: bold;

	padding: 5px 0;
}

.field input,
.field textarea {

}

.field .sub-field {
	float: left;

	margin-right: 1em;
}

.field .label {
	display: block;

	font-weight: bold;
}

.field .required-indicator {
	color: #F00;
}

.field input, 
.field textarea, 
.field select {
	border: 1px solid #137BC0;

	padding: 2px;
}

.field input:focus, 
.field textarea:focus, 
.field select:focus {
	border-color: #000;
}

.field .radio-group input {
	border: none;
}

.field .radio-group label {
	font-weight: normal;

	display: inline;
}

form .error {
	color: #F00;

	clear: both;

	padding: 5px 0;
}

form .actions {
	clear: both;

	padding: 5px;
}

/**
 * Google Maps 
 */
#map {
	border: solid 1px #137BC0;
	margin: 0 auto;
}