/*! material-base.css v2.3.1 */
/*With materials from http://jaydenseric.com/blog/forget-normalize-or-resets-lay-your-own-css-foundation*/

/* Resets
 =============================================================================*/
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    margin: 0;
    font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ol,
ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
}
a {
    text-decoration: none;
    color: inherit;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
}
/**
 * Scale the image proportionally to its maximum width where maximum
 * width is either the image's actual width of the width of its
 * parent container.
 */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

hr {
    border: 0;
    border-bottom: 1px solid #cbcbcb;
}

/* Typography
 * ---------------------------------------------------------------------------*/
/* Contain overflow in all browsers. */
pre {
  overflow: auto;
}

h1 {
    font-size: 2rem;
    margin: 1.875rem 0;
}

h2 {
    font-size: 1.5rem;
    margin: 1.25rem 0;
}

h3 {
    font-size: 1.25rem;
    margin: 1rem 0;
}

h4 {
    font-size: 1rem;
    margin: 0.75rem 0;
}

h5 {
    font-size: 0.875rem;
    margin: 0.625rem 0;
}

h6 {
    font-size: 0.75rem;
    margin: 0.5rem 0;
}

p { margin: 1em 0; }

.mono { font-family: "Roboto Mono", Courier, monospace }

.ctext { text-align: center; }
.ltext { text-align: left; }
.rtext { text-align: right; }

.shade3 { color: #333 !important; }
.shade6 { color: #666 !important; }
.shade9 { color: #999 !important; }
.shadec { color: #ccc !important; }
.shadee { color: #eee !important; }
.box3 { border: 1px solid #333; }
.box6 { border: 1px solid #666; }
.box9 { border: 1px solid #999; }
.boxc { border: 1px solid #ccc; }
.boxe { border: 1px solid #eee; }

.strikethrough { text-decoration: line-through; }
.underline { text-decoration: underline; }
.undline { border-bottom: solid 1px #ccc; }
.aboveline { border-top: solid 1px #ccc; }
.unddots { border-bottom: dotted 1px #ccc; }
.abovedots { border-top: dotted 1px #ccc; }
.unddash { border-bottom: dashed 1px #ccc; }
.abovedash { border-top: dashed 1px #ccc; }

.larger { font-size: larger; }
.large50 { font-size: 1.5em; }
.large25 { font-size: 1.25em; }
.huge { font-size: 3em; }
.smaller { font-size: smaller; }
.small50 { font-size: 0.5em; }
.small70 { font-size: 0.7em; }
.small85 { font-size: 0.85em; }
.lighter { font-weight: lighter; }

.clickable { cursor: pointer; }

/* Table
 * ---------------------------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
    background: transparent;
}

table.nice {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

table.nice td,
table.nice th {
    padding: 0.5rem 0.75rem;
    border-left: 1px solid #cbcbcb;
    font-size: inherit;
    overflow: visible;
}

table.nice td:first-child,
table.nice th:first-child {
    border-left-width: 0;
}

table.bordered td,
table.bordered th {
    border-bottom: 1px solid #cbcbcb;
}

table.horizontal-bordered td,
table.horizontal-bordered th {
    border-width: 0 0 1px;
    border-bottom: 1px solid #cbcbcb;
}

table.bordered tbody > tr:last-child td,
table.horizontal-bordered tbody > tr:last-child td {
    border-bottom-width: 0;
}

table.align-top td {
    vertical-align: top;
}

table.zebra tbody tr:nth-child(even) {
    background-color: rgba(221, 221, 221, 0.5);
}

/* Images
 * ---------------------------------------------------------------------------*/
img.bordered {
    border: 1px solid rgba(0, 0, 0, 0.25);
    padding: 4px;
    box-sizing: border-box;
}

figure {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
}

figure img {
    display: block;
}

figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.875rem;
    padding: 0 0.5em;
    height: 2.5rem;
    line-height: 2.5rem;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
    background-color: #ccc;
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}

/* Lists
 * ---------------------------------------------------------------------------*/
nav ul {
    list-style: none;
}

ul.normal {
    list-style-position: outside;
    margin-left: 1.5rem;
}

ul.unstyled {
    list-style: none;
}

ul.unstyled li {
    display: block;
}

ul.inline {
    list-style: none;
}

ul.inline li {
    display: inline-block;
}

dl.nice dt {
    font-weight: bold;
}

dl.nice dd {
    font-size: smaller;
}

/* Spacing
 * ---------------------------------------------------------------------------*/
.block { display: block; }
.hide { display: none; }
.hidden { display: none !important; }
.iblk { display: inline-block; }

.nobleed { overflow: hidden; }
.scrollable { overflow: auto; }
.break {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

.space05 { margin: 0.5rem; }
.space05-top { margin-top: 0.5rem; }
.space05-right { margin-right: 0.5rem; }
.space05-bottom { margin-bottom: 0.5rem; }
.space05-left { margin-left: 0.5rem; }

.space1 { margin: 1rem; }
.space1-top { margin-top: 1rem; }
.space1-right { margin-right: 1rem; }
.space1-bottom { margin-bottom: 1rem; }
.space1-left { margin-left: 1rem; }

.space2 { margin: 2rem; }
.space2-top { margin-top: 2rem; }
.space2-right { margin-right: 2rem; }
.space2-bottom { margin-bottom: 2rem; }
.space2-left { margin-left: 2rem; }

.space3 { margin: 3rem; }
.space3-top { margin-top: 3rem; }
.space3-right { margin-right: 3rem; }
.space3-bottom { margin-bottom: 3rem; }
.space3-left { margin-left: 3rem; }

.space0 { margin: 0; }
.space0-top { margin-top: 0; }
.space0-right { margin-right: 0; }
.space0-bottom { margin-bottom: 0; }
.space0-left { margin-left: 0; }

.pad05 { padding: 0.5rem; }
.pad05-top { padding-top: 0.5rem; }
.pad05-right { padding-right: 0.5rem; }
.pad05-bottom { padding-bottom: 0.5rem; }
.pad05-left { padding-left: 0.5rem; }

.pad1 { padding: 1rem; }
.pad1-top { padding-top: 1rem; }
.pad1-right { padding-right: 1rem; }
.pad1-bottom { padding-bottom: 1rem; }
.pad1-left { padding-left: 1rem; }

.pad2 { padding: 2rem; }
.pad2-top { padding-top: 2rem; }
.pad2-right { padding-right: 2rem; }
.pad2-bottom { padding-bottom: 2rem; }
.pad2-left { padding-left: 2rem; }

.pad3 { padding: 3rem; }
.pad3-top { padding-top: 3rem; }
.pad3-right { padding-right: 3rem; }
.pad3-bottom { padding-bottom: 3rem; }
.pad3-left { padding-left: 3rem; }

.pad0 { padding: 0; }
.pad0-top { padding-top: 0; }
.pad0-right { padding-right: 0; }
.pad0-bottom { padding-bottom: 0; }
.pad0-left { padding-left: 0; }

table.full { width: 100%; }
button.full { width: 100%; }
select.full { width: 100%; }
a.full { display: block; }
/*The below is required display:inline-block in styles*/
a.raised.full { display: block; }

.centerer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexbox {
    display: flex;
    flex-direction: row;
}

.flexbox--wrap {
    flex-wrap: wrap;
}

.flexbox--centre {
    justify-content: center;
    align-items: center;
}

.flexbox--around {
    justify-content: space-around;
}

.flexbox--between {
    justify-content: space-between;
}
/* Floats & Clears
 * ---------------------------------------------------------------------------*/
.lfloat { float: left; }
.rfloat { float: right; }
.lclear { clear: left; }
.rclear { clear: right; }
.clear { clear: both; }

.clearfix:after, .clearfix:before,
.postclearfix:after, .preclearfix:before {
    content: "\0020";
    display: block;
    overflow: hidden;
    height: 0;
    clear: both;
}

/* Transparency
 * ---------------------------------------------------------------------------*/
.trans1-2 {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
.trans1-3 {
    opacity: 0.333;
    filter: alpha(opacity=33); /* For IE8 and earlier */
}
.trans1-10 {
    opacity: 0.1;
    filter: alpha(opacity=10); /* For IE8 and earlier */
}

/* Containers
 * ---------------------------------------------------------------------------*/
.container {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.container:after {
    clear: both;
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

@media (max-width: 979px) {
    .container {
        width: 100%;
    }
}

.wholes { width: 100% }

.halves { width: 50%; }

.thirds { width: 33.3333%; }

.quarters { width: 25%; }

.fifths { width: 20%; }

.two-thirds { width: 66.6667%; }

.three-quarters { width: 75%; }

.wholes, .halves, .thirds, .quarters, .fifths,
.two-thirds, .three-quarters {
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .halves { width: 100%; }

    .thirds { width: 100%; }

    .quarters { width: 100%; }

    .fifths { width: 100%; }

    .two-thirds { width: 100%; }

    .three-quarters { width: 100%; }
}

.notice {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    color: rgba(0, 0, 0, 0.3);
}

.icon48 {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e0e0;
}

/* Icons
 * ---------------------------------------------------------------------------*/
[class^="icon16-"], [class*=" icon16-"],
[class^="icon32-"], [class*=" icon32-"],
[class^="icon64-"], [class*=" icon64-"] {
    background-repeat: no-repeat;
    background-position: 0 0;
    display: inline-block;
    background-image: url(img/lineicons-32.png);
    width: 32px;
    height: 32px;
    line-height: 32px;
}

[class^="icon16-"], [class*=" icon16-"],
[class^="icon32-"], [class*=" icon32-"],
[class^="icon64-"], [class*=" icon64-"] {
    vertical-align: middle;
}

[class^="icon16-"], [class*=" icon16-"] {
    vertical-align: text-top;
}

.icon16-email     , .icon32-email     , .icon64-email       { background-position: 0        0; }
.icon16-lock      , .icon32-lock      , .icon64-lock        { background-position: -100px   0; }
.icon16-key       , .icon32-key       , .icon64-key         { background-position: -200px   0; }
.icon16-tick      , .icon32-tick      , .icon64-tick        { background-position: -300px   0; }
.icon16-cross     , .icon32-cross     , .icon64-cross       { background-position: -400px   0; }
.icon16-magnify   , .icon32-magnify   , .icon64-magnify     { background-position: -500px   0; }
.icon16-man       , .icon32-man       , .icon64-man         { background-position: 0        -100px; }
.icon16-woman     , .icon32-woman     , .icon64-woman       { background-position: -100px   -100px; }
.icon16-leftarrow , .icon32-leftarrow , .icon64-leftarrow   { background-position: -200px   -100px; }
.icon16-rightarrow, .icon32-rightarrow, .icon64-rightarrow  { background-position: -300px   -100px; }
.icon16-up        , .icon32-up        , .icon64-up          { background-position: -400px   -100px; }
.icon16-down      , .icon32-down      , .icon32-down        { background-position: -500px   -100px; }
.icon16-mobile    , .icon32-mobile    , .icon64-mobile      { background-position: 0        -200px; }
.icon16-tablet    , .icon32-tablet    , .icon64-tablet      { background-position: -100px   -200px; }
.icon16-pc        , .icon32-pc        , .icon64-pc          { background-position: -200px   -200px; }
.icon16-tag       , .icon32-tag       , .icon64-tag         { background-position: -300px   -200px; }
.icon16-tags      , .icon32-tags      , .icon64-tags        { background-position: -400px   -200px; }
.icon16-flashlight, .icon32-flashlight, .icon32-flashlight  { background-position: -500px   -200px; }
.icon16-reference , .icon32-reference , .icon64-reference   { background-position: 0        -300px; }
.icon16-apidoc    , .icon32-apidoc    , .icon64-apidoc      { background-position: -100px   -300px; }
.icon16-compass   , .icon32-compass   , .icon64-compass     { background-position: -200px   -300px; }
.icon16-tube      , .icon32-tube      , .icon64-tube        { background-position: -300px   -300px; }
.icon16-flask     , .icon32-flask     , .icon64-flask       { background-position: -400px   -300px; }
.icon16-lightning , .icon32-lightning , .icon64-lightning   { background-position: -500px   -300px; }
.icon16-plus      , .icon32-plus      , .icon64-plus        { background-position: 0        -400px; }
.icon16-minus     , .icon32-minus     , .icon64-minus       { background-position: -100px   -400px; }
.icon16-vdot      , .icon32-vdot      , .icon64-vdot        { background-position: -200px   -400px; }
.icon16-burger    , .icon32-burger    , .icon64-burger      { background-position: -300px   -400px; }
.icon16-pin       , .icon32-pin       , .icon64-pin         { background-position: -400px   -400px; }
.icon16-view      , .icon32-view      , .icon64-view        { background-position: -500px   -400px; }
.icon16-info      , .icon32-info      , .icon64-info        { background-position:  0       -500px; }
.icon16-question  , .icon32-question  , .icon64-question    { background-position: -100px   -500px; }
.icon16-calendar  , .icon32-calendar  , .icon64-calendar    { background-position: -200px   -500px; }
.icon16-table     , .icon32-table     , .icon64-table       { background-position: -300px   -500px; }
.icon16-graph     , .icon32-graph     , .icon64-graph       { background-position: -400px   -500px; }
.icon16-experiment, .icon32-experiment, .icon64-experiment  { background-position: -500px   -500px; }
.icon16-android   , .icon32-android   , .icon64-android     { background-position:  0       -600px; }
.icon16-ios       , .icon32-ios       , .icon64-ios         { background-position: -100px   -600px; }
.icon16-browser   , .icon32-browser   , .icon64-browser     { background-position: -200px   -600px; }
.icon16-discuss   , .icon32-discuss   , .icon64-discuss     { background-position: -300px   -600px; }
.icon16-comment   , .icon32-comment   , .icon64-comment     { background-position: -400px   -600px; }
.icon16-save      , .icon32-save      , .icon64-save        { background-position: -500px   -600px; }
.icon16-wrench    , .icon32-wrench    , .icon64-wrench      { background-position:  0       -700px; }
.icon16-magnifyp  , .icon32-magnifyp  , .icon64-magnifyp    { background-position: -100px   -700px; }
.icon16-magnifym  , .icon32-magnifym  , .icon64-magnifym    { background-position: -200px   -700px; }
.icon16-pencil    , .icon32-pencil    , .icon64-pencil      { background-position: -300px   -700px; }
.icon16-pencildoc , .icon32-pencildoc , .icon64-pencildoc   { background-position: -400px   -700px; }
.icon16-trash     , .icon32-trash     , .icon64-trash       { background-position: -500px   -700px; }
.icon16-group     , .icon32-group     , .icon64-group       { background-position:  0       -800px; }
.icon16-newgroup  , .icon32-newgroup  , .icon64-newgroup    { background-position: -100px   -800px; }
.icon16-specs     , .icon32-specs     , .icon64-specs       { background-position: -200px   -800px; }
.icon16-mortarb   , .icon32-mortarb   , .icon64-mortarb     { background-position: -300px   -800px; }
.icon16-gear      , .icon32-gear      , .icon64-gear        { background-position: -400px   -800px; }
.icon16-gearstar  , .icon32-gearstar  , .icon64-gearstar    { background-position: -500px   -800px; }
.icon16-ok        , .icon32-ok        , .icon64-ok          { background-position:  0       -900px; }
.icon16-no        , .icon32-no        , .icon64-no          { background-position: -100px   -900px; }
.icon16-positive  , .icon32-positive  , .icon64-positive    { background-position: -200px   -900px; }
.icon16-negative  , .icon32-negative  , .icon64-negative    { background-position: -300px   -900px; }
.icon16-root      , .icon32-root      , .icon64-root        { background-position: -400px   -900px; }
.icon16-divide    , .icon32-divide    , .icon64-divide      { background-position: -500px   -900px; }
.icon16-refresh   , .icon32-refresh   , .icon64-refresh     { background-position:  0       -1000px; }
.icon16-disconnect, .icon32-disconnect, .icon64-disconnect  { background-position: -100px   -1000px; }
.icon16-camera    , .icon32-camera    , .icon64-camera      { background-position: -200px   -1000px; }
.icon16-vidcam    , .icon32-vidcam    , .icon64-vidcam      { background-position: -300px   -1000px; }
.icon16-unarchive , .icon32-unarchive , .icon64-unarchive   { background-position: -400px   -1000px; }
.icon16-archive   , .icon32-archive   , .icon64-archive     { background-position: -500px   -1000px; }
.icon16-clock12   , .icon32-clock12   , .icon64-clock12     { background-position:  0       -1100px; }
.icon16-clock3    , .icon32-clock3    , .icon64-clock3      { background-position: -100px   -1100px; }
.icon16-clock6    , .icon32-clock6    , .icon64-clock6      { background-position: -200px   -1100px; }
.icon16-clock9    , .icon32-clock9    , .icon64-clock9      { background-position: -300px   -1100px; }
.icon16-textfield , .icon32-textfield , .icon64-textfield   { background-position: -400px   -1100px; }
.icon16-windows   , .icon32-windows   , .icon64-windows     { background-position: -500px   -1100px; }
.icon16-power     , .icon32-power     , .icon64-power       { background-position: 0        -1200px; }
.icon16-invalid   , .icon32-invalid   , .icon64-invalid     { background-position: -100px   -1200px; }
.icon16-link      , .icon32-link      , .icon64-link        { background-position: -200px   -1200px; }
.icon16-bulb      , .icon32-bulb      , .icon64-bulb        { background-position: -300px   -1200px; }
.icon16-bulbon    , .icon32-bulbon    , .icon64-bulbon      { background-position: -400px   -1200px; }
.icon16-desk      , .icon32-desk      , .icon64-desk        { background-position: -500px   -1200px; }
.icon16-picture   , .icon32-picture   , .icon64-picture     { background-position: 0        -1300px; }
.icon16-video     , .icon32-video     , .icon64-video       { background-position: -100px   -1300px; }
.icon16-hailer    , .icon32-hailer    , .icon64-hailer      { background-position: -200px   -1300px; }
.icon16-tabs      , .icon32-tabs      , .icon64-tabs        { background-position: -300px   -1300px; }
.icon16-upload    , .icon32-upload    , .icon64-upload      { background-position: -400px   -1300px; }
.icon16-download  , .icon32-download  , .icon64-download    { background-position: -500px   -1300px; }
.icon16-yesno     , .icon32-yesno     , .icon64-yesno       { background-position: 0        -1400px; }
.icon16-mcq       , .icon32-mcq       , .icon64-mcq         { background-position: -100px   -1400px; }
.icon16-shortans  , .icon32-shortans  , .icon64-shortans    { background-position: -200px   -1400px; }
.icon16-chart     , .icon32-chart     , .icon64-chart       { background-position: -300px   -1400px; }
.icon16-pie       , .icon32-pie       , .icon64-pie         { background-position: -400px   -1400px; }
.icon16-bar       , .icon32-bar       , .icon64-bar         { background-position: -500px   -1400px; }
.icon16-protractor, .icon32-protractor, .icon64-protractor  { background-position: 0        -1500px; }
.icon16-unlock    , .icon32-unlock    , .icon64-unlock      { background-position: -100px   -1500px; }
.icon16-topview   , .icon32-topview   , .icon64-topview     { background-position: -200px   -1500px; }
.icon16-sideview  , .icon32-sideview  , .icon64-sideview    { background-position: -300px   -1500px; }
.icon16-disconn   , .icon32-disconn   , .icon64-disconn     { background-position: -400px   -1500px; }
.icon16-reconn    , .icon32-reconn    , .icon64-reconn      { background-position: -500px   -1500px; }
.icon16-addtab    , .icon32-addtab    , .icon64-addtab      { background-position: 0        -1600px; }
.icon16-locktab   , .icon32-locktab   , .icon64-locktab     { background-position: -100px   -1600px; }
.icon16-unlocktab , .icon32-unlocktab , .icon64-unlocktab   { background-position: -200px   -1600px; }
.icon16-toolbox   , .icon32-toolbox   , .icon64-toolbox     { background-position: -300px   -1600px; }
.icon16-home      , .icon32-home      , .icon64-home        { background-position: -400px   -1600px; }
.icon16-share     , .icon32-share     , .icon64-share       { background-position: -500px   -1600px; }
.icon16-adduser   , .icon32-adduser   , .icon64-adduser     { background-position: 0        -1700px; }
.icon16-removeuser, .icon32-removeuser, .icon64-removeuser  { background-position: -100px   -1700px; }
.icon16-gooduser  , .icon32-gooduser  , .icon64-gooduser    { background-position: -200px   -1700px; }
.icon16-baduser   , .icon32-baduser   , .icon64-baduser     { background-position: -300px   -1700px; }
.icon16-present   , .icon32-present   , .icon64-present     { background-position: -400px   -1700px; }
.icon16-openbox   , .icon32-openbox   , .icon64-openbox     { background-position: -500px   -1700px; }
.icon16-pause     , .icon32-pause     , .icon64-pause       { background-position: 0        -1800px; }
.icon16-play      , .icon32-play      , .icon64-play        { background-position: -100px   -1800px; }
.icon16-backward  , .icon32-backward  , .icon64-backward    { background-position: -200px   -1800px; }
.icon16-forward   , .icon32-forward   , .icon64-forward     { background-position: -300px   -1800px; }
.icon16-prev      , .icon32-prev      , .icon64-prev        { background-position: -400px   -1800px; }
.icon16-next      , .icon32-next      , .icon64-next        { background-position: -500px   -1800px; }
.icon16-profile   , .icon32-profile   , .icon64-profile     { background-position: 0        -1900px; }
.icon16-list      , .icon32-list      , .icon64-list        { background-position: -100px   -1900px; }
.icon16-dup       , .icon32-dup       , .icon64-dup         { background-position: -200px   -1900px; }
.icon16-folder    , .icon32-folder    , .icon64-folder      { background-position: -300px   -1900px; }
.icon16-bell      , .icon32-bell      , .icon64-bell        { background-position: -400px   -1900px; }
.icon16-belled    , .icon32-belled    , .icon64-belled      { background-position: -500px   -1900px; }
.icon16-phone     , .icon32-phone     , .icon64-phone       { background-position: 0        -2000px; }
.icon16-phoneout  , .icon32-phoneout  , .icon64-phoneout    { background-position: -100px   -2000px; }
.icon16-phonein   , .icon32-phonein   , .icon64-phonein     { background-position: -200px   -2000px; }
.icon16-globe     , .icon32-globe     , .icon64-globe       { background-position: -300px   -2000px; }
.icon16-location  , .icon32-location  , .icon64-location    { background-position: -400px   -2000px; }
.icon16-locationed, .icon32-locationed, .icon64-locationed  { background-position: -500px   -2000px; }
.icon16-attach    , .icon32-attach    , .icon64-attach      { background-position: 0        -2100px; }
.icon16-gdrive    , .icon32-gdrive    , .icon64-gdrive      { background-position: -100px   -2100px; }
.icon16-youtube   , .icon32-youtube   , .icon64-youtube     { background-position: -200px   -2100px; }
.icon16-mike      , .icon32-mike      , .icon64-mike        { background-position: -300px   -2100px; }
.icon16-heart     , .icon32-heart     , .icon64-heart       { background-position: -400px   -2100px; }
.icon16-hearted   , .icon32-hearted   , .icon64-hearted     { background-position: -500px   -2100px; }
.icon16-fileempty , .icon32-fileempty , .icon64-fileempty   { background-position: 0        -2200px; }
.icon16-filefull  , .icon32-filefull  , .icon64-filefull    { background-position: -100px   -2200px; }
.icon16-filein    , .icon32-filein    , .icon64-filein      { background-position: -200px   -2200px; }
.icon16-fileout   , .icon32-fileout   , .icon64-fileout     { background-position: -300px   -2200px; }
.icon16-flag      , .icon32-flag      , .icon64-flag        { background-position: -400px   -2200px; }
.icon16-flagged   , .icon32-flagged   , .icon64-flagged     { background-position: -500px   -2200px; }
.icon16-approve   , .icon32-approve   , .icon64-approve     { background-position: 0        -2300px; }
.icon16-deny      , .icon32-deny      , .icon64-deny        { background-position: -100px   -2300px; }
.icon16-left      , .icon32-left      , .icon64-left        { background-position: -200px   -2300px; }
.icon16-right     , .icon32-right     , .icon64-right       { background-position: -300px   -2300px; }
.icon16-top       , .icon32-top       , .icon64-top         { background-position: -400px   -2300px; }
.icon16-bottom    , .icon32-bottom    , .icon64-bottom      { background-position: -500px   -2300px; }
.icon16-game      , .icon32-game      , .icon64-game        { background-position: 0        -2400px; }
.icon16-robot     , .icon32-robot     , .icon64-robot       { background-position: -100px   -2400px; }
.icon16-bookclose , .icon32-bookclose , .icon64-bookclose   { background-position: -200px   -2400px; }
.icon16-bookopen  , .icon32-bookopen  , .icon64-bookopen    { background-position: -300px   -2400px; }
.icon16-bmark     , .icon32-bmark     , .icon64-bmark       { background-position: -400px   -2400px; }
.icon16-bmarked   , .icon32-bmarked   , .icon64-bmarked     { background-position: -500px   -2400px; }
.icon16-star      , .icon32-star      , .icon64-star        { background-position: -400px   -2500px; }
.icon16-starred   , .icon32-starred   , .icon64-starred     { background-position: -500px   -2500px; }

[class^="icon16-"], [class*=" icon16-"] {
    background-image: url(img/lineicons-16.png);
    width: 16px;
    height: 16px;
    line-height: 16px;
}

[class^="icon64-"], [class*=" icon64-"] {
    background-image: url(img/lineicons-64.png);
    width: 64px;
    height: 64px;
    line-height: 64px;
}

.icon16-white { background-image: url(img/lineicons-16-white.png); }
.icon32-white { background-image: url(img/lineicons-32-white.png); }
.icon64-white { background-image: url(img/lineicons-64-white.png); }

.icon16-color { background-image: url(img/lineicons-16-color.png); }
.icon32-color { background-image: url(img/lineicons-32-color.png); }
.icon64-color { background-image: url(img/lineicons-64-color.png); }

/* Responsive Styles
 * ---------------------------------------------------------------------------*/
table.mobile td,
table.mobile th {
    vertical-align: top;
}

/* for iPhone landscape and less */
@media (max-width: 480px) {
    table.mobile, table.mobile thead, table.mobile tbody,
    table.mobile th, table.mobile tr, table.mobile td {
        display: block;
    }

    table.mobile thead tr {
        display: none;
    }

    table.mobile {
        border-top-width: 0;
    }

    table.mobile tbody tr {
        border-top-width: 1px;
        border-top-style: solid;
    }

    table.mobile tbody tr td {
        border-width: 0;
    }
}

/* default - large screen >= 1200px */
@media (min-width: 1200px) {
    .visible-screen     { display: inherit !important; }
    .hidden-screen      { display: none !important; }

    .visible-phone-port { display: none !important; }
    .visible-phone-land { display: none !important; }
    .visible-phonetab   { display: none !important; }
    .visible-tab-port   { display: none !important; }
    .visible-tab-land   { display: none !important; }
}

/* desktop & tablet landscape */
@media (min-width: 980px) and (max-width: 1199px) {
    .visible-screen     { display: none !important; }
    .hidden-screen      { display: inherit !important; }

    .visible-tab-land   { display: inherit !important; }
    .hidden-tab-land    { display: none !important; }
}

/* portrait tablet */
@media (min-width: 768px) and (max-width: 979px) {
    .visible-screen     { display: none !important; }
    .hidden-screen      { display: inherit !important; }

    .visible-tab-port   { display: inherit !important; }
    .hidden-tab-port    { display: none !important; }
}

/* landscape phone to portrait tablet */
@media (min-width: 641px) and (max-width: 767px) {
    .visible-screen     { display: none !important; }
    .hidden-screen      { display: inherit !important; }

    .visible-phonetab   { display: inherit !important; }
    .hidden-phonetab    { display: none !important; }
}

/* landscape Note & iPhone */
@media (min-width: 480px) and (max-width: 640px) {
    .visible-screen     { display: none !important; }
    .hidden-screen      { display: inherit !important; }

    .visible-phone-land { display: inherit !important; }
    .hidden-phone-land  { display: none !important; }
}

/* iPhone portrait and less */
@media (max-width: 479px) {
    .visible-screen     { display: none !important; }
    .hidden-screen      { display: inherit !important; }

    .visible-phone-port { display: inherit !important; }
    .hidden-phone-port  { display: none !important; }
}

/* Grid
 * ---------------------------------------------------------------------------*/
.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid:after {
    content: "\0020";
    display: block;
    overflow: hidden;
    height: 0;
    clear: both;
}
.grid > [class^="u-"],
.grid > [class*=" u-"] {
    display:inline-block;
    vertical-align:top;
    /*cannot have overflow:hidden here as the dropdown will be hidden*/
    float: left;
}
.grid .u-1-1  { width: 100%; }
.grid .u-1-2  { width: 50%; }

.grid .u-1-3  { width: 33.33333333333333%; }
.grid .u-2-3  { width: 66.66666666666666%; }

.grid .u-1-4  { width: 25%; }
.grid .u-2-4  { width: 50%; }
.grid .u-3-4  { width: 75%; }

.grid .u-1-5  { width: 20%; }
.grid .u-2-5  { width: 40%; }
.grid .u-3-5  { width: 60%; }
.grid .u-4-5  { width: 80%; }

.grid .u-1-6  { width: 16.66666666666666%; }
.grid .u-5-6  { width: 83.33333333333333%; }

.grid .u-1-7  { width: 14.28571428571428%; }
.grid .u-2-7  { width: 28.57142857142857%; }
.grid .u-3-7  { width: 42.85714285714285%; }
.grid .u-4-7  { width: 57.14285714285714%; }
.grid .u-5-7  { width: 71.42857142857143%; }
.grid .u-6-7  { width: 85.71428571428571%; }

.grid .u-1-8  { width: 12.5%; }
.grid .u-3-8  { width: 37.5%; }
.grid .u-5-8  { width: 62.5%; }
.grid .u-7-8  { width: 87.5%; }

.grid .u-1-9  { width: 11.11111111111111%; }
.grid .u-2-9  { width: 22.22222222222222%; }
.grid .u-4-9  { width: 44.44444444444444%; }
.grid .u-5-9  { width: 55.55555555555555%; }
.grid .u-7-9  { width: 77.77777777777777%; }
.grid .u-8-9  { width: 88.88888888888888%; }

.grid .u-1-10 { width: 10%; }
.grid .u-3-10 { width: 30%; }
.grid .u-7-10 { width: 70%; }
.grid .u-9-10 { width: 90%; }

.grid .u-1-11 { width:  9.09090909090909%; }
.grid .u-2-11 { width: 18.18181818181818%; }
.grid .u-3-11 { width: 27.27272727272727%; }
.grid .u-4-11 { width: 36.36363636363637%; }
.grid .u-5-11 { width: 45.45454545454545%; }
.grid .u-6-11 { width: 54.54545454545455%; }
.grid .u-7-11 { width: 63.63636363636363%; }
.grid .u-8-11 { width: 72.72727272727273%; }
.grid .u-9-11 { width: 81.81818181818181%; }
.grid .u-10-11 { width: 90.9090909090909%; }

.grid .u-1-12 { width:  8.33333333333333%; }
.grid .u-5-12 { width: 41.66666666666666%; }
.grid .u-7-12 { width: 58.33333333333333%; }
.grid .u-11-12 { width: 91.6666666666666%; }

@media (max-width: 767px) {
    .grid.resp > [class^="u-"],
    .grid.resp > [class*=" u-"] {
        float: none;
        display: block;
        width: 100%;
    }
}