/**
 * Styles for TatMoji previewer
 *
 * @author 		Patrick Harris @ Cyberian Frontier
 * @copyright   Copyright 2016 Cyberian Frontier.  All rights reserved.
 * @package     WordPress
 * @subpackage  SafetyTat Theme
 * @version     1.0
 */

/* Hide TatMoji attributes */

.product-addon-background, .product-addon-face, .product-addon-cheeks, .product-addon-hair, .product-addon-eyes, .product-addon-eyebrows, .product-addon-lips, .product-addon-nose, .product-addon-shirt, .product-addon-eyewear, .product-addon-headwear {
 display: none;
}

/* Style TatMoji Objects */

#tatMojiHeader {
 display: none;
}

#tatMojiWrapper {
 width: 260px;
 width: 250px;
 margin: 0px auto;
 padding-bottom: 20px;
}

#tatMojiBox {
 width: 230px;
 padding: 0px 10px 10px 10px;
 background-color: #ffffff;
 width: 252px;
 padding: 0px;
 width: 250px;
}


#tatMojiWrapper #tatNumber {
 width: 140px;
 height: 24px;
 text-align: center;
 font-family: Arial, Helvetica;
 font-size: 18px;
 letter-spacing: -0.5px;
 font-weight: bold;
 margin-top: 92px;
 margin-left: 4px;
 white-space: nowrap;
}

#tatMojiWrapper #tatNumber2 {
 width: 140px;
 height: 20px;
 text-align: center;
 font-family: Arial, Helvetica;
 font-size: 17px;
 letter-spacing: -0.5px;
 font-weight: bold;
 margin-top: -3px;
 margin-left: 4px;
 white-space: nowrap;
}


#tatMojiWrapper #tatDisclaimer {
 width: 225px;
 margin-top: 10px;
 padding-left: 4px;
 font-size: 13px;
 line-height: 120%;
 color: #444444;
 clear: both;
}

#tatMojiWrapper #tatProduct {
 display: none;
}

#tatMojiWrapper #tatMojiLoading {
 margin-top: 40px;
 margin-bottom: 30px;
 text-align: center;
 color: #666666;
 text-decoration: blink;
}

#tatMojiWrapper #tatProduct {
 margin-top: 4px;
 margin-left: 3px;
 width: 224px;
 height: 224px;
// border: 1px solid red;
}

#tatMojiWrapper #tatMojiBackgroundWrapper {
 width: 224px;
 height: 224px;
 padding-top: 62px;
 position: absolute;
// border: 1px solid yellow;
}

#tatMojiWrapper #tatMojiCharacter {
 width: 224px;
 height: 224px;
 position: absolute;
// border: 1px solid green;
}

#tatMojiWrapper #tatContent {
 width: 224px;
 height: 224px;
 position: absolute;
}

#tatMojiWrapper #tatMojiCharacter img {
 display: block;
 margin-top: -100%;
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 100%;
}

#tatMojiWrapper #tatMojiCharacter #tatMojiShirt {
 margin-top: 0px;
}

#tatMojiWrapper #tatMojiCharacter {
 width: 84px;
 height: 84px;
 margin-top: 63px;
 margin-left: 143px;
 border-radius: 50%;
 overflow: hidden;
}

#tatMojiWrapper h2 {
 font-size: 16px;
 margin: 0px;
 padding: 0px;
 margin-left: 0px;
}

#tatMojiWrapper h4 {
 font-size: 14px;
 clear: both;
 margin: 0px;
 margin-top: 6px;
 margin-left: 4px;
 margin-bottom: 2px;
}

#tatMojiWrapper p {
 margin-top: 0px;
 margin-bottom: 0px;
 line-height: 16px;
 margin-left: 4px;
}

#tatMojiWrapper select {
 padding: 0px;
 font-size: 11px;
}

/* TatMoji Classes */

#tatMojiWrapper .colorbutton img {
 width: 22px;
 height: 24px;
 border: 1px solid #666666;
 margin-right: 2px; 
 margin-left: 1px;
 margin-bottom: 6px;
}

#tatMojiWrapper .colorbutton img:hover {
 border: 1px solid #000000;
}

.tatMoji #tatMojiWrapper #tatMojiInterface {
 //margin-top: 20px;
 display: none;
 padding-top: 13px;
}

.product-addon-first-line, .product-addon-second-line {
 display: none;
}

#tatMojiHeaderButtons {
 display: table;
 width: 218px;
 margin-left: 6px;
 margin-bottom: 0px;
 margin-top: 0px;
}

.tatMoji a.tatMojiHeaderButton {
 display: table-cell;
 padding: 3px;
 border: 1px solid #999999;
 text-align: center;
 background-color: #dddddd;
 color: #888888;
 cursor: default;
}

.tatMoji a.tatMojiHeaderButton:hover {
 color: #000000;
 cursor: pointer;
}

.tatMoji #tatMojiInterfaceColors, .tatMoji2 #tatMojiInterfaceIcons {
 display: none;
}

.tatMoji .tatMojiInterfacePanel {
 border: 1px solid #999999;
 width: 230px;
 height: 290px;
 margin-top: -6px;
 background-color: #eeeeee;
}

.tatMojiInterfacePanel .tatMojiPanelTitle {
 display: block;
 text-align: center;
 font-size: 16px;
 font-weight: bold;
 background-color: #cccccc;
 padding-top: 2px;
 border-bottom: 1px solid #999999;
}

.tatMojiInterfacePanel .tatMojiChoices {
 padding: 6px;
 overflow: auto;
 height: 230px;
 border-bottom: 1px solid #999999;
 text-align: center;
 background-color: #ffffff;
}

.tatMojiInterfacePanel .tatMojiChoices .tatMojiChoiceItems {
 display: inline-block;
 width: 200px;
 text-align: left;
 font-size: 0px;
 line-height: 0px;
}

.tatMojiInterfacePanel .tatMojiColors {
 padding-top: 5px;
 overflow: auto;
 text-align: center;
}

.tatMoji #tatMojiHeaderButtonText {
 background-color: white;
 border-bottom: 1px solid white;
}

.tatMoji input.tatMojiInput {
 margin-bottom: 8px;
}

.tatMoji #tatMojiWrapper {
}

.tatMoji #tatMojiWrapper {
 width: 260px;
 width: 250px;
 margin: 0px auto;
 margin: 0px;
 width: 232px;
 width: 100%;
}

.tatMoji #tatMojiBox {
 width: 230px;
 padding: 0px 10px 10px 10px;
 background-color: #ffffff;
 width: 252px;
 padding: 0px;
 width: 250px;
 width: 230px;
 margin: 0px auto;
}

#tatMojiNav {
 margin-top: 4px;
 text-align: left;
}

#tatMojiBegin {
 float: right;
}

#tatMojiBack {
 clear: right;
}

#tatMojiNext {
 float: right;
}


.tatMojiInterfacePanel {
 display: none;
}
#tatMojiPanel1 {
 display: block;
}
#tatMojiBack, #tatMojiNext {
 display: none;
}


#tatMojiWrapper .iconbutton img {
 max-width: none;
 max-height: none;
}

#tatMojiWrapper div.iconbutton {
 position: relative;
 display: inline-block;
 width: 62px;
 height: 62px;
 border: 1px solid #888888;
 margin-right: 2px;
 margin-left: 2px;
 margin-bottom: 4px;
 overflow: hidden;
}

#tatMojiWrapper div.iconbutton-none {
 background-image: url('/store/tatmoji/icon-none2.png');
 background-repeat: none;
 background-size: 100%;
}

#tatMojiWrapper div.iconbutton:hover {
 border: 1px solid #000000;
}

#tatMojiChoicesFace .iconbutton img {
 position: absolute;
 min-width: 96px;
 min-height: 96px;
 width: 96px;
 height: 96px;
 top: -23px;
 left: -17px;
}
#tatMojiChoicesFace div.iconbutton {
 display: none;
}

#tatMojiChoicesShirt .iconbutton img {
 position: absolute;
 min-width: 162px;
 min-height: 162px;
 width: 162px;
 height: 162px;
 top: -106px;
 left: -50px;
}
#tatMojiChoicesShirt div.iconbutton {
 display: none;
}

#tatMojiChoicesCheeks .iconbutton img {
 position: absolute;
 min-width: 62px;
 min-height: 62px;
 width: 62px;
 height: 62px;
 top: 0px;
 left: 0px;


 min-width: 162px;
 min-height: 162px;
 width: 162px;
 height: 162px;
 top: -72px;
 left: -51px;


}

#tatMojiChoicesHair .iconbutton img {
 position: absolute;
 min-width: 62px;
 min-height: 62px;
 width: 62px;
 height: 62px;
 top: 0px;
 left: 0px;
}
#tatMojiChoicesHair div.iconbutton {
 display: none;
}

#tatMojiChoicesEyebrows .iconbutton img {
 position: absolute;
 min-width: 162px;
 min-height: 162px;
 width: 162px;
 height: 162px;
 top: -55px;
 left: -50px;
}
#tatMojiChoicesEyebrows div.iconbutton {
 display: none;
}

#tatMojiChoicesEyes .iconbutton img {
 position: absolute;
 min-width: 162px;
 min-height: 162px;
 width: 162px;
 height: 162px;
 top: -65px;
 left: -50px;
}
#tatMojiChoicesEyes div.iconbutton {
 display: none;
}

#tatMojiChoicesNose .iconbutton img {
 position: absolute;
 min-width: 300px;
 min-height: 300px;
 width: 300px;
 height: 300px;
 top: -160px;
 left: -119px;
}

#tatMojiChoicesLips .iconbutton img {
 position: absolute;
 min-width: 200px;
 min-height: 200px;
 width: 200px;
 height: 200px;
 top: -110px;
 left: -69px;
}

#tatMojiChoicesEyewear .iconbutton img {
 position: absolute;
 min-width: 62px;
 min-height: 62px;
 width: 62px;
 height: 62px;
 top: 0px;
 left: 0px;
}

#tatMojiChoicesHeadwear .iconbutton img {
 position: absolute;
 min-width: 62px;
 min-height: 62px;
 width: 62px;
 height: 62px;
 top: 0px;
 left: 0px;
}
#tatMojiChoicesHeadwear div.iconbutton {
 display: none;
}


@media screen and ( max-height: 550px ){

	.tatMoji .tatMojiInterfacePanel {
	 height: 220px;
	}
	.tatMojiInterfacePanel .tatMojiChoices {
	 height: 160px;
	}

}