main.css

/**
 * CSS file for the Miga framework.
 *
 * @author Yaron Koren
 */

/* Page-wide values */

body {
	padding: 15px;
	font-family: "Open Sans","Lucida Sans",Avenir,Helvetica,Arial,sans-serif;
}

a {
	color: #3B1EE1;
}

a:active {
	background: #DDDDDD;
}

/* Top elements */

div#logo {
	float: left;
	max-width: 25%
}

div#logo img {
	width: 100%;
}

div#title {
	font-size: 36px;
	font-weight: bold;
	padding: 10px;
	text-align: center;
}

div#title a {
	color: black;
	text-decoration: none;
}

div#title a:hover {
	text-decoration: underline;
}

div#categoryAndSelectedFilters {
	font-size: 20px;
	padding: 15px;
	border-bottom: 2px solid #2F5A33;
	margin-bottom: 25px;
}

div#categoryAndSelectedFilters a {
	color: #22812A;
	text-decoration: none;
}

div#categoryAndSelectedFilters a:hover {
	text-decoration: underline;
}

br.separator {
	clear: both;
}

div#fullWrapper {
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
}

table#headerTable {
	width: 100%;
}

table#headerTable tr td {
	vertical-align: top;
}

ul#selectedFilters {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

ul#selectedFilters li {
}

ul#selectedFilters li a {
	color: #EA4A15;
	font-weight: bold;
	font-size: small;
	text-decoration: none;
}

ul#selectedFilters li a:hover {
	text-decoration: underline;
}

div#navBar {
	float: right;
	margin-top: 15px;
	margin-right: 5px;
}

input#topSearchText {
	/* Copied from http://www.paulund.co.uk/how-to-create-pretty-search-forms */
	background: #fafafa url('./images/miga-search.png') no-repeat 8px 8px;
	border-radius: 15px;
	padding: 6px 15px 6px 30px;
}

/* "Further filters" bar */

div#furtherFiltersWrapper {
	clear: both;
	padding-top: 10px;
}

div#furtherFilters {
	padding: 7px 7px 7px 7px;
	background: #2F5A33;
	border-radius: 5px;
	font-size: large;
	line-height: 30px;
	color: #CDCEC1;
}

div#furtherFilters span {
	margin: 0;
	padding: 5px;
}

div#furtherFilters span.clickable {
	cursor: pointer;
	color: white;
}

div#furtherFilters span.clickable:hover {
	background: #449E4C;
}

div#furtherFilters span.compoundFilterName {
	color: #B9EA57;
}

/* Display format tabs */

ul#displaySelector {
	list-style-type: none;
	border-bottom: 1px black solid;
	margin: 10px 5px 15px 5px;
	padding: 10px 0 6px 0;
}

ul#displaySelector li {
	padding: 6px;
	margin: 0 5px 0 5px;
	display: inline;
}

ul#displaySelector li.selectedDisplay {
	border: 1px black solid;
	border-bottom: 1px white solid;
	background: white;
}

ul#displaySelector li.display {
	border: 1px #444 solid;
	background: #ddd;
}

/* Clickable lists of values - categories, items, filter values, formats etc. */

ul.rows {
	padding: 0;
	margin: 0;
	border-bottom: 1px #555 solid;
	list-style-type: none;
}

div.rows {
	border-bottom: 1px #555 solid;
}

div.cells {
	border-bottom: 1px #555 solid;
}

ul.rows li {
	padding: 6px;
	margin: 0;
	vertical-align: middle;
	border-top: 1px #555 solid;
}

div.cells div.clickable {
	padding: 6px;
	margin-bottom: 12px;
	margin-right: 7px;
	vertical-align: middle;
	width: 250px;
	border-radius: 5px;
	background: #f9f9f9;
	border: 1px #bbb solid;
	display: inline-block;
	vertical-align: top;
}

table.listElement tr td {
	float: left;
	padding-right: 5px;
}

table.listElement img {
	float: left;
	padding-right: 5px;
	max-width: 55px;
}

li.clickable {
	cursor: pointer;
}

div.clickable {
	cursor: pointer;
}

/* Page number display */

ul#pageNumbers {
	padding-left: 0;
	margin-left: 0;
	list-style-type: none;
}

ul#pageNumbers li {
	padding: 6px 9px 6px 9px;
	margin: 5px;
	border: 1px #A59C6D solid;
	display: inline-block;
}

ul#pageNumbers li#pageNumbersLabel {
	border: none;
	padding-left: 0;
	margin-left: 0;
}

ul#pageNumbers li.clickable {
	background: #FAEBA0;
}

ul#pageNumbers li.clickable:hover {
	background: #DBCE8C;
}

/* List of categories/pages in start screen */

ul#categoriesList li {
	background: #DAE5E5;
}
ul#categoriesList li:hover {
	background: #CAD5D5;
}

/* List of items */

table.listElement {
	width: 100%;
}

div#itemsList div.clickable td{
	font-weight: bold;
}

div#itemsList div.clickable:hover {
	background: #e3e3e3;
}

.additionalItemText {
	color: #0066cc;
	text-transform: uppercase;
	font-size: small;
}

/* Display of map */

div#mapCanvas {
	height: 300px;
}

div#coordinates {
	padding-top: 7px;
	font-size: smaller;
	color: #777;
}

/* Display of schedule */

ul.scheduleList {
	padding: 0;
	margin: 0 0 30px 0;
	border-bottom: 1px #555 solid;
	list-style-type: none;
}

ul.scheduleList li {
	background: #D9FFB4;
	padding: 3px 10px 3px 10px;
	margin: 0;
	vertical-align: middle;
	border-top: 1px #555 solid;
}
ul.scheduleList li:hover {
	background: #C9EFA4;
}

ul.scheduleList li td{
	font-weight: bold;
}

/* List of filter values */

/*
ul#filterValuesList li {
	background: #FCF9B2;
}
*/
div#filterValuesList div.clickable {
	background: #FCF9B2;
	padding: 6px;
	border-top: 1px #555 solid;
}
div#filterValuesList div.clickable:hover {
	background: #EAE7A0;
}

div#filterValuesList.cells div.clickable {
	border: 1px #555 solid;
}

div#filterValuesList.numberDisplay div:hover {
	/*background: #9867FF;*/
}
div#filterValuesList.numberDisplay div table tr td {
	/*color: white;*/
}
div.numValuesBar {
	height: 8px;
	margin-top: 3px;
	background: #002E57;
}

/* List of values for a single item */

a.queryLink {
	color: black;
	padding-right: 12px;
	background-image: url('images/miga-query-light.png');
	background-repeat: no-repeat;
	background-position: right top;
}

a.queryLink:hover {
	background-image: url('images/miga-query.png');
}

ul#itemValues {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul#itemValues li {
	padding: 6px;
}
ul#itemValues li:nth-child(even) {
	/*background: #f5f5f5;*/
	border-top: 1px dashed #bbb;
	border-bottom: 1px dashed #bbb;
}

span.fieldName {
	font-weight: bold;
}

div.entitiesList {
	border: 1px black solid;
	border-radius: 9px;
	padding: 10px;
	background: #FAFFDD;
}

ul.compoundEntityInfo {
	border: 1px black solid;
	border-radius: 9px;
	padding: 10px;
	margin: 7px 3px 12px 3px;
	background: #E6E8FD;
	list-style-type: none;
	/*font-size: smaller;*/
}

ul.compoundEntityInfo li.entityName a {
	font-size: medium;
	font-weight: bold;
}

/* Search input and results */

div#searchInput {
	padding: 10px;
	border-top: 1px #bbb solid;
	border-bottom: 1px #bbb solid;
	background: #ddd;
}

ul#nameSearchResults li, ul#contentSearchResults li {
	background: #F9C3C3;
}

ul#nameSearchResults li:hover, ul#contentSearchResults li:hover {
	background: #E7B1B1;
}

td.searchResultItemName {
	vertical-align: top;
	width: 35%;
}

td.searchResultItemValues {
	vertical-align: top;
	font-style: italic;
}

td.searchResultItemValues hr {
	border-style: none none dashed;
	color: #444;
}

span.trueSearchText {
	font-weight: bold;
}

span.searchFormCheckbox {
	display: inline-block;
	padding-right: 6px;
	padding-bottom: 3px;
}

/* "Powered by" button */
div#poweredBy {
	padding: 12px 0 12px 0;
	text-align: right;
}

/* "Last updated" text */
div#lastUpdated {
	font-size: smaller;
	text-align: right;
}

/* Responsive skin stuff */

/* 
@media screen and (max-width: 2030px) {
	div.cells div.clickable {
		width: 15%;
	}
}

@media screen and (max-width: 1650px) {
	div.cells div.clickable {
		width: 18%;
	}
}
*/

@media screen and (min-width: 976px) {
	/* Four columns */
	div.cells div.clickable {
		width: 22%;
	}
}

@media screen and (max-width: 975px) {
	/* Three columns */
	div.cells div.clickable {
		width: 29%;
	}
}

@media screen and (max-width: 700px) {
	div#title {
		font-size: 28px;
	}
	div#categoryAndSelectedFilters {
		font-size: large;
	}
	/* Two columns */
	div.cells div.clickable {
		width: 43%;
	}
}

@media screen and (max-width: 550px) {
	div#title {
		font-size: 16px;
	}
	div#categoryAndSelectedFilters {
		font-size: medium;
	}
	div#furtherFilters {
		font-size: medium;
	}

	/* Need special override for this. */
	div#filterValuesList.cells div.clickable {
		border: 0;
		border-top: 1px #555 solid;
	}

	/* One column */
	div.cells div.clickable {
		display: block;
		border: 0;
		border-top: 1px #555 solid;
		margin: 0;
		width: auto;
		border-radius: 0;
	}

}