select,
.dropdown { display: inline-block; }


pre.prettyprint { background: #141414; color: #f8f8f8; }
pre.prettyprint span.str, pre.prettyprint span.atv { color: #8f9d6a; }
pre.prettyprint span.kwd, pre.prettyprint span.pun { color: #cda869; }
pre.prettyprint span.com { color: #5f5a60; font-style: italic; }
pre.prettyprint span.typ { color: #9b703f; }
pre.prettyprint span.lit { color: #cf6a4c; }
pre.prettyprint span.pln { color: #7587a6; }
pre.prettyprint span.tag { color: #ac885b; }
pre.prettyprint span.atn { color: #e0c589; }
pre.prettyprint span.dec { color: #494949; }
pre.prettyprint { border: 0 none !important; background: transparent !important; }

@media all and (max-width: 1040px) {
    .col,
    .col_2,
    .col_1 { display: block; width: auto; max-width: 100%; background: #fff; color: #333; box-shadow: none; }

    .col_2 h3,
    .col_2 strong { color: #333; }

    pre.prettyprint { font-size: 14px; background: #333 !important; padding: 12px !important; border-radius: 5px !important; overflow-x: scroll; }

    hgroup { text-align: left; margin-bottom: 10px; }
}

/* --- DEMO METRO THEME --- */

/* PREFIXED CSS */

.metro,
.metro div,
.metro li,
.metro div::after,
.metro .carat,
.metro .carat:after,
.metro .selected::after,
.metro:after { -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }

.metro .selected::after,
.metro.scrollable div::after { -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; }

/* WRAPPER */

.metro { position: relative; width: 250px; cursor: pointer; margin-bottom: 30px; font-weight: 200; background: #f8f8f8; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.metro.open { z-index: 2; }

.metro:hover { background: #f4f4f4; }

.metro:after { content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent; }

.metro.focus:after { background: #0180d1; }

/* CARAT */

.metro .carat,
.metro .carat:after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; border: 8px solid transparent; border-top: 8px solid #000; z-index: 2; -webkit-transform-origin: 50% 20%; -moz-transform-origin: 50% 20%; -ms-transform-origin: 50% 20%; transform-origin: 50% 20%; }

.metro .carat:after { margin-top: -10px; right: -8px; border-top-color: #f8f8f8; }

.metro:hover .carat:after { border-top-color: #f4f4f4; }

.metro.focus .carat { border-top-color: #f8f8f8; }

.metro.focus .carat:after { border-top-color: #0180d1; }

.metro.open .carat { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* OLD SELECT (HIDDEN) */

.metro .old { position: absolute; left: 0; top: 0; height: 0; width: 0; overflow: hidden; }

.metro select { position: absolute; left: 0px; top: 0px; }

.metro.touch select { left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }

/* SELECTED FEEDBACK ITEM */

.metro .selected,
.metro li { display: block; font-size: 18px; line-height: 1; color: #000; padding: 9px 12px; overflow: hidden; white-space: nowrap; }

.metro .selected::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; border-radius: 0 2px 2px 0; box-shadow: inset -55px 0 25px -20px #f8f8f8; }

.metro:hover .selected::after { box-shadow: inset -55px 0 25px -20px #f4f4f4; }

/* DROP DOWN WRAPPER */

.metro div { position: absolute; height: 0; left: 0; right: 0; top: 100%; margin-top: -1px; background: #f8f8f8; overflow: hidden; opacity: 0; }

.metro:hover div { background: #f4f4f4; }

/* Height is adjusted by JS on open */

.metro.open div { opacity: 1; z-index: 2; }

/* FADE OVERLAY FOR SCROLLING LISTS */

.metro.scrollable div::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; box-shadow: inset 0 -50px 30px -35px #f8f8f8; }

.metro.scrollable:hover div::after { box-shadow: inset 0 -50px 30px -35px #f4f4f4; }

.metro.scrollable.bottom div::after { opacity: 0; }

/* DROP DOWN LIST */

.metro ul { position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden; }

.metro.scrollable.open ul { overflow-y: auto; }

/* DROP DOWN LIST ITEMS */

.metro li { list-style: none; padding: 8px 12px; }

/* .focus class is also added on hover */

.metro li.focus { background: #0180d1; position: relative; z-index: 3; color: #fff; }

.metro li.active { background: #0180d1; color: #fff; }

/* --- DEMO FLAT THEME --- */

/* PREFIXED CSS */

.flat,
.flat div,
.flat li,
.flat div::after,
.flat .carat,
.flat .carat:after,
.flat .selected::after,
.flat:after { -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }

.flat .selected::after,
.flat.scrollable div::after { -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; }

/* WRAPPER */

.flat { position: relative; width: 250px; cursor: pointer; font-weight: 200; background: #29AF84; padding: 8px 0px 8px; border-radius: 5px; color: #000; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.flat.open { z-index: 2; }

.flat:hover,
.flat.focus { background: #00C384; }

/* CARAT */

.flat .carat,
.flat .carat:after { position: absolute; right: 14px; top: 50%; margin-top: -3px; border: 6px solid transparent; border-top: 6px solid #FFF; z-index: 1; -webkit-transform-origin: 50% 20%; -moz-transform-origin: 50% 20%; -ms-transform-origin: 50% 20%; transform-origin: 50% 20%; }

.flat:hover .carat:after { border-top-color: #f4f4f4; }

.flat.focus .carat { border-top-color: #f8f8f8; }

.flat.focus .carat:after { border-top-color: #0180d1; }

.flat.open .carat { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* OLD SELECT (HIDDEN) */

.flat .old { position: absolute; left: 0; top: 0; height: 0; width: 0; overflow: hidden; }

.flat select { position: absolute; left: 0px; top: 0px; }

.flat.touch select { left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }

/* SELECTED FEEDBACK ITEM */
.flat .selected { color: #FFF; }

.flat .selected,
.flat li { display: block; font-size: 16px; font-weight: 400; text-transform: uppercase; line-height: 1; padding: 8px 12px; overflow: hidden; white-space: nowrap; }

.flat .selected::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; border-radius: 0 5px 5px 0; box-shadow: inset -55px 0 25px -20px #29af84; }

.flat:hover .selected::after,
.flat.focus .selected::after { box-shadow: inset -55px 0 25px -20px #00c384; }

/* DROP DOWN WRAPPER */

.flat div { position: absolute; height: 0; left: 0; right: 0; top: 100%; margin-top: 1px; background: #00C384; overflow: hidden; opacity: 0; color: #04724E; border-radius: 5px; }

.flat:hover div { background: #00C384; border-radius: 5px; }

/* Height is adjusted by JS on open */

.flat.open div { opacity: 1; z-index: 2; }

/* FADE OVERLAY FOR SCROLLING LISTS */

.flat.scrollable div::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; box-shadow: inset 0 -50px 30px -35px #00c384; }

.flat.scrollable:hover div::after { box-shadow: inset 0 -50px 30px -35px #00c384; }

.flat.scrollable.bottom div::after { opacity: 0; }

/* DROP DOWN LIST */

.flat ul { position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden; border-radius: 5px; }

.flat.scrollable.open ul { overflow-y: auto; }

/* DROP DOWN LIST ITEMS */

.flat li { list-style: none; padding: 14px 12px; border-bottom: 1px solid #29AF84; }

.flat li:last-child { border-bottom: 0; }

/* .focus class is also added on hover */

.flat li.focus { background: #00C384; position: relative; z-index: 3; color: #fff; }

.flat li.active { background: #29AF84; color: #fff; }