@charset "UTF-8";

/* cardViewer.css */

body{
	background-color:#FFFFFF;
	margin:0px;
	padding:0px;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	}

header, nav, main, footer{
	margin:0px;
	padding:0px;
	position:absolute;
	left:0px;
	right:0px;
	display:block;
	}

header{	top:0px;	height:60px;}
nav{	top:60px;	height:50px;}
main{	top:110px;	bottom:40px;}
footer{	bottom:0px;	height:40px;}


h1, h2, h3, h4, p, li{
	margin:0;
	padding:5px;
	}

h1{	font-size:150%;}
h2{	font-size:135%;}
h3{	font-size:120%;}
h4{	font-size:100%;}
p, li{	font-size:100%;}


/* header */
header{background-color:#FFFFFF;text-align:center;}
header>article{display:inline-block;height:58px;overflow:hidden;}
header>article.logo{text-align:left;width:200px;}
header>article.logo>a>img{height:51px;}
header>article.title{color:rgb(0,48,66);font-size:90%;}
header>article.nav{text-align:right;width:200px;}
header>article.nav>p{padding:10px 5px;}
header>article.nav>p>a{color:rgb(0,48,66);}

@media all and (max-width: 1100px) {
	/* */
	header>article.logo{width:auto;}
	header>article.nav{width:auto;}
	header>article.title{font-size:80%;}
	}
	
@media all and (max-width: 650px) {
	/* */
	header>article.title{font-size:70%;}
	header>article.nav{width:80px}
	header>article.nav>p>a{font-size:80%;}
	footer{font-size:80%;}
	#controls>p.drawerProgress{display:none;}
	}	

/* NAV (controls) */

#controls{
	background-color:rgb(173,156,113);
	text-align:center;
	margin:0px;
	padding:0px;
	height:50px;
	}
	
#controls>p{
	display:inline-block;
	color:rgb(0,48,66);
	margin:5px;
	padding:5px 10px;
	background-color:#FFFFFF;
	border-radius:9px;
	}	

#controls>p.state{float:left;}
#controls>p.state>strong{width:40px;background-color:#F0F0F0;display:inline-block;padding:2px;border-radius:3px;}
#controls>p.cardPlayer{float:right;}
#controls>p.cardLayout{float:right;padding-bottom:2px;}


#controls>p.drawerProgress{
	display:none;
	text-align:left;
	background-color:#FFFFFF;
	border:5px solid #FFFFFF;
	height:20px;
	padding:5px;
	background-image:linear-gradient(0deg, #FFFFFF, #FFFFFF 13px, rgb(0,48,66) 14px, rgb(0,48,66) 15px,  #FFFFFF 16px,  #FFFFFF);
	/* cursor:pointer; */
	}
#controls>p.drawerProgress>span{
	background-color:rgb(173,156,113);
	display:inline-block;
	height:20px;
	width:10px;
	border-radius:3px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	overflow:hidden;
	box-shadow: 1px 1px 2px #000000;
	margin:0px;
	margin-left:0px;
	padding:0px;
	}

#controls>p.cardLayout>img{
	margin:0px;
	padding:0px;
	width:25px;
	height:25px;
	opacity:0.7;
	border:2px solid #CCCCCC;
	cursor:pointer;
	border-radius:3px;
	}
#controls>p.cardLayout>img:hover{
	opacity:0.7;
	border:2px solid rgb(51,51,51);
	}
#controls>p.cardLayout>img.active{
	opacity:1.0;
	border:2px solid rgb(0,48,66);
	}

#controls>p>input{
	border:2px solid rgb(0,48,66);
	background-color:rgb(173,156,113);	
	color:#FFFFFF;
	font-size:130%;
	font-weight:bold;
	width:30px;
	height:30px;
	margin:0px;
	padding:5px;
	padding-top:0px;
	padding-bottom:10px;
	overflow:hidden;
	border-radius:50%;
	}
	
#controls>p>input:hover{
	background-color:rgb(102,130,140);
	cursor:pointer;
	}
	
#controls>p>input:disabled{
	border:2px solid #CCCCCC;
	background-color:#EEEEEE;	
	color:#CCCCCC;
	cursor:none;
	}

#controls>p.cardPlayer>input{
	width:70px;
	border-radius:10px;
	font-size:120%;
	}

main{overflow-y:scroll;background-color:#000000;}

/* CARDS */

#cardViewerFrame{}

#cardViewer{}
#cardViewer>div{text-align:center;}
#cardViewer>div.active{}
#cardViewer>div>img{width:99%;max-width:1000px;border:2px solid #808080;}
#cardViewer>div>img:hover{border:2px solid #C0C0C0;}
#cardViewer>div.active>img{border:2px solid #FFFF00;}

#cardViewer.single{}
#cardViewer.single>div{display:none;width:99%;margin:2px auto;}
#cardViewer.single>div.active{display:block;}

#cardViewer.columns{}
#cardViewer.columns>div{width:49%;display:inline-block;margin:2px;}
#cardViewer.columns>div>img{}

#cardViewer.rows{}
#cardViewer.rows>div{width:99%;margin:2px auto;}
#cardViewer.rows>div>img{}

#cardViewer.grid{}
#cardViewer.grid>div{width:24%;display:inline-block;margin:2px;}
#cardViewer.grid>div>img{}

/* ERROR MESSAGE & NOSCRIPT */

#errMsgs, noscript{
	margin:10px 20px;
	padding:0px;
	border:2px solid #CC0000;
	}

h2.errHeader{
	background-color:#CC0000;
	color:#FFFFFF;
	text-align:center;
	}
	
#backBtn{
	border:none;
	background-image:linear-gradient(0deg, #CC0000, #990000);	
	box-shadow: 2px 2px 4px #660000;
	border-radius:9px;
	cursor:pointer;
	color:#FFFFFF;
	margin:10px;
	padding:10px 20px;
	font-size:100%;
	font-weight:bold;
	opacity:0.7;
	}
	
#backBtn:hover{
	opacity:1.0;
	box-shadow: 1px 1px 2px #330000;
	}
		
#errMsgs>p{
	color:#CC0000;
	text-align:center;
	font-size:120%;
	font-weight:bold;
	padding:10px 20px;
	}


footer{background-color:rgb(0,48,66);text-align:center;color:#FFFFFF;}
footer>p>a{color:#FFFFFF;display:inline-block;padding:2px 4px;}