/*General =======================================================================================*/ body.ie8 article, aside, header, footer, menu, nav, section{ /*@IE8*/ display: block; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-L.ttf'); font-style: normal; font-weight: 200; font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-LI.ttf'); font-style: italic; font-weight: 200; font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-R.ttf'); font-style: normal; font-weight: normal; /*400*/ font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-RI.ttf'); font-style: italic; font-weight: normal; /*400*/ font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-M.ttf'); font-style: normal; font-weight: 500; font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-MI.ttf'); font-style: italic; font-weight: 500; font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-B.ttf'); font-style: normal; font-weight: bold; /*700*/ font-stretch: normal; } @font-face{ font-family: "Ubuntu"; src: url('./../../fonts/Ubuntu-BI.ttf'); font-style: italic; font-weight: bold; /*700*/ font-stretch: normal; } html{ height: 100%;/*'s height should normally be 100% of the viewport*/ width: 100%;/*'s width should normally be 100% of the viewport*/ min-width: 600pt;/*Should be the same as "body .frame" to ensure the main content is always visible via scrolling*/ font-family: Ubuntu, Arial; font-size: 11pt; } body{ margin: 0pt;/*Remove pre-defined margins*/ padding: 0pt;/*Remove pre-defined paddings*/ width: 100%;/*Ensures is as wide as */ min-height: 100%;/*Ensures is at least as tall as */ background: HoneyDew; display: -webkit-box;/*@Safari5*/ -webkit-box-orient: vertical;/*@Safari5*/ -webkit-box-pack: start;/*@Safari5*/ -webkit-box-align: center;/*@Safari5*/ display: -ms-flexbox;/*@IE10*/ -ms-flex-direction: column;/*@IE10*/ -ms-flex-pack: start;/*@IE10*/ -ms-flex-align: center;/*@IE10*/ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .ie8 a > img,/*@IE8*/ .ie9 a > img{/*@IE9*/ border: none; } _::-ms-reveal, a > img{/*@IE10*/ border: none; } /*Header/Content/Footer =========================================================================*/ .ie8 .frame,/*@IE8*/ .ie9 .frame{/*@IE9*/ margin-left: auto; margin-right: auto; } body .frame{ width: 600pt;/*Defines the width of the main content*/ padding: 10pt; -moz-box-sizing: border-box;/*@Firefox22*/ box-sizing: border-box; } /*Header ========================================================================================*/ body > header{ width: 100%; height: 50pt; background: #134B13; color: White; font-size: 14pt; display: -webkit-box;/*@Safari5*/ -webkit-box-orient: vertical;/*@Safari5*/ -webkit-box-pack: end;/*@Safari5*/ -webkit-box-align: center;/*@Safari5*/ display: -ms-flexbox;/*@IE10*/ -ms-flex-direction: column;/*@IE10*/ -ms-flex-pack: end;/*@IE10*/ -ms-flex-align: center;/*@IE10*/ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } body.ie8 > header,/*@IE8*/ body.ie9 > header{/*@IE9*/ padding-top: 10pt; height: auto; } body > header > .frame{ min-height: 80%; padding-top: 0pt; padding-bottom: 0pt; background: #2A9F1E; background: -webkit-radial-gradient(circle, #93C785, #2A9F1E);/*@Safari5*/ background: radial-gradient(circle, #93C785, #2A9F1E); border-bottom: 0px; border-top-left-radius: 3pt; border-top-right-radius: 3pt; display: -webkit-box;/*@Safari5*/ -webkit-box-orient: horizontal;/*@Safari5*/ -webkit-box-pack: justify;/*@Safari5*/ -webkit-box-align: end;/*@Safari5*/ display: -ms-flexbox;/*@IE10*/ -ms-flex-direction: row;/*@IE10*/ -ms-flex-pack: justify;/*@IE10*/ -ms-flex-align: end;/*@IE10*/ display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; } _::-ms-reveal, body > header > .frame{/*@IE10*/ padding-top: 10pt;/*IE10 does not "flex-align" to "end" properly */ } body.ie8 > header > .frame > *,/*@IE8*/ body.ie9 > header > .frame > *{/*@IE9*/ margin-top: 10pt; display: inline-block; } body > header > .frame > .logo, body > header > .frame > nav{ padding-bottom: 5pt; } body > header > .frame > .logo{ font-weight: bold; font-size: 18pt; } body.ie8 > header > .frame > nav,/*@IE8*/ body.ie9 > header > .frame > nav{/*@IE9*/ margin-top: 15pt; float: right; } body > header > .frame > nav > a{ display: inline-block; margin-left: 10pt; color: inherit; text-decoration: none; } body > header > .frame > nav > a:hover{ text-shadow: 0pt 0pt 3pt #333; } body.ie8 > header > .frame > nav > a:hover,/*@IE8*/ body.ie9 > header > .frame > nav > a:hover{/*@IE9*/ text-decoration: underline; } /*Content =======================================================================================*/ body > .content{ background: White; -webkit-box-flex: 1;/*@Safari5*/ flex: 1;/*Allows the main content to stretch to available vertical space*/ border: 1px #EEEEEE solid; border-bottom-left-radius: 3pt; border-bottom-right-radius: 3pt; } body > .content > section{ margin-bottom: 10pt; padding: 10pt; overflow: hidden; } body > .content > section:last-child{ margin-bottom: 0pt; } body > .content > section > header{ margin-bottom: 10pt; font-size: x-large; } /*Footer ========================================================================================*/ body > footer{ margin-top: 30pt; background: #EEEEEE; border: 1px #DDDDDD solid; border-bottom: 0px; border-top-left-radius: 3pt; border-top-right-radius: 3pt; font-size: 10pt; color: darkgray; display: -webkit-box;/*@Safari5*/ -webkit-box-orient: horizontal;/*@Safari5*/ -webkit-box-pack: justify;/*@Safari5*/ -webkit-box-align: baseline;/*@Safari5*/ display: -ms-flexbox;/*@IE10*/ -ms-flex-direction: row;/*@IE10*/ -ms-flex-pack: justify;/*@IE10*/ -ms-flex-align: baseline;/*@IE10*/ display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; } body.ie8 > footer > *,/*@IE8*/ body.ie9 > footer > *{/*@IE9*/ display: inline-block; } body.ie8 > footer > *{/*@IE8*/ margin-right: 20pt; } body.ie9 > footer > *:first-child{/*@IE9*/ margin-right: 150pt; } body.ie9 > footer > *:last-child{/*@IE9*/ float: right; } body > footer a{ color: inherit; text-decoration: none; } body > footer a:hover{ color: Gray; text-decoration: underline; }