/*
* CSS corresponding to that suggested by html5pagestructure.com
*/
BODY
{
position:relative;
min-height:100vh;
}
BODY > MAIN
{
box-sizing:border-box;
min-height:100vh;
padding-bottom:80px;
}
BODY > FOOTER
{
position:absolute;
bottom:0;
left:0;
right:0;
height:80px;
}
/* Defaults */
*
{
min-width:0;
}
.responsive_page_width
{
position:relative;
}
.responsive_section_width,
.responsive_aside_width
{
box-sizing:border-box;
min-width:0;
}
.responsive_section_width:first-child,
.responsive_aside_width:first-child
{
/* Is this necessary margin-left:0px; */
}
.desktop { display:none; }
.zmagic { width:100%; }
.hero_text_padding { padding-left:70px; }
.aside_content_width { max-width:131px; }
/* Phone Portrait */
@media only screen and (orientation:portrait) and (resolution:320x568) {
.responsive_page_width { width:280px; }
.responsive_section_width { width:280px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:320px; }
.mini { display:none; }
}
@media only screen and (orientation:portrait) and (device-width:320px) { /* iPhone 4(s) and 5(s) */
.responsive_page_width { width:280px; }
.responsive_section_width { width:280px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:320px; }
.mini { display:none; }
}
@media only screen and (orientation:portrait) and (device-width:360px) { /* iPhone 6, Asus Zenfone */
.responsive_page_width { width:320px; }
.responsive_section_width { width:320px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:320px; }
.mini { display:none; }
}
@media only screen and (orientation:portrait) and (device-width:375px) { /* Samsung Galaxy Nexus */
.responsive_page_width { width:335px; }
.responsive_section_width { width:335px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:335px; }
.mini { display:none; }
}
@media only screen and (orientation:portrait) and (device-width:412px) { /* Nexus 5X */
.responsive_page_width { width:372px; }
.responsive_section_width { width:372px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:372px; }
.mini { display:none; }
}
@media only screen and (orientation:portrait) and (device-width:414px) { /* iPhone 6 Plus */
.responsive_page_width { width:374px; }
.responsive_section_width { width:374px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:374px; }
.mini { display:none; }
}
/* Phone Landscape */
@media only screen and (orientation:landscape) and (device-height:480px) { /* iPhone 4(s) */
.responsive_page_width { width:440px; }
.responsive_section_width { width:440px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:440px; }
}
@media only screen and (orientation:landscape) and (device-height:568px) { /* iPhone 5(s) */
.responsive_page_width { width:528px; }
.responsive_section_width { width:528px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:landscape) and (device-height:592px) { /* Samsung Galaxy Nexus */
.responsive_page_width { width:552px; }
.responsive_section_width { width:552px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:landscape) and (device-height:360px) { /* Asus Zenfone */
.responsive_page_width { width:600px; }
.responsive_section_width { width:600px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:landscape) and (device-height:667px) { /* iPhone 6 */
.responsive_page_width { width:627px; }
.responsive_section_width { width:627px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:landscape) and (device-height:736px) { /* iPhone 6 Plus */
.responsive_page_width { width:696px; }
.responsive_section_width { width:338px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
/* Tablet Portrait */
@media only screen and (orientation:portrait) and (device-width:768px) { /* iPad 3 */
.responsive_page_width { width:728px; }
.responsive_section_width { width:728px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:portrait) and (device-width:1024px) { /* iPad Pro */
.responsive_page_width { width:982px; }
.responsive_section_width { width:648px; }
.responsive_aside_width { width:334px; }
#modal #modal-inner { width:513px; }
}
/* Tablet Landscape */
@media only screen and (orientation:landscape) and (device-height:1024px) { /* iPad 3 */
.responsive_page_width { width:984px; }
.responsive_section_width { width:984px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:portrait) and (device-width:1024px) { /* iPad Pro */
.responsive_page_width { width:984px; }
.responsive_section_width { width:706px; }
.responsive_aside_width { width:278px; }
#modal #modal-inner { width:513px; }
}
@media only screen and (orientation:landscape) and (device-height:1366px) { /* iPad Pro */
.responsive_page_width { width:984px; }
.responsive_section_width { width:706px; }
.responsive_aside_width { width:278px; }
#modal #modal-inner { width:513px; }
}
/* Browser 1 Column */
@media only screen and (max-width:335px) and (min-device-width:1025px) {
.responsive_page_width { width:295px; }
.responsive_section_width { width:295px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:335px; }
.mini { display:none; }
}
@media only screen and (min-width:400px) and (max-width:504px) and (min-device-width:1025px) {
.responsive_page_width { width:360px; }
.responsive_section_width { width:360px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:400px; }
}
@media only screen and (min-width:504px) and (max-width:740px) and (min-device-width:1025px) {
.responsive_page_width { width:464px; }
.responsive_section_width { width:464px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:400px; }
}
@media only screen and (min-width:740px) and (max-width:770px) and (min-device-width:1025px) {
.responsive_page_width { width:700px; }
.responsive_section_width { width:700px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
.zmagic { width:50%; }
}
@media only screen and (min-width:770px) and (max-width:1100px) and (min-device-width:1025px) {
.responsive_page_width { width:770px; }
.responsive_section_width { width:770px; }
.responsive_aside_width { display: none; }
#modal #modal-inner { width:513px; }
.zmagic { width:50%; }
}
@media only screen and (min-width:1100px) and (max-width:1562px) and (min-device-width:1025px) {
.responsive_page_width { width:1060px; }
.responsive_section_width { width: 700px; }
.responsive_aside_width { width: 360px; display:block; }
#modal #modal-inner { width:580px; }
.desktop { display:block; }
.mobile { display:none; }
.zmagic { width:33.3%; }
}
@media only screen and (min-width:1562px) {
.responsive_page_width { width:1060px; }
.responsive_section_width { width: 700px; }
.responsive_aside_width { width: 360px; display:block; }
#modal #modal-inner { width:580px; }
.desktop { display:block; }
.mobile { display:none; }
.zmagic { width:33.3%; }
}
BODY
{
font-family:opensans,helvetica,arial;
background:#f9f9f9;
margin:0;
overflow-y:scroll;
line-height:1.6;
}
BODY > FOOTER#footer
{
line-height:80px;
color:#aaa;
}
FORM
{
width:100%;
font-size:14px;
line-height:40px;
}
FORM > FIELDSET,
FORM > .fieldset
{
margin:0;
border:none;
border-top: solid 1px #FFFFFF;
border-bottom:solid 1px #E5E5E5;
padding:15px 0;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
FORM > FIELDSET { justify-content:flex-start; }
FORM > .fieldset { justify-content:flex-start; }
HEADER > FORM > FIELDSET { justify-content:center; }
HEADER > FORM > .fieldset { justify-content:center; }
FORM > FIELDSET:first-child { border-top: none; padding-top:0; }
FORM > FIELDSET:last-child { border-bottom: none; padding-bottom:0; }
FORM > .fieldset:first-child { border-top: none; padding-top:0; }
FORM > .fieldset:last-child { border-bottom: none; padding-bottom:0; }
FORM > FIELDSET LABEL,
FORM > .fieldset LABEL
{
display:block;
box-sizing:border-box;
position:relative;
padding:0 15px;
flex-basis:100%;
}
FORM > FIELDSET > LABEL > SPAN,
FORM > .fieldset > LABEL > SPAN
{
display:block;
}
FORM INPUT
{
margin:0;
box-sizing:border-box;
height:40px;
padding:10px 20px;
font-size:inherit;
line-height:20px;
width:100%;
outline:none;
border:solid 1px #ddd;
}
FORM INPUT[type='checkbox'],
FORM INPUT[type='radio']
{
width:auto;
vertical-align:middle;
padding-left:50px;
line-height:auto;
height:auto;
margin-right:20px;
}
FORM TEXTAREA
{
margin:0;
box-sizing:border-box;
padding:10px 20px;
font-size:inherit;
line-height:20px;
width:100%;
outline:none;
border:solid 1px #ddd;
}
FORM > FIELDSET > LABEL.half_width,
FORM > .fieldset > LABEL.half_width
{
flex-basis:50%;
}
FORM > FIELDSET > LABEL.third_width,
FORM > .fieldset > LABEL.third_width
{
flex-basis:33.3333%;
}
FORM > FIELDSET > LABEL.quarter_width,
FORM > .fieldset > LABEL.quarter_width
{
flex-basis:25%;
}
@media only screen and (max-width:740px) and (min-device-width:1025px) {
FORM > FIELDSET > LABEL.half_width,
FORM > .fieldset > LABEL.half_width,
FORM > FIELDSET > LABEL.third_width,
FORM > .fieldset > LABEL.third_width,
FORM > FIELDSET > LABEL.quarter_width,
FORM > .fieldset > LABEL.quarter_width
{
flex-basis:100%;
}
}
FORM .button:not(:first-child)
{
position:absolute;
right:0;
background:none;
border:none;
padding-left:0;
padding-right:0;
}
FORM .button:not(:first-child):hover
{
text-decoration:underline;
}
.button
{
display:inline-block;
box-sizing:border-box;
text-align:center;
font-size:inherit;
margin:0 15px;
padding:0 50px;
height:50px;
line-height:50px;
background:white;
color:#333;
border:solid 1px #333;
text-decoration:none;
cursor:pointer;
}
.button.big
{
font-size:40px;
line-height:80px;
height:80px;
font-weight:300;
}
A.button
{
padding:0;
}
.button.rounded
{
border-radius:6px;
}
.button.filled
{
background:black;
border:none;
color:white;
}
.button.filled:disabled
{
background:black;
border:none;
color:#ddd;
opacity:0.3;
}
.button.filled.primary,
.button.filled.blue
{
background:#337AB7;
}
.button.filled.success,
.button.filled.green
{
background:#5CB85C;
}
.button.filled.info,
.button.filled.turquoise
{
background:#5BC0DE;
}
.button.filled.warning,
.button.filled.orange
{
background:#F1AD4E;
}
.button.filled.danger,
.button.filled.red
{
background:#D9534F;
}
SELECT
{
width:100%;
}
SELECT
{
/* -webkit-appearance:none; */
/* -moz-appearance:none; */
position:relative;
display:block;
margin:0;
height:40px;
padding:0 0 0 20px;
background:#f0f0f0;
color:#555;
width:100%;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-bottom:solid 1px #a6a6a6;
border-right:solid 1px #a6a6a6;
outline:none;
text-indent:0.01px;
text-overflow:' ';
font-size:inherit;
line-height:40px;
}
SELECT:after
{
content:"X";
position:absolute;
right:0;
top:0;
bottom:0;
link-height:40px;
}
@-moz-document url-prefix()
{
SELECT
{
vertical-align:baseline;
}
}
BODY > HEADER#header
{
box-sizing:border-box;
position:fixed;
top:0;
left:0;
right:0;
padding:0;
height:40px;
line-height:40px;
background:#A63400;
color:white;
border-bottom:solid 1px white;
}
.c { text-align:center; }
.l { text-align:left; }
.r { text-align:right; }
.center
{
margin-left:auto;
margin-right:auto;
}
.float_left { float:left; }
.float_right { float:right; }
BODY > MAIN#main
{
background:transparent;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
position: relative;
}
BODY > MAIN.level4 { padding-top:200px; }
BODY > MAIN.level3 { padding-top:160px; }
BODY > MAIN.level2 { padding-top:120px; }
BODY > MAIN.level1 { padding-top: 80px; }
BODY > MAIN.level0 { padding-top: 40px; }
BODY > MAIN#main > *
{
border:solid 1px #ddd;
border-top:none;
border-radius:20px;
padding:20px;
background:white;
}
BODY > MAIN#main > HEADER
{
border-top:solid 1px #ddd;
border-bottom-left-radius: 0;
border-bottom-right-radius:0;
}
BODY > MAIN#main > HEADER + ASIDE
{
border-top-left-radius: 0;
border-top-right-radius:0;
}
BODY > MAIN#main > HEADER ~ ARTICLE
{
border-top-left-radius: 0;
border-top-right-radius:0;
}
BODY > MAIN#main > HEADER ~ FOOTER
{
border-top-left-radius: 0;
border-top-right-radius:0;
}
BODY > MAIN#main > ASIDE:first-child
{
border-top:solid 1px #ddd;
border-top-left-radius:0;
}
BODY > MAIN#main > ASIDE:first-child + ARTICLE
{
border-top:solid 1px #ddd;
border-top-right-radius:0;
}
BODY > MAIN#main > ASIDE:first-child + ARTICLE + FOOTER
{
border-top-left-radius:0;
border-top-right-radius:0;
}
BODY > MAIN#main > HEADER + ASIDE:nth-last-child(3)
{
border-bottom-left-radius: 0;
border-bottom-right-radius:0;
}
BODY > MAIN#main > HEADER + ASIDE:nth-last-child(2)
{
border-bottom-left-radius: 0;
}
BODY > MAIN#main > HEADER ~ ARTICLE:nth-last-child(2)
{
border-bottom-left-radius: 0;
border-bottom-right-radius:0;
}
BODY > MAIN#main > HEADER + ASIDE + ARTICLE:last-child
{
border-bottom-right-radius:0;
}
BODY > MAIN#main > ASIDE:first-child:nth-last-child(3)
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN#main > ASIDE:first-child:nth-last-child(2)
{
border-bottom-left-radius:0;
}
BODY > MAIN#main > ASIDE:first-child + ARTICLE:last-child
{
border-bottom-right-radius:0;
}
BODY > MAIN#main > ASIDE:first-child:nth-last-child(3) + ARTICLE
{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
BODY > MAIN#main > ARTICLE:first-child:last-child
{
border-top:solid 1px #ddd;
}
BODY > MAIN#main > HEADER,
BODY > MAIN#main > FOOTER
{
flex-basis:100%;
background:#f5f5f5;
min-height: 40px;
line-height:40px;
}
BODY > MAIN#main > HEADER { text-align:center; }
BODY > MAIN#main > ARTICLE
{
box-sizing:border-box;
flex-basis:100%;
}
BODY > MAIN#main > ASIDE
{
box-sizing:border-box;
flex-basis:30%;
background:#f5f5f5;
}
BODY > MAIN#main > ASIDE + ARTICLE
{
border-right:none;
flex-basis:70%;
}
BODY > HEADER NAV,
BODY > FOOTER NAV,
BODY > NAV
{
line-height:inherit;
}
BODY > HEADER NAV ~ NAV,
BODY > FOOTER NAV ~ NAV,
BODY > NAV NAV ~ NAV
{
float:right;
}
BODY > HEADER NAV UL,
BODY > HEADER NAV OL,
BODY > FOOTER NAV UL,
BODY > FOOTER NAV OL,
BODY > NAV UL,
BODY > NAV OL
{
float:left;
margin:0;
padding:0;
list-style-type:none;
height:40px;
}
BODY > HEADER NAV UL ~ UL,
BODY > HEADER NAV OL ~ UL,
BODY > FOOTER NAV UL ~ UL,
BODY > FOOTER NAV OL ~ UL,
BODY > NAV UL ~ UL,
BODY > NAV OL ~ UL
{
float:right;
}
BODY > HEADER NAV UL > LI,
BODY > HEADER NAV OL > LI,
BODY > FOOTER NAV UL > LI,
BODY > FOOTER NAV OL > LI,
BODY > NAV UL > LI,
BODY > NAV OL > LI
{
display:block;
list-style-type:none;
float:left;
}
BODY > HEADER NAV A,
BODY > FOOTER NAV A,
BODY > NAV A
{
display:block;
float:left;
line-height:inherit;
color:inherit;
text-decoration:none;
padding:0 15px;
vertical-align:top;
}
BODY > HEADER NAV SPAN,
BODY > FOOTER NAV SPAN,
BODY > NAV SPAN
{
display:inline-block;
vertical-align:top;
line-height:35px;
}
BODY > NAV OL LI SPAN,
.breadcrumbs SPAN
{
display:block;
line-height:35px;
float:left;
vertical-align:top;
font-size:30px;
}
BODY > NAV OL LI SPAN:before,
.breadcrumbs SPAN:before
{
content:"\0203A";
}
BODY > NAV UL LI SPAN,
.menu SPAN
{
display:block;
float:left;
font-size:28px;
line-height:15px;
vertical-align:top;
}
BODY > NAV UL LI SPAN:before,
.menu SPAN:before
{
content:"\00B7";
font-size:28px;
line-height:40px;
vertical-align:top;
}
BODY > NAV UL LI SPAN:before,
.menu SPAN:before
{
content:"\00B7";
xfont-size:28px;
xline-height:40px;
xvertical-align:top;
}
BODY > HEADER NAV A:hover,
BODY > FOOTER NAV A:hover,
BODY > NAV A:hover
{
opacity:0.8;
}
NAV#nav,
NAV#nav1,
NAV#nav2
{
box-sizing:border-box;
position:fixed;
left:0;
right:0;
height:40px;
line-height:40px;
border-bottom:solid 1px #aaa;
background:white;
}
NAV#nav { top:40px; }
NAV#nav1 { top:40px; }
NAV#nav2 { top:80px; }
BODY > HEADER#header NAV LI
{
border-right:solid 1px rgba(255,255,255,0.3);
}
BODY > HEADER#header NAV LI:first-child
{
border-left:solid 1px rgba(255,255,255,0.3);
}
BODY > HEADER#header NAV > A
{
display:inline-block;
border-right:solid 1px rgba(255,255,255,0.3);
}
BODY > HEADER#header NAV > A:first-child
{
border-left:solid 1px rgba(255,255,255,0.3);
}
TABLE
{
border-collapse:collapse;
}
TABLE
{
width:100%;
}
TABLE TH,
TABLE TD
{
position: relative;
line-height: 25px;
padding: 5px 10px;
text-align: left;
font-size: 14px;
font-weight: 300;
}
TABLE TH SMALL,
TABLE TD SMALL
{
font-size: 11px;
}
TABLE > THEAD > TR > TH
{
background:#666;
color:white;
border-left:solid 1px rgba(100,100,100,0.2);
}
TABLE > THEAD > TR > TH:first-child
{
border-left:none;
}
TABLE > TBODY > TR > TD
{
border-bottom: solid 1px #ddd;
background: white;
color: #666;
}
ARTICLE HEADER { text-align:center; line-height:40px; }
ARTICLE HEADER#title { font-size:40px; }
ARTICLE HEADER#subtitle { font-size:16px; }
ARTICLE PRE
{
border: solid 1px #ddd;
border-top-left-radius: 20px;
padding: 20px;
overflow-x: scroll;
}
ARTICLE HEADER { text-align:center; line-height:40px; }
ARTICLE HEADER#title { font-size:40px; }
ARTICLE HEADER#subtitle { font-size:16px; }
ARTICLE PRE
{
border: solid 1px #ddd;
border-top-left-radius: 20px;
padding: 20px;
overflow-x: scroll;
}