/*@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600');*/
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* 
	colors 
		soft		#F7F9FA
		medium 		#E6E8EB
		blue 		#0070E0
*/
body{
	/*font-family: 'Work Sans', sans-serif;*/
	font-family: 'Roboto', sans-serif;
	color:#1B2733;
}
*{
	padding: 0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.link,
a{ color:#0070E0; text-decoration: none; cursor: pointer; }

hr{
	border:none;
	border-bottom: 1px solid #E0E0E0;
	margin: 3em 0;
	padding: 0;
}

label{
	margin: 4em 0 0.5em;
	font-size: 0.7em;
	color: #A5B0B4;
	border-bottom: 1px solid #E0E0E0;
	display: block;
	text-transform: uppercase;
}

/*
	colors 
		soft		#F7F9FA
		medium 		#E6E8EB
		blue 		#0070E0
		alt? 		#D1D9D9
*/
textarea,
input[type=password],
input[type=text]{
	padding: 1em;
	outline: none;
	border:none;
	background: #E6E8EB;
	font-size: 1em;
	display: block;
	width: 100%;
	border-radius: 0.2em;
}

/**
 * ----------------------------------------------------------
 *	The menu
 * ----------------------------------------------------------
 */
.themenu{
	background-color: #F7F9FA;
	padding: 3em;
}
.themenu a{
	margin:0.5em;
	 color:#637282;
}
.themenu a.active{   color:#0070E0; }
/**
 * ----------------------------------------------------------
 *	SORTABLE LISTS
 * ----------------------------------------------------------
 */
ul.itemlist{ margin: 0; }
ul.itemlist li{ list-style: none; margin: 0; }
.item, ul.itemlist li{
	border-radius: 0.2em;
	margin: 0.3em 0;
	padding: 0.5em 0.8em;
	font-size: 0.9em;
	background-color: #F7F9FA;
}
.sortable li{ border-left: 0.3em solid #0070E0; }
.ghost{ opacity: 0.3; }
.drag,
.chosen{ border-bottom: 1px solid red; }

/**
 * ----------------------------------------------------------
 *	TOGGLES CHECKBOX
 * ----------------------------------------------------------
 */
.toggle{
	display: inline-block;
	width: 2em;
	height: 1em;
	background: #D7DFDE;
	border-radius: 0.5em;
	transition: background-color 0.1s;
	position: relative;
	top:0.1em;
	cursor: pointer;
	margin-right: 0.5em;
}
.toggle::after {
	content: "";
	display: block;
	width: 0.6em; height: 0.6em;
	background-color: white;
	position: absolute;
	top:0.2em;
	left: 0.2em;
	transition: left 0.1s;
	border-radius: 0.6em;
}
.toggle.on::after{ left: 1.2em; }
.toggle.on{ background-color: #0070E0; }


/**
 * ----------------------------------------------------------
 *	footer DESIGN AND SUCH
 * ----------------------------------------------------------
 */
.footer{
	margin: 5em auto;
	padding: 2em;
	text-align: center;
	color: #D7DFDE;
}

/**
 * ----------------------------------------------------------
 *	modal
 * ----------------------------------------------------------
 */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    background-color: rgba(114,128,166,0.5);
    background-color: rgba(99, 114, 130, 0.5); /* dropbox blue */
    /*filter: blur(5px);*/
    /*-webkit-backdrop-filter: blur(1px);*/
}
.modal.open { display: block; }
.modal .content {
	/*background-color: #F7F9FA;*/
    /*background-color: #fefefe;*/
	/*background-color: #F7F9FA;*/
	background-color: #FFFFFF;
    border-radius: 0.1em;
    margin: 2em auto; /* 15% from the top and centered */
    padding: 2em;
    /*width: 80%;*/
     /* Could be more or less, depending on screen size */
    max-width: 600px;
}

/**
 * ----------------------------------------------------------
 *	modal instances
 * ----------------------------------------------------------
 */
.yesno:before,
.yesno:after { content: " "; display: table; }
.yesno:after { clear: both; }
.yesno { *zoom: 1; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.yesno{
	margin-top: 1em;
}
.yesno .left,.yesno .right{}
.yesno .left{ float: left; }
.yesno .right{ float: right; }

/**
 * ----------------------------------------------------------
 *	designandsuch droparea
 * ----------------------------------------------------------
 */


/**
 * ----------------------------------------------------------
 *	dropzone droparea
 * ----------------------------------------------------------
 */
.droparea{ display: none; }
.droparea.activated{ display: block; }
.droparea .square{
	position: relative;
	background-color: #F7F9FA;
	color:#A5B0B4;
	padding: 4em;
	text-align: center;
	border-radius: 0.2em;
	overflow: hidden;
}
.droparea.dragover{
	background-color: #CCC;
	outline: 1px solid black;
}
.droparea .square .info{
	position: absolute;
	width: 100%; height: 100%;
	left: 0; top:0;
	padding: 2em;
}
.droparea .square .progress{
	position: absolute;
	bottom:0; left: 0;
	background-color: #D7DFDE;
	transition: height 0.1s;
	width: 100%;
}
/**
 * ----------------------------------------------------------
 *	polaroid
 * ----------------------------------------------------------
 */

	.polaroid{
		width: 60px;
		height: 60px;
		background-color: #EEE;
		text-align: center;
		display: inline-block;
	}
	.polaroid img{ max-height: 100%; max-width: 100%; display: block; margin:0 auto; }


.imgprev{
	max-width: 150px;
	/*outline: 1px solid red;*/
	/*padding: 1em;*/
	/*background-color: #CCC;*/
	display: inline-block;
	/*padding-left: 0;*/
}
.imgprev img{ 
	width: 100%; 
	display: block; 
	border-radius: 0.1em; 
}



.paper{
	padding:2em;
	max-width: 900px; 
	margin:0 auto; 
}

/**
 * ----------------------------------------------------------
 *	
 * ----------------------------------------------------------
 */

.artworkgrid{
	padding: 1em 0;
}
.artworkgrid li{
	list-style: none;
	width: 25%;
	float: left;
	margin-bottom: 0.5em;
	text-align: center;
	background-color: #FFF;
	border-radius: 0.2em;
	padding: 5px;text-overflow: ellipsis;
}
.artworkgrid .caption{
	cursor: pointer;
	font-size: 0.8em;
	max-height: 1.2em;
	overflow: hidden;text-overflow: ellipsis;
}
.artworkgrid.alt li{ width:10%; margin-bottom: 0em; }

/**
 * ----------------------------------------------------------
 *	
 * ----------------------------------------------------------
 */


/*artworklist artworkblock*/
.artworklist:before,
.artworklist:after { content: " "; display: table; }
.artworklist:after { clear: both; }
.artworklist { *zoom: 1; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.artworkblock{
	float: left;
	/*outline: 1px solid red;*/
	background-color: transparent;
	border: 2px solid white;
	width: 100%;
	margin:0.5em;
}
/*.artworklist li{ background-color: transparent; }*/

@media only screen and (min-width : 768px) {
	.artworkblock{ width: 25%; }
}
.artworklist.alt .artworkblock{
	text-align: center;
}
.artworklist.alt .artworkblock{
	text-align: left;
	width: 100%;
}
.artworklist.alt .imgprev{
	max-width: 100px;
}

/**
 * ----------------------------------------------------------
 *	
 * ----------------------------------------------------------
 */