html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; outline: none;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* Force scrollbar in non-IE and Remove iOS text size adjust without disabling user zoom */
html {height: 100%; font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%}
body {height: 100.0%; min-height: 100%; background-color: #fff;
background-image: url(/images/Armillary.jpg); background-repeat:no-repeat;
background-size: contain; background-origin: content-box;
font-family: "Exo 2", sans-serif; font-weight: 200;}
.layer {display: block; background: hsla(0, 0%, 100%, 0.65); height: 100.0%;}
/* TYPOGRAPHY */
/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */
h1 {font-size: 1.75em; line-height: 125%; text-align: right; color: hsla(0, 0%, 40%, 1);
padding: 2em 5% 0 0; font-weight: 300;
text-shadow: 1px 1px 0.25em #888;}
header {position: absolute; bottom: 2em; left: 0; background: hsla(0, 0%, 100%, 0);
display: inline-block; width: 100%; margin: 1em auto 1em auto; text-align: center;}
.lang {display: inline-block; text-align: right; float: right; font-weight:400;}
.lang a {text-decoration: none; border: 0;}
ul.hmenu {display: inline-block; width: 90.0%; height: 3em; margin: 0 auto; text-align: left;}
ul.hmenu li {display: inline-block; width: 25.0%; float: left; padding: 0.25em; height: 100.0%;}
ul.hmenu li a {display: block; width: 100.0%; height: 100.0%; text-decoration: none; border: 0;}
li#about {background: url(../images/a-hidden.gif) no-repeat center center; background-size: contain;
background-origin: content-box;}
li#about:hover {background: rgba(162, 82, 144, 0) url(../images/a-visible.gif) no-repeat center center;
background-size: contain;
background-origin: content-box;-webkit-transition: all 0.6s ease; moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}
li#sundials {background: url(../images/s-hidden.gif) no-repeat center center; background-size: contain; background-origin: content-box;}
li#sundials:hover {background: rgba(82, 99, 167, 0) url(../images/s-visible.gif) no-repeat center center;
background-size: contain;
background-origin: content-box;-webkit-transition: all 0.6s ease; moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}
li#photos {background: url(../images/p-hidden.gif) no-repeat center center; background-size: contain;
background-origin: content-box;}
li#photos:hover {background: rgba(82, 163, 101, 0) url(../images/p-visible.gif) no-repeat center center;
background-size: contain;
background-origin: content-box;-webkit-transition: all 0.6s ease; moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}
li#make {background: url(../images/m-hidden.gif) no-repeat center center; background-size: contain; background-origin: content-box;}
li#make:hover {background: rgba(162, 141, 82, 0) url(../images/m-visible.gif) no-repeat center center;
background-size: contain;
background-origin: content-box;-webkit-transition: all 0.6s ease; moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}
/*================== left side menu of articles ===*/
.note {display:inline-block; background: #f0f0f0; font-size: 90%; padding: 1em;}
.note:before {content:"N.B. "; font-family: 'Courier New', courier; font-size: 110.0%; font-weight: 600;}
.random {padding: 0.25em; }
.sun {color:#f93 !important; }
.round {-moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em;}
.circle {-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.freeright {display: inline-block; font-family: 'Courier New', courier; font-size: 150%;
-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);}
.cf:before,.cf:after {content:""; display:table;} /* For modern browsers */
.cf:after {clear:both;}
.cf {zoom:1;} /* For IE 6/7 (trigger hasLayout) */
body *::selection {background: rgba(255,255,255, 0);}
/* MOBILE PORTRAIT ----------------------------------- <= 320px */
@media only screen and (min-width: 20em) {
body {width: 100%; margin: 0 auto; text-align: center;}
ul.hmenu {height: 3em;}
}
/* MOBILE LANDSCAPE --------------------------------- <= 480px */
@media only screen and (min-width: 30em) {
body {}
ul.hmenu {height: 4em;}
}
/* SMALL TABLET -------------------------------------- <= 640px */
@media only screen and (min-width: 40em) {
body {}
ul.hmenu {height: 5em;}
h1 {font-size: 2em; }
}
/* TABLET/NETBOOK ----------------------------------- <= 768px */
@media only screen and (min-width: 48em) {
body {width: 100.0%;}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP -------------------<= 1024px*/
@media only screen and (min-width: 64em) {
body {}
ul.hmenu {height: 6em; width: 70.0%; }
h1 {font-size: 2.5em; }
}
/*-----------------------------------------------------<= 1400 */
@media only screen and (min-width: 80em) {
/* DESKTOP */
body {width: 92.0%;}
ul.hmenu {height: 8em;}
h1 {font-size: 3em; }
}
/* WIDESCREEN ------------------------------------------<=1920*/
/* Increased body size for legibility */
@media only screen and (min-width: 87.5em) {
body {width: 96.0%; max-width: 120em; font-size:116.75%; } /* 18.5px / 28px */
}