/*---------------------------------------------
[Main CSS Stylesheet]

Project:          Style Jibbers
Primary Use:      Screen
Version:          1.1
Date:             26.02.2009.
Last Change:      28.02.2009.
Author:           Davor Eric, davor.eric@post.t-com.hr
---------------------------------------------*/


@import "reset.css";

/* TYPO */

/* general typo */
body  { font-family: arial, sans-serif;  background: url(../images/pattern.jpg);}
a {text-decoration:none;}


img.imgRight, .tblType1 img,.imgLeft img { border:1px solid #4ab9a6; }

.txt  { color: #000; font-weight: bold; font-size: 1.1em; }

/* header & subHeader typo */
#header ul li a,
#header dl a    { color: #fff; font-weight: bold; font-size: 1.1em; text-decoration: none; }
#header ul li a:hover,
#header dd a:hover,
#header dd a.on { color: #666; }

#subHeader li a { color: #666; font-weight: bold; font-size: 1.1em; text-decoration: none; }
#subHeader #checkLink a,
#subHeader li a:hover { color: #000; }

#cartBox span { color: #4ab9a6; font-size: 1.1em; }

/* sidebar typo */
#sidebar ul ul a  { color: #000; font-weight: bold; font-size: 1.1em; text-decoration: none; }
#sidebar ul ul a.on,
#sidebar ul ul a:hover { color: #fff; }

/* content typo */
.breadcrumbs li   { color: #000; font-weight: bold; font-size: 1.3em; }
.breadcrumbs .bkg { color: #fff;}

div.bkg           { color: #fff; font-weight: bold; font-size: 1.3em; }
div.bkg3           { color: #fff; font-weight: bold; font-size: 1em; }
.text li div.bkg  { font-size: 1.1em; }


.tblType1 h2  { color: #000; font-weight: bold; font-size: 1.1em; }
.tblType1 p   { color: #656668; font-size: 1.1em; }

.paging li    { color: #000; font-weight: bold; font-size: 1.3em; }
.paging li a  { color: #000; text-decoration: none; }
.paging li a:hover,
.paging li a.on { color: #4ab9a6; }

.notice { font-size: 1.1em; color: #656668; }

.text h2  { color: #000; font-weight: bold; font-size: 1.3em; }
.text p,
.text li  { color: #000; font-size: 1.2em; line-height: 1.2em; }

p.price  { font-size: 1.9em; font-weight: bold; color: #000; }
p.price span  { font-size: 0.8em; font-weight: bold; }
p.price em  { font-size: 0.7em;  color: #656668; line-height: 0.7em; font-weight: normal; }

/* footer typo */
#footer dl          { font-size: 1.1em; }
#footer dt          { color: #000; }
#footer dd a        { color: #666; text-decoration: none; }
#footer dd a:hover  { color: #4ab9a6; }

/* selectbox replacement typo */
div.selectbox-wrapper ul li.selected,
.selectbox                  { color: #fff; }
div.selectbox-wrapper ul li { font-size: 1em; }

/* CONTENT */

/* general */
#container  { width: 799px; margin: 0px auto; padding: 0px 0; background-color:#fff;}
#wrapper  { overflow: hidden; zoom: 1; padding: 30px 0 20px 48px;}

.txt  { padding: 2px; }

/* header & subHeader */
#header { background: url(../images/headerBkgMiddle.gif) top left repeat-y; overflow: hidden; zoom: 1; padding: 0 39px 0 0; }
#header .inner  { background: url(../images/headerBkgTop.gif) top left no-repeat; }

h1    { padding-left: 49px; float: left; }
h1 a  { background: url(../images/logo.gif); display: block; width: 305px; height: 71px; text-indent: -9000px; }

#header dl     { float: right; margin: 14px 0 0 0; width: 57px; }
#header dt     { text-indent: -9000px; background: url(../images/choseLang.gif); width: 57px; height: 28px; }
#header dd     { float: right; padding-top: 2px; }
#header dd a   { display: block; padding: 2px 4px; }
#header dd .on { background: #fff; }

#header ul    { float: right; clear: right; margin: 10px 0 14px 0; border-left: 2px solid #fff; }
#header ul li { float: left; padding: 2px 13px; border-right: 2px solid #fff; }

#subHeader  { background: url(../images/headerBkgBottom.gif) top left no-repeat; padding: 8px 39px 0 48px; overflow: hidden; zoom: 1; }

#subHeader li           { float: left; margin-right: 3px; }
#subHeader li a         { display: block; margin-top: 8px; padding: 0 0 3px 11px; }
#subHeader #checkLink a { border-bottom: 2px solid #808080; }

#cartBox      { height:26px; background: url(../images/ICONbag.gif) 83px 0px no-repeat; padding: 5px 24px 0 0; }
#cartBox span { display: block; background: #000; width: 81px; text-align: center; padding: 3px 0 2px 0; }

#subHeader form         { float: right; }
#subHeader form div     { background: #49a496 url(../images/subHeaderFormBkg.gif) top left repeat-x; margin-top: -6px; padding: 22px 6px 7px 6px; float: left; }
#subHeader form .txt    { width: 146px; }
#subHeader form .button { display: block; margin: 10px 0 0 10px; float: left; }

/* sidebar */
#sidebar  { width: 149px; float: left; }

#sidebar ul a     { display: block; text-indent: -9000px; }
#sidebar ul li    { margin-bottom: 30px; }
#sidebar ul ul a  { display: block; text-indent: 0px; padding: 2px 2px 2px 4px; }
#sidebar ul ul li { margin: 2px 0 0 0; width: 85px; }

#sidebar ul ul a.on,
#sidebar ul ul a:hover { background: #49a496; }

#mainNavLink1 { background: url(../images/mainNav1.gif); width: 87px; height: 31px; }
#mainNavLink1:hover,
#mainNavLink1.on { background-position: 0 -31px; }
#mainNavLink2 { background: url(../images/mainNav2.gif); width: 55px; height: 31px; }
#mainNavLink2:hover,
#mainNavLink2.on { background-position: 0 -31px; }
#mainNavLink3 { background: url(../images/mainNav3.gif); width: 87px; height: 39px; }
#mainNavLink3:hover,
#mainNavLink3.on { background-position: 0 -39px; }
#mainNavLink4 { background: url(../images/mainNav4.gif); width: 66px; height: 36px; }
#mainNavLink4:hover,
#mainNavLink4.on { background-position: 0 -36px; }
#mainNavLink5 { background: url(../images/mainNav5.gif); width: 79px; height: 31px; }
#mainNavLink5:hover,
#mainNavLink5.on { background-position: 0 -31px; }


/* content */
#content  { float: left; width:575px;}

.breadcrumbs      { overflow: hidden; zoom: 1; margin-bottom: 14px; }
.breadcrumbs li   { display: block; float: left; margin: 3px 9px 0 0; }
div.bkg,
.breadcrumbs .bkg { background: url(../images/ICONcat.gif) top left repeat-x; margin-top: 0px; padding: 2px 4px 3px 4px; float: left; }
div.bkg            { margin-bottom: 12px; }

.breadcrumbs li a   { text-decoration:none; color: #000; }
.breadcrumbs li a:hover { color: #4ab9a6; }


.tblType1     { margin-bottom: 15px; }
.tblType1 td  { vertical-align: top; padding: 0 12px 10px 0; width: 130px; }
.tblType1 img { display: block; margin-bottom: 5px; }
.tblType1 h2  { margin-bottom: 3px; }

.paging         { text-align: center; margin-bottom: 10px; }


.paging li      { display: inline; padding: 0 5px; }
.paging li span { margin: 0 -2px; }

#content .wrapp { width: 568px; overflow: hidden; zoom: 1; margin-bottom: 30px; }
.imgRight       { float: right; display: block; margin: 0 0 15px 20px; }
.imgLeft        { float: left; display: block; margin: 0 20px 15px 0; }
.text           { overflow: hidden; zoom: 1;}
.text h2        { clear: left; margin-bottom: 10px; }
.text p         { margin-bottom: 15px; text-align: justify; }

div.imgLeft img         { display: block; margin-bottom: 20px; }
div.imgLeft ul li       { float: left; margin-right: 3px; }
div.imgLeft ul li.last  { margin-right: 0; }
div.imgLeft ul li img   { margin: 0; cursor: pointer; }

.price  { display: block; clear: left; }

#selectProduct ul     { overflow: hidden; zoom: 1; margin-bottom: 20px; }
#selectProduct li     { float: left; width: 85px; }
#selectProduct .bkg   { margin-bottom: 17px; }

#selectProduct .bkg3 { background: url(../images/ICONcat.gif) top left repeat-x; width:50px; padding: 2px 4px 3px 4px; color:white;}

#selectProduct select { display: block; clear: left; width: 75px; }

.notice { text-align: center; }

/* footer */
#footer         { background: url(../images/footerItem.gif) 197px 13px no-repeat;  padding-bottom:30px;  border-bottom:1px solid #4ab9a6;}
#footer .inner  { background: url(../images/footerItem.gif) 197px bottom no-repeat; padding: 0 0 0 217px; overflow: hidden; zoom: 1; }

#cclogos  {  text-align:center;display: block; width:799px; margin-top:30px; padding-left:0px;}
#cclogos  a{margin-left:10px;margin-right:10px;}

* html #cclogos { width:747px;}

#companyinfo  {color:white; text-align:center;display: block; width:799px; margin:20px auto;}
#companyinfo  a{color:white}
#companyinfo  a:hover{color:black}


#footer dl  { width: 148px; padding-right: 6px; margin-top: 13px; border-right: 2px solid #000; float: left; }
#footer dt,
#footer dd  { text-align: right; margin-bottom: 3px; }

#newsletter         { float: right; width: 240px; }
#newsletter div     { background: url(../images/newsletterBkg.gif); width: 151px; height: 40px; padding: 6px; margin: 13px 8px 0 0; float: left; }
#newsletter .button { display: block; float: left; }

/* SELECTBOX REPLACEMENT */
div.selectbox-wrapper { position: absolute; width: 80px;  Xoverflow:hidden; }
.selectbox            { padding: 2px; width: 76px; display : block; text-align:left; background: #000 url(../images/bg_select.gif) top right no-repeat; height: 17px; cursor: pointer; }

div.selectbox-wrapper ul              { border: 1px solid #000; background: #fff; width: 78px; }
div.selectbox-wrapper ul li           { cursor: pointer; padding: 2px; }
div.selectbox-wrapper ul li.selected  { background-color: #000; }


/* USER FORMS */
.userForms{
	display:block;
	width:210px;	
	min-height:350px;
	margin:0px auto;
	font-size:11px;
	margin-bottom:150px;
	margin-top:20px;

}

.userForms label{
	float:left;
	display:block;
	width:210px;
	margin:5px 5px;
	margin-bottom:1px;
}
.userForms label>span.small{
	font-size:10px;	
	color:#4ab9a6;
}

.userForms a{
text-decoration:none;
color:blue;
}

.userForms input{
  float:left;
	width:200px;
	height:14px;
	border:1px solid #4ab9a6;
	margin-left: 5px;
	margin-top: 2px;
	padding:2px;
}




.userForms select{
	float:left;
	width:200px;
	height:20px;
	border:1px solid #4ab9a6;
	margin:5px;
	margin-top:1px;
	padding:2px;
}

.userForms button{
 float:left;
 border:1px solid #4ab9a6; 
 color:white;
 background-color:#000;
 width:200px;
 height:30px;
 padding:0px;
 margin-top:20px;
 margin-right:100px;
 margin-left:10px;


}

button {
  cursor:pointer;
}

.userForms button:hover{
  	color:#4ab9a6;
}

.userForms .invalidUserFormData{
	display:block;
	padding:10px;
	width:130px;
	border:1px solid #6abaa8;
	background:black;
	color:white;
}

.userForms .validUserFormData{
	display:block;
	padding:10px;
	width:260px;
	border:1px solid #6abaa8;
	background:black;
	color:white;
}



.userForms label.errorField{
	float:left;
	display:block;
	width:200px;
	margin:5px 5px;
	margin-bottom:1px;
	border:1px solid #6abaa8;
	padding:3px 2px 3	px 2px;
	background:black;
	color:white;
}
.errorMessage{
	display:block;
	padding:10px;
	border:1px solid #6abaa8;
	background:black;
	color:white;
}



/** cartItems **/

#cartItems th{
	color:#000;
	font-size:12px;
	font-weight:bold;
	background:#4ab9a6;
	padding:5px;
	width:100px;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
}

#cartItems td{
	width:100px;
	font-size:12px;
	padding:10px;
	border:1px solid #6abaa8;
}

#cartItems tr{
	padding:10px;
}


.removeCartItem{
	color: #4ab9a6;
}

.over{
	color: #000;
	cursor:pointer;
}

.searchResults{
 margin-top:20px;
 font-family:arial,sans-serif;
 font-size:12px;
 
}

.searchResults img{
 margin:20px;
 
}

.searchResults a{
 text-decoration:none;
 color:#4ab9a6;
}

.searchResults .more{
 float:right;
 display:block;
 height:20px;
 margin-right:50px;
 text-decoration:none;
 color:#4ab9a6;
 
}

.searchResults h3{
 font-weight:bold;
 
 color:black;
 
}
/** payment */
	
.checkoutNow{
 float:right;
 border:1px solid #4ab9a6; 
 color:white;
 background-color:#000;
 width:100px;
 padding:5px;
 margin-top:20px;
 margin-left:5px;
 text-align:center;
 
 
}

.outerframe{
  border-left:1px solid #4ab9a6;
  border-right:1px solid #4ab9a6;
}

.checkoutNow a{
  display:block; 
  color:white;
  text-decoration:none;
}

.checkoutNow a:hover{
  color:#4ab9a6;
}


#errorPayment{
 margin:20px auto;
 border:1px solid #4ab9a6; 
 color:white;
 background-color:#000;
 width:200px;
 padding:5px;
 margin-top:20px;
}

#errorPayment a{
  color:#6abaa8;
  text-decoration:none;
}

#errorPayment a:hover{
  color:#fff;
}

#cartnotice p{
  margin-top:20px;
  margin-bottom:20px;
}

#terms{ float: left; width:575px;}

#terms li {
  margin:20px;
}

#terms p{
  margin 20px; 
}
#terms h3 {

  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
  margin-top:10px;

}

#terms h4 {

  font-size:12px;
  font-weight:bold;
  margin-bottom:10px;
  margin-top:10px;
}