@font-face {
    font-family: 'open_sans';
    src: local('Open Sans'),
         url('/skin/opensans_regular_macroman/OpenSans-Regular-webfont.woff') format('woff'),
         url('/skin/opensans_regular_macroman/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/skin/opensans_regular_macroman/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sans';
    src: local('Open Sans Bold'),
         url('/skin/opensans_bold_macroman/OpenSans-Bold-webfont.woff') format('woff'),
         url('/skin/opensans_bold_macroman/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('/skin/opensans_bold_macroman/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

body {
	padding: 0px;
	margin: 0px;
	background-color: #fff;
	color: #222;
	font-family: "open_sans", "Liberation Sans", Helvetica, Arial, sans-serif;
	font-size: 11pt;
	line-height: 25px;
}

#content {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1em 2em;
}

#header {
	overflow: auto;
}

h1 {
	font-size: 3em;
	line-height: 1.5em;
	margin-bottom: 0;
}

h1 img {
	vertical-align: middle;
	margin-right: 0.5em;
	max-width: 33%;
	float: left;
}

p#subtitle {
	float: left;
	margin-top: 0;
	max-width: 60%;
}

ul.gallery > li {
	list-style: none;
	display: inline-block;
	margin: 0.5em;
}

ul.distros {
	padding-left: 0;
	padding-right: 0;
	margin-left: 2%;
	margin-right: 2%;
}

ul.distros > li {
	display: inline-block;
	width: 18.5%;
	margin: 0;
	padding: 0.5%;
	vertical-align: top;
}

ul.distros > li > ul {
	padding-left: 1.5em;
	margin-left: 0;
}

dt::before, dd::before {
    font-size: 125%;
    font-weight: bold;
    float: left;
    margin-left: -1.5em;
}

dt::before {
    content: "Q:";
}

dd::before {
    content: "A:";
}

dt {
	margin: 1em 0 0 2em;
}

dd {
	margin: 0 0 0 4em;
}

dt:target, dt:target + dd {
    background-color: aliceblue;
}

span.note {
	font-size: 90%;
	color: #444;
}

p.note {
	color: #444;
	font-style: italic;
}

@media (max-width:800px){
	ul.gallery {
		margin: 1em 0;
		padding: 0 0.3em;
	}
	ul.gallery > li {
		margin: 0.5em 0.1em;
	}
	ul.distros > li {
		width: 45%;
	}
}

@media (max-width:400px) {
	ul.distros > li {
		width: 100%;
	}
}