/* CSS Document */

/* @import url("/style_breadcrumb.css"); */

body{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:15px;
	background-color:#FFF;
	background-image:url(/images/bg/icons-grey_2.jpg);
	margin:0px;
}

@media screen and (min-width: 500px) {
    body {
		margin:10px;
	}
}

#wrapper{
	width:auto;
	max-width:600px;
	margin:auto;
	background-color:#FFF;
	padding:1em;
	border:1px solid #CCC;
}

#top_menu{
	display:inline-flex;
	width:calc(100% + 2em + 1px);
	position:relative;
	
	margin-left:calc(-1em);	
	margin-top:calc(-1em - 1px);
	margin-bottom:1em;
	
}

#top_menu a:link, #top_menu a:visited{
	display:flex;
	flex-grow:1;
	background-color:#FFF; 
	
	height:50px;
	border:1px solid #CCC;
	margin-left:-1px;
}

.top_menu_icon{
	width:100%;
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	opacity:0.5;
	transition:opacity;
	transition-duration:0.5s;
}
.top_menu_icon:hover{
	opacity:1.0;
}

h1{
	margin-top:0px;
	font-size:18px;
	 
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;

}

hr{
	display:block;
	width:calc(100% + 2em);
	border:none;
	height:1px;
	background-color:#CCC;
	margin-left:-1em;
	margin-right:-1em;
	margin-top:1em;
}

a:link, a:visited{
	text-decoration:none;
	color:#00B3FF;
}

a:hover{
	text-decoration:underline;
}



a.liquid_button{
	
	display:inline-block;
	min-width:3em; /* prevents button being too small on flexing menus */
	
	padding:1em; 
	padding-left:2em; 
	padding-right:2em;
	
	border:none;
	border-left:1px solid #ffff00;
	border-top:1px solid #ffff00;
	
	background-color: #ffcc00; /* For browsers that do not support gradients */
	background-image:url(/images/yellow_bg.jpg);
	background-repeat:no-repeat;
	border:1px solid #ffad00;
	
	color:#000;
	text-decoration:none;	
	text-transform:uppercase;
	font-size:15px;
	font-weight:bold;
	text-align:center;
	text-shadow: 1px 1px #FFFF00;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	
	max-width:calc(100% - 2em - 2px);
}

a.liquid_button:hover{
	background-color: #ffcc00; /* For browsers that do not support gradients */
	background-image:url(/images/yellow_bg_hover.jpg);
	background-repeat:no-repeat;
	
	color:#000;
	text-decoration:none;
}

@media screen and (max-width: 500px) {
    a.liquid_button{
		padding-left:1em; 
		padding-right:1em;
	}
}


.red_text{
	color:#EE0000;
}

.breadcrumb {
	display:block;
	color:#999999;
	font-size:18px;
	margin-left:calc(-1em + 3px);
	background-color:#FFF;
	border-bottom:1px dotted #CCC;
	margin:0px;
	padding:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	margin-left:calc(-1em + 3px);
	margin-top:calc(-1em + 3px);
	margin-right:calc(-1em + 3px);
	margin-bottom:1em;
	text-transform:lowercase;
}
.breadcrumb a:link, .breadcrumb a:visited {
	padding-top:0.2em;
	padding-bottom:0.2em;
	line-height:1.5em;
}


.breadcrumb a:before{
	display:inline-block;
	width:1em;
	height:1em;
	background-image:url(/images/breadcrumb_arrow.png);
	background-position:0px 0.2em;
	background-repeat:no-repeat;
	content:' ';
}

.breadcrumb a:first-of-type:before{
	width:0px;
	height:0px;
	background-image:none;
}

.breadcrumb a:last-of-type, .breadcrumb a:last-of-type:hover{
	text-decoration:none;
	color:#555;
	cursor:default;
}





input, textarea{
	width:calc(100% - 1em - 2px);
	padding:0.5em;
	margin-top:1em;
	
	border:1px solid #CCC;
	/*
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:15px;
	*/
	font-family: "Courier New", monospace;
	font-size:16px;
}

input[type="file"]{
	background-color:#FFF;
	padding:1em;
	border:1px solid #CCC;
	width:calc(100% - 2em - 2px);
}


select{
	display:inline-block;
	width:100%;
	margin-top:1em;
	border:1px solid #CCC;
	font-family: "Courier New", monospace;
	font-size:16px;
	
	padding:0.5em;
}
select option{
	padding:0.5em;
	border-top:1px solid #EBEBEB;
	margin-top:-1px;
	/* compensate the padding of parent "select" */
	margin-left:-0.5em;
	margin-right:-0.5em;

}

select option:first-of-type{
	margin-top:-0.5em;
	border-top:none;
}

select option:last-of-type{
	margin-bottom:-0.5em;
}



input[type="submit"], input[type="button"]{
	padding:1em; 
	width:calc(100%);
	
	border:1px solid #FFAD00;	
	background-color:#FFCC00; 
	
	background-image:url(/images/yellow_bg.jpg);
	
	text-transform:uppercase;
	font-weight:bold;
	text-shadow: 1px 1px #FFFF00;
	color:#000;
	
	cursor:pointer;
	
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:15px;
}

input[type="submit"]:hover, input[type="button"]:hover{
	background-color:#FFCC00; 
	background-image:url(/images/yellow_bg_hover.jpg);
}




.file_description{
	display:block; 
	width:100%; 
	clear:both; 
	margin-top:2em; 
	font-family: 'Courier New', monospace;
	font-size:14px;
}

.file_tags{
	margin-top:1em;
}

.file_tags a:link, .file_tags a:visited{
	text-decoration:none;
	padding:0.5em;
	padding-left:1em;
	padding-right:1em;
	margin-right:0.5em;
	margin-top:1em;
	background-color:#EBEBEB;
	text-shadow: 1px 1px #FFF;
	color:#999;
	border-radius:4px;
	display:inline-block;
	
	font-family: 'Courier New', monospace;
	font-size:14px;
}

.file_tags a:hover{
	background-color:#FFCC00;
	color:#000;
	text-shadow: 1px 1px #FFF963;
}


.message_success{
	padding:1em;
	margin-bottom:1em;
	background-color:#10A700;
	color:#FFF;
}

.message_error{
	padding:1em;
	margin-bottom:1em;
	background-color:#DB0003;
	color:#FFF;
}




/* the lightbox appearing in center of the screen and showing content */
#center_lightbox{
	display:none; /* note that display should be set to 'TABLE' when activating the lightbox */
	position:fixed;
	top:0px; 
	left:0px; 
	height:100%; 
	width:100%; 
	text-align:center;
	background-image:url(/images/background_transparent.png);
}

#center_lightbox_cell{
	display:table-cell; 
	vertical-align:middle; 
	text-align:center; 
	width:100%;
}

#center_lightbox_content{
	padding:10px; 
	background-color:#FFF; 
	min-width:350px; 
	display:inline-block;
	text-align:left;
	border:4px solid #ffad00;
	/*box-shadow: 0px 0px 5px #333;*/
}


@media screen and (max-width: 500px) {
    #center_lightbox_content{
		min-width:calc(100% - 20px - 10px); 
	}
}


p.file_large_preview{
	margin:0px;
	margin-top:1em;
}

p.file_large_preview img{
	max-width:100%; 
	max-height:500px;
}



.file_action_buttons{
	margin-bottom:0px;
	margin-top:1em;
	display:inline-flex;
	width:100%;

}

.file_action_buttons a:link, .file_action_buttons a:visited{

	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
	flex-grow:1;
	max-width:300px;
	margin-left:-1px;
}

.file_action_buttons:first-child{
	margin-left:0px;
}

.file_action_icons{
	display:inline-flex;
	width:100%;
	border-radius:0.3em;
	overflow:hidden;
	margin-top:1em;
}

.file_action_icon{
	display:flex;
	flex-grow:1;
	height:40px;
	
	background-repeat:no-repeat;
	background-position:center;
	background-color:#CCC;

	
	cursor:pointer;
	
	opacity:0.5;

	border-left:1px solid #999;
	
}
.file_action_icon:first-of-type, .file_action_icon:first-of-type:hover{
	border-left:none;
}

.file_action_icon:hover{
	opacity:1.0;
	overflow:hidden;
	border-left:1px solid #CCC;
}

table.file_list_table{
	width:calc(100% + 2em);
	margin-left:-1em;
	margin-bottom:-1em;
	
	border:0px;
	border-collapse:collapse;
	
	background-color:#00D3FF;
}
/* table header */
table.file_list_table th{
	background-color:#DDEEFF;
	font-weight:normal;
	padding:0.5em;
}

table.file_list_table tr{
	background-color:#FFF;
	border-top:1px solid #D5D5D5;
}

table.file_list_table tr:nth-child(odd){
	background-color:#F5F5F5;
}

table.file_list_table td{
	padding:0.5em;
}