/**
 * Mikkis screen styles
 * Author: Nikola Topalovic @ http://beast1e.com/
 * $Date: 2007/09/11 16:00$
 */

/* =Clean slate */

html, body, form, fieldset {
	margin: 0;
	padding: 0;
	background: #FFF;
	color: #000;
	font: 100%/100% Arial, sans-serif;	
}
h1, h2, h3,  h6, p, pre,
blockquote, ul, ol, dl, address, table {
	margin: 1em 0;
	padding: 0;
}
p { margin-top: 0; }
li, dd, blockquote { margin-left: 1em; }
input, select, textarea { font-size: 100%; }
blockquote { font-style: italic; }
address { font-style: normal; font-weight: bold; }


/* =Page structure */

body {
	background: #FFF url(/images/header-bg.jpg) repeat-x;
}

#wrap {
	width: 770px;
	margin: 0 auto;
	position: relative;
	font-size: 12px;
}

#content {
	position: relative;
	overflow: hidden;
	background: url(/images/content.jpg) no-repeat 0 8px;
	/*line-height: 1.2; */
}

#main {
	float: right;
	width: 536px;
	min-height: 520px;
	padding: 0 15px;
	background: url(/images/main.gif) repeat-y;
}

.product-page #main, .contact-page #main { width: 506px; padding: 0 30px; }

#side {
	float: left;
	width: 203px;
	margin-top: 5px;
	min-height: 1000px;
}


/* Headings */

h1 { font-size: 25px; font-family: Impact, sans-serif; color: #1E5F8D; text-transform: uppercase; margin: 0 0 15px 0; padding: 15px 10px; background: url(/images/h1-bg.jpg) no-repeat top left; font-weight: normal;}
h2 { font-size: 18px; font-family: Impact, sans-serif; color: #FAA434; text-transform: uppercase;font-weight: normal;}
h3 { font-size: 1.1em;font-weight: normal; }
h4 { font-size: 19px; margin-top: 0; color: #EF9215; font-family: Impact, sans-serif;  font-weight: normal; }
h5 { font-size: 19px; margin-top: 0; color: #1E5F8D; font-family: Impact, sans-serif;  font-weight: normal; }
#box-intro h1 { font-size: 1.33em; margin-top: 0; font-family: Arial ; text-transform: none; background: none; } /* For homepage */
.product-page h1, .contact-page h1 { margin-left: -15px;}


/* Links */

a { color: #1F82A2; text-decoration: none; }
a img { border: none; }

/* =Header */

#header {
	height: 144px;
	background: url(/images/header.jpg) no-repeat;
	position: relative;
}

#logo { margin: 0; }

#logo a {
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	width: 300px;
	height: 100px;
	overflow: hidden;
	text-indent: -999em;
}


/* =Nav */

#nav {
	position: absolute;
	overflow: hidden;
	top: 101px;
	right: 0;
	margin: 0;
	padding: 0;
}

#nav li {
	list-style: none;
	float: left;
	margin: 0 2px 0 0;
	padding: 0;
	width: 91px;
}

#nav a {
	display: block;
	width: 82px;
	height: 18px;
	margin: 0 auto;
	text-indent: -999em;
	font-size: 1px;
	line-height: 1px;
	background-position: left bottom;
}

#nav a:hover, #nav a:focus, #nav a:active { background-position: left top; }
#nav a.current { background-position: left 50%; }

#nav-home { background: url(/images/nav-home.gif) no-repeat; }
#nav-company { background: url(/images/nav-company.gif) no-repeat; }
#nav-artwork { background: url(/images/nav-artwork.gif) no-repeat; }
#nav-pricing { background: url(/images/nav-pricing.gif) no-repeat; }
#nav-contact { background: url(/images/nav-contact.gif) no-repeat; }
#nav-sitemap { background: url(/images/nav-sitemap.gif) no-repeat; }
#nav-ordering { background: url(/images/nav-order.gif) no-repeat; }
#nav-quote { background: url(/images/nav-quote.gif) no-repeat; }


/* =Main content */

#main {
	padding-top: 10px;
}

.holder { overflow: hidden; }
* html .holder { overflow: visible; height: 1%; } /* TODO: IE! */


/* Category page */


/*This would contain the product descript + image on the right side*/
#product-present {
overflow:hidden;
margin-bottom:0;
padding-bottom:0;
width:532px;
_width:536px;
_width:533px;
position:relative;
}

#cat-desc {
	float:left;/*description text with background orange footer positionned at left*/
	background: white url(/images/BGpart1.gif) no-repeat bottom left;
	width:365px;
	_width:361px;
	overflow:auto;	
	margin-right:0px;
}

			
/*This is a box that contains the product image as a background graphic*/
.ImagePos {
/*load image into CMS*/
background: white url(/images/BGpart2bigger.gif) no-repeat bottom left;
padding:0;margin:0;

width:167px;
height:397px;

/*positioned at bottom right*/
position:absolute;
margin:0;
margin-left:365px;
_margin-left:0px;
margin-bottom:0px;
padding-bottom:0px;
bottom:1px;
_bottom:0px;
}


html>body .ImagePos {
*position: absolute;
*bottom:1px;
*margin-left:0px;
}


#cat-desc p{
	margin-right:0px;
	width:345px;
	margin-bottom:25px;
}

#cat-desc-stress {
	padding-right: 170px;
	padding-bottom: 10px;
	background: url(/images/stress-back.jpg) no-repeat bottom right;
}
#cat-desc-drinks {
	padding-right: 170px;
	padding-bottom: 10px;
	background: url(/images/drinks-back.jpg) no-repeat bottom right;
}
#cat-desc-pens {
	padding-right: 170px;
	padding-bottom: 10px;
	background: url(/images/pens-back.jpg) no-repeat bottom right;
}
#cat-desc-recycled {
	padding-right: 170px;
	padding-bottom: 10px;
	background: url(/images/recycled-back.jpg) no-repeat bottom right;
}

.cat-box {
	float: left;
	margin-top: 10px;
	border: 1px solid #BED5E1;
	border-top: 0;
	border-bottom: 0;
	width: 23%;
	margin-right: 2%;
	text-align: center;
}
.last { margin-right: 0; }

.cat-box p {
	margin: 0;
	padding-bottom: 12px;
	background: url(/images/box-cat-bottom.gif) repeat-x bottom;
}

.cat-box h3 {
	margin: 0 -1px 10px;
	font-size: 15px;
	font-family: Impact, sans-serif;
	text-transform: uppercase;
	color: #FFF;
	background: url(/images/box-cat-top.jpg) repeat-x top left;
}

.cat-box h3 span {
	width: 100%;
	display: block;
	background: url(/images/box-cat-top-2.jpg) no-repeat top right;
}


/* 2 column variant*/

#col1 {
	width: 400px;
	padding-right: 5px;
	float: left;
	border-right: 1px dashed #CCC;
}

#col2 {
	width: 120px;
	float: right;
}

#col2 .cat-box {
	float: none;
	width: auto;
	margin: 0;
	margin-top: 10px;
	border: 1px solid #BED5E1;
	border-top: 0;
	border-bottom: 0;
	text-align: center;
}



/* Product page */

.product-image { text-align: center; }

.prod-links { margin: 0; }

.prod-link-prev { float: left; }
.prod-link-next { float: right; }

.prod-link-prev, .prod-link-next {
	background: url(/images/link-prev-next.gif) repeat-x 0 50%;
	color: #195181;
	font-weight: bold;
	padding: 7px 0;
	line-height : 1em;
}

.prod-link-prev span, .prod-link-next span {
	background: url(/images/link-prev-next-2.gif) no-repeat right 50%;
	padding: 10px;
}
.prod-link-prev:hover span, .prod-link-prev:active span, .prod-link-prev:focus span,
.prod-link-next:hover span, .prod-link-next:active span, .prod-link-next:focus span {
	text-decoration: underline;
}


/* Homepage boxes */

.box {
	overflow: hidden;
	position: relative;
	color: #666;
}

.box h3 { display: none; }
.box p {
	margin: 0;
	padding: 0 7px;
	padding-bottom: 130px;
	z-index: 100;
}

.box img {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 9;
}

#box-intro {
	float: left;
	width: 310px;
	border-right: 1px dashed #BBB;
}

/* buttons */
#button-mugs, #button-mouse-mats, #button-drinks, #button-stressballs {
	float: left;
	width: 144px;
	height: 26px;
	background: #EEE;
	margin: 4px 4px 0 0;
	overflow: hidden;
	text-indent: -999em;
}

#button-mugs { background: url(/images/button-mugs.gif) bottom; }
#button-mouse-mats { background: url(/images/button-mouse-mats.gif) bottom; }
#button-drinks { background: url(/images/button-drinks.gif) bottom; }
#button-stressballs { background: url(/images/button-stressballs.gif) bottom; }

#button-mugs:hover, #button-mugs:active, #button-mugs:focus,
#button-mouse-mats:hover, #button-mouse-mats:active, #button-mouse-mats:focus,
#button-drinks:hover, #button-drinks:active, #button-drinks:focus,
#button-stressballs:hover, #button-stressballs:active, #button-stressballs:focus {
	background-position: top;
}


#box-intro #buttons { margin: 0; line-height: 1.8em; }

#box-wrist-rests {
	float: right;
	width: 210px;
	padding-top: 4px;
	background: url(/images/box-wrists-heading.jpg) no-repeat top right;
}

#box-drinks {
	float: right;
	width: 192px;
	height:553px;
	margin-top: 10px;
	padding-top: 12px;
	background: url(/images/box-drinks-heading.jpg) no-repeat 100% 7px;
	border-top: 1px dashed #BBB;
}

#box-mugs {
	float: left;
	width: 330px;
	margin-top: 10px;
	padding-top: 12px;
	padding-right: 5px;
	background: url(/images/box-mugs-heading.jpg) no-repeat 0px 7px;
	border-top: 1px dashed #BBB;
	border-right: 1px dashed #BBB;
}

#box-mouse-mats {
	float: left;
	width: 330px;
	margin-top: 10px;
	padding-top: 11px;
	padding-right: 5px;
	background: url(/images/box-mouse-mats-heading.jpg) no-repeat -2px 7px;
	border-top: 1px dashed #BBB;
	border-right: 1px dashed #BBB;
}

#box-stressballs {
	float: left;
	width: 255px;
	margin-top: 10px;
	padding-top: 12px;
	background: url(/images/box-stressballs-heading.jpg) no-repeat 100% 7px;
	border-top: 1px dashed #BBB;
}

#box-aqua-products {
	float: right;
	width: 265px;
	margin-top: 10px;
	padding-top: 12px;
	padding-left: 8px;
	background: url(/images/box-aqua-products-heading.jpg) no-repeat 100% 7px;
	border-top: 1px dashed #BBB;
	border-left: 1px dashed #BBB;
}

#box-aqua-products p {
	background: url(/images/box-aqua-products.gif) no-repeat bottom left;
	padding: 0 8px 50px 95px;
}

a.more-info {
	position: absolute;
	text-indent: -999em;
	right: 0;
	bottom: 0;
	width: 90px;
	height: 66px;
	background: url(/images/more-info.gif) no-repeat bottom;
	z-index: 11;
}

#box-drinks a.more-info, #box-mouse-mats a.more-info {
	background: url(/images/more-info-alt.gif) no-repeat bottom;
}

a.more-info:hover, a.more-info:focus, a.more-info:active {
	background-position: top;
}

#box-drinks a.more-info:hover, #box-drinks a.more-info:focus, #box-drinks a.more-info:active,
#box-mouse-mats a.more-info:hover, #box-mouse-mats a.more-info:focus, #box-mouse-mats a.more-info:active {
	background-position: 0 1px; /* image was cut with a 1px error */
}


/* =Side content */

#side { margin-top: 8px; }

#side h2 {
	margin: 5px 0 0;
	padding-bottom: 8px;
	background: url(/images/side-h2-hr.gif) repeat-x bottom;
}

#side h2 span {
	display: block;
	overflow: hidden;
	text-indent: -999em;
	height: 18px;
	background: url(/images/side-h2.jpg) no-repeat 50%;
}

#side ul {
	margin: 8px 0;
}

#side li {
	list-style: none;
	background: url(/images/side-hr.gif) repeat-x bottom;
	margin: 0;
	padding: 0;
}
#side li.last { background: transparent; }

#side li a {
	display: block;
	margin: 0 2px;
	padding: 4px 2px 4px 25px;
	background: url(/images/bullet.gif) no-repeat 10px 50%;
	color: #1E5F8D;
	font-weight: bold;
	text-decoration: none;
}

#side li a:hover, #side li a:focus, #side li a:active {
	background-color: #FFF;
}

#side ul {
	background: transparent;
}

.contact-box {
	width: 47%;
	float: left;
	margin: 10px 0;
	margin-right: 2%;
	background: url(/images/contact-box-bg.gif) no-repeat bottom right;
}

.contact-box address {
	padding-left: 60px;
	min-height: 50px;
}

* html .contact-box address { height: 50px; }

.contact-box .letter { background: url(/images/contact-box-letter.jpg) no-repeat 8px 0; }
.contact-box .phone { background: url(/images/contact-box-phone.jpg) no-repeat 8px 0; }
.contact-box .fax { background: url(/images/contact-box-fax.jpg) no-repeat 8px 0; }
.contact-box .email { background: url(/images/contact-box-email.jpg) no-repeat 8px 0; }


/* =Newsletter */

#newsletterbox {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 199px;
	background: #FFF url(/images/newsletter.gif) repeat-y;
}

#newsletterbox div { /* aux */
	position: relative;
}

#newsletterbox h2 {
	overflow: hidden;
	height: 32px;
	margin: 0;
	background: url(/images/newsletter-h2.gif) no-repeat;
}

#newsletterbox h2 span {
	position: absolute;
	width: 46px;
	height: 42px;
	top: -8px;
	left: 0px;
	background: url(/images/newsletter-mascott.gif) no-repeat;
	text-indent: -999em;
}

#newsletterbox form {
	margin: 0;
	padding: 10px;
	padding-bottom: 0;
	background: transparent;
}

#newsletterbox label { width: auto; text-align: left; font-weight: normal; }
#newsletterbox input { width: auto; border: 1px solid #BBB }

#newsletterbox .pushbutton {
	float: right;
	margin: 0;
	color: #195181;
	background: #FCA634;
	font-weight: bold;
	border: none;
	cursor: pointer;
}

#newsletterbox .pushbutton:hover, #newsletterbox .pushbutton:active, #newsletterbox .pushbutton:focus {
	text-decoration: underline;
}


/* =Forms */

form {
	background: transparent;
	margin: 1em 0 0 0;
}
form p { overflow: hidden; margin: .4em 0; }

label { font-weight: bold; }
input, select, textarea {
	padding: 2px;
	border: 1px solid #CCC;
	background: #FFF;
	color: #555;
}
label { float: left; width: 15em; /* ~ prema shirini teksta u labelama */ text-align: right; padding-right: 5px; }
input { float: left; width: 240px; margin-right: .4em; border: 1px solid #777; }
textarea { float: left; width: 240px; border: 1px solid #777; }

/* Dugmad */
.pushbutton {
	float: right;
	width: auto;
	margin: 10px 75px 0 0;
	padding: 2px 5px;
	background: #88cde0 url(/images/contact-submit.gif) repeat-x bottom;
	color: #FFF;
	font-weight: bold;
	line-height: 1em;
	cursor: pointer;
}


/* =Footer */

#footer {
	background: #154979 url(/images/footer-bg.jpg) repeat-x;
	color: #FFF;
	font-size: 12px;
}

#footer #aux {
	overflow: hidden;
	width: 770px;
	min-height: 130px;
	padding-top: 30px;
	margin: 0 auto;
	background: url(/images/footer.gif) no-repeat;
}
#footer #aux.noNewsletter {
	background: url(/images/footer-noNewsletter.gif) no-repeat;
}

#footer ul, #footer li {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

#footer #nav-secondary {
	float: left;
	width: 385px;
	margin: 10px 10px 10px 5px;
	padding-top: 5px;
	border-top: 8px #449BBD solid;
}

#footer #nav-secondary a { font-weight: bold; }

#footer ul {
	float: right;
	width: 100px;
	margin: 10px 5px;
	padding-top: 5px;
	font-size: 11px;
	border-top: 8px #449BBD solid;
}

#footer #nav-secondary .footer-menu {
	float: left;
	margin-left: 0;
	width: 385px;
}

#footer #nav-secondary .footer-menu li {
	float: left;
	margin: 0 5px 0 0;
	list-style-position: inside;
	width: 150px;
}


/* =Misc */

hr { border: none; color: #FFF; border-top: 1px #BBB dashed; }
acronym { cursor: help; }
h1 strong { text-transform: uppercase; color: #1E5F8D; }
strong { font-weight: bold; color: #1E5F8D; }
.mikkis { color: #EF9215; }
.hide { display: none; }
.clear { clear: both; }


/* Site map */
#content #main .sitemap ul li {
	font-weight: bold;
}

#content #main .sitemap ul ul li {
	font-weight: normal;
}

/* How to order */
#content #main.ordering h2 {
	margin-bottom: 2px;
}

#content #main.ordering h2 span {
	margin-left: 10px;
}

#content #main.ordering .italic {
	font-style: italic;
}

#content #main.ordering ul {
	margin-top: 3px;
}

#content #main.ordering li {
	padding-bottom: 3px;
}

#content #main.ordering .website-list li {
	list-style: none;
	margin-left: 0;
}

/* Quote form */
.quote {
	border: none;
	margin-top: 30px;
}

.quote .field {
	width: 100%;
	float: left;
	margin-bottom: 5px;
}

.quote .field .textfield, 
.quote .field .email {
	width: 250px;
}

.quote .field label{
	width: 12em;
	text-align: left;
}

.quote .field .field_checkbox {
	width: auto;
	padding-left: 0;
	margin-left: 0;
}

.quote .field .checkbox_label {
	display: none;
}

.quote .field textarea {
	height: 200px;
}

.quote .submit input {
	width: 100px;
	float: right;
}

/* new landing page layout */
#landing {
	background:transparent url(/images/main.gif) repeat-y scroll 0 0;
	float:right;
	min-height:520px;
	padding:10px 15px 0;
	width:536px;
}

#landing .box {
	padding: 0;
	margin: 0 0 5px;
}

#landing .box p {
	margin: 5px 2px;
	padding: 0;
	color: #000;
	z-index: 1;
}

#landing .box img {
	position: relative;
	margin-bottom: 5px;
	border: none;
}

#landing .intro {
	float: left;
	width: 310px;
}

#landing .intro h1 {
	background-image: none;
}


#landing .right {
	float: right;
	width: 192px;
}

#landing .left {
	float: left;
	width: 330px;
}


#landing .left p,
#landing .right p {
	margin-bottom: 10px;
	color: #666666;
}

#landing .box .more-info {
	background:transparent url(/images/more-info.gif) no-repeat center bottom;
	bottom:0;
	height:66px;
	position:absolute;
	right:0;
	text-indent:-999em;
	width:90px;
	z-index:11;
}

#landing .box .more-info:hover {
	background-position: center top;
}

#landing .pink {
	background: transparent url(/images/box-drinks-heading.jpg) no-repeat 100% 7px;
}

#landing .blue {
	background: transparent url(/images/box-wrists-heading.jpg) no-repeat scroll right top;
}

#landing .pink .more-info {
	background: transparent url(/images/more-info-alt.gif) no-repeat center bottom
}

#landing .pink .more-info:hover {
	background-position: 0 1px;
}