body {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font-size: 12pt;
	font-family: Arial, sans-serif;
}


.simplefont,
.simplefont *
{
    font-family:Arial, Tahoma!important;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-print-color-adjust: exact;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 1cm;	
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);	
    position:relative;
}

.landscape .page {
    width: 29.7cm;
    min-height: 21cm;
    padding: 1cm;	
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);	
    position:relative;
}
.subpage {    
	text-align: center;
}


	.cardBlock
	{
		width:62mm;
		height: 86.2mm;
		display:inline-block;
		position:relative;
		vertical-align:top;
		cursor:pointer;
		margin-bottom:8px;
		text-align: left;
	}

	.card
	{
		width:62mm;
		height: 86.2mm;
		background:url('images/card_bg.png') no-repeat center center;
		background-size: contain;
		display:inline-block;
		position:relative;
		vertical-align:top;
		-webkit-print-color-adjust: exact; 
		-moz-print-color-adjust: exact; 
		cursor:pointer;
	}
	
	.cardBack
	{
	    width:62mm;
		height:90mm;
		background:url('images/card_back.png') no-repeat center center;
		background-size: contain;
		display:inline-block;
		position:relative;
		vertical-align:top;
		-webkit-print-color-adjust: exact; 
		-moz-print-color-adjust: exact; 
		cursor:pointer;
	}

	
	
	.modeBig .card
	{
	    width: 94mm;
        height: 132mm;
	}
	
	.editing .card,
	.editing .cardBack
	{
	    opacity: 0.4;
	}
	
            .page {
              -webkit-perspective: 800px;
                 -moz-perspective: 800px;
                   -o-perspective: 800px;
                      perspective: 800px;
            }
            
            .cardBlock {
              -webkit-transition: -webkit-transform 1s;
                 -moz-transition: -moz-transform 1s;
                   -o-transition: -o-transform 1s;
                      transition: transform 1s;
              -webkit-transform-style: preserve-3d;
                 -moz-transform-style: preserve-3d;
                   -o-transform-style: preserve-3d;
                      transform-style: preserve-3d;
            }
            
            .cardmode .cardBlock.flipped {
              -webkit-transform: rotateY( 180deg );
                 -moz-transform: rotateY( 180deg );
                   -o-transform: rotateY( 180deg );
                      transform: rotateY( 180deg );
            }
            
            .cardBlock .card, 
            .cardBlock .cardBack {
              display: block;
              height: 100%;
              width: 100%;
              position: absolute;
              -webkit-backface-visibility: hidden;
                 -moz-backface-visibility: hidden;
                   -o-backface-visibility: hidden;
                      backface-visibility: hidden;
            }
            
           .cardBlock .card {
              -webkit-transition: opacity 1s;
                 -moz-transition: opacity 1s;
                   -o-transition: opacity 1s;
                      transition: opacity 1s;
            }
            
            .cardBlock .cardBack {
              -webkit-transform: rotateY( 180deg );
                 -moz-transform: rotateY( 180deg );
                   -o-transform: rotateY( 180deg );
                      transform: rotateY( 180deg );
            }
            
            .flipped.cardBlock .card {
              opacity:0!important;
            }
              	

	.editing .card:hover
	{
	    opacity:0.7;
	}
	.editing .card.select, .editing .card.select+.cardBack{
        opacity:1;
	}
	
	.level-t, .level-b
	{
	    position: absolute;
        font-size: 54px;
	}
	
	.level-t
	{
        top: 24px;
        right: 26px;		  
	}
	.level-b
	{
        bottom: 24px;
        left: 26px;
		text-align: left;
		width: 45px;        
	}	
	
	.color-1 .card, .color-1 .card .mat{ background-image:url('images/c_card_1.png');}
	.color-2 .card, .color-2 .card .mat{ background-image:url('images/c_card_2.png');}
	.color-3 .card, .color-3 .card .mat{ background-image:url('images/c_card_3.png');}
	.color-4 .card, .color-4 .card .mat{ background-image:url('images/c_card_4.png');}
	.color-5 .card, .color-5 .card .mat{ background-image:url('images/c_card_5.png');}
	.color-6 .card, .color-6 .card .mat{ background-image:url('images/c_card_6.png');}
	.color-7 .card, .color-7 .card .mat{ background-image:url('images/c_card_2.png');}
	.color-8 .card, .color-8 .card .mat{ background-image:url('images/c_card_5.png');}
	.color-99 .card, .color-99 .card .mat{ background-image:url('images/c_card_6.png');}
	
	.color-1 .cardBack{ background-image:url('images/cc1.png'); color:#b33130; }
	.color-2 .cardBack{ background-image:url('images/cc3.png'); color:#7a135c; }
	.color-3 .cardBack{ background-image:url('images/cc4.png'); color:#d0a31a; }
	.color-4 .cardBack{ background-image:url('images/cc5.png'); color:#6ba949; }
	.color-5 .cardBack{ background-image:url('images/cc6.png'); color:#3fafc2; }
	.color-6 .cardBack{ background-image:url('images/cc7.png'); color:#5f4d23; }
	.color-7 .cardBack{ background-image:url('images/cc8.png'); color:#7a135c; }
	.color-8 .cardBack{ background-image:url('images/cc2.png'); color:#3fafc2; }
	.color-99 .cardBack{ background-image:url('images/cc99.png'); color:#5f4d23; }	
	
	.card h1, .card h2
	{
		padding: 0;
		margin: 0;
	}
	
	.card>h1
	{
        color: #000;
        font-size: 15px;
        padding: 9px 10px 0px;
        text-align: center;
        text-transform: uppercase;
        height: 28px;
        line-height: 19px;
        overflow: hidden;
	}
	
	.card>small
	{
		display: block;
		color: #fff;
		font-size: 9px;
		line-height: 10px;
		padding-top:0px;
		text-align: center;
		min-height: 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        display:none;
	}
	
	.card>h2
	{
		display: inline-block;
		color: #000;
		font-size: 13px;
		padding: 15px 0 0;
		text-align: center;
		width: 48%;
		font-weight: normal;
		vertical-align:top;
		height: 28px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        overflow:hidden;
        margin-bottom: 1px;
	}	
	
	.card>h2.small
	{
	    font-size:10px;
	    line-height:7px;
	    padding: 14px 10px 0;
	}
	
	.card>p
	{
	padding: 5px 13px;
	margin: 0;
	font-size: 10px;
	height: 213px;
	overflow: hidden;
	line-height: 9px;
	}
	
	.card>p.long
	{
	padding: 12px 13px;
	font-size: 9px;
	line-height: 8px;
	}
	
	.card>p.withmat
	{
	    padding: 4px 13px;
	}
	
	.card .mat
	{
		font-size: 10px;
        line-height: 8px;
		display:block;
		color:#fff;
		font-weight:normal;
        padding: 0px 4px 2px;
        margin-top:-2px;
        background-position:center bottom;
        max-height: 42px;
        overflow: hidden;
        margin: -2px -7px 2px;
	}
	
	.card>i
	{
		padding: 3px 12px;
		display: block;
		font-style: normal;
		color: #fff;
		font-weight: bold;	
		position:absolute;
		bottom:0px;
	}
	
	.card>i.lvl
	{
        right: 0;
        bottom: 0px;
        font-size: 12px;
        font-weight: normal;
        line-height: 19px;
	}	
	
	.tools
	{
		position:absolute;		
		width:23%;
	}
	
	.tools-div
	{		
		margin:0 1cm 1cm;
		padding:20px;
		border: 1px #D3D3D3 solid;
	    border-radius: 5px;
	    background: white;
	}	
	
	#ym
	{
		position:absolute;
	    box-shadow:0 0 5px #000;
	    z-index:200;
	}
	
	.show{
		display:block!important;
	}
	
	.home
	{
	    position:absolute;
	    top:10px;
	    left:1cm;
	    font-weight:bold;
	    color:#000;
	}
	.home a
	{
	    color:#000;
	}
	
	.create
	{
	    position:absolute;
	    top:10px;
	    left:5cm;
	    font-weight:bold;
	    color:#000;
	}
	
	.thanks
	{
	    position:absolute;
	    top:10px;
	    left:60%;
	    font-weight:bold;
	    color:#ccc;
	}	
	
	.thanks:hover
	{
	    cursor:pointer;
	    color:#333;
	}
	
	.hint
	{
	    color:#333;
	    display:inline-block;
	    border-bottom:1px dotted #333;
	    cursor:help;
	}
	.hint-body
	{
	    display:none;
	    position:absolute;
	    background:#ffffee;
	    border:1px dotted #efefef;
	    font-size:12px;
	    padding:5px;
	    box-shadow:0 0 5px #000;
	    width:500px;
	    z-index:200;
	}	
	.social *
	{
	    box-sizing: content-box;
	    -moz-box-sizing: content-box;
	}
	
	ul.socialwrap {
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    ul.socialwrap li {
        padding-left: 0 !important;
        background-image: none !important;
        margin-left: 0 !important;
        list-style-type: none !important;
        text-indent: 0 !important;
        display:inline-block;
    }	
    ul.socialwrap li a {
        text-decoration: none;
    }
    li.iconOnly a span.head {
        display: none;
    }
    
    .downloadlink
    {
        display:inline-block;
        position: absolute;
        top: 14px;
        width: 19cm;
    }
    
    #cancel{
        float:right;
        margin-left:10px;
        display:none;
    }
    #getUrl{
        float:right;
        margin-left:10px;
        display:none;
    }
    .editing #cancel{
        display:inline;
    }
    .editing #getUrl{
        display:inline;
    }    
    
    .COINWIDGETCOM_CONTAINER
    {
        vertical-align:top;
    }
    
    .yashare-auto-init
    {
        display: inline-block;
        vertical-align: top;
    }
    
    body .b-share__handle {
    padding: 1px 4px 5px 2px!important;
    }    
    
    body .b-share {
    padding: 1px 3px 1px 4px!important;
    vertical-align: top;
    }
    
    
.landscape .page {
        margin:1cm 1cm 1cm auto;
    }    
    

@media screen and (max-width: 1300px){
    .page {
        margin:1cm 10px 1cm auto;
        zoom: 0.8;
    }
    .tools {
        width: 33%!important;
    }
}



@media print {
    .spellbook .page, 
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
	
    .mirror .page
    {
        transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
    }
    .mirror .page .cardBack
    {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }    
    
    html .joesterMode .page
    {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
    html .joesterMode .page .cardBack
    {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }        
	
	.subpage {    
		
		zoom:0.92;
	}	
	
	.tools, .thanks, .home, .downloadlink, .create, .downloadlink
	{
		display:none!important;
	}

	
	.card
	{
	    opacity: 1;	 
	}
	
	.card>h1
	{
	    height:27px;
	}
	
	.cardBack
	{
	    display:none!important;
	}
	
	.flipped .cardBack
	{
	    display:block!important;
	}
	
	.editing .card
	{
	    display:none;
	}
	
	.editing .card.select
	{
	    display:inline-block;
	}
	
	.card.select
	{
        outline: 0;
        background-color: transparent;
        opacity: 1;	    
	}
	
	body .card h2
	{		
		padding: 13px 0 0;		
		font-size:12px;
	}		
	
	body .card h2.small
	{
	    font-size:10px;
	    line-height:7px;
	    padding: 13px 10px 0;
	}	
}    



.commG>div
{
    margin-left:1cm!important;
}

.DJa
{
    display:none!important;
}