/**Any script needed everywhere should be here **/
/* 
(c) 2017 Masterweb Solutions 
Written by Ekene Onuorah
masterweb.com.ng
For Pustera
*/

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.icon-double-size{font-size:2em;}
i{vertical-align:middle;}
a{text-decoration:none;color:#33F}
a:hover{opacity:0.8;}
h1{display:inline;font-weight:normal;font-size:inherit;}
h2{display:inline;font-weight:normal;font-size:inherit;}
h3{display:inline;font-weight:normal;font-size:inherit;}
img{max-width:100%;}

.cursor{cursor:pointer;}
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.hidden{display:none;}
.clear{clear:both;}
.space{margin:10px 10px 10px 10px;}
.divider{border-top:1px #999 solid;width:100%;padding:5px 0px 5px 0px;}
.small{font-size:0.9em;}
.smaller{font-size:0.75em;}
.bigger{font-size:1.25em;}
.padding{10px;}
.nowrap{white-space:nowrap;}
.inline-block{display:inline-block;}
.float-right{float:right;}
.float-left{float:left;}

.shadow{box-shadow: 0 0 20px #000;}	
.shadow-text{color:#FFF;text-shadow:#600 1px 1px;}
.curve{border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.border{border: 1px #CCC solid;}	
.border-hover{border: 1px #CCC solid;}	
.border-hover:hover{box-shadow: 0 0 20px #000;}
.tiny-font{font-size:10px;}
.big-font{font-size:16px;}
.normal-font{font-weight:normal;}
.no-decoration{text-decoration:none;}



.error-message{background-color:#F63;border: 1px red solid;color:#FFF;padding:5px;box-shadow: 1px 1px 20px #000;margin:5px;}
.success-message{background-color:#6F6;border: 1px green solid;color:green;padding:5px;box-shadow: 1px 1px 20px #000;margin:5px;}
.warning-message{background-color:#FF9;border: 1px #F93 solid;color:#600;padding:5px;box-shadow: 1px 1px 20px #000;margin:5px;}

.inline{display:inline-block;vertical-align:middle;}


.input{width:80%;max-width:300px;height:40px;font-size:14px;padding:0px 5px 0px 5px;background:#eee;
		color:#333;border:1px solid #006;margin:0px 0px 20px 0px;}
.textarea{width:80%;max-width:400px;min-height:100px;font-size:14px;padding:0px 5px 0px 5px;
			background:#eee;color:#333;border:1px solid #333;margin:0px 0px 20px 0px;display:block;}
.select{display: block; padding: 10px 70px 10px 13px !important; max-width:100%; height: auto !important; 
		border: 1px solid #333; border-radius: 3px; background: url('arts/selectbox_arrow.png') right center no-repeat; 
		background-color: #eee; color: #333; font-size: 12px; line-height: 16px !important; 
		appearance: none; /* this is must */ -webkit-appearance: none; -moz-appearance: none;margin:0px 0px 20px 0px;
		min-width:200px;}
option{ padding: 5px 4px; }

.check{margin:0px 0px 20px 0px;display:block;cursor:pointer;}
.checkbox{display:none;}
.checkbox[type=checkbox] ~ .checked{
  display:none;
}
.checkbox[type=checkbox] ~ .unchecked{
  display:inline;color:#333;
} 
.checkbox[type=checkbox]:checked ~ .checked{
  display:inline;color:#333;
} 
.checkbox[type=checkbox]:checked ~ .unchecked{
  display:none;
}

.radiobox{display:none;}
.radiobox[type=radio] ~ .checked{
  display:none;
}
.radiobox[type=radio] ~ .unchecked{
  display:inline;color:#333;
} 
.radiobox[type=radio]:checked ~ .checked{
  display:inline;color:#333;
} 
.radiobox[type=radio]:checked ~ .unchecked{
  display:none;
} 

.submit{width:80%;max-width:250px;height:40px;font-size:14px;padding:0px 5px 0px 5px;
background:#006;color:#fff;border:0px solid #333;margin:0px 0px 20px 0px;cursor:pointer;}



.button{display:inline-block;background:#006;color:#FFF;padding:10px;margin:10px;border-radius:5px;border:0px;text-align:center;}
.button:hover{background:#009;color:#fff;text-decoration:none;}
.counter{box-shadow: 0 0 10px #FF0;margin:2px;display:inline-block;vertical-align:middle;}
.nav-button{margin:5px 7px 5px 3px;padding:5px;background:#006;color:#FFF;text-decoration:none;display:block;float:left;}





@keyframes rotate{
 0%   { transform: rotateY(0deg); }
 100% { transform: rotateY(360deg); }
}
.rotation{animation:rotate 10s 10 alternate;}

@keyframes radiate{
 0%   { background: #FFF; }
 10%   { background: #0F0; }
 25%   { background: #090; }
 35%   { background: #060; }
 50%   { background: #030; }
 60%   { background: #330; }
 70%   { background: #360; }
 85%   { background: #390; }
 100% { background: #000; }
}
.radiation{animation:radiate 10s 10 alternate;}



.white{color:#FFF;}
.gold{color:#F90;}
.yellow{color:#FF6;}
.red{color:#C00;}
.green{color:#090;}
.gray{color:#666;}
.gray-lightest{color:#CCC}
.gray-light{color:#999;}
.gray-dark{color:#CCC}
.dark{color:#000;}
.blue{color:#03F;}
.blood{color:#C00000;}
.orange{color:#C63;}

.bg-green{background-color:#390;}
.bg-red{background-color:#C03;}
.bg-dark{background-color:#000;}
.bg-gray{background-color:#333;}
.bg-white{background-color:#fff;}
.bg-blue{background-color:#03F;}
.bg-blood{background-color:#C00;}
.bg-milk{background-color:#FF9;}
.bg-orange{background-color:orange;}





/**Only for menu on sidebar**/
.menu-pop{position:fixed;top:30px;left:10%;z-index:914;max-width:400px;
			min-width:150px;width:80%;height:auto;min-height:400px;padding:5px;
			background:#FFC;color:#630;border:2px #000 solid;box-shadow: 0 0 10px #000;display:none;}
			
/**Only for things on the header like inventory (positioning at layout media query)**/
.inventory-pop{position:fixed;top:25px;z-index:915;
			min-width:150px;width:80%;height:auto;min-height:200px;padding:5px;
			background:#FFC;color:#630;border:2px #000 solid;box-shadow: 0 0 10px #000;display:none;}
			
/**For actions where distraction is not needed... like events, addresses, profile etc...**/
.page-pop{position:fixed;top:25px;left:3%;z-index:913;
			min-width:150px;width:90%;height:auto;min-height:100%;padding:5px;
			background:#FFC;color:#630;border:2px #000 solid;box-shadow: 0 0 10px #000;display:none;}
			
			
/**For actions you must see...and then close and news too**/
.fullpage-pop{position:fixed;top:5px;left:2%;z-index:916;
			min-width:150px;width:92%;height:auto;min-height:100%;padding:5px;
			background:#FFC;color:#630;border:2px #000 solid;box-shadow: 0 0 10px #000;display:none;}
			
			
/**For warning before action**/
.confirm-pop{position:absolute;top:10px;left:10px;z-index:917;
			max-width:200px;width:100%;height:auto;min-height:200px;padding:5px;
			background:#FFC;color:#630;border:2px #000 solid;box-shadow: 0 0 10px #000;display:none;}
			
			
.close-button{position:absolute;top:-10px;right:-10px;width:20px;height:20px;color:white;background:red;
		   cursor:pointer;border-radius:10px;text-align:center;font-size:15px;font-weight:bold;border:1px solid #000;}
		   
.help-button{position:absolute;top:-10px;right:15px;width:20px;height:20px;color:white;background:black;
		   cursor:pointer;border-radius:10px;text-align:center;font-size:15px;font-weight:bold;border:1px solid #fff;}




/**Queries used to limit popup heights to make sure user can scroll and see everything**/
@media (min-height: 800px) { /**800 and above**/
.height-safety{max-height:800px;overflow:auto;}
}
@media (min-height: 700px) and (max-height: 799px) { /**700 to 799**/
.height-safety{max-height:700px;overflow:auto;}
}
@media (min-height: 600px) and (max-height: 699px) { /**600 to 699**/
.height-safety{max-height:600px;overflow:auto;}
}
@media (min-height: 500px) and (max-height: 599px) { /**600 to 699**/
.height-safety{max-height:500px;overflow:auto;}
}
@media (min-height: 400px) and (max-height: 499px) { /**600 to 699**/
.height-safety{max-height:400px;overflow:auto;}
}
@media (min-height: 300px) and (max-height: 399px) { /**600 to 699**/
.height-safety{max-height:350px;overflow:auto;}
}
@media (min-height: 200px) and (max-height: 299px) { /**600 to 699**/
.height-safety{max-height:250px;overflow:auto;}
}
@media (max-height: 199px) { /***199 and below*/
.height-safety{max-height:150px;overflow:auto;}
}