/*
 * an zeneral - text Arial, naslovi Arial, navigacija Arial
 * CSS i html po ugledu na The Jello Mold Piefecta Layout,
 * http://www.positioniseverything.net/articles/jello-expo.html 
 * http://www.positioniseverything.net/articles/jello.html
 * http://www.positioniseverything.net/articles/sidepages/jello-piefecta-clean.html
 * min-width je 778px, max-width je 778px, 778/2 = 389, percentage = 0% :-(
 * 
 */
html, body, dl, dt, dd, FORM {
  margin: 0; 
  padding: 0;
  border: 0;
  list-style: none;
}

body {
  padding: 50px 389px 50px 389px; /* the critical side padding that sets the natural min-width! */ 
  margin: 0;
  background: #ffffff url(/images/bg_body.gif); /* this BG tiles the area outside the columns */
  color: #000;
  font-family: Arial, Tahoma, Verdana, Georgia, sans-serif; 
  font-size: 100.01%; /* this body font-size fixes an IE bug and maintains x-browser uniformity */ 
  text-align: center; /* centers the #sizer element in IE5.x/win */
}

#sizer {
  margin: 0 auto 0 auto;
  padding: 0;
  text-align: left; /* resets the default text alignment for the page */
  width: 0%; /* this value controls liquidity; 0% = full rigid, 100% = full liquid */
  max-width: 0px;  /* version for IE is at the bottom of this style block */
}

#expander { /* Any % height here causes IE to lose the neg right margin */
	margin: 0 -389px 0 -389px; /* neg side margin values should be < or = to side body padding */
	min-width: 778px; /* This prevents Safari from losing the negative margins in narrow windows */ 
	position: relative; /* makes #expander visible outside #sizer in IEwin */
} 

/*\*/
* html #expander {height: 0;} 
/* #expander must have "height: 0" in IEwin bug fixing */

/* The above is a modified Holly hack for #expander, with zero substituted for the 
usual 1% height value. Any % value on this element causes a horrendous IE bug! */ 


#wrapper1 {
  position: relative;
  font-size: 12px; /* set global font-size here */ 
  border: 0px solid #da5;
  background: url(/images/bg_leftcol.gif) repeat-y; /* this BG tiles the left column */
  height: 100%;
} /* this positioning may be needed for IEwin if page is to contain positioned elements */

#wrapper2 {  
  position: relative; /* extra insurance against bugs in IEwin */
  background: transparent; /* this BG tiles the right column */
  height: 100%;
}


/****************** Main Page Structure *****************/

/* To modify the side column widths and the col divider widths, the values that are 
marked "critical" and also refer to the desired mod MUST be changed as a group. */


.outer {
  background: #ffffff; /* this BG tiles the center column */
  border-left: 0px solid #253A7A; /*** Critical left divider dimension value ***/
  border-right: 0px solid #253A7A; /*** Critical right divider dimension value ***/
  margin-left: 240px;    /*** Critical left col width value ***/
  margin-right: 0px;    /*** Critical right col width value ***/
  height: 100%;
}

.float-wrap {
  float: left;
  width: 100%;
}

.center {
  float: right;
  width: 100%;
}

.left {
  float: left;
  position: relative; /* Needed for IE/win */
  width: 240px;    /*** Critical left col width value ***/
  margin-left: -240px;    /*** Critical left col width value ***/ /*** Critical left divider dimension value ***/
}

.right {
	float: right;
	position: relative; /* Needed for IE/win */
	width: 0px; /*** Critical right col width value ***/
	margin-right: -0px; /*** Critical right col width value ***/
	margin-left: 0px; /*** Critical right divider dimension value ***/
	display: none;
	visibility: hidden;
}

.centerbox {
  font-weight: bold;
  text-align: justify;
  overflow: visible;
  width: 100%;
}

.container-left { padding-bottom: 80px; }

.container-right { padding-bottom: 80px;} /* makes room for the froggy */


/*************** Header and Footer elements *****************/

.header {
  width: 100%;
  padding: 0px 0px 1px 0px;
  margin: 0px 0px 0px 0px;
  background-color: #FFFFFF;
  font-size: 11px;
  font-family: Arial, Tahoma, Verdana, Georgia, sans-serif;
}

/*\*/
* html .header { }
/* IEwin hack needed because the "jello" BG is in a positioned wrapper and shows
variance. IEwin does not support fixed backgrounds on elements other than the body */

.header .header-line1 {
	padding: 0 10px 15px 20px;
	height: 28px;
}

.header .header-language {
	float: left;
}

.header .header-search {
	padding-top: 5px;
	padding-left: 8px;
	float: right;
	display: block;
	width: 240px;
	height: 25px;
	background-color: #E3E3E3;
	border-left: 3px solid #848484;
}

.header .header-search FORM {
	display: inline;
}

.header .header-search .input {
	font-size: 11px;
	background-color: white;
	border : 1px solid #CCCCCC;
	margin: 0;
	padding: 1px 2px;
	width: 125px;
}

.header .header-search .submit {
	margin: 0;
	padding: 0px 2px;
	width: 35px;
	color: white;
	background-color: #B7233C;
	border : 1px solid #C95A6D;
	font-size: 10px;
}

.header .header-line2 {
	padding: 0 0px 0px 0px;
	margin: 0;
	height: 150px;
}

.header .logo {
	float: left;
}

.header .logo IMG {
	border: 0;
	padding: 0;
	margin: 0;
}

.header .header-banner {
	float: left;
	padding: 0 0px 0px 10px;
}

.header .header-banner P {
	margin: 0; 
	padding: 0;
}

.header .horiz-navigation {
	height: 40px;
	background-color: #2C333B;
	padding: 0px 0 0 20px;
	margin: 10px 10px 15px 0;
}

.footer {
  font-size: 11px; /* set global font-size here */ 
  clear: both;
  padding: 6px 0 4px 0;
  position: relative;
  background-color: #696969;
  border: 0px solid #333333;
  color: #E1E1E1;
  height: 16px;
}

.footer p { 
  margin: 0px 0 0 0px; 
  text-align: center;
}

.footer #ms {
	position: absolute; 
	top: 7px; 
	right: 4px;
  font-size: 9px;	
}

.footer #ms a {
  color: #E1E1E1;
}

/************** Spacing Controls for various column contents ***************/

.outer ul, .outer OL {
  text-align: left;
  margin: 1em 0;
  padding: 0 2em;
}

.outer UL UL, .outer OL UL{
  text-align: left;
  margin: 0;
  padding: 0 2em;
}

.central-column-textpadder {
	padding: 0 10px 20px 10px;
}

.central-column-textpadder P{
	line-height:1.5em;
}

.central-column-textpadder LI{
	list-style:none;
	background: transparent url(/images/red_arrows.gif) no-repeat 0px -2px;	
	padding:0px 0px 7px 12px;
	margin: 0px;
	line-height:1.5em;
}

.left-column-textpadder {
	padding: 0 10px 20px 20px;
}

.right-column-textpadder {

}
/************** Generic Rules *************/

a { 
	color: #356fa0;
	text-decoration: none;
    background-color: transparent;
}

a:hover {
	color: #B7233C;
	text-decoration: underline;
}

A.red {
	color: #B7233C;
	font-weight: bold;
}

p { margin: 1em 0 0 0;}

h1 {
  font-size: 14px; 
  font-family: arial, tahoma, sans-serif;
  text-align: left; 
  margin: 1em 0 0 0; 
  font-weight: bold;
  border-left: 4px solid #D8733F;
  padding: 8px 6px;
  background: url(/images/h1-bg.gif) repeat-x left bottom;
}

h1.first {
	margin: 0;
}

h2 {
  font-size: 12px; 
  font-family: arial, tahoma, sans-serif;
  text-align: left; 
  font-weight: bold;
  border-bottom: 1px dotted #B1B1B1;
  padding: 2px 0px;
  margin: 1em 0 0 0; 
  color: #D8733F;
}

h3 {
	font-size: 12px;
	margin: 1em 0 .1em;
	padding: 0;
}

.alignright {margin: 0 1em 1em 0; text-align: right;}

.small {font-size: .8em;}


/************** Special Fixes *************/

.outer {word-wrap: break-word;}
/* Prevents long urls from breaking layout in IE, must 
be hidden in a conditional comment for CSS to validate */

img { /* max-width: 100%; */} 
/* prevents oversize images from breaking layout in browsers that support max-width */

/* \*/
* html #wrapper1,
* html #wrapper2,
* html .outer a, 
* html .container-left, 
* html .container-right,
* html .outer,
* html h2
{height: 1%;}
/* Holly hack */


/*** Variance fixes for IEwin ***/

/*\*/
* html .outer p { margin-right: -6px; }
/* */


/**************** Utility Rules *******************/

/*\*/ /*/
.sidenav a:hover {position: relative;}
/* this fixes an IEmac hover bug in the left column, hidden from other browsers */


.brclear { /* Use a break with this class to clear float containers */
  clear:both;
  height:0;
  margin:0;
  font-size: 1px;
  line-height: 0;
}

.clicker {
  display: block;
  text-align: center; 
  padding: 3px; 
  background: #833; 
  cursor: pointer;   
}

.hide {display: none;}

/**************** Language Menu *******************/

.header-language UL {
	margin: 0;
	padding: 0;
}

.header-language LI {
	margin: 0;
	padding: 5px 0px 0px 0px;
	list-style: none;
	text-align: left;
	border-left: 1px solid #959595;
	float: left;
}

.header-language LI A {
	color: #000000;
	margin: 0;
	padding: 15px 10px 0 5px;
	display: block;
}
 
.header-language LI.active A {
	color: #ACACAC;
}
 
.header-language LI A:hover {
	color: #C4C4C4;
	text-decoration: none;
}

/**************** Horizontal Menu *******************/
.horiz-navigation UL {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.horiz-navigation LI {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	text-align: left;
	float: left;
}

.horiz-navigation LI A {
	color: #FFFFFF;
	display: block;
	padding: 16px 11px 5px 6px;
	text-decoration: none;
	background: url(/images/nav-v-line.gif) no-repeat left top;
}
 
.horiz-navigation LI.active A {
	color: #ee783b;
	font-weight: bold;
}
 
.horiz-navigation LI A:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

/**************** Product Menu *******************/
#menu {
	padding-bottom: 25px;
}

#product-menu {
	border-top: 2px solid #B9B9B9;
	padding-bottom: 25px;
}

#menu LI.first {
	border-top: 2px solid #B9B9B9;
}

#menu UL, #product-menu UL {
	margin: 0;
	padding: 0;
	font-size: 12px;
	list-style: none;
}

#menu UL LI DIV, #product-menu UL LI DIV {
	margin: 0;
	text-align: left;
	padding: 9px 0 7px 15px;
	background: transparent url(/images/red_arrows.gif) no-repeat 2px 6px;
	border-bottom: 1px dotted #B9B9B9;
}

#menu UL LI A, #product-menu UL LI A {
	display: block;
	color: #356fa0;
}

#menu UL LI A:hover, #product-menu UL LI A:hover {
	color: #356fa0;
	text-decoration: underline;
}

#menu UL LI.with-children DIV, #product-menu UL LI.with-children DIV {
	padding: 9px 0 7px 2px;
	background: none;
}

#menu UL LI.with-children LI DIV, #product-menu UL LI.with-children LI DIV {
	padding: 9px 0 7px 5px;
	background: none;
}

#menu UL LI.with-children LI A, #product-menu UL LI.with-children LI A {
	padding-left: 7px;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: white; /* none */
}

#menu UL LI.active-path, #product-menu UL LI.active-path {
	font-weight: bold;
}

#menu UL LI.active-path LI, #product-menu UL LI.active-path LI {
	font-weight: normal;
}

#menu UL LI.active, #product-menu UL LI.active-path LI.active, #product-menu UL LI.active, #product-menu UL LI.active-path LI.active {
	font-weight: bold;
}

/**************** Box Menu *******************/
#left-boxes {

}

.box-menu UL {
	margin: 0;
	padding: 0;
	font-size: 12px;
	list-style: none;
	background-color: #444D61;
}

.box-menu UL LI A {
	display: block;
	padding: 8px 0px 6px 18px;
	color: #CED7E1;
	text-decoration: none;
	background: transparent url(/images/lightblue_arrow.gif) no-repeat 3px 10px;
	border-bottom: 1px solid white;

}

.box-menu UL LI A:hover {
	color:#FFF;
	text-decoration: none;
	background: transparent url(/images/white_arrow.gif) no-repeat 5px 10px;
}

/**************** Products *******************/
#search, #product-list {
	color: #333;
}
#search .product H2{
	color: #333;
}

#search H1, #product-list H1 {
	color: #ffffff;
	text-transform: capitalize;
	background: transparent url(/images/product_title_arrow.gif) no-repeat 0px 13px;
	padding: 10px 0px 10px 10px;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	border-left: none;
	background-color: #777777;
}

.product-category-description {
	margin: 10px 25px;
	border-left: 2px solid #DBDBDB;
	padding-left: 10px;
}

.product {
	width: 249px;
	float: left;
	margin: 10px 5px 20px 5px;
	padding: 0;
	display: inline;
}

.product-double {
	width: 510px;
	float: left;
	margin: 10px 5px 20px 5px;
	padding: 0;
	display: inline;
}

#search H2, #product-list h2 {
	color: #333;
	font-weight: bold;
	background-color: #EEEEEE;
	padding: 10px 0 10px 10px;
	margin: 0 0 10px 0;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px dotted #CCCCCC;
	border-left: none;
}

.search-info-container {
	border-bottom: 1px dotted #CCCCCC;
	margin: 0 0 0.5em 0;
}

#search .search-info-container H2 {
	font-weight: bold;
	background-color: transparent;
	padding: 2px 0px;
	margin: 0.5em 0 0 0; 
	border: none;
	font-size: 14px;
}

.search-info-container .teaser {
	padding: 2px 0px;
	margin: 0 0 1em 0; 
}

.product-container {
	width: 100%;
}

.product-specs-size1 { float: left; width: 140px; }
.product-specs-size2 { float: left; width: 248px; }
.product-specs-size3 { float: left; width: 301px; }
.product-specs-size4 { float: left; width: 401px; }
.product-specs-size5 { float: left; width: 510px; }

.product-container UL {
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-container LI {
	padding: 1px 0 8px 12px;
	background: transparent url(/images/orange_dot.gif) no-repeat 0 4px;
}

.product-image-size1 { float: left; text-align: center; width: 108px; }
.product-image-size2 { float: left; text-align: center; width: 208px; }
.product-image-size3 { float: left; text-align: center; width: 308px; }
.product-image-size4 { float: left; text-align: center; width: 408px; }
.product-image-size5 { float: left; text-align: center; width: 508px; }

.product-navigation {
	margin-top:15px;
	padding: 15px 0px 10px 0px;
	height: 25px;
	border-bottom: 1px dotted #B9B9B9;
	border-top: 1px dotted #B9B9B9;
}

.product-navigation .l {
	float: left;
}

.product-navigation .r {
	float: right;
}

.product-navigation .r TABLE {
	border-collapse: collapse;
}

.product-navigation .r TABLE TD {
	padding-left: 4px;
}

.product-navigation .p {
	text-align: center;
}

.product-navigation A {
	color: white;
	display: block;
	background-color: #777777;
	float: left;
	padding: 1px 5px;
	margin: 2px 2px;
}

.product-navigation SELECT {
	font-size: 10px;
}

#search .product-navigation TD {
	white-space: nowrap;
}

#search .product-navigation .p {
	background-color: transparent;
}

#search .product-navigation A {
	background-color: #D8733F;
	font-weight: bold;
	padding: 1px 5px;
	margin: 2px 2px;
	float: left;
}

#search .product-navigation A:hover {
	background-color: #ff8c00;
	text-decoration: none;
}

#search .product-navigation A.active {
	background-color: #C7C9CF;
	color: #444D61;
}

#search .product-navigation {
	border-bottom: none;
}

#search .emphasize {
	color: #D8733F;
	font-weight: bold;
}

#search .search-explanation {
	margin: 20px 0 0 0;
	border: 1px solid #D8733F;
	border-left-width: 3px;
	padding: 12px 0 12px 37px;
	background: transparent url(/images/search-magnifier.gif) no-repeat 8px 7px;
}

/*********************************
 * standard elements
 *********************************/
 

/*********************************
 * list standard elements 
 *********************************/

/*********************************
 * VIP login
 *********************************/
#vip-login {
	margin: 0 0 12px 0;
	background: #E4E7EB url(/images/bg_vip_form_head.gif) repeat-x;
	padding: 0 10px;
}

#vip-login .head {
	font-weight: bold;
	height: 22px;
	margin: 0;
	padding: 7px 0 0 10px;
	text-align: left;
	margin-bottom: 10px;
}
 
#vip-login LABEL, #vip-login INPUT {
	display: block;
	width: 85px;
	float: left;
	margin-bottom: 10px;
}

#vip-login LABEL {
	width: 85px;
	text-align: right;
	padding: 3px 5px 0 0;
	font-size: 12px;
}

#vip-login BR {
	clear: left;
}

#vip-login .vip-submit {
	margin-left: 90px;
	background-color: #B7233C;
	color: #ffffff;
	border: 1px solid #7E1829;
	border-top-color: #C95A6D;
	border-left-color: #C95A6D;
	font-size: 10px;
	padding: 2px 0;
	display: inline;
}

.contact-table-form {
	margin-top: 1em;
}
 
/*********************************
 * vesti
 *********************************/
#news-page {
}

#news-page .news-date {
	width: 30px;
	height: 30px;
	float: left;
	text-align: center;
}

#news-page .news-date .news-date-date {
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #A0A0A0;
	height: 18px;
}

#news-page .news-date .news-date-month {
	font-size: 10px;
	font-weight: normal;
	color: #FDC689;
	background-color: #D8733F;
	height: 12px;
}

#news-page .news-content {
	margin-left: 40px;
}

#news-page H1 {
	margin: 0 0 0 0;
	border-left: none;
	padding: 8px 0;
}

#news-page .news-body {
	line-height: 1.5em;
	margin: 1em 0;
	padding: 0;
}

#news-page .news-other {
	background-color: #D8733F;
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
	padding: 7px;
}

#news-page H2 {
	position: relative;
	border-bottom: none;
}

#news-page H2 A {
	position: absolute;
	left: 40px;
}

#news-page H2 SPAN {
	width: 40px;
	color: #ACACAC;
	font-weight: normal;
	display: inline;
}

#news-page .date-divider {
	border-top: 1px dotted #B1B1B1;
	border-bottom: 1px dotted #B1B1B1;
	margin: 5px 0;
	padding: 2em 0 0.5em 0;
}

#news-page .date-divider-first {
	border-top: none;
	border-bottom: 1px dotted #B1B1B1;
	margin: 5px 0;
	padding: 1em 0 0.5em 0;
}

#news-page .date-divider-last {
	border-top: 1px dotted #B1B1B1;
	border-bottom: none;
	margin: 0px 0;
	padding: 0;
}

#menu LI.first {
}

#menu LI.first SPAN {
	font-weight: normal;
	position: absolute;
	right: 10px;
	text-align: right;
	color: #D8733F;
}


/******************************
 * attachments
 ******************************/
 
UL.attachments {
	margin: 0 0 1em 0;
	padding: 0;
}

 
UL.attachments LI {
	margin: 0;
	padding: 0.6em 0.5em 0px 1em;
	list-style: none;
}

/****************** Newsletter *******************/

#left-newsletter {
	background: url(/images/bg_newsletter.gif) no-repeat;
	display: block;
	height: 100px;
	width: 190px;
	padding: 8px;
}

#left-newsletter INPUT {
	margin-top: 4px;
	font-size: 10px;
	width: 132px;
	border : 1px solid #CCCCCC;
}

#left-newsletter .submit {
	background-color: #B7233C;
	border : 1px solid #C95A6D;
	color: white;
	margin-top: 10px;
	margin-right: 0px;
	width: 65px;
}

.box-p3 {
	border: 1px solid #D0D2D4;
	border-left: 3px solid #D0D2D4;
	margin-right: 9px;	
	margin-top: 10px;
	width: 163px;
	height: 219px;
	display: inline;
}

.box-p3-content {
	vertical-align: top;
	padding: 5px;
	font-size: 11px;
}

.box-p4 {
	border: 1px solid #F29261;
	border-left: 3px solid #F29261;
	margin-right: 9px;	
	margin-top: 10px;
	width: 163px;
	height: 219px;
	display: inline;
}

.box-p3-content {
	vertical-align: top;
	padding: 5px;
	font-size: 11px;
}