@charset "UTF-8";

/* 1. Common */
/* HTML5 compatibility */
article, aside, footer, header, hgroup, nav, section {display:block;} 
body {
    text-align: center;
    font-size: large;
    line-height: 1.3;
    font-family: FreeSans, "DejaVu Sans", "Arial Unicode", BBAlphaSans, sans-serif;
    width: 95%;
    color: white; background-color: black;
    padding: 0; margin: 0em;
    margin-top: 0.5em; margin-bottom: 0.5em;
    margin-left: auto; margin-right: auto;
}
/* other common */
a {color: #4a8dd9; text-decoration: none; font-weight: bold;}
a:visited {color: #ab37af;}
a:hover, a:visited:hover {
    color: red; background-color: yellow;
    text-decoration: underline;
}

p {
    text-align: justify;
    -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;
}

ul {list-style: disc; list-style-position: inside;}

img {border: 0.2em white solid; vertical-align: top; height: 9em;}
.single {border: 0; height: 2.5em; display: block; margin-left: auto; margin-right: auto;}
a img:hover {border: 0.2em yellow solid;}
a .single:hover {border: 0;} 
dl {text-align: left; color: white;}
dt {
    padding-left: 0.5em;
    font-style: italic; font-weight: bold;
    color: black; background-color: silver;
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;  
   }
dd:before {content: "★ "; color: #cfb53b;}

hr {
    width: 100%; height: 0.5em;
    color: #cfb53b; background-color: #cfb53b;
    clear: both;
}
.print {display: none;}

/* header */
header {margin: 0; padding: 0; display: inline-block; text-align: center;}

#langselect {
    display: inline-block;
    color: #cfb53b;
    padding: 0.2em;
    margin: 0;
    margin-bottom: 0.5em;
    text-align: right;
    float: right;
}
#langselect a, #langselect .webgen-langbar-current-lang {
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
    color: white;
    padding: 0.2em;
}
#langselect a:hover {color: red;}
#langselect .webgen-langbar-current-lang {color: black; background-color: white;}

#banner {
    color: white; background-color: #cfb53b;
    font-weight: bold;
    text-indent: 0;
    margin: 0; padding: 0; margin-bottom: 0.5em;
    border: 0.5em solid white;
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
    display: inline-block;
    min-height: 7em;
    width: 100%;
}

#banner #logo {float: left; color: white; background-color: #cfb53b;}
#banner #logo img {border: none; height: 7em;}
#banner #logo img:hover {border: none; background-color: #cfb53b;}

h1 {
    font-weight: bold;
    margin: 0em;
    text-align: center;
    font-size: 3em;
    font-family: serif;
    text-shadow: 0em 0.05em 0.07em white;
}
#sitename h1 a, h1 a:visited  {text-decoration: none; color: black;}
#sitename h1 a:hover {background-color: #cfb53b;}
#slogan {
    color: black;
    text-align: center;
    font-size: 200%;
    padding: 0; margin: 0;
}
#slogan a, #slogan a:visited {
    text-decoration: none;
    color: black;
}
#slogan a:hover {background-color: #cfb53b;}

/* nav */
nav {display: inline-block;}
nav ul {
    text-align: center;
    padding: 0em; margin: 0em;
    list-style-type: none;
    width: 100%;
}
nav li {display: inline-block; line-height: 1.7;}
nav a, nav span {
    font-weight: bold; font-size: 130%;
    float: left;
    color: black; background-color: #cfb53b;
    padding: 0.2em; margin-right: 0.2em;
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
}
nav a:visited {
    color: gray; background-color: silver;
}
nav span {color: black; background-color: white;}
nav a:hover, nav a:visited:hover {background-color: yellow;}


/* bodier */
#bodier {
    display: inline-block;
    text-align: center;
    padding: 0; margin: 0; margin-top: 0.5em; margin-bottom: 0.5em;
    width: 100%;
}
h2 {
    font-size: 190%; color: white;
    font-weight: bold; margin:0; text-align: center;
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
    border: 0.08em solid white;
}

h3, h4 {font-weight: bold; text-align: center; margin:0;}
h3 {font-size: 150%; color: gray;}
.welcome {
    float: left;
    max-width: 40%;
    text-align: left;
    margin: 0.5em; padding: 0.5em;
}
.welcome p img {
    float: left;
    margin-right: 1em;
}
.presentation {
    color: black; background-color: silver;
    border: 0.2em solid gray;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    margin: 0.5em; padding: 0.5em;
    text-align: left;    
    margin-left: 45%;
}
#upcoming {
    color: black; background-color: white;
    margin: 0.5em; padding: 0.5em;
    border: 0.2em solid gray;
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
    display: inline-block;
}
#upcoming dl {color: black;}
#upcoming dd:before {content: "★ "; color: black;}
#upcoming ul {text-align: left;}

.article {
    display: inline-block;
    text-align: center;
    padding: 0.5em;
}
#intro {text-align: center;}
.author {
    color: black; background-color: silver;
    border: 0.2em solid gray;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    margin: 0.5em; padding: 0.5em;
    text-align: left;
    max-width: 50em;
}
.aside {margin-left: 55%;}
.left, .author .sc {float: left; max-width: 50%;}
.right {float: left; margin-left: 55%;}
.wide {margin-left: 0; width: 100%;}
.signature {text-align: right; font-style: italic;}
.sc, .pu, .links, .contact {
    display: inline-block;
    margin: 0.5em;
    color: black; background-color: white;
    text-align: left;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
}
.sc, .pu {padding: 0.5em;}
.sc {max-width: 50%;}
.pu {max-width: 50em; border: 0.15em solid black;}
.links {padding: 0.5em;}
.contact p {text-align: center;}
#address {height: 1em;}
.sc img {
    display: block; margin-left: auto; margin-right: auto;
}
/* .sc .double {display: block; margin-left: auto; margin-right: auto;} */
/* .sc .double img {float: left;} */
.sc h4 /* p:nth-child(2) */ {
    color: black;
    font-size: 1em;
    font-weight: bold; font-style: italic;
    text-shadow: 0 0 0.3em gray;
    text-align: center;
    margin: 0.5em;
    clear: both;
}
.sc p:nth-child(3) {font-style: italic; color: gray;}
.sc p:nth-child(4) {text-align: left; -moz-hyphens: none; -webkit-hyphens: none; hyphens: none;}
.pu img {
    float: left;
    margin-top: 0; margin-left: 0; margin-right: 1.5em; margin-bottom: 0.5em;
}
.pu p:nth-child(2) {
    color: black;
    font-weight: bold; font-style: italic;
    text-shadow: 0 0 0.3em gray;
    text-align: center;
}
.press {
    margin: 0.5em; padding: 0.5em;
    display: inline-block; border: 0.1em dashed white;
}
.press ul {color: white; list-style: none; text-align: left; margin:0; padding:0;}
.press li:first-child {font-weight: bold;}

.expos ul {list-style: disc; text-align: left; color: white;}

/* footer */
footer {clear: both; display: inline-block; text-align: center;}
#copyright p {
    display: inline-block;
    font-size: 80%;
    text-align: center;
    color: black; background-color: white;
    padding-bottom: 0.12%; margin-top: 0.5em;
    border: 0.5em solid #cfb53b;
    width: 100%;
    border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
}
#generator p {
    display: inline-block;
    font-size: 80%; font-family: monospace;
    line-height: 2;
    text-align: center;
    color: white;
    width: 100%;
    margin: 0em;
}
#generator img {border: 0; vertical-align: middle; height: 2em;}
#generator a:hover, a:visited:hover {background-color: black;}

/* 2. Small screen */
@media all and (max-width: 600px), print 
{
    body {
	width: 85%;
	margin-top: 0em; margin-bottom: 0em;
    }
    hr {display: none;}
    h2, h3, h4 {margin: 0em;}
    h2, h3, h4, nav a, nav span {font-size: 100%;}
    h1 {text-align: left; font-size: 150%;}
    #slogan {text-align: left; font-size: 120%;}
    #banner {
	min-height: 0;
	border: 0em solid white;
	border-bottom: 0.5em solid white;
	width: 99%;
    }
    #logo {display: none;}
    nav {margin: 0em; margin-top: 0.2em;}
    .welcome, .article, .author, .presentation, .left, .author .sc, .aside, .press, .sc, .pu, .links, .contact {
	width: 97%; max-width: 97%;
	padding: 0.5em; float: left; margin: 0; margin-bottom: 0.2em;
    }
    .article p img {margin-right: 0.5em;}
    .signature {padding: 0.2em;}
    .sc ul {float: none;}
    .sc img, .pu img {margin: 0; float: left; max-width: 100%;}
    .sc h4 {float: left;}
    .pu p:first-child {margin-left: auto; margin-right: auto;} /* image */
    .pu p:nth-child(2) {clear: left;}
    footer {
	padding-bottom: 0%;
	border: 0em solid #cfb53b;
    }
}

/* 3. Print */
@media print {
    body {
	font-family: serif; font-size: 14pt;
	width: 95%; margin-top: 5%;
    }
    body * {color: black; background-color: white;}
    body, header, #banner, #bodier, footer, #copyright, h2, .article, .aside, .expos, .presentation, .author, .press {
	color: black; background-color: white; display: block;
    }
    header {width: 100%;}
    h1, #slogan {    
	text-align: center;
	text-shadow: 0 0 0 white;
	font-size: 150%;
    }
    #url {text-align: center; color: gray; font-size: 110%;}
    h2, h3, h4 {text-align: left;}
    h2 {font-size: 130%;}
    h3, h4 {font-size: 120%;}
    a, a:visited {color: black; background-color: white; text-decoration: none;}
    a:hover {color: black; background-color: white;}
    dt {border-bottom: 0.1em dotted black; page-break-after: avoid;}
    dd {widows: 4; orphans: 4;}
    dd:before {content: "☆ "; color: black;}
    .print {display: inline;}
    .noprint, hr, #langselect * {
	display: none;
    }
    p, li, img, .sc, .pu, .press, footer, dt, dd {
	page-break-inside: avoid;
    }
    p {widows: 4; orphans: 4;}
    h1, h2, h3, h4 {page-break-after: avoid;}
    .signature {page-break-before: avoid;}
    .aside, .sc, .pu, .links, .press, footer, .article, .presentation, .left, .author .sc, .right {
	float: none;
    }
    .aside, .sc, .pu, .links, .press, footer, .article, .presentation {
	width: 100%; max-width: 100%; min-width: 50%;
	margin-left: 0%;
    }
    .author, .expos {page-break-before: always;}
    li {
	color: black;
	background-color: white;
    }    
    #upcoming, .presentation, .author, #copyright p {border: 0.2em white solid;}
    .press, .press ul, .press p {float: left;}
    footer p {color: black; background-color: white;}
}