/**/
#selected_cardback {
	 /*width:247px; 
	 height:426px; 
	 */
	 
	 padding-left:5px;
	 padding-right:5px;
	 /*max-height:450px;*/
	 float:left; 
	 position:relative;  
	 display:inline-block;
	 
	 margin:5px;
	 
	 background: #e6f2ff; 
	 border:2px solid black; 
	 border-radius: 8px;
	 overflow: hidden;
	
	font-size: 19px; 
	box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
}

#cardback {
	 width:180px; 
	 height:320px; 
	 
	 margin: 2px; 
	 
	 float:left; 
	 position:relative;  
	 
	 background: #e6f2ff; 
	 border:2px solid black; 
	 border-radius: 8px;

}

#cardblock {
        border:0px solid #ff9a00; 
	border-radius: 8px; 
	
	display:block; 
	
	align:center;
/*        align-items: center;
        justify-content: center;*/
	/*height:300px;*/
	
	min-height: 200px;
	
	
	padding-top:40px;
	padding-bottom:40px;
	padding-left:10px;
	padding-right:30px
	
	margin-left:0px; 
	margin-right:30px; 
	margin-bottom:30px; 
	
	/*left:-40px; top:-40px;*/
}

#cardblock_content {
	background:#eee6ff; 
	/*border:4px solid #ff9a00; */
	border:1px solid black;
	border-radius: 8px;
	padding:20px; 
	/*margin-top:40px;*/
}


#main_content {
/*	border:1px solid black; 
	border-radius: 8px; */
	
	margin:10px;
	margin-left:0px; 
	padding-bottom:30px;
}

#attribox {
	
	width:250px; 
	
	left:-30px;
	top:-40px;
	
	float:right; 
	display:block; 
	flex-direction: column; 
	position:relative; 

	margin:0px;
	margin-bottom:10px;
	margin-right:10px;

	padding:20px;
	padding-left:10px;

	background: #EFF8FB; 
	border:2px solid black;
	border-radius: 8px;
	
	box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
}

#quotebox {
	background:#ccccff; 
	border:0px solid black; 
	border-radius: 8px; 
	padding:20px;
	margin-top:10px;
	margin-bottom:10px;
	text-align:left;
}

#innerquotebox {
	background:red; 
	border:0px solid black; 
	border-radius: 8px; 
	padding:15px;
	margin:5px;
}

#card_attrib {
	
	width:200px; 
	
	background:#ececf9;
	border:2px solid black; 
	border-radius:8px; 
	box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
	
	padding:20px; 
	
	margin-right:10px; 
	margin-top:10px; 
	margin-bottom:10px; 
	
	float:left;
	display:inline-block; 
	clear:all;  
}

/*few settings*/
#controlpanel {
/*	width:120px; 
	height: 120px; 

	background:white; 
	border:1px solid purple; 
	border-radius: 8px;*/
	
	position:relative;
	margin:10px; 
	background: lightblue; 
	border:2px solid black; 
	border-radius: 8px; 
}

#triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid black;
}
#triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid white;
}


/*testing*/

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}

/* flip the pane when hovered */
/*.flip-container:hover .cardflipper, .flip-container.hover .cardflipper, #flip-toggle.flip .cardflipper {*/
.flip-container.hover .cardflipper, #flip-toggle.flip .cardflipper {
	transform: rotateY(180deg);
}


/* click effect */
.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.flip-container, .front, .back {
	width: 250px;
	height: 440px;
}

/* flip speed goes here */
.cardflipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.back {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.front {
	transform: rotateY(180deg);	
}






/*tatwa shapes*/
#square {
	width: 100px;
	height: 100px;
	background: red;
}
    
#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#tejas {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

select#selector {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;

   border: 1px solid #AAA;

   font-size: 12px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
 
}