/*====================================================== Begin || CSS Reset */
* {
	margin: 0;
	padding: 0;
	border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	outline: none;}
/*====================================================== End   || CSS Reset */

/*====================================================== Begin || Global CSS */
html {
	height: 100%;
	overflow-y: scroll;
	background-color: #CCC;}

body {
   margin-top: 0;
   height: 100%;
   background-color: #CCCCCC;}
/*====================================================== End   || Global CSS */
	
/*====================================================== Begin || DIV Styles */
#headerdiv {
	position: absolute;
	top: 0;
	height: 60px;
	width: 100%;
	background-color: #6699cc;
	z-index: 10;
	-moz-box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.1),0 -6px 12px 6px #333333;
    -webkit-box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.1),0 -6px 12px 6px #333333;
    box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.1), 0 -6px 12px 6px #333333;}

#bigtopdiv {
	position: relative;
	width:100%;
	background-color: #9e9e9e;
	-moz-box-shadow:	inset 0 -1px 0 1px rgba(0,0,0,.1), 0 -6px 12px 6px rgba(0,0,0,1);
    -webkit-box-shadow:	inset 0 -1px 0 1px rgba(0,0,0,.1), 0 -6px 12px 6px rgba(0,0,0,1);
    box-shadow:	inset 0 -1px 0 1px rgba(0,0,0,.1), 0 -6px 12px 6px rgba(0,0,0,1);
	z-index: 9;}

#topbufferdiv {
	height: 60px;
	width: 100%;}

#topcontainerdiv {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 980px;}
	
#topbuttondiv {
	position: relative;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	cursor: pointer;
	z-index:8;}

#bigbottomdiv {
	position: relative;
	height: 428px;
	width: 100%;
	z-index: 4;
	border: 0 solid purple;}
	
#bottomcontainerdiv {
	position: relative;
	height:100%;
	margin-left: auto;
	margin-right: auto;
	width: 980px;}
	
#resultscontainer {
	position: relative;
	width: 180px;
	height: 100%;
	float: left;}
	
#cardinfocontainer {
	position: relative;
	width: 800px;
	height: 100%;
	min-height: 400px;
	float: left;}
	
#top1 {
	position: absolute;
	width: 365px;
	padding: 15px 5px 0 5px;
	border: 0 solid purple;}

#top2 {
	position: absolute;
	left: 365px;
	height: 100%;
	width: 189px;
	padding: 15px 5px 0 5px;
	border: 0 solid purple;}
	
#top3 {
	position: absolute;
	left: 554px;
	height: 100%;
	width: 142px;
	padding: 15px 5px 0 5px;
	border: 0 solid purple;}

#top4 {
	position: absolute;
	left: 696px;
	height: 100%;
	width: 142px;
	padding: 15px 5px 0 5px;
	border: 0 solid purple;}

#top5 {
	position: absolute;
	left: 838px;
	height: 100%;
	width: 142px;
	padding: 15px 5px 0 5px;
	border: 0 solid purple;}
	
#bottom1 {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 15px 5px 10px 5px;
	float: left;}

#bottom2 {
	position: relative;
	width: 285px;
	height: 100%;
	padding: 15px 5px 10px 5px;
	float: left;}
	
#bottom3 {
	height: 100%;
	width: 290px;
	padding: 15px 5px 10px 5px;
	float: left;}
	
#bottom4 {
	height: 100%;
	width: 225px;
	padding: 15px 5px 10px 5px;
	float: left;}
	
.searchfilterdiv {
	position: relative;
	padding: 5px;
	height: 100%;
	width: 100%;	
	margin-bottom: 10px;
	background-color: #EEEEEE;
	-moz-box-shadow:    0 0 5px 1px #666666;
    -webkit-box-shadow: 0 0 5px 1px #666666;
    box-shadow:         0 0 5px 1px #666666;}
	
.searchfilterdiv:last-child {margin-bottom: 0;}

.boxcontainer {
	border: 0 solid purple;}
	
#top2 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#top3 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#top4 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}
	
#top5 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#bottom1 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#bottom2 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#bottom3 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#bottom4 .boxcontainer {
	position: absolute;
	top: 21px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border: 0 solid purple;}

#setscrolldiv {
	position: absolute;
	top: 23px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 2px 2px 2px;
	overflow: auto;
	background-color: #FFFFFF;
	border: 1px solid #777;}
	
#typescrolldiv {
	position: absolute;
	top: 23px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 2px 2px 2px;
	overflow: auto;
	background-color: #FFFFFF;
	border: 1px solid #777;
	overflow-y: scroll;}
	
#subtypescrolldiv {
	position: absolute;
	top: 23px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 2px 2px 2px;
	overflow: auto;
	background-color: #FFFFFF;
	border: 1px solid #777;}	
	
#abilityscrolldiv {
	position: absolute;
	top: 23px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 2px 2px 2px;
	overflow: auto;
	background-color: #FFFFFF;
	border: 1px solid #777;}
	
#rulingsscrolldiv {
	height: 100%;
	width: 100%;
	padding: 5px;
	overflow-y: scroll;
	background-color: #FFFFFF;
	border: 1px solid #777;}	
/*====================================================== End   || DIV Styles */

/*====================================================== Begin || TEXT Styles */
p {margin-bottom: 5px;}

h2 {
	font-size: 11px;
	line-height: 11px;
	margin-bottom: 5px;}

#logo {
	font-size: 48px;
	color: #FFFFFF;
	line-height: 60px;
	vertical-align: middle;
	text-align: center;
/*	text-shadow: 1px 1px 2px #777777;*/
/*	text-shadow: 1px 1px 2px rgba(255,255,255,.7),-1px -1px 2px rgba(0,0,0,.4);}*/

	text-shadow:
	1px 1px 0 #CCC,
	2px 2px 0 #CCC,
	3px 3px 0 #777;}
	
#buttontext {
	position: relative;
	top: 9px;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);}
/*====================================================== End   || TEXT Styles */

/*====================================================== Begin || IMAGE Styles */
#cardimageback {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid #777;}

#cardimage {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid #777;
	cursor: pointer;}
	
#lightboxcardimage {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid #000;}
	
	
.setimage {vertical-align: middle;}
		
.smallmanasymbol {
	border-left: 2px solid #888;
	border-bottom: 2px solid #666;
	border-radius: 9px 9px 9px 9px;
	margin-right: 2px;
	vertical-align: middle;}
	
.largemanasymbol {
	border-left: 2px solid #666;
	border-bottom: 2px solid #666;
	border-radius: 13px 13px 13px 13px;
	margin-right: 2px;
	vertical-align: middle;}
/*====================================================== End   || IMAGE Styles */

/*====================================================== Begin || FORM Styles */
input[type='checkbox'] {
	position: relative;
	top: 2px;
	margin-right:2px;
	border: 1px solid #777;}
	
input[type='button'] {
	border: 1px solid #777;
	background-color: #6699cc;
	font-size: 12px;
	font-weight: bold;
	box-shadow: inset 1px 1px 1px rgba(255,255,255,.5),inset -1px -1px 1px rgba(0,0,0,.3);
	-o-box-shadow: inset 1px 1px 1px rgba(255,255,255,.5),inset -1px -1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,.5),inset -1px -1px 1px rgba(0,0,0,.3);
	-moz-box-shadow: inset 1px 1px 1px rgba(255,255,255,.5),inset -1px -1px 1px rgba(0,0,0,.3);
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	padding: 3px;
	cursor: pointer;}

#namefield {
	position: relative;
	height: 18px;
	width: 200px;
	border: 1px solid #777;}
	
#namematch {
	height: 18px;
	width: 140px;
	border: 1px solid #777;}

#cmcmin {
	height: 18px;
	width: 40px;
	border: 1px solid #777;}
	
#cmcmax {
	height: 18px;
	width: 40px;
	border: 1px solid #777;}
	
#cmccont {	
	height: 18px;
	width: 40px;
	border: 1px solid #777;}
	
#cmcx {	
	height: 18px;
	width: 80px;
	border: 1px solid #777;}
	
#colormatch {
	width: 90px;
	height: 18px;
	border: 1px solid #777;}
	
#sortby {
	width: 90px;
	height: 18px;
	border: 1px solid #777;}
	
#sortbydir {
	width: 90px;
	height: 18px;
	border: 1px solid #777;}

#setmatch {
	position: relative;
	width: 100%;
	height: 18px;
	border: 1px solid #777;}
	
#typematch {
	position: relative;
	width: 100%;
	height: 18px;
	border: 1px solid #777;}
	
#subtypematch {
	position: relative;
	width: 100%;
	height: 18px;
	border: 1px solid #777;}
	
#abilitymatch {
	position: relative;
	width: 100%;
	height: 18px;
	border: 1px solid #777;}

#nameselect {
	height: 100%;
	width: 100%;
	border: 1px solid #777;}
/*====================================================== End   || FORM Styles */

/*====================================================== Begin || TABLE Styles */
td {border: 0 solid purple;;}

#top1 div:nth-child(3) table tr td:nth-child(n+2):nth-child(-n+6) input[type='checkbox'] {position: relative; top: 4px;}

#top1 table {
	width:100%;
	border-collapse: collapse;}
	
#top1 table tr td:first-child {
	text-align:left;}	

#top1 table tr td {
	text-align: center;}	

#top1 table tr td:last-child {
	text-align:right;}

#cardtable{
	position: absolute;
	width: 100%;
	height: 100%;
	border-collapse: collapse;}
	
#cardtable tr:nth-child(odd) td {background-color: #FFFFFF;}

#cardtable tr:nth-child(even) td {background-color: #DEDEDE;}

.ctleft{
	padding-right: 5px;
	width: 55px;
	text-align: right;
	border: 1px solid #777;
	font-weight: bold;
	vertical-align:middle;}

.ctright{
	padding: 5px;
	text-align: left;
	border: 1px solid #777;}
	
.ctright table tr td:last-child {
	width: 100%;}	

.ctright table tr td:first-child {
	padding-right: 5px;}
/*====================================================== End   || TABLE Styles */

/*====================================================== Begin || LIGHTBOX Styles */
#lightbox-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.75);
	z-index: 1000;
	display: none;
	cursor: pointer;
}

#lightbox {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background: #fff;
	z-index: 1001;
	display: none;
	cursor: pointer;
}
/*====================================================== End   || LIGHTBOX Styles */