pb.css

/**************************
	GENERAL FORMATTING
**************************/
body
{
	background-color	: #FFFFC0;
	font-family	: sans-serif;
	margin	: 0;
	padding-top	: 40px;
}
body.iframe { padding-top: 0; }
article div.text
{
	font-family: serif;
}

/* PAGE LAYOUT */
div.center {margin: 0 auto;}
@media (min-width: 600px)
{
	div.center {width: 600px;}
	div.content {width: 600px;}
}
@media (min-width: 900px)
{
	div.center {width: 900px;}
}

div.content
{
	position	: relative;
	margin-top	: 20px;
}

/* side panel right to div.content */
aside#panel { max-width: 340px; }
@media (min-width: 900px)
{
	aside#panel
	{
		position: fixed;
		left	: 50%;
		margin-left	: 170px;
		width	: 280px;
		z-index	: 1;
	}
}
@media (max-width: 899px)
{
	aside#panel iframe { display: none; }
}

/* page header */
div.head
{
	position	: fixed;
	z-index	: 1;	top	: 0;
	width	: 100%;	width	: calc(100% - 14px);
	background: #F0B070;
	background: linear-gradient(to bottom, #F0B060, #FFC070 50%, #F8C880 80%, #D0B070);
	padding	: 3px 7px;
}
div.head a#logo
{
	color	: #F06020;
	text-shadow	: 0.5px 0.5px 1px #808060, -1px -1px 1px #FFFFF0;
	text-decoration	: none;
	font-size : x-large;
	vertical-align	: middle;
	transition	: color 0.5s;
}
div.head a#logo:hover {color: #FF4000;}
div.head form#login
{
	padding	: 0px;
	margin	: 0px;
}
@media (max-width: 899px) {
	div.head form#login
	{
		z-index	: 2;
		display	: none;
		position: absolute;
		right	: 12px;	top	: 40px;
		background	: #F0D0A0;
		border		: 1px solid #C08040;
		border-radius	: 5px 0px 5px 5px;
	}
}
@media (min-width: 900px)
{
	div.head form#login
	{
		float : right;
	}
}
.username
{
	color	: #F06020;
	text-decoration	: none;
}
span.username {margin: 5px;}
span#wait
{
	font-size	: small;
	color	: Red;
	margin	: 0px 10px;
}

/* navigation in panel/header */
nav ul
{
	list-style	: none outside;
	padding		: 0px;
	margin		: 0px;
	margin-bottom	: 1em;
	border-radius	: 5px;
	border		: 1px solid #C08040;
}
nav#headermenu
{
	display	: inline-block;
	float	: right;
	margin	: 0 5px;
}
nav#headermenu ul
{
	display	: inline-block;
	margin	: 0;
}
nav#headermenu ul li
{
	display : inline-block;
	padding : 5px;
}
nav#headermenu ul li span {display:none;}
nav ul li
{
	background	: #FFC040;
	box-shadow	: -5px 5px 8px rgba(255, 255, 255, 0.3) inset;
	padding	: 5px 15px 5px 10px;
	transition	: 0.5s background;
}
nav ul li:hover { background: #FF8040; }
nav ul li a
{
	text-decoration	: none;
	color	: Teal;
}
nav ul li a span
{
	text-transform	: uppercase;
	font-size	: small;
}
@media (max-width: 899px)
{
	nav#sidemenu { display: none; }
}
@media (min-width: 900px)
{
	nav#headermenu { display: none; }
}

/* HEADER FORMATTING */
/* huge script headers turned to the left */
h2
{
	font-family : serif;
	font-style	: italic;
	font-size	: 50px;
	font-weight	: normal;
	transform	: rotate(-90deg);
	-webkit-transform	: rotate(-90deg);
	position	: absolute;
	width	: 600px;	text-align	: right;
	left	: -350px;	top	: 300px;
	margin	: 0;	z-index	: -1;
}

/* small subheaders in overviews */
h3
{
	font-family	: sans-serif;
	font-size	: x-large;
	font-weight	: bold;
	margin		: 0em 0.5em 0em 1em;
}

/* pseudo-headers for small boxes*/
h4.fa {
	font-size	: xx-large;
	vertical-align	: middle !important;
	margin	: 10px 5px 5px 10px;
}

/* LINK FORMATTING */
a.button
{
	border-radius	: 5px;
	background		: #00C000;
	background		: linear-gradient(to bottom, #00E000, #00A000);
	padding	: 3px 7px;	margin	: 0px 3px 5px 3px;
	color	: White;	text-shadow	: 0px 1px 0px Black;
	text-decoration	: none;
	box-shadow	: inset 0px 0px 1px #006000;
	text-decoration	: none;
	font-size	: medium;
	display		: inline-block;
	white-space	: nowrap;
}
a.button:hover
{
	background	: #00E000;
	background	: linear-gradient(to bottom, #00F000, #00D000);
}
a.button:active
{
	box-shadow	: inset 2px 2px 1px #006000;
	padding		: 4px 6px 2px 8px;
}
a.danger
{
	background	: #A00000;
	box-shadow	: inset 0px 0px 1px #600000;
	background	: linear-gradient(to bottom, #C00000, #800000);
}
a.danger:hover
{
	background	: #E00000;
	background	: linear-gradient(to bottom, #FF0000, #C00000);
}
a.danger:active {box-shadow	: inset 2px 2px 1px #600000;}
a.inner
{
	position	: absolute;
	right		: 5px;
	opacity		: 0;
	transition	: opacity 0.5s;
}
a.bottom {bottom:10px;}
*:hover > a.inner {opacity:1;}
@media (max-width: 600px)
{
	a.inner {opacity:1;}
	a.button span {display:none;}
}

/* TAG FORMATTING */
div.taglist, span#taglist
{
	margin	: 5px;
	line-height	: 1.5em;
}
*.tag
{
	padding			: 2px 5px;
	margin			: 2px;
	border-radius	: 3px;
	font-weight		: bold;
	font-size		: small;
	text-decoration	: none;
	white-space		: nowrap;
}
i.close
{
	color	: #0080FF;
	text-shadow: 0px 0px 1px Black;
	margin-bottom	: -1px;
	margin-left		: 3px;
}
article.task div.tags
{
	float	: right;
	font-style	: normal;
}
h3 > *.tag
{
	font-size	: inherit;
	border-radius	: 5px;
}

/* MISCELLANEOUS */
*.info
{
	font-size	: small;
	color		: #606060;
}
a.email
{
	text-decoration	: none;
}
address
{
	display	: inline;
}

/**************************
	CONTENT FORMATTING
**************************/

/* INDEX PAGE */
/* task list */
div#tasklist { margin-bottom: 3em; }
div.info a, table.stat a
{
	color	: inherit;
	text-decoration	: none;
}
div.info a:hover, table.stat a:hover
{text-decoration: underline;}

/* calendar to browse through issues */
div#calendar
{
	background	: #E060A0;
	border-radius	: 5px;
	padding		: 10px;
	margin	: 15px 5px;
	font-size	: small;
}
a.dirbutton
{
	font-size	: x-large;
	color	: #800040;
	vertical-align	: middle;
	text-decoration	: none;
}
a.dirbutton:hover
{
	color	: #C00060;
}
div#calendar div#years
{
	display	: inline-block;
	vertical-align	: middle;
	max-width	: 175px;
}
div#calendar div#months
{
	display	: inline-block;
	vertical-align	: middle;
	margin	: 10px 10px 5px 10px;
	max-width	: 180px;
}
h4.fa-calendar
{
	color	: #800040;
}
div#calendar div#months a
{
	width	: 2em;
	display	: inline-block;
}
div#calendar div#months a.long {width: 4.5em;}

/* pager to browse through pages */
div#pager
{
	background	: #ffa060;
	text-align	: center;
	border	: 1px solid #c08040;
	border-bottom	: none;
	position: fixed;
	width	: 230px;
	bottom	: 0em;
	z-index	: 2;
	padding	: 9px 5px 0px;
	border-radius	: 10px 10px 0px 0px;
	box-shadow	: 0px 0px 5px #c0a080;
}
@media (max-width: 899px)
{
	div#pager
	{
		left	: 50%;
		margin-left	: -120px;
	}
}
@media (min-width: 900px)
{
	div#pager
	{
		right	: 50%;
		margin-right: -430px;
	}
}

/* TASK PAGE */
article.task
{
	border	: 1px solid Gray;
	border-radius : 5px;
	background	: #FFD080;
	margin : 15px 5px; padding : 5px;
	position	: relative;
}
div.text {margin : 10px;}
div.text:before
{
	font-family	: sans-serif;
	font-variant: small-caps;
	font-size	: small;
	color		: Gray;
}
article.task div.text:before {content: "Aufgabe: ";}
div.info
{
	font-style	: italic;
	padding		: 0px 10px 5px;
}
div.top
{
	border-bottom	: 1px solid Gray;
	padding			: 5px;
}
time.proposed
{
	color	: #A0A0A0;
	padding	: 0 1em;
}

/* publishing form */
form#publish
{
	float	: right;
	padding	: 3px 5px;
	margin	: 0px 5px 15px;
	border-radius	: 5px;
	background	: #E0A040;
}
form#publish input {margin: 2px;}
form#publish input.text {background : #FFC040;}
form#publish input.text:hover {background : #FFD060;}

/* tag selector */
div.tag_selector
{
	background	: #D0D0A0;
	border-radius	: 5px;
	margin		: 5px 5px 1em;
	padding		: 5px;
	line-height	: 1.5em;
}
div.tag_selector i.fa-tags
{
	font-size	: x-large;
	color		: #A0A080;
	padding		: 5px;
}

/* comments */
h3#comments {color: #A0A000;}
article.comment
{
	border	: 1px solid Gray;
	border-radius : 5px;
	margin : 15px 5px; padding : 5px 10px;
	background	: #C0C020;
	position	: relative;
}
article.own {background: #E0E020;}
article.editorial div.text:before	{content:"(intern) "; }
article.comment address
{
	display		: inline;
	margin		: 3px 10px 3px 0px;
	font-size	: small;
}
article.comment address a.envelope
{
	margin-left	: 3px;
	font-size	: medium;
	text-decoration	: none;
}
article.comment div.text
{
	display	: inline;
	margin	: 3px 0px;
}

/* SOLUTION LIST */
article.solution
{
	border	: 1px solid Gray;
	border-radius : 5px;
	background	: #D0E0FF;
	margin : 15px 5px; padding : 5px;
	position	: relative;
}
article.solution div.text:before {content: "L\00f6sung: ";}
article.nonpublic
{
	border-style: dashed;
	opacity	: 0.7;
}

/* ISSUE PAGE */
h2.issue {color : #C00060; text-shadow : #800040 2px 2px 3px;}

h3#problems {color: #D08040;}
h3#solutions {color: #4080C0;}

/* e in TeX */
div.tex
{
	display	: inline;
	position: relative;
	top		: 0.166667em;
	letter-spacing	: -0.1em;
}

/* USER MANAGEMENT */
table.users
{
	width	: 100%;
	background	: #60C0F0;
	box-shadow	: 5px 5px 0px #4080A0;
	border-collapse	: collapse;
	border-radius	: 5px;
}
table.users tbody tr:hover,
table.users tfoot tr:hover {
	background	: #80D0FF;
}
table.users td, table.users th
{
	padding	: 5px 10px;
}

form#edit, form#pw, form#newuser
{
	background	: #40A0E0;
	box-shadow	: 3px 3px 5px #80C0E0;
}

/* STATISTIC DIVS & TABLES */
*.stat
{
	margin	: 1em 5px;
	background	: #E06060;
	border-radius	: 5px;
}
div.stat {padding: 5px; line-height:1.5em;}
table.stat {border-collapse: collapse;}
@media (min-width:600px)
{ table.stat {width: 80%;} }
@media (max-width:599px)
{ h3 span.extra {display: none;} }
table.stat td + td {text-align:right;}
table.stat tbody tr:hover {
	background	: #F07070;
}
table.stat td, table.stat th
{
	padding	: 5px 10px;
}

/**************************
		CONTENT FORMS
**************************/
form
{
	padding			: 10px;
	margin			: 1em 5px;
}
input, textarea, select {margin : 5px;}
input.text, textarea {border : 1px dashed #808080;}
textarea
{
	width: 100%;
	width: calc(100% - 10px);
	resize: vertical;
}

form input[name="delete"]
{
	display	: none;
}

/* FILTER FORM */
form.filter
{
	background-image	: url("img/filter.png");
	background-repeat	: repeat;
	border-radius	: 10px;
	box-shadow	: 3px 3px 5px Gray;
}
form.filter div#questions
{
	border-top		: 1px solid Gray;
	border-bottom	: 1px solid Gray;
}
form.filter input[name="filter"]	{width: 120px;}
form.filter div#questions input[type="text"]	{width: 150px;}
label.question
{
	font-size	: small;
	color		: #A0A0A0;
}
form#filter label:first-child
{
	display		: inline-block;
	width	: 4em;
}

/* TASK FORM */
h2.task {color : #C00000; text-shadow : #C060A0 2px 2px 3px;}
form.task
{
	background-color: #FFA060;
	box-shadow	: 3px 3px 5px #C08060;
}
form.task input.text, form.task textarea {background : #FFD080;}
form.task input.text:hover, form.task textarea:hover {background : #FFE0A0;}

form#tageditor
{
	background-color	: #40E0C0;
	border-radius	: 10px;
	box-shadow	: 3px 3px 5px #208080;
}

/* SOLUTION FORM */
h2.solution {color : #0000C0; text-shadow : #60A0C0 2px 2px 3px;}
form.solution
{
	background-color: #A0C0FF;
	box-shadow	: 3px 3px 5px #80A0C0;
}
form.solution input.text, form.solution textarea {background : #B0E0FF;}
form.solution input.text:hover, form.solution textarea:hover {background : #D0F0FF;}

/* EVALUATION FORM */
h2.eval {color : #D0C000; text-shadow : #60A080 2px 2px 3px;}
form.eval
{
	background-color: #D0D030;
	box-shadow	: 3px 3px 5px #A0A020;
}
form.eval input.text, form.eval textarea {background : #F0F050;}
form.eval input.text:hover, form.eval textarea:hover {background : #F0F080;}
div.eval
{
	display		: inline-block;
	white-space	: nowrap;
}
span.eval
{
	font-size	: small;
	padding		: 0.5em;
}

/**
 * The following is inspired by http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/
 * See http://jsfiddle.net/leaverou/CGP87/light/, (c) Lea Verou 2011
 */
div.eval:not(:checked) > input
{
	display: none;
}

div.eval:not(:checked) > label,
div.eval > span.unchecked
{
	color		: #DDD;
	text-shadow	: 1px 1px #BBB, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
div.eval:not(:checked) > label
{
	float		: right;
	width		: 1em;
	padding		: 0 .1em;
	overflow	: hidden;
	white-space	: nowrap;
	cursor		: pointer;
}

div.eval:not(:checked) > input ~ label:before
{
	content	: '★ ';
}

div.eval > input:checked ~ label,
div.eval > span.checked
{
	color		: #3D0;
	text-shadow	: 1px 1px #2B0, 2px 2px #190, .1em .1em .2em rgba(0,0,0,.5);
}

div.eval:not(:checked) > label:hover,
div.eval:not(:checked) > label:hover ~ label
{
	color		: #3D6;
	text-shadow	: 1px 1px #2B4, 2px 2px #192, .1em .1em .2em rgba(0,0,0,.5);
}

div.eval > input:checked + label:hover,
div.eval > input:checked + label:hover ~ label,
div.eval > input:checked ~ label:hover,
div.eval > input:checked ~ label:hover ~ label,
div.eval > label:hover ~ input:checked ~ label
{
	color		: #6D6;
	text-shadow	: 1px 1px #4B4, 2px 2px #292, .1em .1em .2em rgba(0,0,0,.5);
}

/* PICTURES & PICTURE FORMS */
div.picture
{
	display	: inline-block;
	padding	: 5px;
	border-radius	: 5px;
	background	: #80C0C0;
}
div.picform
{
	margin	: 1em 5px;
	padding	: 5px;
	background	: #80C0C0;
	box-shadow	: 3px 3px 5px #60A0A0;
}
.fa-picture-o {color: #206060;}
a.fa-picture-o {font-size: x-large;}
a.fa-picture-o:hover {color: #20A0A0;}
div.picform input.text, div.picform textarea {background : #B0E0E0;}
div.picform input.text:hover, div.picform textarea:hover {background : #C0F0F0;}
input.id {width: 50px;}

/* proposer form */
input.name {width : 150px;}
input.location {width : 100px;}
input.country {width : 150px;}

/* PREVIEWS IN FORMS */
form div.problem
{
	font-family: serif;
	border	: 1px solid Gray;
	border-radius : 5px;
	background	: #FFD080;
	margin : 5px; padding : 5px;
}
form div.problem:before
{
	content	: "Aufgabe: ";
	font-family	: sans-serif;
	font-variant: small-caps;
	font-size	: small;
	color		: Gray;
}

div.preview
{
	font-family: serif;
	border	: 1px solid Gray;
	border-radius : 5px;
	background	: #FFF0C0;
	margin : 5px; padding : 5px;
}
div.preview:before
{
	content	: "(Vorschau) ";
	font-family	: sans-serif;
	font-variant: small-caps;
	font-size	: small;
	color		: Gray;
}