@charset "utf-8";

body,html { padding: 0px; margin: 0px; }

.left {float:left;}
.right {float:right;}
.center { text-align: center; }

.clear-both {clear:both;}
.hand { cursor: pointer; }

.red {color:red;}
.green { color:  lightgreen; }
.blue  { color: blue; }

b {}
.bold { font-weight: bold; }
.header-left a { text-decoration: none; display: inline-block; }
.header-left a span { display: block; text-align: right;}


.alertBox,.alertMsg, .alert, .error
{
	margin: 20px;
	padding: 2px;
	padding-top: 15px;
	padding-left: 55px;
	min-height: 30px;
	border: 1px solid #DDD;
	background-color: #EEE;
	color: #069;
	background-image: url(../images/ico-info.png);
	background-repeat: no-repeat;
	max-width: 700px;
}

.nounderline { text-decoration: none; } 

.col50 {float: left; width: 44%; margin-left: 3%; margin-right: 3%;}

form input, textarea { margin-bottom: 5px; }

img.lineHeight, img.imgLine, img.lineImg { height:1em; }

/*članek novi*/
.article {padding-bottom:50px;}
.article h1 {padding-right:50px;}


.socialMessageLikes {cursor:pointer; display:inline-block; float: right; margin-top:-35px;}
.socialMessageLikes span {height:16px;}
.socialMessageLikes:after {content:""; display:block; clear:both;}
.socialMessageLikesSrcekOff { float: left; margin-right: 5px;  width:13px; height:12px; margin-top:3px;background: url("../images/sprites-cms.png") no-repeat -15px -0px;}
.socialMessageLikesNumb {float:left;margin-right:5px;}

.socialMessageLikesSrcekOn{float: left; margin-right: 5px;  width:13px; height:12px; margin-top:3px;background: url("../images/sprites-cms.png") no-repeat -0px -0px;}


.socialMessageComments {display:block; margin-top:50px; }
.socialMessageComments span {display:inline-block;}
.socialMessageComments:after {content:""; display:block; clear:both;}
.socialMessageCommentsBubble { float: left; margin-right: 5px;  width:13px; height:12px; margin-top:5px;background: url("../images/sprites-cms.png") no-repeat -56px -0px;}
.socialMessageCommentsNumb {float:left; margin-right:5px;}


.infoMessageList { padding-right: 20px; float: right; }
.product-info .infoMessageList { padding-right: 0px; }
.infoMessageList .socialMessageLikes { margin-top: 0px; float: left; color:#b0aaa3; }
.infoMessageList .socialMessageLikesOff {cursor:pointer; display:inline-block; float: left; margin-top:0; margin-left:20px;}
.infoMessageList .socialMessageLikesOff span {height:16px;}
.infoMessageList .socialMessageLikesOff:after {content:""; display:block; clear:both;}
.infoMessageList .socialMessageLikesOn:after {content:""; display:block; clear:both;}
.infoMessageList .socialMessageLikesSrcek { float: left; margin-right: 5px;  width:13px; height:12px; margin-top:5px;background: url("../images/sprites-cms.png") no-repeat -15px -0px;}
.infoMessageList .socialMessageLikesNumb {float:left;margin-right:5px;}
.infoMessageList .socialMessageLikesOn {cursor:auto; display:inline-block;float: left;margin-top:0; margin-left:20px;}
.infoMessageList .socialMessageLikesOn .socialMessageLikesSrcek{background-position: -0px -0px;}

.infoMessageList .socialMessageComments {margin-left:10px; color:#b0aaa3; float:left; display:block; margin-top:0; }
.infoMessageList .socialMessageComments span {display:inline-block;}
.infoMessageList .socialMessageComments:after {content:""; display:block; clear:both;}
.infoMessageList .socialMessageCommentsBubble { float: left; margin-right: 5px;  width:13px; height:12px; margin-top:5px;background: url("../images/sprites-cms.png") no-repeat -41px -0px;}
.infoMessageList .socialMessageComments:hover .socialMessageCommentsBubble {background-position:-56px 0;}
.infoMessageList .socialMessageCommentsNumb {float:left; margin-right:5px;}


.main form, main form {margin:20px 0 25px 0;}
.main form input[type="text"],.main form input[type="password"], main form input[type="text"], .main form textarea, .main form textarea, .main form select {display:inline-block; border:1px solid #ccc; margin-top:5px; margin-bottom:15px; padding:15px; max-width:700px; min-width:0; transition:all 0.3s; -webkit-transition:all 0.3s;}
.main form input[type="text"]:focus, main form input[type="text"]:focus, .main form textarea:focus, main form textarea:focus { border-color:#333333; }
.main form input[type="submit"], main form input[type="submit"] {width:auto; padding-left:60px; padding-right:60px; text-align:center; background-color:#666666; border:none; -webkit-border-radius:0; border-radius:0;  color:#FFFFFF}
.main form input[type="submit"]:hover, main form input[type="submit"]:hover {background-color:#333333;  color:#FFFFFF;}

.comment { border-bottom:1px solid #ccc; padding:10px 0;  }
.commentHeader {margin-bottom:5px;}
.commentHeader:after {content:""; display:block; clear:both;}
.commentAuthor {font-size:16px; float:left;}
.commentDate {float:right; font-size:12px;  color:#a0a0a0;}
.commentComment {font-size:14px; line-height:normal;}
input.inputFile { width: auto; padding: 0px; margin: 0px; }

.privzeta-slika {
    margin: 6px 20px 20px 0;
    max-width:400px;
    float: left;
    display:block;
}


.galerija-slik a{
    display:block;
    float:left;
    margin-right:10px;
    height:90px;
    transition:all 0.3s;
    -webkit-transition:all 0.3s;
}
.galerija-slik a:hover {
    opacity:0.7;
}

.galerija-slik a img{
    display:block;
    float:left;
    margin-right:10px;
    max-height:100%;
}

.commentGallery { line-height: 1px; }
.commentGallery img { height: 200px; padding: 1px;  }

.greenBox { padding: 10px; background-color: #e4f8e2; color: #32c124; }
.greenBox h2,.seoPack h3, .greenBox h3, .greenBox a { color: #32c124; background-color: #e4f8e2;  }
.greenBox input, .greenBox texarea { color: #666; }

.greenBoxFul { padding: 10px; background-color: #32c124; color: #FFF; }
.greenBoxFul a { color: #FFF; }

.silverBox { padding: 9px; background-color: #E7E7E7; border: 1px solid #CCC; }
.yellowBox { padding: 9px; background-color: #FFC;  border: 1px solid #FF6;  }
.blueBox { padding: 9px; background-color: #00a7d7; border: 1px solid #00a7d7; color: #FFF; }
.blueBox a { color: #FFF; }
.blueBox td { padding-top: 9px; padding-bottom: 9px; line-height: 1.5em; }
.blueBox { cursor: auto; }
.blueBox .green { color: #FFF; }

.orangeBox { padding: 9px; background-color: #ffe5cd; border: 1px solid #fe7902; color: #fe7902;  }
.orangeBox a, .orangeBox h1, .orangeBox h2, .orangeBox h3 { color: #fe7902; }

.redBox { padding: 9px; background-color: #F33;  border: dashed 1px #FFF; color: #FFF; padding-bottom: 4px; padding-top: 4px; }
.redBox a { color: #FFF; }

.toggleClick { cursor: pointer; }
img.duckImg { }

.main input[type=text],.main input[type=submit],.main input[type=password], .main textarea { display: block; }

.notificationsStatus a { float:right; background-color: #FA3E3E; color: #FFF !important; font-weight: bold; padding: 1px 5px 1px 5px; display: inline-block; border-radius: 2px; text-decoration: none; font-size: 10px; }

.timos-product-form .colors [type="radio"]:checked,
.timos-product-form .colors [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px; }

.timos-product-form .colors [type="radio"]:checked + label,
.timos-product-form .colors [type="radio"]:not(:checked) + label {
  margin: 0 7px;
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  line-height: 28px;
  border: 1px solid #ccc;
  color: #000;
  display: inline-block;
  border-radius: 100%; }

.timos-product-form .colors [type="radio"]:checked + label {
  border-color: #000;
  color: #fff;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease; } 


.userOnline { height:0.5em; padding-left: 3px; }
.whiteBox { border: 1px solid #EEE; padding: 5px; }

.blink {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.7; }
}

.boxWholeSilver { background-color:  #D1D1D1; color:  #525252; margin-top: 10px; margin-bottom: 10px; text-align: center; font-size: 1.5em;}
.boxWholeSilver h2 { font-size: 3em; padding: 0px; margin: 0px; margin-top: 10px; color: #FFF; display:  table; width:  100%; vertical-align: middle; }
.boxWholeSilver h2 img { vertical-align:  middle; }
.boxWholeSilver a { color: #2A2A2A; text-decoration:  none; }
.boxWholeSilver a.niceLink { background-color:  #2A2A2A; text-decoration:  none; color:  #FFF; padding: 10px 30px 10px 30px; display:inline-block; text-transform: uppercase;}
.boxWholeSilver a.niceLink:hover { background-color:  #525252; color:  #FFF; } 
.boxWholeSilver .col50 {  padding-top: 30px; padding-bottom:  30px; }
.inline { display: inline-block; }


 .spin {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
 
  @-webkit-keyframes spin {
	0% { 
	   animation-timing-function: linear;
		-webkit-transform: rotateZ(6deg);
	}
	25% { 
		animation-timing-function: ease-out;
	  -webkit-transform: rotateZ(0deg); /* Safari */
	}
	50% { 
		animation-timing-function: linear;
	  -webkit-transform: rotateZ(-6deg); /* Safari */
	}
	75% { 
		animation-timing-function: ease-out;
	  -webkit-transform: rotateZ(0eg); /* Safari */
	}
	100% { 
		animation-timing-function: linear;
	  -webkit-transform: rotateZ(6eg); /* Safari */
	}
 }

 @keyframes spin {
	0% { 
	   animation-timing-function: linear;
		transform: rotateZ(6deg);
	}
	25% { 
		animation-timing-function: ease-out;
	  transform: rotateZ(0deg); /* Safari */
	}
	50% { 
		animation-timing-function: linear;
	  transform: rotateZ(-6deg); /* Safari */
	}
	75% { 
		animation-timing-function: ease-out;
	  transform: rotateZ(0deg); /* Safari */	
	}
	100% { 
	animation-timing-function: linear;
	  transform: rotateZ(6deg); /* Safari */
	}
 }
 
 .spin{
	-webkit-animation: spin 5s infinite; /* Chrome, Safari, Opera */
	animation: spin 5s infinite;
 }

.adminRow { background-color: #EEE; color: #000;border-top: 1px solid #CCC;
    padding: 12px 3px 12px 3px;
    position: fixed;
    bottom: 0;
    z-index: 200;
    width: 100%;}

.adminRow a { text-decoration: none; color: #000; }
.adminRow a:hover { text-decoration: underline; }

.marginPlease, .blagajna, .standard-page-content-new {max-width: 1600px; margin-left: auto; margin-right: auto; }


 /* #middle fixes
================================================== */
	@media only screen and (min-width: 2300px) {
		.marginPlease, .blagajna, .standard-page-content-new {max-width: 1800px; margin-left: auto; margin-right: auto; }
	}   

	@media only screen and (min-width: 1450px) and (max-width: 2300px) {
		
	}
	/* Note: Design for a width of 768px */

	@media only screen and (min-width: 1160px) and (max-width: 1450px) {
		.gallery-box a img {
			max-height: 130px;
			max-width:280px;
			margin-right: 5px;
			margin-bottom: 5px;
		}	
		.commentGallery img { height: 180px; }
	}
	


	@media only screen and (min-width: 1100px) and (max-width: 1200px) {
		.commentGallery img { height: 160px; }
	}
	
	


	/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */

	@media only screen and (min-width: 768px) and (max-width: 1099px) {
		.commentGallery img { height: 160px; }
	}


	
	@media only screen and  (max-width: 700px) {
	
		.privzeta-slika {max-width:300px; float:none; margin:0 0 15px 0;}
		.commentGallery img { height: 130px; }
        .boxWholeSilver .col50 {  padding-top: 10px; padding-bottom:  10px; }
        .boxWholeSilver h2 { font-size: 2em; }
	}

	/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
	    .boxWholeSilver { font-size: 1em;}
		.col50 { }
		.commentGallery img { height: 130px; }
        .boxWholeSilver .col50 {  padding-top: 10px; padding-bottom:  10px; }
        .boxWholeSilver h2 { font-size: 2em; }
	}
	
	/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */
	@media only screen and (max-width: 479px) {	
        .boxWholeSilver { font-size: 1em;}
        .marginPlease, .blagajna, .standard-page-content-new {width: 96%; margin-left: 2%; margin-right: 2%; }
		.commentGallery img { max-width:48% !important; height: auto;  }
		.col50 {float:none; width:auto; margin: 0px; }
        .boxWholeSilver .col50 {  padding-top: 10px; padding-bottom:  10px; }
        .boxWholeSilver h2 { font-size: 2em; }
        .silverBox input[type=text],.silverBox input[type=password],.silverBox textarea { max-width: 80% !important; }
        a.submit-button { display:  block; }
	}