@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;}

b {}

.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: 43%; margin-right: 7%;}

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;}


form {margin:20px 0 25px 0;}
form input[type="text"], form textarea { width: 100%; display: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;}
form input[type="text"]:focus, form#com textarea:focus { border-color:#333333; }
form input[type="submit"]{ padding: 15px; width:auto; border:1px solid #ccc; padding-left:60px; padding-right:60px; text-align:center; background-color:#ccc; border-radius:0; -webkit-border-radius:0; color:#333333}
form input[type="submit"]:hover {background-color:#333333;  color:#fff; border:1px solid #333333; cursor: pointer;}

.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: #F00; color: #FFF; font-weight: bold; padding: 1px 5px 1px 5px; display: inline-block; border-radius: 9px; text-decoration: none; font-size: 14px; }


 .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: #00a7d7; color: #FFF; padding: 12px 3px 12px 3px;}
.adminRow a { color: #FFF; text-decoration: none; color: # }
.adminRow a:hover { text-decoration: underline; }

 /* #middle fixes
================================================== */
    /* 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; }
	}

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

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

	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
		.col50 {float:none; width:auto; margin: 0px; }
		.commentGallery img { height: 130px; }
	}
	
	/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */
	@media only screen and (max-width: 479px) {	
		.commentGallery img { max-width:48% !important; height: auto;  }
		.col50 {float:none; width:auto; margin: 0px; }
	}