diff --git a/build/packaged/css/semantic.css b/build/packaged/css/semantic.css new file mode 100644 index 000000000..42601c5ea --- /dev/null +++ b/build/packaged/css/semantic.css @@ -0,0 +1,13876 @@ +/* + * # Semantic - Breadcrumb + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Breadcrumb +*******************************/ +.ui.breadcrumb { + margin: 1em 0em; + display: inline-block; + vertical-align: middle; +} +.ui.breadcrumb:first-child { + margin-top: 0em; +} +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} +/******************************* + Content +*******************************/ +.ui.breadcrumb .divider { + display: inline-block; + opacity: 0.5; + margin: 0em 0.15em 0em; + font-size: 1em; + color: rgba(0, 0, 0, 0.3); +} +.ui.breadcrumb a.section { + cursor: pointer; +} +.ui.breadcrumb .section { + display: inline-block; + margin: 0em; + padding: 0em; +} +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: 0.5em 1em; +} +/******************************* + States +*******************************/ +.ui.breadcrumb .active.section { + font-weight: bold; +} +/******************************* + Variations +*******************************/ +.ui.small.breadcrumb { + font-size: 0.75em; +} +.ui.large.breadcrumb { + font-size: 1.1em; +} +.ui.huge.breadcrumb { + font-size: 1.3em; +} +/* + * # Semantic - Form + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------------- + Form +---------------------*/ +.ui.form { + position: relative; + max-width: 100%; +} +.ui.form :first-child { + margin-top: 0em; +} +.ui.form :last-child { + margin-bottom: 0em; +} +/*-------------------- + Content +---------------------*/ +.ui.form > p { + margin: 1em 0; +} +/*-------------------- + Field +---------------------*/ +.ui.form .field { + clear: both; + margin: 0em 0em 1em; +} +/*-------------------- + Labels +---------------------*/ +.ui.form .field > label { + margin: 0em 0em 0.3em; + display: block; + color: #555555; + font-size: 0.875em; +} +/*-------------------- + Standard Inputs +---------------------*/ +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form .ui.input { + width: 100%; +} +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="date"], +.ui.form input[type="password"] { + margin: 0em; + padding: 0.85em 1.2em; + font-size: 0.875em; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.7); + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.textarea, +.ui.form textarea { + line-height: 1.33; + min-height: 8em; + height: 12em; + max-height: 24em; + resize: vertical; +} +.ui.form select { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +} +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; +} +/*-------------------- + Dividers +---------------------*/ +.ui.form .divider { + clear: both; + margin: 1em 0em; +} +/*-------------------- + Types of Messages +---------------------*/ +.ui.form .info.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; +} +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0px; +} +/*-------------------- + Validation Prompt +---------------------*/ +.ui.form .field .prompt.label { + white-space: nowrap; +} +.ui.form .inline.field .prompt { + margin-top: 0em; + margin-left: 1em; +} +.ui.form .inline.field .prompt:before { + margin-top: -0.3em; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/******************************* + States +*******************************/ +/*-------------------- + Focus +---------------------*/ +.ui.form input[type="text"]:focus, +.ui.form input[type="password"]:focus, +.ui.form textarea:focus { + color: rgba(0, 0, 0, 0.85); + border-color: rgba(0, 0, 0, 0.2); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-appearance: none; + -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; + box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; +} +/*-------------------- + Error +---------------------*/ +/* On Form */ +.ui.form.warning .warning.message { + display: block; +} +/*-------------------- + Warning +---------------------*/ +/* On Form */ +.ui.form.error .error.message { + display: block; +} +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label { + color: #D95C5C; +} +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="password"], +.ui.form .field.error textarea, +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="password"] { + background-color: #FFFAFA; + border-color: #E7BEBE; + border-left: none; + color: #D95C5C; + padding-left: 1.2em; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; + -moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; + box-shadow: 0.3em 0em 0em 0em #D95C5C inset; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="password"]:focus { + border-color: #ff5050; + color: #ff5050; + -webkit-appearance: none; + -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; + -moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; + box-shadow: 0.3em 0em 0em 0em #FF5050 inset; +} +/*-------------------- + Empty (Placeholder) +---------------------*/ +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: #E0E0E0; +} +.ui.form ::-moz-placeholder { + color: #E0E0E0; +} +.ui.form :focus::-webkit-input-placeholder { + color: #AAAAAA; +} +.ui.form :focus::-moz-placeholder { + color: #AAAAAA; +} +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.form .error ::-moz-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.form .error :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} +.ui.form .error :focus::-moz-placeholder { + color: rgba(255, 80, 80, 0.7); +} +/*-------------------- + Disabled +---------------------*/ +.ui.form .field :disabled, +.ui.form .field.disabled { + opacity: 0.5; +} +.ui.form .field.disabled label { + opacity: 0.5; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} +/*-------------------- + Loading State +---------------------*/ +/* On Form */ +.ui.form.loading { + position: relative; +} +.ui.form.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url('../build/uncompressed/images/loader-large.gif') no-repeat 50% 50%; + visibility: visible; +} +/******************************* + Variations +*******************************/ +/*-------------------- + Fluid Width +---------------------*/ +.ui.form.fluid { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------------------- + Input w/ attached Button +---------------------------*/ +.ui.form input.attached { + width: auto; +} +/*-------------------- + Date Input +---------------------*/ +.ui.form .date.field > label { + position: relative; +} +.ui.form .date.field > label:after { + position: absolute; + top: 1.4em; + right: 0.5em; + font-family: 'Icons'; + content: '📅'; + /* '\1f4c5' */ + + font-size: 1.5em; + font-weight: normal; + color: #CCCCCC; +} +/*-------------------- + Inverted Colors +---------------------*/ +.ui.inverted.form label { + color: #FFFFFF; +} +.ui.inverted.form .field.error textarea, +.ui.inverted.form .field.error input[type="text"] { + background-color: #FFCCCC; +} +/*-------------------- + Field Groups +---------------------*/ +/* Grouped Vertically */ +.ui.form .grouped.fields { + margin: 0em 0em 1em; +} +.ui.form .grouped.fields .field { + display: block; + float: none; + margin: 0.5em 0em; + padding: 0em; +} +/*-------------------- + Fields +---------------------*/ +/* Split fields */ +.ui.form .fields { + clear: both; +} +.ui.form .fields:after { + content: ' '; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} +.ui.form .fields .field { + clear: none; + float: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.form .fields .field:first-child { + border-left: none; + box-shadow: none; +} +/* Other Combinations */ +.ui.form .two.fields .field { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .three.fields .field { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .four.fields .field { + width: 25%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .five.fields .field { + width: 20%; + padding-left: 1%; + padding-right: 1%; +} +/* override sides, ie8 no last-child */ +.ui.form .fields .field:first-child { + padding-left: 0%; +} +.ui.form .fields .field:last-child { + padding-right: 0%; +} +/*-------------------- + Inline Fields +---------------------*/ +.ui.form .inline.fields .field { + min-height: 1.3em; + margin-right: 0.5em; +} +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > label, +.ui.form .inline.field > p, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: middle; + font-size: 1em; +} +.ui.form .inline.fields .field > input, +.ui.form .inline.field > input { + font-size: 0.875em; +} +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em 0.5em 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} +/*-------------------- + Sizes +---------------------*/ +/* Standard */ +.ui.small.form { + font-size: 0.875em; +} +.ui.small.form textarea, +.ui.small.form input[type="text"], +.ui.small.form input[type="password"], +.ui.small.form label { + font-size: 1em; +} +/* Large */ +.ui.large.form { + font-size: 1.125em; +} +/* + * # Semantic - Grid + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Grid +*******************************/ +.ui.grid { + display: block; + text-align: left; + font-size: 0em; + margin: 0% -1.5%; + padding: 0%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.grid:after, +.ui.row:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +/*------------------- + Columns +--------------------*/ +.ui.grid > .column, +.ui.grid > .row > .column { + display: inline-block; + text-align: left; + font-size: 1rem; + padding-left: 1.5%; + padding-right: 1.5%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + vertical-align: top; +} +/*------------------- + Rows +--------------------*/ +.ui.grid > .row { + display: block; + width: 100% !important; + margin-top: 1.5%; + padding: 1.5% 0% 0%; + font-size: 0rem; +} +.ui.grid > .row:first-child { + padding-top: 0rem; + margin-top: 0rem; +} +/*------------------- + Content +--------------------*/ +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: 100%; +} +.ui.grid .column > .ui.segment:only-child { + margin: 0em; +} +/******************************* + Variations +*******************************/ +/*------------------- + Page +--------------------*/ +.ui.page.grid { + margin: 0%; + padding: 0% 2%; +} +/*------------------- + Responsive +--------------------*/ +.ui.responsive.grid { + margin-left: 0% !important; + margin-right: 0% !important; + min-width: 320px; +} +@media only screen and (max-width: 1000px) { + .ui.responsive.grid { + padding: 0% 5.55%; + } +} +@media only screen and (min-width: 1000px) { + .ui.responsive.grid { + padding: 0% 8%; + } +} +@media only screen and (min-width: 1500px) { + .ui.responsive.grid { + padding: 0% 13%; + } +} +@media only screen and (min-width: 1750px) { + .ui.responsive.grid { + padding: 0% 18%; + } +} +@media only screen and (min-width: 2000px) { + .ui.responsive.grid { + padding: 0% 23%; + } +} +/*------------------- + Column Width +--------------------*/ +/* Sizing Combinations */ +.ui.grid .one.wide.column { + width: 6.25%; +} +.ui.grid .two.wide.column { + width: 12.5%; +} +.ui.grid .three.wide.column { + width: 18.75%; +} +.ui.grid .four.wide.column { + width: 25%; +} +.ui.grid .five.wide.column { + width: 31.25%; +} +.ui.grid .six.wide.column { + width: 37.5%; +} +.ui.grid .seven.wide.column { + width: 43.75%; +} +.ui.grid .eight.wide.column { + width: 50%; +} +.ui.grid .nine.wide.column { + width: 56.25%; +} +.ui.grid .ten.wide.column { + width: 62.5%; +} +.ui.grid .eleven.wide.column { + width: 68.75%; +} +.ui.grid .twelve.wide.column { + width: 75%; +} +.ui.grid .thirteen.wide.column { + width: 81.25%; +} +.ui.grid .fourteen.wide.column { + width: 87.5%; +} +.ui.grid .fifteen.wide.column { + width: 93.75%; +} +.ui.grid .sixteen.wide.column { + width: 100%; +} +/*------------------- + Column Count +--------------------*/ +/* Standard */ +.ui.grid > .column, +.ui.grid > .row > .column { + width: 6.25%; +} +/* Assume full width with one column */ +.ui.one.column.grid > .row > .column, +.ui.one.column.grid > .column, +.ui.grid > .one.column.row > .column { + width: 100%; +} +.ui.two.column.grid > .row > .column, +.ui.two.column.grid > .column, +.ui.grid > .two.column.row > .column { + width: 50%; +} +.ui.three.column.grid > .row > .column, +.ui.three.column.grid > .column, +.ui.grid > .three.column.row > .column { + width: 33.3333%; +} +.ui.four.column.grid > .row > .column, +.ui.four.column.grid > .column, +.ui.grid > .four.column.row > .column { + width: 25%; +} +.ui.five.column.grid > .row > .column, +.ui.five.column.grid > .column, +.ui.grid > .five.column.row > .column { + width: 20%; +} +.ui.six.column.grid > .row > .column, +.ui.six.column.grid > .column, +.ui.grid > .six.column.row > .column { + width: 16.66667%; +} +.ui.seven.column.grid > .row > .column, +.ui.seven.column.grid > .column, +.ui.grid > .seven.column.row > .column { + width: 14.2857%; +} +.ui.eight.column.grid > .row > .column, +.ui.eight.column.grid > .column, +.ui.grid > .eight.column.row > .column { + width: 12.5%; +} +.ui.nine.column.grid > .row > .column, +.ui.nine.column.grid > .column, +.ui.grid > .nine.column.row > .column { + width: 11.1111%; +} +.ui.ten.column.grid > .row > .column, +.ui.ten.column.grid > .column, +.ui.grid > .ten.column.row > .column { + width: 10%; +} +.ui.eleven.column.grid > .row > .column, +.ui.eleven.column.grid > .column, +.ui.grid > .eleven.column.row > .column { + width: 9.0909%; +} +.ui.twelve.column.grid > .row > .column, +.ui.twelve.column.grid > .column, +.ui.grid > .twelve.column.row > .column { + width: 8.3333%; +} +.ui.thirteen.column.grid > .row > .column, +.ui.thirteen.column.grid > .column, +.ui.grid > .thirteen.column.row > .column { + width: 7.6923%; +} +.ui.fourteen.column.grid > .row > .column, +.ui.fourteen.column.grid > .column, +.ui.grid > .fourteen.column.row > .column { + width: 7.1428%; +} +.ui.fifteen.column.grid > .row > .column, +.ui.fifteen.column.grid > .column, +.ui.grid > .fifteen.column.row > .column { + width: 6.6666%; +} +.ui.sixteen.column.grid > .row > .column, +.ui.sixteen.column.grid > .column, +.ui.grid > .sixteen.column.row > .column { + width: 6.25%; +} +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: 100%; +} +/*---------------------- + Relaxed +-----------------------*/ +.ui.relaxed.grid { + margin: 0% -2.5%; +} +.ui.relaxed.grid > .column, +.ui.relaxed.grid > .row > .column { + padding-left: 2.5%; + padding-right: 2.5%; +} +/*---------------------- + "Floated" +-----------------------*/ +.ui.grid .left.floated.column { + float: left; +} +.ui.grid .right.floated.column { + float: right; +} +/*---------------------- + Divided +-----------------------*/ +.ui.divided.grid, +.ui.divided.grid > .row { + display: table; + width: 100%; + margin-left: 0% !important; + margin-right: 0% !important; +} +.ui.divided.grid > .column:not(.row), +.ui.divided.grid > .row > .column { + display: table-cell; + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); +} +.ui.divided.grid > .column.row { + display: table; +} +.ui.divided.grid > .column:first-child, +.ui.divided.grid > .row > .column:first-child { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Vertically Divided */ +.ui.vertically.divided.grid > .row { + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; +} +.ui.vertically.divided.grid > .row > .column, +.ui.vertically.divided.grid > .column:not(.row), +.ui.vertically.divided.grid > .row:first-child { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} +/*---------------------- + Celled +-----------------------*/ +.ui.celled.grid { + display: table; + width: 100%; + margin-left: 0% !important; + margin-right: 0% !important; + -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; + -moz-box-shadow: 0px 0px 0px 1px #DFDFDF; + box-shadow: 0px 0px 0px 1px #DFDFDF; +} +.ui.celled.grid > .row, +.ui.celled.grid > .column.row, +.ui.celled.grid > .column.row:first-child { + display: table; + width: 100%; + margin-top: 0em; + padding-top: 0em; + -webkit-box-shadow: 0px -1px 0px 0px #dfdfdf; + -moz-box-shadow: 0px -1px 0px 0px #dfdfdf; + box-shadow: 0px -1px 0px 0px #dfdfdf; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + display: table-cell; + padding: 0.75em; + -webkit-box-shadow: -1px 0px 0px 0px #dfdfdf; + -moz-box-shadow: -1px 0px 0px 0px #dfdfdf; + box-shadow: -1px 0px 0px 0px #dfdfdf; +} +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.celled.responsive.grid { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*---------------------- + Horizontally Centered +-----------------------*/ +/* Vertical Centered */ +.ui.left.aligned.grid, +.ui.left.aligned.grid > .row > .column, +.ui.left.aligned.grid > .column, +.ui.grid .left.aligned.column, +.ui.grid > .left.aligned.row > .column { + text-align: left; +} +.ui.center.aligned.grid, +.ui.center.aligned.grid > .row > .column, +.ui.center.aligned.grid > .column, +.ui.grid .center.aligned.column, +.ui.grid > .center.aligned.row > .column { + text-align: center; +} +.ui.right.aligned.grid, +.ui.right.aligned.grid > .row > .column, +.ui.right.aligned.grid > .column, +.ui.grid .right.aligned.column, +.ui.grid > .right.aligned.row > .column { + text-align: right; +} +/*---------------------- + Vertically Centered +-----------------------*/ +/* Vertical Centered */ +.ui.top.aligned.grid, +.ui.top.aligned.grid > .row > .column, +.ui.top.aligned.grid > .column, +.ui.grid .top.aligned.column, +.ui.grid > .top.aligned.row > .column { + vertical-align: top; +} +.ui.middle.aligned.grid, +.ui.middle.aligned.grid > .row > .column, +.ui.middle.aligned.grid > .column, +.ui.grid .middle.aligned.column, +.ui.grid > .middle.aligned.row > .column { + vertical-align: middle; +} +.ui.bottom.aligned.grid, +.ui.bottom.aligned.grid > .row > .column, +.ui.bottom.aligned.grid > .column, +.ui.grid .bottom.aligned.column, +.ui.grid > .bottom.aligned.row > .column { + vertical-align: bottom; +} +/*---------------------- + Equal Height Columns +-----------------------*/ +.ui.grid > .equal.height.row { + display: table; + width: 100%; +} +.ui.grid > .equal.height.row > .column { + display: table-cell; +} +/*---------------------- + Only (Device) +-----------------------*/ +/* Mobile Only */ +@media only screen and (max-width: 768px) { + .ui.mobile.only.grid, + .ui.grid > .mobile.only.row { + display: block !important; + } + .ui.grid > .row > .mobile.only.column { + display: inline-block !important; + } + .ui.divided.mobile.only.grid, + .ui.celled.mobile.only.grid, + .ui.divided.mobile.only.grid .row, + .ui.celled.mobile.only.grid .row, + .ui.divided.grid .mobile.only.row, + .ui.celled.grid .mobile.only.row, + .ui.grid .mobile.only.equal.height.row, + .ui.mobile.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .mobile.only.column, + .ui.celled.grid > .row > .mobile.only.column, + .ui.divided.mobile.only.grid > .row > .column, + .ui.celled.mobile.only.grid > .row > .column, + .ui.divided.mobile.only.grid > .column, + .ui.celled.mobile.only.grid > .column { + display: table-cell !important; + } +} +@media only screen and (min-width: 768px) { + .ui.mobile.only.grid, + .ui.grid > .mobile.only.row, + .ui.grid > .row > .mobile.only.column { + display: none; + } +} +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 998px) { + .ui.tablet.only.grid, + .ui.grid > .tablet.only.row { + display: block !important; + } + .ui.grid > .row > .tablet.only.column { + display: inline-block !important; + } + .ui.divided.tablet.only.grid, + .ui.celled.tablet.only.grid, + .ui.divided.tablet.only.grid .row, + .ui.celled.tablet.only.grid .row, + .ui.divided.grid .tablet.only.row, + .ui.celled.grid .tablet.only.row, + .ui.grid .tablet.only.equal.height.row, + .ui.tablet.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .tablet.only.column, + .ui.celled.grid > .row > .tablet.only.column, + .ui.divided.tablet.only.grid > .row > .column, + .ui.celled.tablet.only.grid > .row > .column, + .ui.divided.tablet.only.grid > .column, + .ui.celled.tablet.only.grid > .column { + display: table-cell !important; + } +} +@media only screen and (max-width: 768px), (min-width: 998px) { + .ui.tablet.only.grid, + .ui.grid > .tablet.only.row, + .ui.grid > .row > .tablet.only.column { + display: none; + } +} +/* Computer Only */ +@media only screen and (min-width: 998px) { + .ui.computer.only.grid, + .ui.grid > .computer.only.row { + display: block !important; + } + .ui.grid > .row > .computer.only.column { + display: inline-block !important; + } + .ui.divided.computer.only.grid, + .ui.celled.computer.only.grid, + .ui.divided.computer.only.grid .row, + .ui.celled.computer.only.grid .row, + .ui.divided.grid .computer.only.row, + .ui.celled.grid .computer.only.row, + .ui.grid .computer.only.equal.height.row, + .ui.computer.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .computer.only.column, + .ui.celled.grid > .row > .computer.only.column, + .ui.divided.computer.only.grid > .row > .column, + .ui.celled.computer.only.grid > .row > .column, + .ui.divided.computer.only.grid > .column, + .ui.celled.computer.only.grid > .column { + display: table-cell !important; + } +} +@media only screen and (max-width: 998px) { + .ui.computer.only.grid, + .ui.grid > .computer.only.row, + .ui.grid > .row > .computer.only.column { + display: none; + } +} +/*------------------- + Stackable +--------------------*/ +@media only screen and (max-width: 768px) { + .ui.stackable.grid { + display: block !important; + padding: 0em; + } + .ui.stackable.grid .row > .column, + .ui.stackable.grid > .column { + display: block !important; + width: auto !important; + margin: 1.5em 5% 0em !important; + padding: 1.5em 0em 0em !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + .ui.stackable.divided.grid .column, + .ui.stackable.celled.grid .column { + border-top: 1px dotted rgba(0, 0, 0, 0.1); + } + .ui.stackable.grid > .row:first-child > .column:first-child, + .ui.stackable.grid > .column:first-child { + margin-top: 0em !important; + padding-top: 0em !important; + } + .ui.stackable.divided.grid > .row:first-child > .column:first-child, + .ui.stackable.celled.grid > .row:first-child > .column:first-child, + .ui.stackable.divided.grid > .column:first-child, + .ui.stackable.celled.grid > .column:first-child { + border-top: none !important; + } + /* Remove pointers from vertical menus */ + .ui.stackable.grid .vertical.pointing.menu .item:after { + display: none; + } +} +/* + * # Semantic - Menu + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------- + Menu +---------------*/ +.ui.menu { + margin: 1rem 0rem; + background-color: #FFFFFF; + font-size: 0px; + font-weight: normal; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + border-radius: 0.1875rem; +} +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} +.ui.menu:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.menu > .item:first-child { + border-radius: 0.1875em 0px 0px 0.1875em; +} +.ui.menu > .item:last-child { + border-radius: 0px 0.1875em 0.1875em 0px; +} +.ui.menu .item { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + -moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + -o-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + -ms-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; +} +/*-------------- + Colors +---------------*/ +/* Text Color */ +.ui.menu .item, +.ui.menu .item > a { + color: rgba(0, 0, 0, 0.75); +} +.ui.menu .item .item, +.ui.menu .item .item > a { + color: rgba(30, 30, 30, 0.7); +} +.ui.menu .item .item .item, +.ui.menu .item .item .item > a { + color: rgba(30, 30, 30, 0.6); +} +.ui.menu .dropdown.item .menu .item, +.ui.menu .dropdown.item .menu .item a { + color: rgba(0, 0, 0, 0.75); +} +/* Hover */ +.ui.menu .item .menu a.item:hover, +.ui.menu .item .menu a.item.hover, +.ui.menu .item .menu .link.item:hover, +.ui.menu .item .menu .link.item.hover { + color: rgba(0, 0, 0, 0.85); +} +.ui.menu .dropdown.item .menu .item a:hover { + color: rgba(0, 0, 0, 0.85); +} +/* Active */ +.ui.menu .active.item, +.ui.menu .active.item a { + color: rgba(0, 0, 0, 0.85); + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; +} +/*-------------- + Items +---------------*/ +.ui.menu .item { + position: relative; + display: inline-block; + padding: 0.83em 0.95em; + border-top: 0em solid rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -moz-user-select: -moz-none; + -khtml-user-select: none; + user-select: none; +} +.ui.menu .menu { + margin: 0em; +} +.ui.menu .item.left, +.ui.menu .menu.left { + float: left; +} +.ui.menu .item.right, +.ui.menu .menu.right { + float: right; +} +/*-------------- + Borders +---------------*/ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + width: 1px; + height: 100%; + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); +} +.ui.menu .menu.right .item:before, +.ui.menu .item.right:before { + right: auto; + left: 0px; +} +/*-------------- + Text Content +---------------*/ +.ui.menu .text.item > *, +.ui.menu .item > p:only-child { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + line-height: 1.3; + color: rgba(0, 0, 0, 0.6); +} +.ui.menu .item > p:first-child { + margin-top: 0px; +} +.ui.menu .item > p:last-child { + margin-bottom: 0px; +} +/*-------------- + Inputs +---------------*/ +.ui.menu .item > .input, +.ui.menu .item > .input input { + width: 100%; +} +.ui.menu .input .icon { + padding-top: 0em; + height: auto; +} +.ui.menu .item > .input input, +.ui.menu .item > input { + position: relative; + top: -0.45em; + margin: 0em; + padding-top: 0.45em; + padding-bottom: 0.45em; +} +.ui.vertical.menu .item > .input input, +.ui.vertical.menu .item > input { + top: 0em; + margin: 0em; + padding-top: 0.63em; + padding-bottom: 0.63em; +} +.ui.vertical.menu .item > .input .icon { + top: 0px; + padding-top: 0.63em; +} +/*-------------- + Header +---------------*/ +.ui.menu .header.item { + background-color: rgba(0, 0, 0, 0.04); + margin: 0em; +} +.ui.vertical.menu .header.item { + font-weight: bold; +} +/*-------------- + Dropdowns +---------------*/ +/*.ui.menu .dropdown.item .menu { + margin: 1px 0px 0px 0px; +}*/ +.ui.menu .simple.dropdown.item .menu { + margin: 0px !important; +} +.ui.menu .dropdown.item .menu .item { + width: 100%; + color: rgba(0, 0, 0, 0.75); +} +.ui.menu .dropdown.item .menu .active.item { + box-shadow: none !important; +} +.ui.menu .ui.dropdown .menu .item:before { + display: none; +} +/*-------------- + Labels +---------------*/ +.ui.menu .item > .label { + background-color: rgba(0, 0, 0, 0.35); + color: #FFFFFF; + margin: -0.15em 0em -0.15em 0.5em; + padding: 0.3em 0.8em; + vertical-align: baseline; +} +.ui.menu .item > .floating.label { + padding: 0.3em 0.8em; +} +/*-------------- + Images +---------------*/ +.ui.menu .item > img:only-child { + display: block; + max-width: 100%; + margin: 0em auto; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.link.menu .item:hover, +.ui.menu .item.hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover, +.ui.menu .ui.dropdown .menu .item.hover, +.ui.menu .ui.dropdown .menu .item:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.02); +} +.ui.menu .ui.dropdown.active { + background-color: rgba(0, 0, 0, 0.02); + -webkit-box-shadow: none; + box-shadow: none; + -webkit-border-bottom-right-radius: 0em; + -moz-border-bottom-right-radius: 0em; + border-bottom-right-radius: 0em; + -webkit-border-bottom-left-radius: 0em; + -moz-border-bottom-left-radius: 0em; + border-bottom-left-radius: 0em; +} +/*-------------- + Down +---------------*/ +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active, +.ui.menu .ui.dropdown .menu .item:active { + background-color: rgba(0, 0, 0, 0.05); +} +/*-------------- + Active +---------------*/ +.ui.menu .active.item { + background-color: rgba(0, 0, 0, 0.01); + color: rgba(0, 0, 0, 0.95); + -webkit-box-shadow: 0em 0.2em 0em inset; + -moz-box-shadow: 0em 0.2em 0em inset; + box-shadow: 0em 0.2em 0em inset; +} +.ui.vertical.menu .active.item { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + -moz-box-shadow: 0.2em 0em 0em inset; + -webkit-box-shadow: 0.2em 0em 0em inset; + box-shadow: 0.2em 0em 0em inset; +} +.ui.vertical.menu > .active.item:first-child { + -webkit-border-radius: 0em 0.1875em 0em 0em; + -moz-border-radius: 0em 0.1875em 0em 0em; + border-radius: 0em 0.1875em 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + -webkit-border-radius: 0em 0em 0.1875em 0em; + -moz-border-radius: 0em 0em 0.1875em 0em; + border-radius: 0em 0em 0.1875em 0em; +} +.ui.vertical.menu > .active.item:only-child { + -webkit-border-radius: 0em 0.1875em 0.1875em 0em; + -moz-border-radius: 0em 0.1875em 0.1875em 0em; + border-radius: 0em 0.1875em 0.1875em 0em; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} +.ui.vertical.menu .active.item .menu .active.item { + padding-left: 1.5rem; +} +.ui.vertical.menu .item .menu .active.item { + background-color: rgba(0, 0, 0, 0.03); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*-------------- + Disabled +---------------*/ +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover, +.ui.menu .item.disabled.hover { + cursor: default; + color: rgba(0, 0, 0, 0.2); + background-color: transparent !important; +} +/*-------------------- + Loading +---------------------*/ +/* On Form */ +.ui.menu.loading { + position: relative; +} +.ui.menu.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url('../build/uncompressed/images/loader-large.gif') no-repeat 50% 50%; + visibility: visible; +} +/******************************* + Types +*******************************/ +/*-------------- + Vertical +---------------*/ +.ui.vertical.menu .item { + display: block; + height: auto !important; + border-top: none; + border-left: 0em solid rgba(0, 0, 0, 0); + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: 0.1875em 0.1875em 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px 0.1875em 0.1875em; +} +.ui.vertical.menu .item > .label { + float: right; + min-width: 2.5; + text-align: center; +} +.ui.vertical.menu .item > .icon:not(.input) { + float: right; + width: 1.22em; + margin: 0em 0em 0em 0.5em; +} +.ui.vertical.menu .item > .label + .icon { + float: none; + margin: 0em 0.25em 0em 0em; +} +/*--- Border ---*/ +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: 1px; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); +} +.ui.vertical.menu .item:first-child:before { + background-image: none !important; +} +/*--- Dropdown ---*/ +.ui.vertical.menu .dropdown.item > i { + float: right; +} +.ui.vertical.menu .dropdown.item .menu { + top: 0% !important; + left: 100%; + margin: 0px 0px 0px 1px; +} +.ui.vertical.menu .dropdown.item.active { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.item .menu .item { + font-size: 1rem; +} +.ui.vertical.menu .dropdown.item .menu .item .icon { + margin-right: 0em; +} +.ui.vertical.menu .dropdown.item.active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*--- Sub Menu ---*/ +.ui.vertical.menu .item > .menu { + margin: 0.5em -0.95em 0em; +} +.ui.vertical.menu .item > .menu > .item { + padding: 0.5rem 1.5rem; + font-size: 0.875em; +} +.ui.vertical.menu .item > .menu > .item:before { + display: none; +} +/*-------------- + Tiered +---------------*/ +.ui.tiered.menu > .sub.menu > .item { + color: rgba(0, 0, 0, 0.4); +} +.ui.tiered.menu > .menu > .item:hover, +.ui.tiered.menu > .menu > .item.hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.tiered.menu .item.active { + color: rgba(0, 0, 0, 0.8); +} +.ui.tiered.menu > .menu .item.active:after { + position: absolute; + content: ''; + top: 100%; + left: 0px; + width: 100%; + height: 1px; + background-color: #FBFBFB; +} +.ui.tiered.menu .sub.menu { + background-color: rgba(0, 0, 0, 0.01); + border-radius: 0em; + border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + color: #FFFFFF; +} +.ui.tiered.menu .sub.menu .item { + font-size: 0.875rem; +} +.ui.tiered.menu .sub.menu .item:before { + background-image: none; +} +.ui.tiered.menu .sub.menu .active.item { + padding-top: 0.83em; + background-color: transparent; + border-radius: 0 0 0 0; + border-top: medium none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + color: rgba(0, 0, 0, 0.7) !important; +} +.ui.tiered.menu .sub.menu .active.item:after { + display: none; +} +/* Inverted */ +.ui.inverted.tiered.menu > .menu > .item { + color: rgba(255, 255, 255, 0.5); +} +.ui.inverted.tiered.menu .sub.menu { + background-color: rgba(0, 0, 0, 0.2); +} +.ui.inverted.tiered.menu .sub.menu .item { + color: rgba(255, 255, 255, 0.6); +} +.ui.inverted.tiered.menu > .menu > .item:hover, +.ui.inverted.tiered.menu > .menu > .item.hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.tiered.menu .active.item:after { + display: none; +} +.ui.inverted.tiered.menu > .sub.menu > .active.item, +.ui.inverted.tiered.menu > .menu > .active.item { + color: #ffffff !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Tiered pointing */ +.ui.pointing.tiered.menu > .menu > .item:after { + display: none; +} +.ui.pointing.tiered.menu > .sub.menu > .item:after { + display: block; +} +/*-------------- + Tabular +---------------*/ +.ui.tabular.menu { + background-color: transparent; + border-bottom: 1px solid #DCDDDE; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} +.ui.tabular.menu .item { + background-color: transparent; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 1px solid transparent; + padding-left: 1.4em; + padding-right: 1.4em; + color: rgba(0, 0, 0, 0.6); +} +.ui.tabular.menu .item:before { + display: none; +} +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.8); +} +/* Active */ +.ui.tabular.menu .active.item { + position: relative; + top: 1px; + background-color: #FFFFFF; + color: rgba(0, 0, 0, 0.8); + border-color: #DCDDDE; + padding-top: 0.83em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} +/* Coupling with segment for attachment */ +.ui.attached.tabular.menu { + position: relative; + z-index: 2; +} +.ui.tabular.menu ~ .bottom.attached.segment { + margin: 1px 0px 0px 1px; +} +/*-------------- + Pagination +---------------*/ +.ui.pagination.menu { + margin: 0em; + display: inline-block; +} +.ui.pagination.menu .item { + min-width: 2.7em; + min-height: 2.66em; + text-align: center; +} +.ui.pagination.menu.floated { + display: block; +} +/* active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: 0.83em; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*-------------- + Secondary +---------------*/ +.ui.secondary.menu { + background-color: transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.secondary.menu > .item { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + border: none; + height: auto !important; + margin: 0em 0.25em; + padding: 0.5em 1em; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +.ui.secondary.menu > .item:before { + display: none !important; +} +.ui.secondary.menu .link.item, +.ui.secondary.menu a.item { + opacity: 0.8; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; +} +.ui.secondary.menu .header.item { + border-right: 0.1em solid rgba(0, 0, 0, 0.1); + background-color: transparent; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/* hover */ +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + opacity: 1; +} +/* active */ +.ui.secondary.menu > .active.item { + background-color: rgba(0, 0, 0, 0.08); + opacity: 1; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.secondary.vertical.menu > .active.item { + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +/* inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: rgba(255, 255, 255, 0.5); +} +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.secondary.inverted.menu > .active.item { + background-color: rgba(255, 255, 255, 0.9); +} +/* disable variations */ +.ui.secondary.item.menu > .item { + margin: 0em; +} +.ui.secondary.attached.menu { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*--------------------- + Secondary Pointing +-----------------------*/ +.ui.secondary.pointing.menu { + border-bottom: 3px solid rgba(0, 0, 0, 0.1); +} +.ui.secondary.pointing.menu .header.item { + border-right-width: 0px; + font-weight: bold; +} +.ui.secondary.pointing.menu .text.item { + box-shadow: none !important; +} +.ui.secondary.pointing.menu > .item { + margin: 0em 0em -3px; + padding: 0.6em 0.95em; + border-bottom: 3px solid rgba(0, 0, 0, 0); + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + -webkit-transition: color 0.2s + ; + -moz-transition: color 0.2s + ; + -o-transition: color 0.2s + ; + -ms-transition: color 0.2s + ; + transition: color 0.2s + ; +} +.ui.secondary.pointing.menu > .item:after { + display: none; +} +/* Hover */ +.ui.secondary.pointing.menu > .item.hover, +.ui.secondary.pointing.menu > .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); +} +/* Down */ +.ui.secondary.pointing.menu > .item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} +/* Active */ +.ui.secondary.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*--------------------- + Secondary Vertical +-----------------------*/ +.ui.secondary.vertical.pointing.menu { + border: none; + border-right: 3px solid rgba(0, 0, 0, 0.1); +} +.ui.secondary.vertical.menu > .item { + border: none; + margin: 0em 0em 0.3em; + padding: 0.6em 0.8em; + -webkit-border-radius: 0.1875em; + -moz-border-radius: 0.1875em; + border-radius: 0.1875em; +} +.ui.secondary.vertical.menu > .header.item { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +.ui.secondary.vertical.pointing.menu > .item { + margin: 0em -3px 0em 0em; + border-bottom: none; + border-right: 3px solid transparent; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/* Hover */ +.ui.secondary.vertical.pointing.menu > .item.hover, +.ui.secondary.vertical.pointing.menu > .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); +} +/* Down */ +.ui.secondary.vertical.pointing.menu > .item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} +/* Active */ +.ui.secondary.vertical.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.4); + color: rgba(0, 0, 0, 0.85); +} +/*-------------- + Inverted +---------------*/ +.ui.secondary.inverted.menu { + background-color: transparent; +} +.ui.secondary.inverted.pointing.menu { + border-bottom: 3px solid rgba(255, 255, 255, 0.1); +} +.ui.secondary.inverted.pointing.menu > .item { + color: rgba(255, 255, 255, 0.7); +} +/* Hover */ +.ui.secondary.inverted.pointing.menu > .item.hover, +.ui.secondary.inverted.pointing.menu > .item:hover { + color: rgba(255, 255, 255, 0.85); +} +/* Down */ +.ui.secondary.inverted.pointing.menu > .item:active { + border-color: rgba(255, 255, 255, 0.4) !important; +} +/* Active */ +.ui.secondary.inverted.pointing.menu > .item.active { + border-color: rgba(255, 255, 255, 0.8) !important; + color: #ffffff; +} +/*--------------------- + Inverted Vertical +----------------------*/ +.ui.secondary.inverted.vertical.pointing.menu { + border-right: 3px solid rgba(255, 255, 255, 0.1); + border-bottom: none; +} +/*-------------- + Text Menu +---------------*/ +.ui.text.menu { + background-color: transparent; + margin: 1rem -1rem; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.text.menu > .item { + opacity: 0.8; + margin: 0em 1em; + padding: 0em; + height: auto !important; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-transition: opacity 0.2s ease + ; + -moz-transition: opacity 0.2s ease + ; + -o-transition: opacity 0.2s ease + ; + -ms-transition: opacity 0.2s ease + ; + transition: opacity 0.2s ease + ; +} +.ui.text.menu > .item:before { + display: none !important; +} +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: rgba(50, 50, 50, 0.8); + font-size: 0.875rem; + padding: 0em; + text-transform: uppercase; + font-weight: bold; +} +/*--- fluid text ---*/ +.ui.text.item.menu .item { + margin: 0em; +} +/*--- vertical text ---*/ +.ui.vertical.text.menu { + margin: 1rem 0em; +} +.ui.vertical.text.menu:first-child { + margin-top: 0rem; +} +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; +} +.ui.vertical.text.menu .item { + float: left; + clear: left; + margin: 0.5em 0em; +} +.ui.vertical.text.menu .item > .icon { + float: none; + margin: 0em 0.83em 0em 0em; +} +.ui.vertical.text.menu .header.item { + margin: 0.8em 0em; +} +/*--- hover ---*/ +.ui.text.menu .item.hover, +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; +} +/*--- active ---*/ +.ui.text.menu .active.item { + background-color: transparent; + padding: 0em; + border: none; + opacity: 1; + font-weight: bold; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* disable variations */ +.ui.text.pointing.menu .active.item:after { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.text.attached.menu { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .item.active { + background-color: transparent; +} +/*-------------- + Icon Only +---------------*/ +.ui.icon.menu, +.ui.vertical.icon.menu { + width: auto; + display: inline-block; + height: auto; +} +.ui.icon.menu > .item { + height: auto; + text-align: center; + color: rgba(60, 60, 60, 0.7); +} +.ui.icon.menu > .item > .icon { + display: block; + float: none !important; + opacity: 1; + margin: 0em auto !important; +} +.ui.icon.menu .icon:before { + opacity: 1; +} +/* Item Icon Only */ +.ui.menu .icon.item .icon { + margin: 0em; +} +.ui.vertical.icon.menu { + float: none; +} +/*--- inverted ---*/ +.ui.inverted.icon.menu .item { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.icon.menu .icon { + color: #ffffff; +} +/*-------------- + Labeled Icon +---------------*/ +.ui.labeled.icon.menu { + text-align: center; +} +.ui.labeled.icon.menu > .item > .icon { + display: block; + font-size: 1.5em !important; + margin: 0em auto 0.3em !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Colors +---------------*/ +/*--- Light Colors ---*/ +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: #A1CF64 !important; + color: #A1CF64 !important; +} +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: #D95C5C !important; + color: #D95C5C !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: #6ECFF5 !important; + color: #6ECFF5 !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: #564F8A !important; + color: #564F8A !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: #F05940 !important; + color: #F05940 !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: #00B5AD !important; + color: #00B5AD !important; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.menu { + background-color: #333333; + box-shadow: none; +} +.ui.inverted.menu .header.item { + margin: 0em; + background-color: rgba(0, 0, 0, 0.3); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.menu .item, +.ui.inverted.menu .item > a { + color: #FFFFFF; +} +.ui.inverted.menu .item .item, +.ui.inverted.menu .item .item > a { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.menu .dropdown.item .menu .item, +.ui.inverted.menu .dropdown.item .menu .item a { + color: rgba(0, 0, 0, 0.75) !important; +} +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover, +.ui.inverted.menu .item.disabled.hover { + color: rgba(255, 255, 255, 0.2); +} +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); +} +.ui.vertical.inverted.menu .item:before { + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); +} +/*--- Hover ---*/ +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .item.hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .dropdown.item.hover, +.ui.inverted.menu .dropdown.item:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .item.hover, +.ui.inverted.menu .item > a:hover, +.ui.inverted.menu .item .menu a.item:hover, +.ui.inverted.menu .item .menu a.item.hover, +.ui.inverted.menu .item .menu .link.item:hover, +.ui.inverted.menu .item .menu .link.item.hover { + color: #ffffff; +} +/*--- Down ---*/ +.ui.inverted.menu a.item:active, +.ui.inverted.menu .dropdown.item:active, +.ui.inverted.menu .link.item:active, +.ui.inverted.menu a.item:active { + background-color: rgba(255, 255, 255, 0.15); +} +/*--- Active ---*/ +.ui.inverted.menu .active.item { + box-shadow: none !important; + background-color: rgba(255, 255, 255, 0.2); +} +.ui.inverted.menu .active.item, +.ui.inverted.menu .active.item a { + color: #ffffff !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background-color: rgba(255, 255, 255, 0.2); + color: #ffffff; +} +/*--- Pointers ---*/ +.ui.inverted.pointing.menu .active.item:after { + background-color: #505050; + box-shadow: none; +} +.ui.inverted.pointing.menu .active.item:hover:after { + background-color: #3B3B3B; +} +/*-------------- + Selection +---------------*/ +.ui.selection.menu > .item { + color: rgba(0, 0, 0, 0.4); +} +.ui.selection.menu > .item:hover { + color: rgba(0, 0, 0, 0.6); +} +.ui.selection.menu > .item.active { + color: rgba(0, 0, 0, 0.85); +} +.ui.inverted.selection.menu > .item { + color: rgba(255, 255, 255, 0.4); +} +.ui.inverted.selection.menu > .item:hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.selection.menu > .item.active { + color: #FFFFFF; +} +/*-------------- + Floated +---------------*/ +.ui.floated.menu { + float: left; + margin: 0rem 0.5rem 0rem 0rem; +} +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem 0.5rem; +} +/*-------------- + Inverted Colors +---------------*/ +/*--- Light Colors ---*/ +.ui.grey.menu { + background-color: #F0F0F0; +} +/*--- Inverted Colors ---*/ +.ui.inverted.green.menu { + background-color: #A1CF64; +} +.ui.inverted.green.pointing.menu .active.item:after { + background-color: #A1CF64; +} +.ui.inverted.red.menu { + background-color: #D95C5C; +} +.ui.inverted.red.pointing.menu .active.item:after { + background-color: #F16883; +} +.ui.inverted.blue.menu { + background-color: #6ECFF5; +} +.ui.inverted.blue.pointing.menu .active.item:after { + background-color: #6ECFF5; +} +.ui.inverted.purple.menu { + background-color: #564F8A; +} +.ui.inverted.purple.pointing.menu .active.item:after { + background-color: #564F8A; +} +.ui.inverted.orange.menu { + background-color: #F05940; +} +.ui.inverted.orange.pointing.menu .active.item:after { + background-color: #F05940; +} +.ui.inverted.teal.menu { + background-color: #00B5AD; +} +.ui.inverted.teal.pointing.menu .active.item:after { + background-color: #00B5AD; +} +/*-------------- + Fitted +---------------*/ +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: 0.83em; + padding-bottom: 0.83em; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: 0.95em; + padding-right: 0.95em; +} +/*-------------- + Borderless +---------------*/ +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background-image: none; +} +/*------------------- + Compact +--------------------*/ +.ui.compact.menu { + display: inline-block; + margin: 0em; + vertical-align: middle; +} +.ui.compact.vertical.menu { + width: auto !important; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} +/*------------------- + Fluid +--------------------*/ +.ui.menu.fluid, +.ui.vertical.menu.fluid { + display: block; + width: 100% !important; +} +/*------------------- + Evenly Sized +--------------------*/ +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0px !important; + padding-right: 0px !important; + text-align: center; +} +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.500%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10.0%; +} +.ui.menu.eleven.item .item { + width: 9.09%; +} +.ui.menu.twelve.item .item { + width: 8.333%; +} +/*-------------- + Fixed +---------------*/ +.ui.menu.fixed { + position: fixed; + z-index: 10; + margin: 0em; + border: none; + width: 100%; +} +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + border-radius: 0px !important; +} +.ui.menu.fixed.top { + top: 0px; + left: 0px; + right: auto; + bottom: auto; +} +.ui.menu.fixed.right { + top: 0px; + right: 0px; + left: auto; + bottom: auto; + width: auto; + height: 100%; +} +.ui.menu.fixed.bottom { + bottom: 0px; + left: 0px; + top: auto; + right: auto; +} +.ui.menu.fixed.left { + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; +} +/*------------------- + Pointing +--------------------*/ +.ui.pointing.menu .active.item:after { + position: absolute; + bottom: -0.35em; + left: 50%; + content: ""; + margin-left: -0.3em; + width: 0.6em; + height: 0.6em; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); + background-image: none; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-transition: background 0.2s ease + ; + -moz-transition: background 0.2s ease + ; + -o-transition: background 0.2s ease + ; + -ms-transition: background 0.2s ease + ; + transition: background 0.2s ease + ; +} +/* Don't double up pointers */ +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} +.ui.vertical.pointing.menu .active.item:after { + position: absolute; + top: 50%; + margin-top: -0.3em; + right: -0.4em; + bottom: auto; + left: auto; + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); +} +/* Colors */ +.ui.pointing.menu .active.item:after { + background-color: #FCFCFC; +} +.ui.pointing.menu .active.item.hover:after, +.ui.pointing.menu .active.item:hover:after { + background-color: #FAFAFA; +} +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: #F4F4F4; +} +.ui.pointing.menu a.active.item:active:after { + background-color: #F0F0F0; +} +/*-------------- + Attached +---------------*/ +.ui.menu.attached { + margin: 0rem; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; + /* avoid rgba multiplying */ + + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; +} +.ui.top.attached.menu { + -moz-border-radius: 0.1875em 0.1875em 0px 0px; + -webkit-border-radius: 0.1875em 0.1875em 0px 0px; + border-radius: 0.1875em 0.1875em 0px 0px; +} +.ui.menu.bottom.attached { + -moz-border-radius: 0px 0px 0.1875em 0.1875em; + -webkit-border-radius: 0px 0px 0.1875em 0.1875em; + border-radius: 0px 0px 0.1875em 0.1875em; +} +/*-------------- + Sizes +---------------*/ +.ui.small.menu .item { + font-size: 0.875rem; +} +.ui.small.vertical.menu { + width: 13rem; +} +.ui.menu .item { + font-size: 1rem; + height: 2.66em; +} +.ui.vertical.menu { + width: 15rem; +} +.ui.large.menu .item { + font-size: 1.125rem; +} +.ui.large.menu .item .item { + font-size: 0.875rem; +} +.ui.large.vertical.menu { + width: 18rem; +} +/* + * # Semantic - Message + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Message +*******************************/ +.ui.message { + position: relative; + min-height: 18px; + margin: 1em 0em; + height: auto; + background-color: #EFEFEF; + padding: 1em; + line-height: 1.33; + color: rgba(0, 0, 0, 0.6); + -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; + -moz-border-radius: 0.325em 0.325em 0.325em 0.325em; + border-radius: 0.325em 0.325em 0.325em 0.325em; +} +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} +/*-------------- + Content +---------------*/ +/* block with headers */ +.ui.message .header { + margin: 0em; + font-size: 1.33em; + font-weight: bold; +} +/* block with paragraphs */ +.ui.message p { + opacity: 0.85; + margin: 1em 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: 0.3em; +} +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} +/* block with child list */ +.ui.message ul.list { + opacity: 0.85; + list-style-position: inside; + margin: 0.2em 0em; + padding: 0em; +} +.ui.message ul.list li { + position: relative; + list-style-type: none; + margin: 0em 0em 0em 1em; + padding: 0em; +} +.ui.message ul.list li:before { + position: absolute; + content: '\2022'; + top: -0.05em; + left: -0.8em; + height: 100%; + vertical-align: baseline; + opacity: 0.5; +} +.ui.message ul.list li:first-child { + margin-top: 0em; +} +/* dismissable block */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + top: 1em; + right: 0.5em; + opacity: 0.7; + -webkit-transition: opacity 0.1s linear + ; + -moz-transition: opacity 0.1s linear + ; + -o-transition: opacity 0.1s linear + ; + -ms-transition: opacity 0.1s linear + ; + transition: opacity 0.1s linear + ; +} +.ui.message > .close.icon:hover { + opacity: 1; +} +/******************************* + States +*******************************/ +.ui.message.visible, +.ui.header.visible { + display: block !important; +} +.ui.message.hidden, +.ui.header.hidden { + display: none; +} +/******************************* + Variations +*******************************/ +/*-------------- + Compact +---------------*/ +.ui.compact.message { + display: inline-block; +} +/*-------------- + Attached +---------------*/ +.ui.attached.message { + margin-left: -1px; + margin-right: -1px; + margin-bottom: -1px; + -webkit-border-radius: 0.325em 0.325em 0em 0em; + -moz-border-radius: 0.325em 0.325em 0em 0em; + border-radius: 0.325em 0.325em 0em 0em; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.bottom.attached.message { + margin-top: -1px; + -webkit-border-radius: 0em 0em 0.325em 0.325em; + -moz-border-radius: 0em 0em 0.325em 0.325em; + border-radius: 0em 0em 0.325em 0.325em; +} +/*-------------- + Icon +---------------*/ +.ui.icon.message { + display: table; + width: 100%; +} +.ui.icon.message > .icon { + display: table-cell; + vertical-align: middle; + font-size: 3.8em; + opacity: 0.2; +} +.ui.icon.message > .icon + .content { + padding-left: 1em; +} +.ui.icon.message > .content { + display: table-cell; + vertical-align: middle; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.message { + background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.95); +} +/*-------------- + Floating +---------------*/ +.ui.floating.message { + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; + -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; +} +/*-------------- + Colors +---------------*/ +.ui.black.message { + background-color: #333333; + color: rgba(255, 255, 255, 0.95); +} +/*-------------- + Types +---------------*/ +.ui.blue.message, +.ui.info.message { + background-color: #E6F4F9; + color: #4D8796; +} +/* Green Text Block */ +.ui.green.message { + background-color: #DEFCD5; + color: #52A954; +} +/* Yellow Text Block */ +.ui.yellow.message, +.ui.warning.message { + background-color: #F6F3D5; + color: #96904D; +} +/* Red Text Block */ +.ui.red.message { + background-color: #F1D7D7; + color: #A95252; +} +/* Success Text Block */ +.ui.success.message, +.ui.positive.message { + background-color: #5BBD72; + color: #FFFFFF; +} +/* Error Text Block */ +.ui.error.message, +.ui.negative.message { + background-color: #D95C5C; + color: #FFFFFF; +} +/*-------------- + Sizes +---------------*/ +.ui.small.message { + font-size: 0.875em; +} +.ui.message { + font-size: 1em; +} +.ui.large.message { + font-size: 1.125em; +} +.ui.huge.message { + font-size: 1.5em; +} +.ui.massive.message { + font-size: 2em; +} +/* + * # Semantic - Table + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Table +*******************************/ +/* Prototype */ +.ui.table { + width: 100%; + border-collapse: collapse; +} +/* Table Content */ +.ui.table th, +.ui.table tr, +.ui.table td { + border-collapse: collapse; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all 0.1s ease-out; + -moz-transition: all 0.1s ease-out; + -o-transition: all 0.1s ease-out; + -ms-transition: all 0.1s ease-out; + transition: all 0.1s ease-out; +} +/* Headers */ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table th { + cursor: auto; + background-color: rgba(0, 0, 0, 0.03); + text-align: left; + color: rgba(0, 0, 0, 0.8); + padding: 0.5em 0.7em; + vertical-align: middle; +} +.ui.table thead th:first-child { + border-radius: 5px 0px 0px 0px; +} +.ui.table thead th:last-child { + border-radius: 0px 5px 0px 0px; +} +.ui.table tfoot th:first-child { + border-radius: 0px 0px 0px 5px; +} +.ui.table tfoot th:last-child { + border-radius: 0px 0px 5px 0px; +} +/* Table Cells */ +.ui.table td { + padding: 0.40em 0.7em; + vertical-align: middle; +} +/* Footer */ +.ui.table tfoot { + border-top: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table tfoot th { + font-weight: normal; + font-style: italic; +} +/* Table Striping */ +.ui.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 50, 0.02); +} +/* Icons */ +.ui.table > .icon { + vertical-align: baseline; +} +.ui.table > .icon:only-child { + margin: 0em; +} +/* Table Segment */ +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +/* Sortable */ +.ui.sortable.table thead th:hover { + background-image: none; + color: rgba(0, 0, 0, 0.8); +} +.ui.sortable.table th.disabled:hover { + cursor: auto; + background-color: rgba(0, 0, 0, 0.1); + text-align: left; + font-weight: bold; + color: #333333; + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Positive +---------------*/ +.ui.table tr.positive, +.ui.table td.positive { + -webkit-box-shadow: 2px 0px 0px #119000 inset; + -moz-box-shadow: 2px 0px 0px #119000 inset; + box-shadow: 2px 0px 0px #119000 inset; +} +.ui.table tr.positive td, +.ui.table td.positive { + background-color: #F2F8F0 !important; + color: #119000 !important; +} +.ui.celled.table tr.positive:hover td, +.ui.celled.table tr:hover td.positive, +.ui.table tr.positive:hover td, +.ui.table td:hover.positive, +.ui.table th:hover.positive { + background-color: #ECF5E9 !important; + color: #119000 !important; +} +/*-------------- + Negative +---------------*/ +.ui.table tr.negative, +.ui.table td.negative { + -webkit-box-shadow: 2px 0px 0px #CD2929 inset; + -moz-box-shadow: 2px 0px 0px #CD2929 inset; + box-shadow: 2px 0px 0px #CD2929 inset; +} +.ui.table tr.negative td, +.ui.table td.negative { + background-color: #F9F4F4; + color: #CD2929 !important; +} +.ui.celled.table tr.negative:hover td, +.ui.celled.table tr:hover td.negative, +.ui.table tr.negative:hover td, +.ui.table td:hover.negative, +.ui.table th:hover.negative { + background-color: #F2E8E8 !important; + color: #CD2929 !important; +} +/*-------------- + Error +---------------*/ +.ui.table tr.error, +.ui.table td.error { + -webkit-box-shadow: 2px 0px 0px #CD2929 inset; + -moz-box-shadow: 2px 0px 0px #CD2929 inset; + box-shadow: 2px 0px 0px #CD2929 inset; +} +.ui.table tr.error td, +.ui.table td.error, +.ui.table th.error { + background-color: #F9F4F4 !important; + color: #CD2929 !important; +} +.ui.celled.table tr.error:hover td, +.ui.celled.table tr:hover td.error, +.ui.table tr.error:hover td, +.ui.table td:hover.error, +.ui.table th:hover.error { + background-color: #F2E8E8 !important; + color: #CD2929 !important; +} +/*-------------- + Warning +---------------*/ +.ui.table tr.warning, +.ui.table td.warning { + -webkit-box-shadow: 2px 0px 0px #7D6C00 inset; + -moz-box-shadow: 2px 0px 0px #7D6C00 inset; + box-shadow: 2px 0px 0px #7D6C00 inset; +} +.ui.table tr.warning td, +.ui.table td.warning, +.ui.table th.warning { + background-color: #FBF6E9; + color: #7D6C00 !important; +} +.ui.celled.table tr.warning:hover td, +.ui.celled.table tr:hover td.warning, +.ui.table tr.warning:hover td, +.ui.table td:hover.warning, +.ui.table th:hover.warning { + background-color: #F3EDDC !important; + color: #7D6C00 !important; +} +/*-------------- + Active +---------------*/ +.ui.table tr.active, +.ui.table td.active { + -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; + -moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; + box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; +} +.ui.table tr.active td, +.ui.table tr td.active { + background-color: #E0E0E0 !important; + color: rgba(50, 50, 50, 0.9); + /* border-color: rgba(0, 0, 0, 0.15) !important; */ + +} +/*-------------- + Disabled +---------------*/ +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover td, +.ui.table tr:hover td.disabled { + color: rgba(150, 150, 150, 0.3); +} +/******************************* + Variations +*******************************/ +/*-------------- + Column Count +---------------*/ +.ui.two.column.table td { + width: 50%; +} +.ui.three.column.table td { + width: 33.3333%; +} +.ui.four.column.table td { + width: 25%; +} +.ui.five.column.table td { + width: 20%; +} +.ui.six.column.table td { + width: 16.66667%; +} +.ui.seven.column.table td { + width: 14.2857%; +} +.ui.eight.column.table td { + width: 12.5%; +} +.ui.nine.column.table td { + width: 11.1111%; +} +.ui.ten.column.table td { + width: 10%; +} +.ui.eleven.column.table td { + width: 9.0909%; +} +.ui.twelve.column.table td { + width: 8.3333%; +} +.ui.thirteen.column.table td { + width: 7.6923%; +} +.ui.fourteen.column.table td { + width: 7.1428%; +} +.ui.fifteen.column.table td { + width: 6.6666%; +} +.ui.sixteen.column.table td { + width: 6.25%; +} +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} +/*-------------- + Celled +---------------*/ +.ui.celled.table { + color: rgba(0, 0, 0, 0.8); +} +.ui.celled.table tbody tr, +.ui.celled.table tfoot tr { + border: none; +} +.ui.celled.table th, +.ui.celled.table tbody td { + border: 1px solid rgba(0, 0, 0, 0.1); +} +/* Coupling with segment */ +.ui.celled.table.segment th { + border: none; +} +.ui.celled.table.segment tbody td:first-child { + border-left: none; +} +.ui.celled.table.segment tbody td:last-child { + border-right: none; +} +/*-------------- + Sortable +---------------*/ +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.ui.sortable.table thead th:after { + display: inline-block; + content: ''; + width: 1em; + opacity: 0.8; + margin: 0em 0em 0em 0.5em; + font-family: 'Icons'; + font-style: normal; + font-weight: normal; + text-decoration: inherit; +} +.ui.sortable.table thead th.ascending:after { + content: '\25b4'; +} +.ui.sortable.table thead th.descending:after { + content: '\25be'; +} +/*-------------- + Inverted +---------------*/ +/* Text Color */ +.ui.inverted.table td { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.table th { + background-color: rgba(0, 0, 0, 0.15); + color: rgba(255, 255, 255, 0.9); +} +/* Stripes */ +.ui.inverted.table tbody tr:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.06); +} +/*-------------- + Definition +---------------*/ +.ui.definition.table td:first-child { + font-weight: bold; +} +/*-------------- + Collapsing +---------------*/ +.ui.collapsing.table { + width: auto; +} +/*-------------- + Basic +---------------*/ +.ui.basic.table th { + background-color: transparent; + padding: 0.5em; +} +.ui.basic.table tbody tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.basic.table td { + padding: 0.8em 0.5em; +} +/*-------------- + Padded +---------------*/ +.ui.padded.table th, +.ui.padded.table td { + padding: 0.8em 1em; +} +.ui.compact.table th { + padding: 0.3em 0.5em; +} +.ui.compact.table td { + padding: 0.2em 0.5em; +} +/*-------------- + Sizes +---------------*/ +/* Small */ +.ui.small.table { + font-size: 0.875em; +} +/* Standard */ +.ui.table { + font-size: 1em; +} +/* Large */ +.ui.large.table { + font-size: 1.1em; +} +/* + * # Semantic - Icon (Basic) + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Icon +*******************************/ +@font-face { + font-family: 'Basic Icons'; + src: url('../build/uncompressed/fonts/basic.icons.eot'); + src: url('../build/uncompressed/fonts/basic.icons.eot?#iefix') format('embedded-opentype'), url('../build/uncompressed/fonts/basic.icons.woff') format('woff'), url('../build/uncompressed/fonts/basic.icons.ttf') format('truetype'), url('../build/uncompressed/fonts/basic.icons.svg#icons') format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 1.23em; + height: 1em; + font-family: 'Basic Icons'; + font-style: normal; + line-height: 1; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; +} +/* icons available */ +i.icon.circle.attention:before { + content: '\2757'; +} +/* '❗' */ +i.icon.circle.help:before { + content: '\e704'; +} +/* '' */ +i.icon.circle.info:before { + content: '\e705'; +} +/* '' */ +i.icon.add:before { + content: '\2795'; +} +/* '➕' */ +i.icon.chart:before { + content: '📈'; +} +/* '\1f4c8' */ +i.icon.chart.bar:before { + content: '📊'; +} +/* '\1f4ca' */ +i.icon.chart.pie:before { + content: '\e7a2'; +} +/* '' */ +i.icon.resize.full:before { + content: '\e744'; +} +/* '' */ +i.icon.resize.horizontal:before { + content: '\2b0d'; +} +/* '⬍' */ +i.icon.resize.small:before { + content: '\e746'; +} +/* '' */ +i.icon.resize.vertical:before { + content: '\2b0c'; +} +/* '⬌' */ +i.icon.down:before { + content: '\2193'; +} +/* '↓' */ +i.icon.down.triangle:before { + content: '\25be'; +} +/* '▾' */ +i.icon.down.arrow:before { + content: '\e75c'; +} +/* '' */ +i.icon.left:before { + content: '\2190'; +} +/* '←' */ +i.icon.left.triangle:before { + content: '\25c2'; +} +/* '◂' */ +i.icon.left.arrow:before { + content: '\e75d'; +} +/* '' */ +i.icon.right:before { + content: '\2192'; +} +/* '→' */ +i.icon.right.triangle:before { + content: '\25b8'; +} +/* '▸' */ +i.icon.right.arrow:before { + content: '\e75e'; +} +/* '' */ +i.icon.up:before { + content: '\2191'; +} +/* '↑' */ +i.icon.up.triangle:before { + content: '\25b4'; +} +/* '▴' */ +i.icon.up.arrow:before { + content: '\e75f'; +} +/* '' */ +i.icon.folder:before { + content: '\e810'; +} +/* '' */ +i.icon.open.folder:before { + content: '📂'; +} +/* '\1f4c2' */ +i.icon.globe:before { + content: '𝌍'; +} +/* '\1d30d' */ +i.icon.desk.globe:before { + content: '🌐'; +} +/* '\1f310' */ +i.icon.star:before { + content: '\e801'; +} +/* '' */ +i.icon.star.empty:before { + content: '\e800'; +} +/* '' */ +i.icon.star.half:before { + content: '\e701'; +} +/* '' */ +i.icon.lock:before { + content: '🔒'; +} +/* '\1f512' */ +i.icon.unlock:before { + content: '🔓'; +} +/* '\1f513' */ +i.icon.layout.grid:before { + content: '\e80c'; +} +/* '' */ +i.icon.layout.block:before { + content: '\e708'; +} +/* '' */ +i.icon.layout.list:before { + content: '\e80b'; +} +/* '' */ +i.icon.heart.empty:before { + content: '\2661'; +} +/* '♡' */ +i.icon.heart:before { + content: '\2665'; +} +/* '♥' */ +i.icon.asterisk:before { + content: '\2731'; +} +/* '✱' */ +i.icon.attachment:before { + content: '📎'; +} +/* '\1f4ce' */ +i.icon.attention:before { + content: '\26a0'; +} +/* '⚠' */ +i.icon.trophy:before { + content: '🏉'; +} +/* '\1f3c9' */ +i.icon.barcode:before { + content: '\e792'; +} +/* '' */ +i.icon.cart:before { + content: '\e813'; +} +/* '' */ +i.icon.block:before { + content: '🚫'; +} +/* '\1f6ab' */ +i.icon.book:before { + content: '📖'; +} +i.icon.bookmark:before { + content: '🔖'; +} +/* '\1f516' */ +i.icon.calendar:before { + content: '📅'; +} +/* '\1f4c5' */ +i.icon.cancel:before { + content: '\2716'; +} +/* '✖' */ +i.icon.close:before { + content: '\e80d'; +} +/* '' */ +i.icon.color:before { + content: '\e794'; +} +/* '' */ +i.icon.chat:before { + content: '\e720'; +} +/* '' */ +i.icon.check:before { + content: '\2611'; +} +/* '☑' */ +i.icon.time:before { + content: '🕔'; +} +/* '\1f554' */ +i.icon.cloud:before { + content: '\2601'; +} +/* '☁' */ +i.icon.code:before { + content: '\e714'; +} +/* '' */ +i.icon.email:before { + content: '\40'; +} +/* '@' */ +i.icon.settings:before { + content: '\26ef'; +} +/* '⛯' */ +i.icon.setting:before { + content: '\2699'; +} +/* '⚙' */ +i.icon.comment:before { + content: '\e802'; +} +/* '' */ +i.icon.clockwise.counter:before { + content: '\27f2'; +} +/* '⟲' */ +i.icon.clockwise:before { + content: '\27f3'; +} +/* '⟳' */ +i.icon.cube:before { + content: '\e807'; +} +/* '' */ +i.icon.direction:before { + content: '\27a2'; +} +/* '➢' */ +i.icon.doc:before { + content: '📄'; +} +/* '\1f4c4' */ +i.icon.docs:before { + content: '\e736'; +} +/* '' */ +i.icon.dollar:before { + content: '💵'; +} +/* '\1f4b5' */ +i.icon.paint:before { + content: '\e7b5'; +} +/* '' */ +i.icon.edit:before { + content: '\270d'; +} +/* '✍' */ +i.icon.eject:before { + content: '\2ecf'; +} +/* '⻏' */ +i.icon.export:before { + content: '\e715'; +} +/* '' */ +i.icon.hide:before { + content: '\e80f'; +} +/* '' */ +i.icon.unhide:before { + content: '\e70b'; +} +/* '' */ +i.icon.facebook:before { + content: '\f301'; +} +/* '' */ +i.icon.fast-forward:before { + content: '\e804'; +} +/* '' */ +i.icon.fire:before { + content: '🔥'; +} +/* '\1f525' */ +i.icon.flag:before { + content: '\2691'; +} +/* '⚑' */ +i.icon.lightning:before { + content: '\26a1'; +} +/* '⚡' */ +i.icon.lab:before { + content: '\68'; +} +/* 'h' */ +i.icon.flight:before { + content: '\2708'; +} +/* '✈' */ +i.icon.forward:before { + content: '\27a6'; +} +/* '➦' */ +i.icon.gift:before { + content: '🎁'; +} +/* '\1f381' */ +i.icon.github:before { + content: '\f308'; +} +/* '' */ +i.icon.globe:before { + content: '\e817'; +} +/* '' */ +i.icon.headphones:before { + content: '🎧'; +} +/* '\1f3a7' */ +i.icon.question:before { + content: '\2753'; +} +/* '❓' */ +i.icon.home:before { + content: '\2302'; +} +/* '⌂' */ +i.icon.i:before { + content: '\2139'; +} +/* 'ℹ' */ +i.icon.idea:before { + content: '💡'; +} +/* '\1f4a1' */ +i.icon.open:before { + content: '🔗'; +} +/* '\1f517' */ +i.icon.content:before { + content: '\e782'; +} +/* '' */ +i.icon.location:before { + content: '\e724'; +} +/* '' */ +i.icon.mail:before { + content: '\2709'; +} +/* '✉' */ +i.icon.mic:before { + content: '🎤'; +} +/* '\1f3a4' */ +i.icon.minus:before { + content: '\2d'; +} +/* '-' */ +i.icon.money:before { + content: '💰'; +} +/* '\1f4b0' */ +i.icon.off:before { + content: '\e78e'; +} +/* '' */ +i.icon.pause:before { + content: '\e808'; +} +/* '' */ +i.icon.photos:before { + content: '\e812'; +} +/* '' */ +i.icon.photo:before { + content: '🌄'; +} +/* '\1f304' */ +i.icon.pin:before { + content: '📌'; +} +/* '\1f4cc' */ +i.icon.play:before { + content: '\e809'; +} +/* '' */ +i.icon.plus:before { + content: '\2b'; +} +/* '+' */ +i.icon.print:before { + content: '\e716'; +} +/* '' */ +i.icon.rss:before { + content: '\e73a'; +} +/* '' */ +i.icon.search:before { + content: '🔍'; +} +/* '\1f50d' */ +i.icon.shuffle:before { + content: '\e803'; +} +/* '' */ +i.icon.tag:before { + content: '\e80a'; +} +/* '' */ +i.icon.tags:before { + content: '\e70d'; +} +/* '' */ +i.icon.terminal:before { + content: '\e7ac'; +} +/* '' */ +i.icon.thumbs.down:before { + content: '👎'; +} +/* '\1f44e' */ +i.icon.thumbs.up:before { + content: '👍'; +} +/* '\1f44d' */ +i.icon.to-end:before { + content: '\e806'; +} +/* '' */ +i.icon.to-start:before { + content: '\e805'; +} +/* '' */ +i.icon.top.list:before { + content: '🏆'; +} +/* '\1f3c6' */ +i.icon.trash:before { + content: '\e729'; +} +/* '' */ +i.icon.twitter:before { + content: '\f303'; +} +/* '' */ +i.icon.upload:before { + content: '\e711'; +} +/* '' */ +i.icon.user.add:before { + content: '\e700'; +} +/* '' */ +i.icon.user:before { + content: '👤'; +} +/* '\1f464' */ +i.icon.community:before { + content: '\e814'; +} +/* '' */ +i.icon.users:before { + content: '👥'; +} +/* '\1f465' */ +i.icon.id:before { + content: '\e722'; +} +/* '' */ +i.icon.url:before { + content: '🔗'; +} +/* '\1f517' */ +i.icon.zoom.in:before { + content: '\e750'; +} +/* '' */ +i.icon.zoom.out:before { + content: '\e751'; +} +/* '' */ +/*-------------- + Spacing Fix +---------------*/ +/* dropdown arrows are to the right */ +i.dropdown.icon { + margin: 0em 0em 0em 0.5em; +} +/* stars are usually consecutive */ +i.icon.star { + width: auto; + margin: 0em; +} +/* left side icons */ +i.icon.left, +i.icon.left, +i.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} +/* right side icons */ +i.icon.search, +i.icon.up, +i.icon.down, +i.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} +/*-------------- + Aliases +---------------*/ +/* aliases for convenience */ +i.icon.delete:before { + content: '\e80d'; +} +/* '' */ +i.icon.dropdown:before { + content: '\25be'; +} +/* '▾' */ +i.icon.help:before { + content: '\e704'; +} +/* '' */ +i.icon.info:before { + content: '\e705'; +} +/* '' */ +i.icon.error:before { + content: '\e80d'; +} +/* '' */ +i.icon.dislike:before { + content: '\2661'; +} +/* '♡' */ +i.icon.like:before { + content: '\2665'; +} +/* '♥' */ +i.icon.eye:before { + content: '\e80f'; +} +/* '' */ +i.icon.eye.hidden:before { + content: '\e70b'; +} +/* '' */ +i.icon.date:before { + content: '📅'; +} +/* '\1f4c5' */ +/******************************* + States +*******************************/ +i.icon.hover { + opacity: 1; +} +i.icon.active { + opacity: 1; +} +i.emphasized.icon { + opacity: 1; +} +i.icon.disabled { + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +i.link.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +.link.icon:hover { + opacity: 1 !important; +} +/*------------------- + Circular +--------------------*/ +i.circular.icon { + -webkit-border-radius: 500px !important; + -moz-border-radius: 500px !important; + border-radius: 500px !important; + padding: 0.5em 0em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Flipped +--------------------*/ +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -o-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +/*------------------- + Rotated +--------------------*/ +i.left.rotated.icon { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +i.right.rotated.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +/*------------------- + Square +--------------------*/ +i.square.icon { + width: 2em; + height: 2em; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} +i.square.icon:before { + vertical-align: middle; +} +i.square.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Inverted +--------------------*/ +i.inverted.icon { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Colors +--------------------*/ +i.blue.icon { + color: #6ECFF5 !important; +} +i.black.icon { + color: #5C6166 !important; +} +i.green.icon { + color: #A1CF64 !important; +} +i.red.icon { + color: #D95C5C !important; +} +i.purple.icon { + color: #564F8A !important; +} +i.teal.icon { + color: #00B5AD !important; +} +/*------------------- + Inverted Colors +--------------------*/ +i.inverted.black.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +i.inverted.blue.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +i.inverted.green.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +i.inverted.red.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +i.inverted.purple.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +i.inverted.teal.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Sizes +--------------------*/ +i.small.icon { + font-size: 0.875em; +} +i.icon { + font-size: 1em; +} +i.large.icon { + font-size: 2em; + margin-right: 0.5em; + vertical-align: middle; +} +i.huge.icon { + font-size: 4em; + margin-right: 0.75em; + vertical-align: middle; +} +i.massive.icon { + font-size: 8em; + margin-right: 1em; + vertical-align: middle; +} +/* + * # Semantic - Button + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Button +*******************************/ +/* Prototype */ +.ui.button { + cursor: pointer; + display: inline-block; + vertical-align: middle; + min-height: 1em; + outline: none; + border: none; + background-color: #EBEBEB; + color: #999999; + padding: 0.8em 1.5em; + font-size: 1rem; + text-transform: uppercase; + line-height: 1; + font-weight: bold; + font-style: normal; + text-align: center; + text-decoration: none; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + -webkit-box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + -o-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + -ms-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; +} +/*-------------- + Count +---------------*/ +.ui.count.button { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; +} +.ui.count.button > .count { + position: absolute; + background-color: #FFFFFF; + border: 1px solid #F0F0F0; + margin: -0.8em -1.5em; + padding: 0.8em 1.5em; +} +/*------------------- + Primary +--------------------*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #D95C5C; + color: #FFFFFF; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*------------------- + Secondary +--------------------*/ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover, +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #00847E; + color: #FFFFFF; +} +/*------------------- + Social +--------------------*/ +/* Facebook */ +.ui.facebook.button { + background-color: #3B579D; + color: #FFFFFF; +} +.ui.facebook.button:hover { + background-color: #3A59A9; +} +.ui.facebook.button:active { + background-color: #334F95; +} +/* Twitter */ +.ui.twitter.button { + background-color: #00ACED; + color: #FFFFFF; +} +.ui.twitter.button:hover { + background-color: #00B9FF; +} +.ui.twitter.button:active { + background-color: #009EDA; +} +/*-------------- + Icon +---------------*/ +.ui.button > .icon { + margin-right: 0.5em; + line-height: 1; + -webkit-transition: opacity 0.1s ease + ; + -moz-transition: opacity 0.1s ease + ; + -o-transition: opacity 0.1s ease + ; + -ms-transition: opacity 0.1s ease + ; + transition: opacity 0.1s ease + ; +} +/******************************* + States +*******************************/ +/*-------------- + Active +---------------*/ +.ui.buttons .active.button, +.ui.active.button { + opacity: 1 !important; + background-color: #B0B0B0; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; +} +/*-------------- + Hover +---------------*/ +.ui.button:hover, +.ui.active.button:hover { + opacity: 1 !important; + background-color: #A4A4A4; + color: #FFFFFF; +} +.ui.button:hover .icon, +.ui.button.hover .icon { + opacity: 0.85; +} +/*-------------- + Down +---------------*/ +.ui.button:active, +.ui.active.button:active { + opacity: 1 !important; + background-color: #8C8C8C; + color: #FFFFFF; + -webkit-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; +} +/*-------------- + Loading +---------------*/ +.ui.loading.button { + position: relative; + cursor: default; + background-color: #F3F3F3 !important; + color: transparent !important; + background-image: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.loading.button:after { + position: absolute; + top: 0em; + left: 0em; + width: 100%; + height: 100%; + content: ''; + background: transparent url('../build/uncompressed/images/loader-mini.gif') no-repeat 50% 50%; +} +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Disabled +--------------------*/ +.ui.disabled.button { + cursor: default; + color: #DDDDDD !important; + background-color: rgba(50, 50, 50, 0.05) !important; + background-image: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} +/******************************* + Variations +*******************************/ +/*------------------- + Floated +--------------------*/ +.ui.left.floated.buttons, +.ui.left.floated.button { + float: left; + margin-right: 0.25em; +} +.ui.right.floated.buttons, +.ui.right.floated.button { + float: right; + margin-left: 0.25em; +} +/*------------------- + Sizes +--------------------*/ +.ui.buttons .button, +.ui.button { + font-size: 1rem; +} +.ui.buttons.mini .button, +.ui.mini.button { + font-size: 0.8125rem; + padding: 0.6em 0.8em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.tiny.buttons .button, +.ui.tiny.button { + font-size: 0.875rem; + padding: 0.6em 0.8em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.small.buttons .button, +.ui.small.button { + font-size: 0.875rem; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.large.buttons .button, +.ui.large.button { + font-size: 1.125rem; +} +.ui.big.buttons .button, +.ui.big.button { + font-size: 1.25rem; +} +.ui.huge.buttons .button, +.ui.huge.button { + font-size: 1.375rem; +} +.ui.massive.buttons .button, +.ui.massive.button { + font-size: 1.5rem; + font-weight: bold; +} +/* loading */ +.ui.huge.loading.button:after { + background-image: url('../build/uncompressed/images/loader-small.gif'); +} +.ui.massive.buttons .loading.button:after, +.ui.gigantic.buttons .loading.button:after, +.ui.massive.loading.button:after, +.ui.gigantic.loading.button:after { + background-image: url('../build/uncompressed/images/loader-medium.gif'); +} +.ui.huge.loading.button:after, +.ui.huge.loading.button.active:after { + background-image: url('../build/uncompressed/images/loader-small.gif'); +} +.ui.massive.buttons .loading.button:after, +.ui.gigantic.buttons .loading.button:after, +.ui.massive.loading.button:after, +.ui.gigantic.loading.button:after, +.ui.massive.buttons .loading.button.active:after, +.ui.gigantic.buttons .loading.button.active:after, +.ui.massive.loading.button.active:after, +.ui.gigantic.loading.button.active:after { + background-image: url('../build/uncompressed/images/loader-medium.gif'); +} +/*-------------- + Icon Only +---------------*/ +.ui.icon.buttons .button, +.ui.icon.button { + padding: 0.8em; +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: 1; + margin: 0em; + vertical-align: top; +} +/*------------------- + Basic +--------------------*/ +.ui.basic.buttons .button, +.ui.basic.button { + background-color: transparent !important; + background-image: none; + color: #999999 !important; + font-weight: normal; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.basic.buttons { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: #7F7F7F !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background-color: rgba(0, 0, 0, 0.02) !important; + color: #7F7F7F !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.basic.buttons .button.active, +.ui.basic.button.active { + background-color: rgba(0, 0, 0, 0.05); + color: #7F7F7F; + -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + box-shadow: 0px 0px 0px 1px #BDBDBD inset; +} +.ui.basic.buttons .button.active:hover, +.ui.basic.button.active:hover { + background-color: rgba(0, 0, 0, 0.1); +} +/* Basic Group */ +.ui.basic.buttons .button { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button.active { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +/*-------------- + Labeled Icon +---------------*/ +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: 4em !important; + padding-right: 1.4em !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + top: 0em; + left: 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + width: 2.75em; + height: 100%; + padding-top: 0.8em; + background-color: rgba(0, 0, 0, 0.05); + text-align: center; + -webkit-border-radius: 0.2em 0px 0px 0.2em; + -moz-border-radius: 0.2em 0px 0px 0.2em; + border-radius: 0.2em 0px 0px 0.2em; + line-height: 1; + -webkit-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + -moz-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} +.ui.labeled.icon.buttons .button > .icon { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: 0.2em; + border-bottom-left-radius: 0.2em; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: 0.2em; + border-bottom-right-radius: 0.2em; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + border-top-left-radius: 0.2em; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + border-bottom-left-radius: 0.2em; +} +.ui.right.labeled.icon.button { + padding-left: 1.4em !important; + padding-right: 4em !important; +} +.ui.left.fluid.labeled.icon.button, +.ui.right.fluid.labeled.icon.button { + padding-left: 1.4em !important; + padding-right: 1.4em !important; +} +.ui.right.labeled.icon.button .icon { + left: auto; + right: 0em; + -webkit-border-radius: 0em 0.2em 0.2em 0em; + -moz-border-radius: 0em 0.2em 0.2em 0em; + border-radius: 0em 0.2em 0.2em 0em; + -webkit-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + -moz-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} +/*-------------- + Toggle +---------------*/ +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: #5BBD72 !important; + color: #FFFFFF !important; +} +.ui.button.toggle.active:hover { + background-color: #58CB73 !important; + color: #FFFFFF !important; +} +/*-------------- + Bubbly +---------------*/ +.ui.circular.button { + -webkit-border-radius: 10em; + -moz-border-radius: 10em; + border-radius: 10em; +} +/*-------------- + Attached +---------------*/ +.ui.attached.button { + display: block; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; +} +.ui.attached.top.button { + -webkit-border-radius: 0.2em 0.2em 0em 0em; + -moz-border-radius: 0.2em 0.2em 0em 0em; + border-radius: 0.2em 0.2em 0em 0em; +} +.ui.attached.bottom.button { + -webkit-border-radius: 0em 0em 0.2em 0.2em; + -moz-border-radius: 0em 0em 0.2em 0.2em; + border-radius: 0em 0em 0.2em 0.2em; +} +.ui.attached.left.button { + display: inline-block; + border-left: none; + padding-right: 0.75em; + text-align: right; + -webkit-border-radius: 0.2em 0em 0em 0.2em; + -moz-border-radius: 0.2em 0em 0em 0.2em; + border-radius: 0.2em 0em 0em 0.2em; +} +.ui.attached.right.button { + display: inline-block; + padding-left: 0.75em; + text-align: left; + -webkit-border-radius: 0em 0.2em 0.2em 0em; + -moz-border-radius: 0em 0.2em 0.2em 0em; + border-radius: 0em 0.2em 0.2em 0em; +} +/*------------------- + Or Buttons +--------------------*/ +.ui.buttons .or { + position: relative; + float: left; + width: 0.3em; + height: 1em; + z-index: 3; +} +.ui.buttons .or:before { + position: absolute; + top: 50%; + left: 50%; + content: 'or'; + background-color: #FFFFFF; + margin-top: -0.15em; + margin-left: -0.9em; + width: 1.8em; + height: 1.8em; + line-height: 1.66; + color: #AAAAAA; + font-style: normal; + font-weight: normal; + text-align: center; + -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + -moz-border-radius: 500px; + -webkit-border-radius: 500px; + border-radius: 500px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.buttons .or:after { + position: absolute; + top: 0em; + left: 0em; + content: ' '; + width: 0.3em; + height: 1.8em; + background-color: transparent; + border-top: 0.6em solid #FFFFFF; + border-bottom: 0.6em solid #FFFFFF; +} +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} +/*------------------- + Attached +--------------------*/ +/* Plural Attached */ +.attached.ui.buttons { + margin: 0px; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; +} +.attached.ui.buttons .button:first-child { + -webkit-border-radius: 4px 0px 0px 0px; + -moz-border-radius: 4px 0px 0px 0px; + border-radius: 4px 0px 0px 0px; +} +.attached.ui.buttons .button:last-child { + -webkit-border-radius: 0px 4px 0px 0px; + -moz-border-radius: 0px 4px 0px 0px; + border-radius: 0px 4px 0px 0px; +} +/* Bottom Side */ +.bottom.attached.ui.buttons { + margin-top: -1px; + -webkit-border-radius: 0px 0px 4px 4px; + -moz-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.bottom.attached.ui.buttons .button:first-child { + -webkit-border-radius: 0px 0px 0px 4px; + -moz-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} +.bottom.attached.ui.buttons .button:last-child { + -webkit-border-radius: 0px 0px 4px 0px; + -moz-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; +} +/* Left Side */ +.left.attached.ui.buttons { + margin-left: -1px; + -webkit-border-radius: 0px 4px 4px 0px; + -moz-border-radius: 0px 4px 4px 0px; + border-radius: 0px 4px 4px 0px; +} +.left.attached.ui.buttons .button:first-child { + margin-left: -1px; + -webkit-border-radius: 0px 4px 0px 0px; + -moz-border-radius: 0px 4px 0px 0px; + border-radius: 0px 4px 0px 0px; +} +.left.attached.ui.buttons .button:last-child { + margin-left: -1px; + -webkit-border-radius: 0px 0px 4px 0px; + -moz-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; +} +/* Right Side */ +.right.attached.ui.buttons, +.right.attached.ui.buttons .button { + margin-right: -1px; + -webkit-border-radius: 4px 0px 0px 4px; + -moz-border-radius: 4px 0px 0px 4px; + border-radius: 4px 0px 0px 4px; +} +.right.attached.ui.buttons .button:first-child { + margin-left: -1px; + -webkit-border-radius: 4px 0px 0px 0px; + -moz-border-radius: 4px 0px 0px 0px; + border-radius: 4px 0px 0px 0px; +} +.right.attached.ui.buttons .button:last-child { + margin-left: -1px; + -webkit-border-radius: 0px 0px 0px 4px; + -moz-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} +/* Fluid */ +.ui.fluid.buttons, +.ui.button.fluid, +.ui.fluid.buttons > .button { + display: block; + width: 100%; +} +.ui.two.buttons > .button { + width: 50%; +} +.ui.three.buttons > .button { + width: 33.333%; +} +.ui.four.buttons > .button { + width: 25%; +} +.ui.five.buttons > .button { + width: 20%; +} +.ui.six.buttons > .button { + width: 16.666%; +} +.ui.seven.buttons > .button { + width: 14.285%; +} +.ui.eight.buttons > .button { + width: 12.500%; +} +.ui.nine.buttons > .button { + width: 11.11%; +} +.ui.ten.buttons > .button { + width: 10%; +} +.ui.eleven.buttons > .button { + width: 9.09%; +} +.ui.twelve.buttons > .button { + width: 8.3333%; +} +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + width: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: #4C4C4C; + color: #FFFFFF; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: #333333; + color: #FFFFFF; +} +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: #5BBD72; + color: #FFFFFF; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover, +.ui.green.buttons .active.button, +.ui.green.button.active { + background-color: #58cb73; + color: #FFFFFF; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: #4CB164; + color: #FFFFFF; +} +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: #D95C5C; + color: #FFFFFF; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover, +.ui.red.buttons .active.button, +.ui.red.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #E96633; + color: #FFFFFF; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover, +.ui.orange.buttons .active.button, +.ui.orange.button.active { + background-color: #FF7038; + color: #FFFFFF; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #DA683B; + color: #FFFFFF; +} +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: #6ECFF5; + color: #FFFFFF; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover, +.ui.blue.buttons .active.button, +.ui.blue.button.active { + background-color: #1AB8F3; + color: #FFFFFF; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: #0AA5DF; + color: #FFFFFF; +} +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: #564F8A; + color: #FFFFFF; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover, +.ui.purple.buttons .active.button, +.ui.purple.button.active { + background-color: #3E3773; + color: #FFFFFF; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: #2E2860; + color: #FFFFFF; +} +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover, +.ui.teal.buttons .active.button, +.ui.teal.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: #00847E; + color: #FFFFFF; +} +/*--------------- + Positive +----------------*/ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #5BBD72 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover, +.ui.positive.buttons .active.button, +.ui.positive.button.active { + background-color: #58CB73 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #4CB164 !important; + color: #FFFFFF; +} +/*--------------- + Negative +----------------*/ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #D95C5C !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover, +.ui.negative.buttons .active.button, +.ui.negative.button.active { + background-color: #E75859 !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #D24B4C !important; + color: #FFFFFF; +} +/******************************* + Groups +*******************************/ +.ui.buttons { + display: inline-block; + vertical-align: middle; +} +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.buttons .button:first-child { + border-left: none; +} +.ui.buttons .button { + float: left; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + border-left: 1px solid rgba(0, 0, 0, 0.05); +} +.ui.buttons .button:first-child { + margin-left: 0em; + border-top-left-radius: 0.2em; + border-bottom-left-radius: 0.2em; +} +.ui.buttons .button:last-child { + border-top-right-radius: 0.2em; + border-bottom-right-radius: 0.2em; +} +/* Vertical Style */ +.ui.vertical.buttons { + display: inline-block; +} +.ui.vertical.buttons .button { + display: block; + float: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-left: none; + box-shadow: none; +} +.ui.vertical.buttons .button:first-child, +.ui.vertical.buttons .mini.button:first-child, +.ui.vertical.buttons .tiny.button:first-child, +.ui.vertical.buttons .small.button:first-child, +.ui.vertical.buttons .massive.button:first-child, +.ui.vertical.buttons .huge.button:first-child { + margin-top: 0px; + -moz-border-radius: 0.2em 0.2em 0px 0px; + -webkit-border-radius: 0.2em 0.2em 0px 0px; + border-radius: 0.2em 0.2em 0px 0px; +} +.ui.vertical.buttons .button:last-child, +.ui.vertical.buttons .mini.button:last-child, +.ui.vertical.buttons .tiny.button:last-child, +.ui.vertical.buttons .small.button:last-child, +.ui.vertical.buttons .massive.button:last-child, +.ui.vertical.buttons .huge.button:last-child, +.ui.vertical.buttons .gigantic.button:last-child { + -moz-border-radius: 0px 0px 0.2em 0.2em; + -webkit-border-radius: 0px 0px 0.2em 0.2em; + border-radius: 0px 0px 0.2em 0.2em; +} +/* + * # Semantic - Divider + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Divider +*******************************/ +.ui.divider { + margin: 1rem 0rem; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.8); + line-height: 1; + height: 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.ui.vertical.divider, +.ui.horizontal.divider { + position: absolute; + border: none; + height: 0em; + margin: 0em; + background-color: transparent; + font-size: 0.875rem; + font-weight: bold; + text-align: center; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Vertical +---------------*/ +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + margin: 0% 0% 0% -3%; + width: 6%; + height: 50%; + line-height: 0; + padding: 0em; +} +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: " "; + z-index: 3; + border-left: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(255, 255, 255, 0.8); + width: 0%; + height: 80%; +} +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} +/*-------------- + Horizontal +---------------*/ +.ui.horizontal.divider { + position: relative; + top: 0%; + left: 0%; + margin: 1rem 1.5rem; + height: auto; + padding: 0em; + line-height: 1; +} +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + position: absolute; + content: " "; + z-index: 3; + width: 50%; + top: 50%; + height: 0%; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.8); +} +.ui.horizontal.divider:before { + left: 0%; + margin-left: -1.5rem; +} +.ui.horizontal.divider:after { + left: auto; + right: 0%; + margin-right: -1.5rem; +} +/*-------------- + Icon +---------------*/ +.ui.divider > .icon { + margin: 0em; + font-size: 1rem; + vertical-align: middle; +} +/******************************* + Variations +*******************************/ +/*-------------- + Inverted +---------------*/ +.ui.divider.inverted { + color: #ffffff; +} +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: rgba(255, 255, 255, 0.9); +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: rgba(0, 0, 0, 0.15); + border-bottom-color: rgba(255, 255, 255, 0.15); + border-left-color: rgba(0, 0, 0, 0.15); + border-right-color: rgba(255, 255, 255, 0.15); +} +/*-------------- + Fitted +---------------*/ +.ui.fitted.divider { + margin: 0em; +} +/*-------------- + Clearing +---------------*/ +.ui.clearing.divider { + clear: both; +} +/*-------------- + Section +---------------*/ +.ui.section.divider { + margin-top: 2rem; + margin-bottom: 2rem; +} +/* + * # Semantic - Header + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Header +*******************************/ +/* Standard */ +.ui.header { + border: none; + margin: 1em 0em 1rem; + padding: 0em; + font-size: 1.33em; + font-weight: bold; + line-height: 1.33; +} +.ui.header .sub.header { + font-size: 1rem; + font-weight: normal; + margin: 0em; + padding: 0em; + line-height: 1.2; + color: rgba(0, 0, 0, 0.5); +} +.ui.header .content { + display: inline-block; + vertical-align: top; +} +.ui.header .icon { + margin-right: 0.5em; +} +/* Positioning */ +.ui.header:first-child { + margin-top: 0em; +} +.ui.header:last-child { + margin-bottom: 0em; +} +.ui.header + p { + margin-top: 0em; +} +/*-------------- + Page Heading +---------------*/ +h1.ui.header { + min-height: 1rem; + line-height: 1.33; + font-size: 2rem; +} +h2.ui.header { + line-height: 1.33; + font-size: 1.75rem; +} +h3.ui.header { + line-height: 1.33; + font-size: 1.33rem; +} +h4.ui.header { + line-height: 1.33; + font-size: 1.1rem; +} +h5.ui.header { + line-height: 1.2; + font-size: 1rem; +} +/*-------------- + Content Heading +---------------*/ +.ui.huge.header { + min-height: 1em; + font-size: 2em; +} +.ui.large.header { + font-size: 1.75em; +} +.ui.medium.header { + font-size: 1.33em; +} +.ui.small.header { + font-size: 1.1em; +} +.ui.tiny.header { + font-size: 1em; +} +/******************************* + States +*******************************/ +.ui.disabled.header { + opacity: 0.5; +} +/******************************* + Variations +*******************************/ +/*------------------- + Colors +--------------------*/ +.ui.blue.header { + color: #6ECFF5 !important; +} +.ui.black.header { + color: #5C6166 !important; +} +.ui.green.header { + color: #A1CF64 !important; +} +.ui.red.header { + color: #D95C5C !important; +} +.ui.purple.header { + color: #564F8A !important; +} +.ui.teal.header { + color: #00B5AD !important; +} +.ui.blue.dividing.header { + border-bottom: 3px solid #6ECFF5; +} +.ui.black.dividing.header { + border-bottom: 3px solid #5C6166; +} +.ui.green.dividing.header { + border-bottom: 3px solid #A1CF64; +} +.ui.red.dividing.header { + border-bottom: 3px solid #D95C5C; +} +.ui.purple.dividing.header { + border-bottom: 3px solid #564F8A; +} +.ui.teal.dividing.header { + border-bottom: 3px solid #00B5AD; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.header { + color: #FFFFFF; +} +.ui.inverted.header .sub.header { + color: rgba(255, 255, 255, 0.85); +} +/*------------------- + Inverted Colors +--------------------*/ +.ui.inverted.black.header { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.header { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.inverted.green.header { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.inverted.red.header { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.header { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.header { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +.ui.inverted.block.header { + border-bottom: none; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.center.aligned.header { + text-align: center; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.header, +.ui.left.floated.header { + float: left; + margin-top: 0em; + margin-right: 0.5em; +} +.ui.right.floated.header { + float: right; + margin-top: 0em; + margin-left: 0.5em; +} +/*------------------- + Fittted +--------------------*/ +.ui.fitted.header { + padding: 0em; +} +/*------------------- + Dividing +--------------------*/ +.ui.dividing.header { + padding-bottom: 0.2rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.dividing.header .sub.header { + padding-bottom: 0.5em; +} +.ui.dividing.header .icon { + margin-bottom: 0.2em; +} +/*------------------- + Block +--------------------*/ +.ui.block.header { + background-color: #F5F5F5; + padding: 0.5em 1em; +} +/*------------------- + Attached +--------------------*/ +.ui.attached.header { + background-color: #E0E0E0; + padding: 0.5em 1rem; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.top.attached.header { + margin-bottom: 0em; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +/*------------------- + Icon +--------------------*/ +.ui.icon.header { + display: inline-block; + text-align: center; +} +.ui.icon.header .icon { + float: none; + display: block; + font-size: 3em; + margin: 0em auto 0.2em; +} +.ui.icon.header .circular.icon, +.ui.icon.header .square.icon { + font-size: 2em; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} +/* + * # Semantic - Icon + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/*! + * Font Awesome 3.2.1 + * the iconic font designed for Bootstrap + * ------------------------------------------------------------------------------ + * The full suite of pictographic icons, examples, and documentation can be + * found at http://fon.io. Stay up to date on Twitter at + * http://twitter.com/fon. + * + * License + * ------------------------------------------------------------------------------ + * - The Font Awesome font is licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + +/******************************* + Icon +*******************************/ +@font-face { + font-family: 'Icons'; + src: url('../build/uncompressed/fonts/icons.eot'); + src: url('../build/uncompressed/fonts/icons.eot?#iefix') format('embedded-opentype'), url('../build/uncompressed/fonts/icons.woff') format('woff'), url('../build/uncompressed/fonts/icons.ttf') format('truetype'), url('../build/uncompressed/fonts/icons.svg#icons') format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 1.23em; + height: 1em; + font-family: 'Icons'; + font-style: normal; + line-height: 1; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; +} +i.icon.add.sign.box:before { + content: "\f0fe"; +} +i.icon.add.sign:before { + content: "\f055"; +} +i.icon.add:before { + content: "\f067"; +} +i.icon.adjust:before { + content: "\f042"; +} +i.icon.adn:before { + content: "\f170"; +} +i.icon.align.center:before { + content: "\f037"; +} +i.icon.align.justify:before { + content: "\f039"; +} +i.icon.align.left:before { + content: "\f036"; +} +i.icon.align.right:before { + content: "\f038"; +} +i.icon.ambulance:before { + content: "\f0f9"; +} +i.icon.anchor:before { + content: "\f13d"; +} +i.icon.android:before { + content: "\f17b"; +} +i.icon.angle.down:before { + content: "\f107"; +} +i.icon.angle.left:before { + content: "\f104"; +} +i.icon.angle.right:before { + content: "\f105"; +} +i.icon.angle.up:before { + content: "\f106"; +} +i.icon.apple:before { + content: "\f179"; +} +i.icon.archive:before { + content: "\f187"; +} +i.icon.arrow.down:before { + content: "\f078"; +} +i.icon.arrow.left:before { + content: "\f053"; +} +i.icon.arrow.right:before { + content: "\f054"; +} +i.icon.arrow.sign.down:before { + content: "\f13a"; +} +i.icon.arrow.sign.left:before { + content: "\f137"; +} +i.icon.arrow.sign.right:before { + content: "\f138"; +} +i.icon.arrow.sign.up:before { + content: "\f139"; +} +i.icon.arrow.up:before { + content: "\f077"; +} +i.icon.asterisk:before { + content: "\f069"; +} +i.icon.attachment:before { + content: "\f0c6"; +} +i.icon.attention:before { + content: "\f06a"; +} +i.icon.backward:before { + content: "\f04a"; +} +i.icon.ban.circle:before { + content: "\f05e"; +} +i.icon.bar.chart:before { + content: "\f080"; +} +i.icon.barcode:before { + content: "\f02a"; +} +i.icon.beer:before { + content: "\f0fc"; +} +i.icon.bell.outline:before { + content: "\f0a2"; +} +i.icon.bell:before { + content: "\f0f3"; +} +i.icon.bitbucket.sign:before { + content: "\f172"; +} +i.icon.bitbucket:before { + content: "\f171"; +} +i.icon.bitcoin:before { + content: "\f15a"; +} +i.icon.bold:before { + content: "\f032"; +} +i.icon.bolt:before { + content: "\f0e7"; +} +i.icon.book:before { + content: "\f02d"; +} +i.icon.bookmark.empty:before { + content: "\f097"; +} +i.icon.bookmark:before { + content: "\f02e"; +} +i.icon.box.arrow.down:before { + content: "\f150"; +} +i.icon.box.arrow.right:before { + content: "\f152"; +} +i.icon.box.arrow.up:before { + content: "\f151"; +} +i.icon.briefcase:before { + content: "\f0b1"; +} +i.icon.browser:before { + content: "\f022"; +} +i.icon.bug:before { + content: "\f188"; +} +i.icon.building:before { + content: "\f0f7"; +} +i.icon.bullhorn:before { + content: "\f0a1"; +} +i.icon.bullseye:before { + content: "\f140"; +} +i.icon.calendar.empty:before { + content: "\f133"; +} +i.icon.calendar:before { + content: "\f073"; +} +i.icon.camera.retro:before { + content: "\f083"; +} +i.icon.camera:before { + content: "\f030"; +} +i.icon.triangle.down:before { + content: "\f0d7"; +} +i.icon.triangle.left:before { + content: "\f0d9"; +} +i.icon.triangle.right:before { + content: "\f0da"; +} +i.icon.triangle.up:before { + content: "\f0d8"; +} +i.icon.cart:before { + content: "\f07a"; +} +i.icon.certificate:before { + content: "\f0a3"; +} +i.icon.chat.outline:before { + content: "\f0e6"; +} +i.icon.chat:before { + content: "\f086"; +} +i.icon.checkbox.empty:before { + content: "\f096"; +} +i.icon.checkbox.minus:before { + content: "\f147"; +} +i.icon.checked.checkbox:before { + content: "\f046"; +} +i.icon.checkmark.sign:before { + content: "\f14a"; +} +i.icon.checkmark:before { + content: "\f00c"; +} +i.icon.circle.blank:before { + content: "\f10c"; +} +i.icon.circle.down:before { + content: "\f0ab"; +} +i.icon.circle.left:before { + content: "\f0a8"; +} +i.icon.circle.right:before { + content: "\f0a9"; +} +i.icon.circle.up:before { + content: "\f0aa"; +} +i.icon.circle:before { + content: "\f111"; +} +i.icon.cloud.download:before { + content: "\f0ed"; +} +i.icon.cloud.upload:before { + content: "\f0ee"; +} +i.icon.cloud:before { + content: "\f0c2"; +} +i.icon.code.fork:before { + content: "\f126"; +} +i.icon.code:before { + content: "\f121"; +} +i.icon.coffee:before { + content: "\f0f4"; +} +i.icon.collapse:before { + content: "\f117"; +} +i.icon.comment.outline:before { + content: "\f0e5"; +} +i.icon.comment:before { + content: "\f075"; +} +i.icon.copy:before { + content: "\f0c5"; +} +i.icon.crop:before { + content: "\f125"; +} +i.icon.css3:before { + content: "\f13c"; +} +i.icon.cut:before { + content: "\f0c4"; +} +i.icon.dashboard:before { + content: "\f0e4"; +} +i.icon.desktop:before { + content: "\f108"; +} +i.icon.doctor:before { + content: "\f0f0"; +} +i.icon.dollar:before { + content: "\f155"; +} +i.icon.double.angle.down:before { + content: "\f103"; +} +i.icon.double.angle.left:before { + content: "\f100"; +} +i.icon.double.angle.right:before { + content: "\f101"; +} +i.icon.double.angle.up:before { + content: "\f102"; +} +i.icon.down:before { + content: "\f063"; +} +i.icon.download.disk:before { + content: "\f019"; +} +i.icon.download:before { + content: "\f01a"; +} +i.icon.dribbble:before { + content: "\f17d"; +} +i.icon.dropbox:before { + content: "\f16b"; +} +i.icon.edit.sign:before { + content: "\f14b"; +} +i.icon.edit:before { + content: "\f044"; +} +i.icon.eject:before { + content: "\f052"; +} +i.icon.ellipsis.horizontal:before { + content: "\f141"; +} +i.icon.ellipsis.vertical:before { + content: "\f142"; +} +i.icon.eraser:before { + content: "\f12d"; +} +i.icon.euro:before { + content: "\f153"; +} +i.icon.exchange:before { + content: "\f0ec"; +} +i.icon.exclamation:before { + content: "\f12a"; +} +i.icon.expand:before { + content: "\f116"; +} +i.icon.external.url.sign:before { + content: "\f14c"; +} +i.icon.external.url:before { + content: "\f08e"; +} +i.icon.facebook.sign:before { + content: "\f082"; +} +i.icon.facebook:before { + content: "\f09a"; +} +i.icon.facetime.video:before { + content: "\f03d"; +} +i.icon.fast.backward:before { + content: "\f049"; +} +i.icon.fast.forward:before { + content: "\f050"; +} +i.icon.female:before { + content: "\f182"; +} +i.icon.fighter.jet:before { + content: "\f0fb"; +} +i.icon.file.outline:before { + content: "\f016"; +} +i.icon.file.text.outline:before { + content: "\f0f6"; +} +i.icon.file.text:before { + content: "\f15c"; +} +i.icon.file:before { + content: "\f15b"; +} +i.icon.filter:before { + content: "\f0b0"; +} +i.icon.fire.extinguisher:before { + content: "\f134"; +} +i.icon.fire:before { + content: "\f06d"; +} +i.icon.flag.checkered:before { + content: "\f11e"; +} +i.icon.flag.empty:before { + content: "\f11d"; +} +i.icon.flag:before { + content: "\f024"; +} +i.icon.flickr:before { + content: "\f16e"; +} +i.icon.folder.open.outline:before { + content: "\f115"; +} +i.icon.folder.open:before { + content: "\f07c"; +} +i.icon.folder.outline:before { + content: "\f114"; +} +i.icon.folder:before { + content: "\f07b"; +} +i.icon.font:before { + content: "\f031"; +} +i.icon.food:before { + content: "\f0f5"; +} +i.icon.forward.mail:before { + content: "\f064"; +} +i.icon.forward:before { + content: "\f04e"; +} +i.icon.foursquare:before { + content: "\f180"; +} +i.icon.frown:before { + content: "\f119"; +} +i.icon.fullscreen:before { + content: "\f0b2"; +} +i.icon.gamepad:before { + content: "\f11b"; +} +i.icon.gift:before { + content: "\f06b"; +} +i.icon.github.alternate:before { + content: "\f09b"; +} +i.icon.github.sign:before { + content: "\f092"; +} +i.icon.github:before { + content: "\f113"; +} +i.icon.gittip:before { + content: "\f184"; +} +i.icon.glass:before { + content: "\f000"; +} +i.icon.globe:before { + content: "\f0ac"; +} +i.icon.google.plus.sign:before { + content: "\f0d4"; +} +i.icon.google.plus:before { + content: "\f0d5"; +} +i.icon.h.sign:before { + content: "\f0fd"; +} +i.icon.hand.down:before { + content: "\f0a7"; +} +i.icon.hand.left:before { + content: "\f0a5"; +} +i.icon.hand.right:before { + content: "\f0a4"; +} +i.icon.hand.up:before { + content: "\f0a6"; +} +i.icon.hdd:before { + content: "\f0a0"; +} +i.icon.headphones:before { + content: "\f025"; +} +i.icon.heart.empty:before { + content: "\f08a"; +} +i.icon.heart:before { + content: "\f004"; +} +i.icon.help:before { + content: "\f059"; +} +i.icon.hide:before { + content: "\f070"; +} +i.icon.home:before { + content: "\f015"; +} +i.icon.hospital:before { + content: "\f0f8"; +} +i.icon.html5:before { + content: "\f13b"; +} +i.icon.inbox:before { + content: "\f01c"; +} +i.icon.indent.left:before { + content: "\f03b"; +} +i.icon.indent.right:before { + content: "\f03c"; +} +i.icon.info.letter:before { + content: "\f129"; +} +i.icon.info:before { + content: "\f05a"; +} +i.icon.instagram:before { + content: "\f16d"; +} +i.icon.italic:before { + content: "\f033"; +} +i.icon.key:before { + content: "\f084"; +} +i.icon.keyboard:before { + content: "\f11c"; +} +i.icon.lab:before { + content: "\f0c3"; +} +i.icon.laptop:before { + content: "\f109"; +} +i.icon.layout.block:before { + content: "\f009"; +} +i.icon.layout.column:before { + content: "\f0db"; +} +i.icon.layout.grid:before { + content: "\f00a"; +} +i.icon.layout.list:before { + content: "\f00b"; +} +i.icon.leaf:before { + content: "\f06c"; +} +i.icon.left:before { + content: "\f060"; +} +i.icon.legal:before { + content: "\f0e3"; +} +i.icon.lemon:before { + content: "\f094"; +} +i.icon.level.down:before { + content: "\f149"; +} +i.icon.level.up:before { + content: "\f148"; +} +i.icon.lightbulb:before { + content: "\f0eb"; +} +i.icon.linkedin.sign:before { + content: "\f08c"; +} +i.icon.linkedin:before { + content: "\f0e1"; +} +i.icon.linux:before { + content: "\f17c"; +} +i.icon.list.ordered:before { + content: "\f0cb"; +} +i.icon.list.unordered:before { + content: "\f0ca"; +} +i.icon.list:before { + content: "\f03a"; +} +i.icon.loading:before { + content: "\f110"; +} +i.icon.location:before { + content: "\f124"; +} +i.icon.lock:before { + content: "\f023"; +} +i.icon.long.arrow.down:before { + content: "\f175"; +} +i.icon.long.arrow.left:before { + content: "\f177"; +} +i.icon.long.arrow.right:before { + content: "\f178"; +} +i.icon.long.arrow.up:before { + content: "\f176"; +} +i.icon.magic:before { + content: "\f0d0"; +} +i.icon.magnet:before { + content: "\f076"; +} +i.icon.mail.outline:before { + content: "\f003"; +} +i.icon.mail.reply:before { + content: "\f112"; +} +i.icon.mail:before { + content: "\f0e0"; +} +i.icon.male:before { + content: "\f183"; +} +i.icon.map.marker:before { + content: "\f041"; +} +i.icon.map:before { + content: "\f14e"; +} +i.icon.maxcdn:before { + content: "\f136"; +} +i.icon.medkit:before { + content: "\f0fa"; +} +i.icon.meh:before { + content: "\f11a"; +} +i.icon.minus.sign.alternate:before { + content: "\f146"; +} +i.icon.minus.sign:before { + content: "\f056"; +} +i.icon.minus:before { + content: "\f068"; +} +i.icon.mobile:before { + content: "\f10b"; +} +i.icon.money:before { + content: "\f0d6"; +} +i.icon.moon:before { + content: "\f186"; +} +i.icon.move:before { + content: "\f047"; +} +i.icon.music:before { + content: "\f001"; +} +i.icon.mute:before { + content: "\f131"; +} +i.icon.off:before { + content: "\f011"; +} +i.icon.ok.circle:before { + content: "\f05d"; +} +i.icon.ok.sign:before { + content: "\f058"; +} +i.icon.paste:before { + content: "\f0ea"; +} +i.icon.pause:before { + content: "\f04c"; +} +i.icon.payment:before { + content: "\f09d"; +} +i.icon.pencil:before { + content: "\f040"; +} +i.icon.phone.sign:before { + content: "\f098"; +} +i.icon.phone:before { + content: "\f095"; +} +i.icon.photo:before { + content: "\f03e"; +} +i.icon.pin:before { + content: "\f08d"; +} +i.icon.pinterest.sign:before { + content: "\f0d3"; +} +i.icon.pinterest:before { + content: "\f0d2"; +} +i.icon.plane:before { + content: "\f072"; +} +i.icon.play.circle:before { + content: "\f01d"; +} +i.icon.play.sign:before { + content: "\f144"; +} +i.icon.play:before { + content: "\f04b"; +} +i.icon.pound:before { + content: "\f154"; +} +i.icon.print:before { + content: "\f02f"; +} +i.icon.puzzle.piece:before { + content: "\f12e"; +} +i.icon.qr.code:before { + content: "\f029"; +} +i.icon.question:before { + content: "\f128"; +} +i.icon.quote.left:before { + content: "\f10d"; +} +i.icon.quote.right:before { + content: "\f10e"; +} +i.icon.refresh:before { + content: "\f021"; +} +i.icon.remove.circle:before { + content: "\f05c"; +} +i.icon.remove.sign:before { + content: "\f057"; +} +i.icon.remove:before { + content: "\f00d"; +} +i.icon.renren:before { + content: "\f18b"; +} +i.icon.reorder:before { + content: "\f0c9"; +} +i.icon.repeat:before { + content: "\f01e"; +} +i.icon.reply.all.mail:before { + content: "\f122"; +} +i.icon.resize.full:before { + content: "\f065"; +} +i.icon.resize.horizontal:before { + content: "\f07e"; +} +i.icon.resize.small:before { + content: "\f066"; +} +i.icon.resize.vertical:before { + content: "\f07d"; +} +i.icon.retweet:before { + content: "\f079"; +} +i.icon.right:before { + content: "\f061"; +} +i.icon.road:before { + content: "\f018"; +} +i.icon.rocket:before { + content: "\f135"; +} +i.icon.rss.sign:before { + content: "\f143"; +} +i.icon.rss:before { + content: "\f09e"; +} +i.icon.rupee:before { + content: "\f156"; +} +i.icon.save:before { + content: "\f0c7"; +} +i.icon.screenshot:before { + content: "\f05b"; +} +i.icon.search:before { + content: "\f002"; +} +i.icon.setting:before { + content: "\f013"; +} +i.icon.settings:before { + content: "\f085"; +} +i.icon.share.sign:before { + content: "\f14d"; +} +i.icon.share:before { + content: "\f045"; +} +i.icon.shield:before { + content: "\f132"; +} +i.icon.shuffle:before { + content: "\f074"; +} +i.icon.sign.in:before { + content: "\f090"; +} +i.icon.sign.out:before { + content: "\f08b"; +} +i.icon.sign:before { + content: "\f0c8"; +} +i.icon.signal:before { + content: "\f012"; +} +i.icon.sitemap:before { + content: "\f0e8"; +} +i.icon.skype:before { + content: "\f17e"; +} +i.icon.smile:before { + content: "\f118"; +} +i.icon.sort.alphabet.descending:before { + content: "\f15e"; +} +i.icon.sort.alphabet:before { + content: "\f15d"; +} +i.icon.sort.ascending:before { + content: "\f0de"; +} +i.icon.sort.attributes.descending:before { + content: "\f161"; +} +i.icon.sort.attributes:before { + content: "\f160"; +} +i.icon.sort.descending:before { + content: "\f0dd"; +} +i.icon.sort.order.descending:before { + content: "\f163"; +} +i.icon.sort.order:before { + content: "\f162"; +} +i.icon.sort:before { + content: "\f0dc"; +} +i.icon.stackexchange:before { + content: "\f16c"; +} +i.icon.star.empty:before { + content: "\f006"; +} +i.icon.star.half.empty:before { + content: "\f123"; +} +i.icon.star.half.full:before, +i.icon.star.half:before { + content: "\f089"; +} +i.icon.star:before { + content: "\f005"; +} +i.icon.step.backward:before { + content: "\f048"; +} +i.icon.step.forward:before { + content: "\f051"; +} +i.icon.stethoscope:before { + content: "\f0f1"; +} +i.icon.stop:before { + content: "\f04d"; +} +i.icon.strikethrough:before { + content: "\f0cc"; +} +i.icon.subscript:before { + content: "\f12c"; +} +i.icon.suitcase:before { + content: "\f0f2"; +} +i.icon.sun:before { + content: "\f185"; +} +i.icon.superscript:before { + content: "\f12b"; +} +i.icon.table:before { + content: "\f0ce"; +} +i.icon.tablet:before { + content: "\f10a"; +} +i.icon.tag:before { + content: "\f02b"; +} +i.icon.tags:before { + content: "\f02c"; +} +i.icon.tasks:before { + content: "\f0ae"; +} +i.icon.terminal:before { + content: "\f120"; +} +i.icon.text.height:before { + content: "\f034"; +} +i.icon.text.width:before { + content: "\f035"; +} +i.icon.thumbs.down.outline:before { + content: "\f088"; +} +i.icon.thumbs.down:before { + content: "\f165"; +} +i.icon.thumbs.up.outline:before { + content: "\f087"; +} +i.icon.thumbs.up:before { + content: "\f164"; +} +i.icon.ticket:before { + content: "\f145"; +} +i.icon.time:before { + content: "\f017"; +} +i.icon.tint:before { + content: "\f043"; +} +i.icon.trash:before { + content: "\f014"; +} +i.icon.trello:before { + content: "\f181"; +} +i.icon.trophy:before { + content: "\f091"; +} +i.icon.truck:before { + content: "\f0d1"; +} +i.icon.tumblr.sign:before { + content: "\f174"; +} +i.icon.tumblr:before { + content: "\f173"; +} +i.icon.twitter.sign:before { + content: "\f081"; +} +i.icon.twitter:before { + content: "\f099"; +} +i.icon.umbrella:before { + content: "\f0e9"; +} +i.icon.underline:before { + content: "\f0cd"; +} +i.icon.undo:before { + content: "\f0e2"; +} +i.icon.unhide:before { + content: "\f06e"; +} +i.icon.unlink:before { + content: "\f127"; +} +i.icon.unlock.alternate:before { + content: "\f13e"; +} +i.icon.unlock:before { + content: "\f09c"; +} +i.icon.unmute:before { + content: "\f130"; +} +i.icon.up:before { + content: "\f062"; +} +i.icon.upload.disk:before { + content: "\f093"; +} +i.icon.upload:before { + content: "\f01b"; +} +i.icon.url:before { + content: "\f0c1"; +} +i.icon.user:before { + content: "\f007"; +} +i.icon.users:before { + content: "\f0c0"; +} +i.icon.video:before { + content: "\f008"; +} +i.icon.vk:before { + content: "\f189"; +} +i.icon.volume.down:before { + content: "\f027"; +} +i.icon.volume.off:before { + content: "\f026"; +} +i.icon.volume.up:before { + content: "\f028"; +} +i.icon.warning:before { + content: "\f071"; +} +i.icon.weibo:before { + content: "\f18a"; +} +i.icon.windows:before { + content: "\f17a"; +} +i.icon.won:before { + content: "\f159"; +} +i.icon.wrench:before { + content: "\f0ad"; +} +i.icon.xing.sign:before { + content: "\f169"; +} +i.icon.xing:before { + content: "\f168"; +} +i.icon.yen:before { + content: "\f157"; +} +i.icon.youtube.play:before { + content: "\f16a"; +} +i.icon.youtube.sign:before { + content: "\f166"; +} +i.icon.youtube:before { + content: "\f167"; +} +i.icon.yuan:before { + content: "\f158"; +} +i.icon.zoom.in:before { + content: "\f00e"; +} +i.icon.zoom.out:before { + content: "\f010"; +} +/*-------------- + Aliases +---------------*/ +i.icon.check:before { + content: "\f00c"; +} +i.icon.close:before { + content: "\f00d"; +} +i.icon.delete:before { + content: "\f00d"; +} +i.icon.like:before { + content: "\f004"; +} +i.icon.signup:before { + content: "\f044"; +} +i.icon.dropdown:before { + content: "\f0d7"; +} +/*-------------- + Spacing Fix +---------------*/ +/* dropdown arrows are to the right */ +i.dropdown.icon { + margin: 0em 0em 0em 0.5em; +} +/* stars are usually consecutive */ +i.icon.star { + width: auto; + margin: 0em; +} +/* left side icons */ +i.icon.left, +i.icon.left, +i.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} +/* right side icons */ +i.icon.search, +i.icon.up, +i.icon.down, +i.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} +/******************************* + Types +*******************************/ +/*-------------- + Loading +---------------*/ +i.icon.loading { + -webkit-animation: icon-loading 2s linear infinite; + -moz-animation: icon-loading 2s linear infinite; + -ms-animation: icon-loading 2s linear infinite; + -o-animation: icon-loading 2s linear infinite; + animation: icon-loading 2s linear infinite; +} +@keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes icon-loading { + from { + -moz-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-ms-keyframes icon-loading { + from { + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes icon-loading { + from { + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/******************************* + States +*******************************/ +i.icon.hover { + opacity: 1; +} +i.icon.active { + opacity: 1; +} +i.emphasized.icon { + opacity: 1; +} +i.icon.disabled { + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +i.link.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +i.link.icon:hover { + opacity: 1 !important; +} +/*------------------- + Circular +--------------------*/ +i.circular.icon { + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Flipped +--------------------*/ +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -o-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +/*------------------- + Rotated +--------------------*/ +i.left.rotated.icon { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +i.right.rotated.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +/*------------------- + Square +--------------------*/ +i.square.icon { + width: 2em; + height: 2em; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} +i.square.icon:before { + vertical-align: middle; +} +i.square.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Inverted +--------------------*/ +i.inverted.icon { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Colors +--------------------*/ +i.blue.icon { + color: #6ECFF5 !important; +} +i.black.icon { + color: #5C6166 !important; +} +i.green.icon { + color: #A1CF64 !important; +} +i.red.icon { + color: #D95C5C !important; +} +i.purple.icon { + color: #564F8A !important; +} +i.teal.icon { + color: #00B5AD !important; +} +/*------------------- + Inverted Colors +--------------------*/ +i.inverted.black.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +i.inverted.blue.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +i.inverted.green.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +i.inverted.red.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +i.inverted.purple.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +i.inverted.teal.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Sizes +--------------------*/ +i.small.icon { + font-size: 0.875em; +} +i.icon { + font-size: 1em; +} +i.large.icon { + font-size: 2em; + margin-right: 0.5em; + vertical-align: middle; +} +i.huge.icon { + font-size: 4em; + margin-right: 0.75em; + vertical-align: middle; +} +i.massive.icon { + font-size: 8em; + margin-right: 1em; + vertical-align: middle; +} +/* + * # Semantic - Image + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Image +*******************************/ +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: rgba(0, 0, 0, 0.05); +} +img.ui.image { + display: block; + background: none; +} +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} +/******************************* + States +*******************************/ +.ui.disabled.image { + cursor: default; + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*-------------- + Rounded +---------------*/ +.ui.rounded.images .image, +.ui.rounded.images img, +.ui.rounded.image img, +.ui.rounded.image { + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +/*-------------- + Circular +---------------*/ +.ui.circular.images .image, +.ui.circular.images img, +.ui.circular.image img, +.ui.circular.image { + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*-------------- + Avatar +---------------*/ +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.image img, +.ui.avatar.image { + margin-right: 0.5em; + display: inline-block; + width: 2em; + height: 2em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: 1em; + margin-bottom: 1em; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-bottom: 1em; + margin-left: 1em; +} +/*-------------- + Sizes +---------------*/ +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.image { + width: 20px; + font-size: 0.7rem; +} +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.image { + width: 35px; + font-size: 0.8rem; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.image { + width: 80px; + font-size: 0.9rem; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.image { + width: 300px; + font-size: 1rem; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.image { + width: 450px; + font-size: 1.1rem; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.image { + width: 600px; + font-size: 1.2rem; +} +/******************************* + Groups +*******************************/ +.ui.images { + font-size: 0em; + margin: 0em -0.25rem 0rem; +} +.ui.images .image, +.ui.images img { + display: inline-block; + margin: 0em 0.25em 0.5em; +} +/* + * # Semantic - Input + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------------- + Inputs +---------------------*/ +.ui.input { + display: inline-block; + position: relative; +} +.ui.input input { + width: 100%; + font-family: "Helvetica Neue", "Helvetica", Arial; + margin: 0em; + padding: 0.85em 1.2em; + font-size: 0.875em; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.7); + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------------- + Placeholder +---------------------*/ +/* browsers require these rules separate */ +.ui.input::-web inputkit-input-placeholder { + color: #E0E0E0; +} +.ui.input::-moz input-placeholder { + color: #E0E0E0; +} +/******************************* + States +*******************************/ +/*-------------------- + Active +---------------------*/ +.ui.input input:active, +.ui.input.down input { + border-color: rgba(0, 0, 0, 0.3); + background-color: #FAFAFA; +} +/*-------------------- + Loading +---------------------*/ +.ui.loading.input > .icon { + background: url('../build/uncompressed/images/loader-mini.gif') no-repeat 50% 50%; +} +.ui.loading.input > .icon:before, +.ui.loading.input > .icon:after { + display: none; +} +/*-------------------- + Focus +---------------------*/ +.ui.input.focus input, +.ui.input input:focus { + border-color: rgba(0, 0, 0, 0.2); + color: rgba(0, 0, 0, 0.85); +} +.ui.input.focus input input::-webkit-input-placeholder, +.ui.input input:focus input::-webkit-input-placeholder { + color: #AAAAAA; +} +.ui.input.focus input input::-moz-placeholder, +.ui.input input:focus input::-moz-placeholder { + color: #AAAAAA; +} +/*-------------------- + Error +---------------------*/ +.ui.input.error input { + background-color: #FFFAFA; + border-color: #E7BEBE; + color: #D95C5C; +} +/* Error Placeholder */ +.ui.input.error input ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.input.error input ::-moz-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.input.error input :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} +.ui.input.error input :focus::-moz-placeholder { + color: rgba(255, 80, 80, 0.7); +} +/******************************* + Variations +*******************************/ +/*-------------------- + Transparent +---------------------*/ +.ui.transparent.input input { + border: none; + background-color: transparent; +} +/*-------------------- + Icon +---------------------*/ +.ui.icon.input > .icon { + position: absolute; + opacity: 0.5; + top: 0px; + right: 0px; + margin: 0em; + width: 2.6em; + height: 100%; + padding-top: 0.85em; + text-align: center; + -webkit-border-radius: 0em 0.3125em 0.3125em 0em; + -moz-border-radius: 0em 0.3125em 0.3125em 0em; + border-radius: 0em 0.3125em 0.3125em 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +.ui.icon.input input { + padding-right: 3em !important; +} +.ui.icon.input > .circular.icon { + top: 0.35em; + right: 0.5em; +} +/* Left Side */ +.ui.left.icon.input > .icon { + right: auto; + left: 1px; + -webkit-border-radius: 0.3125em 0em 0em 0.3125em; + -moz-border-radius: 0.3125em 0em 0em 0.3125em; + border-radius: 0.3125em 0em 0em 0.3125em; +} +.ui.left.icon.input > .circular.icon { + right: auto; + left: 0.5em; +} +.ui.left.icon.input > input { + padding-left: 3em !important; + padding-right: 1.2em !important; +} +/* Focus */ +.ui.icon.input > input:focus ~ .icon { + opacity: 1; +} +/*-------------------- + Labeled +---------------------*/ +.ui.labeled.input .corner.label { + top: 1px; + right: 1px; + -webkit-border-top-right-radius: 0.3125em; + -moz-border-top-right-radius: 0.3125em; + border-top-right-radius: 0.3125em; +} +.ui.labeled.input input { + padding-right: 2.5em !important; +} +/* Spacing with corner label */ +.ui.labeled.icon.input:not(.left) > input { + padding-right: 3.25em !important; +} +.ui.labeled.icon.input:not(.left) > .icon { + margin-right: 0.75em; +} +/*-------------------- + Action +---------------------*/ +.ui.action.input { + display: table; +} +.ui.action.input > input { + display: table-cell; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right: none; +} +.ui.action.input > .button { + display: table-cell; + opacity: 0.9; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + white-space: nowrap; +} +.ui.action.input > .button > .icon { + display: inline; +} +.ui.action.input > input:focus ~ .button { + opacity: 1; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; +} +/*-------------------- + Fluid +---------------------*/ +.ui.fluid.input { + display: block; +} +/*-------------------- + Size +---------------------*/ +.ui.mini.input { + font-size: 0.8125rem; +} +.ui.tiny.input { + font-size: 0.875rem; +} +.ui.small.input { + font-size: 0.875rem; +} +.ui.input { + font-size: 1rem; +} +.ui.large.input { + font-size: 1.125rem; +} +.ui.big.input { + font-size: 1.25rem; +} +.ui.huge.input { + font-size: 1.375rem; +} +.ui.massive.input { + font-size: 1.5rem; +} +/* + * # Semantic - Label + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Label +*******************************/ +.ui.label { + display: inline-block; + vertical-align: middle; + margin: -0.25em 0.25em 0em; + background-color: #E8E8E8; + border-color: #E8E8E8; + padding: 0.5em 0.8em; + color: rgba(0, 0, 0, 0.65); + text-transform: uppercase; + font-weight: normal; + -webkit-border-radius: 0.325em; + -moz-border-radius: 0.325em; + border-radius: 0.325em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} +/* Link */ +a.ui.label { + cursor: pointer; +} +/* Detail */ +.ui.label .detail { + display: inline-block; + margin-left: 0.5em; + font-weight: bold; + opacity: 0.8; +} +/* Icon */ +.ui.label .icon { + width: auto; +} +/* Removable label */ +.ui.label .delete.icon { + cursor: pointer; + margin: 0em 0em 0em 0.5em; + opacity: 0.7; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.label .delete.icon:hover { + opacity: 0.99; +} +/******************************* + Types +*******************************/ +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + padding-top: 0.4em; + padding-bottom: 0.4em; + line-height: 1.5em; + vertical-align: baseline; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.image.label img { + display: inline-block; + height: 2.25em; + margin: -0.4em 0.8em -0.4em -0.8em; + vertical-align: top; + -moz-border-radius: 0.325em 0em 0em 0.325em; + -webkit-border-radius: 0.325em 0em 0em 0.325em; + border-radius: 0.325em 0em 0em 0.325em; +} +/******************************* + States +*******************************/ +/*------------------- + Disabled +--------------------*/ +.ui.label.disabled { + opacity: 0.5; +} +/*------------------- + Hover +--------------------*/ +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: #E0E0E0; + border-color: #E0E0E0; + color: rgba(0, 0, 0, 0.7); +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + background-color: #E0E0E0; + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Visible +--------------------*/ +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} +/*------------------- + Hidden +--------------------*/ +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*------------------- + Tag +--------------------*/ +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding: 0.33em 1.3em 0.33em 1.4em; + -webkit-border-radius: 0px 3px 3px 0px; + -moz-border-radius: 0px 3px 3px 0px; + border-radius: 0px 3px 3px 0px; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + top: 0.3em; + left: 0.3em; + content: ''; + margin-left: -1em; + background-image: none; + width: 1.5em; + height: 1.5em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -0.25em; + margin-top: -0.3em; + background-color: #FFFFFF; + width: 0.55em; + height: 0.55em; + -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + -moz-border-radius: 100px 100px 100px 100px; + -webkit-border-radius: 100px 100px 100px 100px; + border-radius: 100px 100px 100px 100px; +} +/*------------------- + Ribbon +--------------------*/ +.ui.ribbon.label { + position: relative; + left: -1.8rem; + padding-left: 2rem; + -webkit-border-radius: 0px 4px 4px 0px; + -moz-border-radius: 0px 4px 4px 0px; + border-radius: 0px 4px 4px 0px; +} +.ui.ribbon.label:after { + position: absolute; + content: ""; + top: 100%; + left: 0%; + border-top: 0em solid transparent; + border-right-width: 1em; + border-right-color: inherit; + border-right-style: solid; + border-bottom: 1em solid transparent; + border-left: 0em solid transparent; + width: 0em; + height: 0em; +} +/*------------------- + Attached +--------------------*/ +.ui.top.attached.label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + -webkit-border-radius: 4px 4px 0em 0em; + -moz-border-radius: 4px 4px 0em 0em; + border-radius: 4px 4px 0em 0em; +} +.ui.bottom.attached.label { + top: auto; + bottom: 0em; + -webkit-border-radius: 0em 0em 4px 4px; + -moz-border-radius: 0em 0em 4px 4px; + border-radius: 0em 0em 4px 4px; +} +.ui.top.left.attached.label { + width: auto; + margin-top: 0em !important; + -webkit-border-radius: 4px 0em 4px 0em; + -moz-border-radius: 4px 0em 4px 0em; + border-radius: 4px 0em 4px 0em; +} +.ui.top.right.attached.label { + width: auto; + left: auto; + right: 0em; + -webkit-border-radius: 0em 4px 0em 4px; + -moz-border-radius: 0em 4px 0em 4px; + border-radius: 0em 4px 0em 4px; +} +.ui.bottom.left.attached.label { + width: auto; + top: auto; + bottom: 0em; + -webkit-border-radius: 4px 0em 0em 4px; + -moz-border-radius: 4px 0em 0em 4px; + border-radius: 4px 0em 0em 4px; +} +.ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + -webkit-border-radius: 4px 0em 4px 0em; + -moz-border-radius: 4px 0em 4px 0em; + border-radius: 4px 0em 4px 0em; +} +/*------------------- + Corner Label +--------------------*/ +.ui.corner.label { + background-color: transparent; + position: absolute; + top: 0em; + right: 0em; + z-index: 10; + margin: 0em; + font-size: 0.8125em; + width: 2rem; + height: 2rem; + padding: 0em; + text-align: center; + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + width: 0em; + height: 0em; + border-top: 0em solid transparent; + border-right: 3em solid transparent; + border-bottom: 3em solid transparent; + border-left: 0em solid transparent; + border-right-color: inherit; + -webkit-transition: border-color 0.2s ease; + -moz-transition: border-color 0.2s ease; + -o-transition: border-color 0.2s ease; + -ms-transition: border-color 0.2s ease; + transition: border-color 0.2s ease; +} +.ui.corner.label .icon { + margin: 0.4em 0em 0em 0.7em; +} +.ui.corner.label .text { + display: inline-block; + font-weight: bold; + margin: 0.5em 0em 0em 0.6em; + width: 2.5em; + font-size: 0.82em; + text-align: center; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: 3em solid transparent; + border-right: 3em solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + border-top-color: inherit; +} +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} +.ui.left.corner.label .text { + margin: 0.5em 0em 0em -0.6em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +/* Hover */ +.ui.corner.label:hover { + background-color: transparent; +} +/*------------------- + Fluid +--------------------*/ +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.labels .label, +.ui.inverted.label { + color: #FFFFFF !important; +} +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: #5C6166 !important; + border-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.labels .black.label:before, +.ui.black.labels .label:before, +.ui.black.label:before { + background-color: #5C6166 !important; +} +/* Hover */ +a.ui.black.labels .label:hover, +a.ui.black.label:hover { + background-color: #888888 !important; + border-color: #888888 !important; +} +.ui.labels a.black.label:hover:before, +.ui.black.labels a.label:hover:before, +a.ui.black.label:hover:before { + background-color: #888888 !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: #A1CF64 !important; + border-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.labels .green.label:before, +.ui.green.labels .label:before, +.ui.green.label:before { + background-color: #A1CF64 !important; +} +/* Hover */ +a.ui.green.labels .label:hover, +a.ui.green.label:hover { + background-color: #89B84C !important; + border-color: #89B84C !important; +} +.ui.labels a.green.label:hover:before, +.ui.green.labels a.label:hover:before, +a.ui.green.label:hover:before { + background-color: #89B84C !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: #D95C5C !important; + border-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.labels .red.label:before, +.ui.red.labels .label:before, +.ui.red.label:before { + background-color: #D95C5C !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Hover */ +a.ui.red.labels .label:hover, +a.ui.red.label:hover { + background-color: #DE3859 !important; + border-color: #DE3859 !important; + color: #FFFFFF !important; +} +.ui.labels a.red.label:hover:before, +.ui.red.labels a.label:hover:before, +a.ui.red.label:hover:before { + background-color: #DE3859 !important; +} +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: #6ECFF5 !important; + border-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.labels .blue.label:before, +.ui.blue.labels .label:before, +.ui.blue.label:before { + background-color: #6ECFF5 !important; +} +/* Hover */ +a.ui.blue.labels .label:hover, +.ui.blue.labels a.label:hover, +a.ui.blue.label:hover { + background-color: #1AB8F3 !important; + border-color: #1AB8F3 !important; + color: #FFFFFF !important; +} +.ui.labels a.blue.label:hover:before, +.ui.blue.labels a.label:hover:before, +a.ui.blue.label:hover:before { + background-color: #1AB8F3 !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: #564F8A !important; + border-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.labels .purple.label:before, +.ui.purple.labels .label:before, +.ui.purple.label:before { + background-color: #564F8A !important; +} +/* Hover */ +a.ui.purple.labels .label:hover, +.ui.purple.labels a.label:hover, +a.ui.purple.label:hover { + background-color: #3E3773 !important; + border-color: #3E3773 !important; + color: #FFFFFF !important; +} +.ui.labels a.purple.label:hover:before, +.ui.purple.labels a.label:hover:before, +a.ui.purple.label:hover:before { + background-color: #3E3773 !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/*--- Pink ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: #00B5AD !important; + border-color: #00B5AD !important; + color: #FFFFFF !important; +} +.ui.labels .teal.label:before, +.ui.teal.labels .label:before, +.ui.teal.label:before { + background-color: #00B5AD !important; +} +/* Hover */ +a.ui.teal.labels .label:hover, +.ui.teal.labels a.label:hover, +a.ui.teal.label:hover { + background-color: #009A93 !important; + border-color: #009A93 !important; + color: #FFFFFF !important; +} +.ui.labels a.teal.label:hover:before, +.ui.teal.labels a.label:hover:before, +a.ui.teal.label:hover:before { + background-color: #009A93 !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: -0.125em 0.5em -0.125em 0em; + padding: 0.35em 1em; + min-width: 6em; + text-align: center; +} +/*------------------- + Circular +--------------------*/ +.ui.circular.labels .label, +.ui.circular.label { + min-height: 1em; + max-height: 2em; + padding: 0.5em !important; + line-height: 1em; + text-align: center; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*------------------- + Pointing +--------------------*/ +.ui.pointing.label { + position: relative; +} +.ui.attached.pointing.label { + position: absolute; +} +.ui.pointing.label:before { + position: absolute; + content: ""; + width: 0.6em; + height: 0.6em; + background-image: none; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +/*--- Above ---*/ +.ui.pointing.label:before { + background-color: #E8E8E8; +} +.ui.pointing.label, +.ui.pointing.above.label { + margin-top: 1em; +} +.ui.pointing.label:before, +.ui.pointing.above.label:before { + margin-left: -0.3em; + top: -0.3em; + left: 50%; +} +/*--- Below ---*/ +.ui.pointing.below.label { + margin-top: 0em; + margin-bottom: 1em; +} +.ui.pointing.below.label:before { + margin-left: -0.3em; + top: auto; + right: auto; + bottom: -0.3em; + left: 50%; +} +/*--- Left ---*/ +.ui.pointing.left.label { + margin-top: 0em; + margin-left: 1em; +} +.ui.pointing.left.label:before { + margin-top: -0.3em; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui.pointing.right.label { + margin-top: 0em; + margin-right: 1em; +} +.ui.pointing.right.label:before { + margin-top: -0.3em; + right: -0.3em; + top: 50%; + bottom: auto; + left: auto; +} +/*------------------ + Floating Label +-------------------*/ +.ui.floating.label { + position: absolute; + z-index: 100; + top: -1em; + left: 100%; + margin: 0em 0em 0em -1.5em !important; +} +/*------------------- + Sizes +--------------------*/ +.ui.small.labels .label, +.ui.small.label { + font-size: 0.75rem; +} +.ui.label { + font-size: 0.8125rem; +} +.ui.large.labels .label, +.ui.large.label { + font-size: 0.875rem; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: 1rem; +} +/* + * # Semantic - Loader + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Loader +*******************************/ +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: 50%; + left: 50%; + margin: 0px; + z-index: 1000; + -webkit-transform: translateX(-50%) translateY(-50%); + -moz-transform: translateX(-50%) translateY(-50%); + -o-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} +.ui.dimmer .loader { + display: block; +} +/******************************* + Types +*******************************/ +/*------------------- + Text +--------------------*/ +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} +.ui.mini.text.loader { + min-width: 16px; + padding-top: 2em; + font-size: 0.875em; +} +.ui.small.text.loader { + min-width: 24px; + padding-top: 2.5em; + font-size: 0.875em; +} +.ui.text.loader { + min-width: 32px; + font-size: 1em; + padding-top: 3em; +} +.ui.large.text.loader { + min-width: 64px; + padding-top: 5em; + font-size: 1.2em; +} +/******************************* + States +*******************************/ +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} +/******************************* + Variations +*******************************/ +/*------------------- + Inverted +--------------------*/ +.ui.dimmer .ui.text.loader, +.ui.inverted.text.loader { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.dimmer .ui.text.loader { + color: rgba(0, 0, 0, 0.8); +} +/* Tiny Size */ +.ui.dimmer .mini.ui.loader, +.ui.inverted .mini.ui.loader { + background-image: url('../build/uncompressed/images/loader-mini-inverted.gif'); +} +/* Small Size */ +.ui.dimmer .small.ui.loader, +.ui.inverted .small.ui.loader { + background-image: url('../build/uncompressed/images/loader-small-inverted.gif'); +} +/* Standard Size */ +.ui.dimmer .ui.loader, +.ui.inverted.loader { + background-image: url('../build/uncompressed/images/loader-medium-inverted.gif'); +} +/* Large Size */ +.ui.dimmer .large.ui.loader, +.ui.inverted .large.ui.loader { + background-image: url('../build/uncompressed/images/loader-large-inverted.gif'); +} +/*------------------- + Sizes +--------------------*/ +/* Tiny Size */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: 16px; + height: 16px; + background-image: url('../build/uncompressed/images/loader-mini.gif'); +} +/* Small Size */ +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 24px; + height: 24px; + background-image: url('../build/uncompressed/images/loader-small.gif'); +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 32px; + height: 32px; + background: url('../build/uncompressed/images/loader-medium.gif') no-repeat; + background-position: 48% 0px; +} +/* Large Size */ +.ui.inverted.dimmer .ui.loader.large, +.ui.loader.large { + width: 64px; + height: 64px; + background-image: url('../build/uncompressed/images/loader-large.gif'); +} +/*------------------- + Inline +--------------------*/ +.ui.inline.loader { + position: static; + vertical-align: middle; + margin: 0em; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; +} +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} +/* + * # Semantic - Progress Bar + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Progress Bar +*******************************/ +.ui.progress { + border: 1px solid rgba(0, 0, 0, 0.1); + width: 100%; + height: 35px; + background-color: #FAFAFA; + padding: 5px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.progress .bar { + display: inline-block; + height: 100%; + background-color: #CCCCCC; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-transition: width 1s ease-in-out, background-color 1s ease-out; + -moz-transition: width 1s ease-in-out, background-color 1s ease-out; + -ms-transition: width 1s ease-in-out, background-color 1s ease-out; + -o-transition: width 1s ease-in-out, background-color 1s ease-out; + transition: width 1s ease-in-out, background-color 1s ease-out; +} +/******************************* + States +*******************************/ +/*-------------- + Successful +---------------*/ +.ui.successful.progress .bar { + background-color: #73E064 !important; +} +.ui.successful.progress .bar, +.ui.successful.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/*-------------- + Failed +---------------*/ +.ui.failed.progress .bar { + background-color: #DF9BA4 !important; +} +.ui.failed.progress .bar, +.ui.failed.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/*-------------- + Active +---------------*/ +.ui.active.progress .bar { + position: relative; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFFFFF; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-animation: progress-active 2s ease-out infinite; + -moz-animation: progress-active 2s ease-out infinite; + animation: progress-active 2s ease-out infinite; +} +@-webkit-keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 95%; + } +} +@-moz-keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +/*-------------- + Disabled +---------------*/ +.ui.disabled.progress { + opacity: 0.35; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Attached +---------------*/ +/* bottom attached */ +.ui.progress.attached { + position: relative; + border: none; +} +.ui.progress.attached, +.ui.progress.attached .bar { + display: block; + height: 3px; + padding: 0px; + overflow: hidden; + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +.ui.progress.attached .bar { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/* top attached */ +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: -2px; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.ui.progress.top.attached .bar { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/*-------------- + Colors +---------------*/ +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.black.progress .bar { + background-color: #5C6166; +} +.ui.green.progress .bar { + background-color: #A1CF64; +} +.ui.red.progress .bar { + background-color: #EF4D6D; +} +.ui.purple.progress .bar { + background-color: #564F8A; +} +.ui.teal.progress .bar { + background-color: #00B5AD; +} +/*-------------- + Striped +---------------*/ +.ui.progress.striped .bar { + -webkit-background-size: 30px 30px; + -moz-background-size: 30px 30px; + background-size: 30px 30px; + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.ui.progress.active.striped .bar:after { + -webkit-animation: none; + -moz-animation: none; + -ms-animation: none; + -o-animation: none; + animation: none; +} +.ui.progress.active.striped .bar { + -webkit-animation: progress-striped 3s linear infinite; + -moz-animation: progress-striped 3s linear infinite; + animation: progress-striped 3s linear infinite; +} +@-webkit-keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +@-moz-keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +@keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +/*-------------- + Sizes +---------------*/ +.ui.small.progress .bar { + height: 14px; +} +/* + * # Semantic - Segment + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Segment +*******************************/ +.ui.segment { + position: relative; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + margin: 1em 0em; + padding: 1em; + -webkit-border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} +.ui.segment:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + background-color: transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.vertical.segment:first-child { + padding-top: 0em; +} +.ui.horizontal.segment { + margin: 0em; + padding-top: 0em; + padding-bottom: 0em; + background-color: transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.horizontal.segment:first-child { + padding-left: 0em; +} +/*------------------- + Loose Coupling +--------------------*/ +.ui.pointing.menu + .ui.attached.segment { + top: 1px; +} +/* No padding on edge content */ +.ui.segment > :first-child { + margin-top: 0em; +} +.ui.segment > :last-child { + margin-bottom: 0em; +} +/* Padding on next content after a label */ +.ui.segment > .attached.label:first-child + * { + margin-top: 2em; +} +.ui.segment > .bottom.attached.label:first-child ~ :last-child { + margin-top: 0em; + margin-bottom: 2em; +} +/******************************* + Types +*******************************/ +/*------------------- + Piled +--------------------*/ +.ui.piled.segment { + margin: 2em 0em; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: #FFFFFF; + visibility: visible; + content: ""; + display: block; + height: 100%; + left: -1px; + position: absolute; + width: 100%; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); +} +.ui.piled.segment:after { + -webkit-transform: rotate(1.2deg); + -moz-transform: rotate(1.2deg); + -ms-transform: rotate(1.2deg); + -o-transform: rotate(1.2deg); + transform: rotate(1.2deg); + top: 0; + z-index: -1; +} +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + -moz-transform: rotate(-1.2deg); + -ms-transform: rotate(-1.2deg); + -o-transform: rotate(-1.2deg); + transform: rotate(-1.2deg); + top: 0; + z-index: -2; +} +/*------------------- + Stacked +--------------------*/ +.ui.stacked.segment { + padding-bottom: 1.7em; +} +.ui.stacked.segment:after, +.ui.stacked.segment:before { + content: ''; + position: absolute; + bottom: -3px; + left: 0%; + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, 0.02); + width: 100%; + height: 5px; + visibility: visible; +} +.ui.stacked.segment:before { + bottom: 0px; +} +/* Inverted */ +.ui.stacked.inverted.segment:after, +.ui.stacked.inverted.segment:before { + background-color: rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.35); +} +/*------------------- + Raised +--------------------*/ +.ui.raised.segment { + -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); +} +/******************************* + States +*******************************/ +.ui.disabled.segment { + opacity: 0.8; + color: #DDDDDD; +} +/******************************* + Variations +*******************************/ +/*------------------- + Basic +--------------------*/ +.ui.basic.segment { + position: relative; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} +.ui.basic.segment:first-child { + padding-top: 0em; +} +.ui.basic.segment:last-child { + padding-bottom: 0em; +} +/*------------------- + Fittted +--------------------*/ +.ui.fitted.segment { + padding: 0em; +} +/*------------------- + Colors +--------------------*/ +.ui.blue.segment { + border-top: 0.2em solid #6ECFF5; +} +.ui.green.segment { + border-top: 0.2em solid #A1CF64; +} +.ui.red.segment { + border-top: 0.2em solid #D95C5C; +} +.ui.purple.segment { + border-top: 0.2em solid #564F8A; +} +.ui.teal.segment { + border-top: 0.2em solid #00B5AD; +} +/*------------------- + Inverted Colors +--------------------*/ +.ui.inverted.black.segment { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.segment { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.inverted.green.segment { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.inverted.red.segment { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.segment { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.segment { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.segment { + text-align: left; +} +.ui.right.aligned.segment { + text-align: right; +} +.ui.center.aligned.segment { + text-align: center; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.segment, +.ui.left.floated.segment { + float: left; +} +.ui.right.floated.segment { + float: right; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Ordinality +--------------------*/ +.ui.primary.segment { + background-color: #FFFFFF; + color: #555555; +} +.ui.secondary.segment { + background-color: #FAF9FA; + color: #777777; +} +.ui.tertiary.segment { + background-color: #EBEBEB; + color: #B0B0B0; +} +.ui.secondary.inverted.segment { + background-color: #555555; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + color: #FAFAFA; +} +.ui.tertiary.inverted.segment { + background-color: #555555; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + color: #EEEEEE; +} +/*------------------- + Attached +--------------------*/ +.ui.segment.attached { + top: -1px; + bottom: -1px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; + margin: 0em; + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; +} +.ui.top.attached.segment { + top: 0px; + bottom: -1px; + margin-top: 1em; + margin-bottom: 0em; + -moz-border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.segment.bottom.attached { + top: -1px; + bottom: 0px; + margin-top: 0em; + margin-bottom: 1em; + -moz-border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} +/* + * # Semantic - Steps + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Step +*******************************/ +.ui.step, +.ui.steps .step { + display: inline-block; + position: relative; + padding: 1em 2em 1em 3em; + vertical-align: top; + background-color: #FFFFFF; + color: #888888; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.step:after, +.ui.steps .step:after { + position: absolute; + z-index: 2; + content: ''; + top: 0em; + right: -1.45em; + border-bottom: 1.5em solid transparent; + border-left: 1.5em solid #FFFFFF; + border-top: 1.5em solid transparent; + width: 0em; + height: 0em; +} +.ui.step, +.ui.steps .step, +.ui.steps .step:after { + -webkit-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + -moz-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + -o-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + -ms-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; +} +/******************************* + Group +*******************************/ +.ui.steps { + cursor: pointer; + display: inline-block; + font-size: 0em; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + line-height: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -moz-border-radius: 0.3125rem; + -webkit-border-radius: 0.3125rem; + border-radius: 0.3125rem; +} +.ui.steps .step:first-child { + padding-left: 1.35em; + -webkit-border-radius: 0.3125em 0em 0em 0.3125em; + -moz-border-radius: 0.3125em 0em 0em 0.3125em; + border-radius: 0.3125em 0em 0em 0.3125em; +} +.ui.steps .step:last-child { + -webkit-border-radius: 0em 0.3125em 0.3125em 0em; + -moz-border-radius: 0em 0.3125em 0.3125em 0em; + border-radius: 0em 0.3125em 0.3125em 0em; +} +.ui.steps .step:only-child { + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +.ui.steps .step:last-child { + margin-right: 0em; +} +.ui.steps .step:last-child:after { + display: none; +} +/******************************* + States +*******************************/ +/* Hover */ +.ui.step:hover, +.ui.step.hover { + background-color: #F7F7F7; + color: rgba(0, 0, 0, 0.8); +} +.ui.steps .step.hover:after, +.ui.steps .step:hover:after, +.ui.step:hover, +.ui.step.hover::after { + border-left-color: #F7F7F7; +} +/* Hover */ +.ui.steps .step.down, +.ui.steps .step:active, +.ui.step.down, +.ui.step:active { + background-color: #F0F0F0; +} +.ui.steps .step.down:after, +.ui.steps .step:active:after, +.ui.steps.down::after, +.ui.steps:active::after { + border-left-color: #F0F0F0; +} +/* Active */ +.ui.steps .step.active, +.ui.active.step { + cursor: auto; + background-color: #555555; + color: #FFFFFF; + font-weight: bold; +} +.ui.steps .step.active:after, +.ui.active.steps:after { + border-left-color: #555555; +} +/* Disabled */ +.ui.steps .disabled.step, +.ui.disabled.step { + cursor: auto; + background-color: #FFFFFF; + color: #CBCBCB; +} +.ui.disabled.step:after { + border: none; + background-color: #FFFFFF; + top: 0.42em; + right: -1em; + width: 2.15em; + height: 2.15em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; + box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; +} +/******************************* + Variations +*******************************/ +/* Attached */ +.attached.ui.steps { + margin: 0em; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.attached.ui.steps .step:first-child { + -webkit-border-radius: 0.3125em 0em 0em 0em; + -moz-border-radius: 0.3125em 0em 0em 0em; + border-radius: 0.3125em 0em 0em 0em; +} +.attached.ui.steps .step:last-child { + -webkit-border-radius: 0em 0.3125em 0em 0em; + -moz-border-radius: 0em 0.3125em 0em 0em; + border-radius: 0em 0.3125em 0em 0em; +} +/* Bottom Side */ +.bottom.attached.ui.steps { + margin-top: -1px; + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +.bottom.attached.ui.steps .step:first-child { + -webkit-border-radius: 0em 0em 0em 0.3125em; + -moz-border-radius: 0em 0em 0em 0.3125em; + border-radius: 0em 0em 0em 0.3125em; +} +.bottom.attached.ui.steps .step:last-child { + -webkit-border-radius: 0em 0em 0.3125em 0em; + -moz-border-radius: 0em 0em 0.3125em 0em; + border-radius: 0em 0em 0.3125em 0em; +} +/* Evenly divided */ +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + display: block; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.500%; +} +/******************************* + Sizes +*******************************/ +.ui.small.step, +.ui.small.steps .step { + font-size: 0.8rem; +} +.ui.step, +.ui.steps .step { + font-size: 1rem; +} +.ui.large.step, +.ui.large.steps .step { + font-size: 1.25rem; +} +/* + * # Semantic - Accordion + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Button +*******************************/ +.ui.accordion { + width: 600px; + max-width: 100%; + overflow: hidden; + font-size: 1rem; + border-radius: 0.3125em; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.accordion .title { + cursor: pointer; + margin: 0em; + padding: 0.75em 1em; + color: rgba(0, 0, 0, 0.6); + border-top: 1px solid rgba(0, 0, 0, 0.05); + -webkit-transition: background-color 0.2s ease-out; + -moz-transition: background-color 0.2s ease-out; + -o-transition: background-color 0.2s ease-out; + -ms-transition: background-color 0.2s ease-out; + transition: background-color 0.2s ease-out; +} +.ui.accordion .title:first-child { + border-top: none; +} +/* Content */ +.ui.accordion .content { + display: none; + margin: 0em; + padding: 1.3em 1em; +} +/* Arrow */ +.ui.accordion .title .dropdown.icon { + display: inline-block; + float: none; + margin: 0em 0.5em 0em 0em; + -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease; + -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease; + -o-transition: -o-transform 0.2s ease, opacity 0.2s ease; + -ms-transition: -ms-transform 0.2s ease, opacity 0.2s ease; + transition: transform 0.2s ease, + opacity 0.2s ease + ; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.accordion .title .dropdown.icon:before { + content: '\f0da'; +} +/*-------------- + Loose Coupling +---------------*/ +.ui.basic.accordion.menu { + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.basic.accordion.menu .title, +.ui.basic.accordion.menu .content { + padding: 0em; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.accordion .title:hover, +.ui.accordion .active.title { + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Active +---------------*/ +.ui.accordion .active.title { + background-color: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.8); +} +.ui.accordion .active.title .dropdown.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.ui.accordion .active.content { + display: block; +} +/******************************* + Variations +*******************************/ +.ui.basic.accordion { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.accordion .title { + background-color: transparent; + border-top: none; +} +.ui.basic.accordion .title, +.ui.basic.accordion .content { + padding-left: 0em; + padding-right: 0em; +} +/* + * # Semantic - Chat Room + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Chat Room +*******************************/ +.ui.chatroom { + background-color: #F8F8F8; + width: 330px; + height: 370px; + padding: 0px; +} +.ui.chatroom .room { + position: relative; + background-color: #FFFFFF; + overflow: hidden; + height: 286px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-top: none; + border-bottom: none; +} +.ui.chatroom .room .loader { + display: none; + margin: -25px 0px 0px -25px; +} +/* Chat Room Actions */ +.ui.chatroom .actions { + overflow: hidden; + background-color: #EEEEEE; + padding: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + -moz-border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.chatroom .actions .button { + float: right; + margin-left: 3px; +} +/* Online User Count */ +.ui.chatroom .actions .message { + float: left; + margin-left: 6px; + font-size: 11px; + color: #AAAAAA; + text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); + line-height: 28px; +} +.ui.chatroom .actions .message .loader { + display: inline-block; + margin-right: 8px; +} +/* Chat Room Text Log */ +.ui.chatroom .log { + float: left; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; +} +.ui.chatroom .log .message { + padding: 3px 0px; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .message:first-child { + border-top: none; +} +/* status event */ +.ui.chatroom .status { + padding: 5px 0px; + color: #AAAAAA; + font-size: 12px; + font-style: italic; + line-height: 1.33; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .status:first-child { + border-top: none; +} +.ui.chatroom .log .flag { + float: left; +} +.ui.chatroom .log p { + margin-left: 0px; +} +.ui.chatroom .log .author { + font-weight: bold; + -webkit-transition: color 0.3s ease-out; + -moz-transition: color 0.3s ease-out; + -o-transition: color 0.3s ease-out; + -ms-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; +} +.ui.chatroom .log a.author:hover { + opacity: 0.8; +} +.ui.chatroom .log .message.admin p { + font-weight: bold; + margin: 1px 0px 0px 23px; +} +.ui.chatroom .log .divider { + margin: -1px 0px; + font-size: 11px; + padding: 10px 0px; + border-top: 1px solid #F8F8F8; + border-bottom: 1px solid #F8F8F8; +} +.ui.chatroom .log .divider .rule { + top: 50%; + width: 15%; +} +.ui.chatroom .log .divider .label { + color: #777777; + margin: 0px; +} +/* Chat Room User List */ +.ui.chatroom .room .list { + position: relative; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; + float: left; + background-color: #EEEEEE; + border-left: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user { + display: table; + padding: 3px 7px; + border-bottom: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user:hover { + background-color: #F8F8F8; +} +.ui.chatroom .room .list .image { + display: table-cell; + vertical-align: middle; + width: 20px; +} +.ui.chatroom .room .list .image img { + width: 20px; + height: 20px; + vertical-align: middle; +} +.ui.chatroom .room .list p { + display: table-cell; + vertical-align: middle; + padding-left: 7px; + padding-right: 14px; + font-size: 11px; + line-height: 1.2; + font-weight: bold; +} +.ui.chatroom .room .list a:hover { + opacity: 0.8; +} +/* User List Loading */ +.ui.chatroom.loading .loader { + display: block; +} +/* Chat Room Talk Input */ +.ui.chatroom .talk { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 0px 0px; + background-color: #EEEEEE; + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} +.ui.chatroom .talk .avatar, +.ui.chatroom .talk input, +.ui.chatroom .talk .button { + float: left; +} +.ui.chatroom .talk .avatar img { + display: block; + width: 30px; + height: 30px; + margin-right: 4px; + border-radius: 500rem; +} +.ui.chatroom .talk input { + border: 1px solid #CCCCCC; + margin: 0px; + width: 196px; + height: 14px; + padding: 8px 5px; + font-size: 12px; + color: #555555; +} +.ui.chatroom .talk input.focus { + border: 1px solid #AAAAAA; +} +.ui.chatroom .send { + width: 80px; + height: 32px; + margin-left: -1px; + padding: 4px 12px; + font-size: 12px; + line-height: 23px; + -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 0 5px 5px 0; +} +.ui.chatroom .talk .log-in.button { + display: block; + float: none; + margin-top: -6px; + height: 22px; + border-radius: 0px 0px 4px 4px; +} +.ui.chatroom .talk .log-in.button i { + vertical-align: text-top; +} +/* Quirky Flags */ +.ui.chatroom .log .team.flag { + width: 18px; +} +/* Chat room Loaded */ +.ui.chatroom.loading .loader { + display: block; +} +/* Standard Size */ +.ui.chatroom { + width: 330px; + height: 370px; +} +.ui.chatroom .room .container { + width: 3000px; +} +.ui.chatroom .log { + width: 314px; + height: 278px; + padding: 4px 7px; +} +.ui.chatroom .room .list { + width: 124px; + height: 278px; + padding: 4px 0px; +} +.ui.chatroom .room .list .user { + width: 110px; +} +.ui.chatroom .talk { + height: 40px; +} +/* + * # Semantic - Checkbox + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Checkbox +*******************************/ +/*-------------- + Standard +---------------*/ +/*--- Content ---*/ +.ui.checkbox { + position: relative; + display: inline-block; + outline: none; + margin-right: 0.5em; + vertical-align: middle; +} +.ui.checkbox input { + visibility: hidden; + outline: none; +} +/*--- Box ---*/ +.ui.checkbox .box, +.ui.checkbox label { + outline: none; + cursor: pointer; + position: absolute; + line-height: 1; + width: 1em; + height: 1em; + bottom: 0em; + left: 0em; + border-radius: 4px; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + background: #FFFFFF; + -webkit-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + -moz-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + -o-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + -ms-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; +} +/*--- Checkbox ---*/ +.ui.checkbox .box:after, +.ui.checkbox label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + content: ''; + position: absolute; + background: transparent; + border: 0.2em solid #333333; + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.checkbox .box:after, +.ui.checkbox label:after { + top: 0.3em; + left: 0.2em; + width: 0.45em; + height: 0.15em; +} +/*--- Label ---*/ +.ui.checkbox + label { + cursor: pointer; + opacity: 0.85; + vertical-align: middle; +} +.ui.checkbox + label:hover { + opacity: 1; +} +/******************************* + States +*******************************/ +/*--- Hover ---*/ +.ui.checkbox .box:hover, +.ui.checkbox label:hover { + background-color: #FAFAFA; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} +/*--- Down ---*/ +.ui.checkbox .box:active, +.ui.checkbox label:active { + background-color: #F5F5F5; +} +/*--- Active ---*/ +.ui.checkbox input:checked + .box:after, +.ui.checkbox input:checked + label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} +/*--- Disabled ---*/ +.ui.disabled.checkbox + .box:after, +.ui.checkbox input[disabled] + .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] + label { + opacity: 0.4; +} +/******************************* + Variations +*******************************/ +/*-------------- + Radio +---------------*/ +.ui.radio.checkbox { + width: 14px; + height: 16px; +} +.ui.radio.checkbox .box, +.ui.radio.checkbox label { + width: 14px; + height: 14px; + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + top: 3px; + left: 3px; + border: none; + width: 8px; + height: 8px; + background-color: #555555; + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} +/*-------------- + Slider +---------------*/ +.ui.slider.checkbox { + cursor: pointer; + width: 3em; + height: 2em; +} +/* Line */ +.ui.slider.checkbox:after { + position: absolute; + top: 1em; + left: 0em; + content: ''; + width: 100%; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} +/* Button */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + cursor: pointer; + display: block; + position: absolute; + top: 0.25em; + left: 0; + z-index: 1; + width: 1.5em; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; +} +/* Button Activation Light */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + opacity: 1; + position: absolute; + content: ''; + top: 0.375em; + left: 0.375em; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active Slider Toggle */ +.ui.slider.checkbox input:checked + .box, +.ui.slider.checkbox input:checked + label { + left: 1.75em; +} +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + background-color: #89B84C; +} +/*-------------- + Toggle +---------------*/ +.ui.toggle.checkbox { + cursor: pointer; + width: 3em; + height: 2em; +} +/* Line */ +.ui.toggle.checkbox:after { + cursor: pointer; + display: block; + position: absolute; + content: ''; + top: 0.25em; + left: 0em; + z-index: 1; + background-color: #FFFFFF; + width: 100%; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; +} +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + position: absolute; + top: 0.65em; + left: 0.5em; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Button Activation Light */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; + content: ''; + position: absolute; + top: 0px; + left: 0px; + z-index: 2; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active toggle Toggle */ +.ui.toggle.checkbox input:checked + .box, +.ui.toggle.checkbox input:checked + label { + left: 1.75em; +} +.ui.toggle.checkbox input:checked + .box:after, +.ui.toggle.checkbox input:checked + label:after { + background-color: #89B84C; +} +/*-------------- + Sizes +---------------*/ +.ui.checkbox { + width: 1em; + height: 1em; +} +.ui.checkbox, +.ui.checkbox .box, +.ui.checkbox label { + font-size: 1em; +} +.ui.large.checkbox { + width: 1.25em; + height: 1.25em; +} +.ui.large.checkbox, +.ui.large.checkbox .box, +.ui.large.checkbox label { + font-size: 1.25em; +} +.ui.huge.checkbox { + width: 1.5em; + height: 1.5em; +} +.ui.huge.checkbox, +.ui.huge.checkbox .box, +.ui.huge.checkbox label { + font-size: 1.5em; +} +/* + * # Semantic - Dimmer + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Dimmer +*******************************/ +.ui.dimmable { + position: relative; +} +.ui.dimmer { + display: none; + position: absolute; + top: 0em !important; + left: 0em !important; + width: 0%; + height: 0%; + text-align: center; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.85); + opacity: 0; + line-height: 1; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + -ms-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-transition: background-color 0.5s linear; + -moz-transition: background-color 0.5s linear; + -o-transition: background-color 0.5s linear; + -ms-transition: background-color 0.5s linear; + transition: background-color 0.5s linear; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + z-index: 1000; +} +/* +.ui.dimmed.dimmable > :not(.dimmer) { + -webkit-transition: + filter 0.5s ease + ; + -moz-transition: + filter 0.5s ease + ; + -o-transition: + filter 0.5s ease + ; + -ms-transition: + filter 0.5s ease + ; + transition: + filter 0.5s ease + ; +} +*/ +/* Dimmer Content */.ui.dimmer > .content { + width: 100%; + height: 100%; + display: table; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.ui.dimmer > .content > div { + display: table-cell; + vertical-align: middle; + color: #FFFFFF; +} +/* Loose Coupling */ +.ui.segment > .ui.dimmer { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.ui.horizontal.segment > .ui.dimmer, +.ui.vertical.segment > .ui.dimmer { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +/******************************* + States +*******************************/ +/* +.ui.dimmed.dimmable > :not(.dimmer) { + -webkit-filter: ~"blur(5px) grayscale(0.7)"; + -moz-filter: ~"blur(5px) grayscale(0.7)"; +} +*/ +.ui.dimmed.dimmable > .ui.dimmer, +.ui.active.dimmer { + display: block; + width: 100%; + height: 100%; + opacity: 1; +} +.ui.disabled.dimmer { + width: 0em !important; + height: 0em !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Page +---------------*/ +.ui.page.dimmer { + position: fixed; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + perspective: 2000px; + -webkit-transform-origin: top center; + -moz-transform-origin: top center; + -o-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +/* +body.ui.dimmed.dimmable > :not(.dimmer){ + -webkit-filter: ~"blur(15px) grayscale(0.7)"; + -moz-filter: ~"blur(15px) grayscale(0.7)"; +} +*/ +/*-------------- + Aligned +---------------*/ +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} +.ui.inverted.dimmer > .content > * { + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Simple +---------------*/ +/* Displays without javascript */ +.ui.simple.dimmer { + display: block; + overflow: hidden; + opacity: 1; + z-index: -100; + background-color: rgba(0, 0, 0, 0); +} +.ui.dimmed.dimmable > .ui.simple.dimmer { + overflow: visible; + opacity: 1; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + z-index: 1; +} +.ui.simple.inverted.dimmer { + background-color: rgba(255, 255, 255, 0); +} +.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} +/* + * # Semantic - Dropdown + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Dropdown +*******************************/ +.ui.dropdown { + position: relative; + display: inline-block; + line-height: 1; + -webkit-transition: border-radius 0.1s ease, width 0.2s ease; + -moz-transition: border-radius 0.1s ease, width 0.2s ease; + -o-transition: border-radius 0.1s ease, width 0.2s ease; + -ms-transition: border-radius 0.1s ease, width 0.2s ease; + transition: border-radius 0.1s ease, width 0.2s ease; +} +.ui.dropdown .menu { + position: absolute; + display: none; + top: 100%; + margin: 0em; + background-color: #FFFFFF; + min-width: 100%; + white-space: nowrap; + font-size: 0.875em; + text-shadow: none; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-border-radius: 0px 0px 0.325em 0.325em; + -webkit-border-radius: 0px 0px 0.325em 0.325em; + border-radius: 0px 0px 0.325em 0.325em; + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + z-index: 11; +} +/* Dropdown Icon */ +.ui.dropdown > .dropdown.icon { + width: auto; +} +/* Dropdown Text */ +.ui.dropdown > .text { + cursor: pointer; + display: inline-block; + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Flyout Direction */ +.ui.dropdown .menu { + left: 0px; +} +.ui.menu .dropdown:last-child .menu, +.ui > .ui.dropdown:last-child .menu { + left: auto; + right: 0px; +} +/* Sub Menu Position */ +.ui.dropdown .menu .menu { + top: 0% !important; + left: 100% !important; + margin: 0em !important; + border-radius: 0 0.325em 0.325em 0em !important; +} +.ui.dropdown .menu .menu:after { + display: none; +} +.ui.dropdown .menu .item { + cursor: pointer; + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.05); + height: auto; + font-size: 0.875em; + display: block; + color: rgba(0, 0, 0, 0.75); + padding: 0.85em 1em !important; + font-size: 0.875rem; + text-transform: none; + font-weight: normal; + text-align: left; + -webkit-touch-callout: none; +} +.ui.dropdown .menu .item:before { + display: none; +} +.ui.dropdown .menu .item .icon { + margin-right: 0.75em; +} +.ui.dropdown .menu .item:first-child { + border-top: none; +} +/******************************* + States +*******************************/ +/* Dropdown Visible */ +.ui.visible.dropdown { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +.ui.visible.dropdown > .menu { + display: block; +} +/* Menu Item Hover */ +.ui.dropdown .menu .item:hover { + background-color: rgba(0, 0, 0, 0.02); + z-index: 12; +} +/* Menu Item Active */ +.ui.dropdown .menu .active.item { + background-color: rgba(0, 0, 0, 0.04); + border-left: none; + -webkit-box-shadow: none; + -moz-shadow: none; + box-shadow: none; + z-index: 12; +} +/* Default Text */ +.ui.dropdown > .default.text, +.ui.default.dropdown > .text { + color: rgba(0, 0, 0, 0.5); +} +.ui.dropdown:hover > .default.text, +.ui.default.dropdown:hover > .text { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*-------------- + Simple +---------------*/ +/* Displays without javascript */ +.ui.simple.dropdown .menu:before, +.ui.simple.dropdown .menu:after { + display: none; +} +.ui.simple.dropdown .menu { + display: block; + overflow: hidden; + top: -9999px !important; + position: absolute; + opacity: 0; + width: 0; + height: 0; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + -ms-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} +.ui.simple.active.dropdown, +.ui.simple.dropdown:hover { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +.ui.simple.active.dropdown > .menu, +.ui.simple.dropdown:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 100% !important; + opacity: 1; +} +.ui.simple.dropdown > .menu .item:active > .menu, +.ui.simple.dropdown:hover > .menu .item:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 0% !important; + left: 100% !important; + opacity: 1; +} +.ui.simple.disabled.dropdown:hover .menu { + display: none; + height: 0px; + width: 0px; + overflow: hidden; +} +/*-------------- + Selection +---------------*/ +/* Displays like a select box */ +.ui.selection.dropdown { + cursor: pointer; + display: inline-block; + word-wrap: break-word; + white-space: normal; + background-color: #FFFFFF; + padding: 0.5em 1em; + line-height: 1.33; + color: rgba(0, 0, 0, 0.8); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 0.3125em !important; + -moz-border-radius: 0.3125em !important; + border-radius: 0.3125em !important; +} +.ui.selection.dropdown > .dropdown.icon { + float: right; + opacity: 0.7; + margin: 0.2em 0em 0.2em 1.25em; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + -ms-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} +.ui.selection.dropdown, +.ui.selection.dropdown .menu { + top: 100%; + -webkit-transition: box-shadow 0.2s ease-out; + -moz-transition: box-shadow 0.2s ease-out; + -o-transition: box-shadow 0.2s ease-out; + -ms-transition: box-shadow 0.2s ease-out; + transition: box-shadow 0.2s ease-out; +} +.ui.selection.dropdown .menu { + max-height: 312px; + overflow-x: hidden; + overflow-y: auto; + -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE; + -moz-box-shadow: 0px 1px 0px 1px #EEEEEE; + box-shadow: 0px 1px 0px 1px #EEEEEE; + -moz-border-radius: 0px 0px 0.325em 0.325em; + -webkit-border-radius: 0px 0px 0.325em 0.325em; + border-radius: 0px 0px 0.325em 0.325em; +} +.ui.selection.dropdown .menu:after, +.ui.selection.dropdown .menu:before { + display: none; +} +.ui.selection.dropdown .menu img { + height: 2.5em; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; +} +/* Hover */ +.ui.selection.dropdown:hover, +.ui.selection.dropdown.hover { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); +} +.ui.selection.dropdown:hover > .dropdown.icon { + opacity: 1; +} +/* Visible */ +.ui.selection.active.dropdown { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; + -moz-border-radius: 0.3125em 0.3125em 0em 0em !important; + border-radius: 0.3125em 0.3125em 0em 0em !important; +} +.ui.selection.active.dropdown > .dropdown.icon { + opacity: 1; +} +.ui.selection.active.dropdown .menu { + -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; + -moz-box-shadow: 0px 1px 0px 1px #D3D3D3; + box-shadow: 0px 1px 0px 1px #D3D3D3; +} +/*-------------- + Fluid +---------------*/ +.ui.fluid.dropdown { + display: block; +} +/*-------------- + Inline +---------------*/ +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: inherit; +} +.ui.inline.dropdown .dropdown.icon { + margin: 0em 0.5em 0em 0.25em; +} +.ui.inline.dropdown .text { + font-weight: bold; +} +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: 0.25em; + -webkit-border-radius: 0.325em; + -moz-border-radius: 0.325em; + border-radius: 0.325em; +} +/*-------------- + Floating +---------------*/ +.ui.floating.dropdown .menu { + left: 0; + right: auto; + margin-top: 0.5em; + -webkit-border-radius: 0.325em; + -moz-border-radius: 0.325em; + border-radius: 0.325em; +} +/*-------------- + Pointing +---------------*/ +.ui.pointing.dropdown .menu { + top: 100%; + margin-top: 0.75em; + -moz-border-radius: 0.325em; + -webkit-border-radius: 0.325em; + border-radius: 0.325em; +} +.ui.pointing.dropdown .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: " "; + visibility: visible; + width: 0.5em; + height: 0.5em; + -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + background-image: none; + background-color: #FFFFFF; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; +} +.ui.pointing.dropdown .menu .item.active:first-child { + background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); +} +/* Directions */ +.ui.pointing.dropdown .menu:after { + top: -0.25em; + left: 50%; + margin: 0em 0em 0em -0.25em; +} +.ui.top.left.pointing.dropdown .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: 0.75em 0em 0em; +} +.ui.top.left.pointing.dropdown .menu:after { + top: -0.25em; + left: 1.25em; + right: auto; + margin: 0em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); +} +.ui.top.right.pointing.dropdown .menu { + top: 100%; + bottom: auto; + right: 0%; + left: auto; + margin: 0.75em 0em 0em; +} +.ui.top.right.pointing.dropdown .menu:after { + top: -0.25em; + left: auto; + right: 1.25em; + margin: 0em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); +} +.ui.left.pointing.dropdown .menu { + top: 0%; + left: 100%; + right: auto; + margin: 0em 0em 0em 0.75em; +} +.ui.left.pointing.dropdown .menu:after { + top: 1em; + left: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.right.pointing.dropdown .menu { + top: 0%; + left: auto; + right: 100%; + margin: 0em 0.75em 0em 0em; +} +.ui.right.pointing.dropdown .menu:after { + top: 1em; + left: auto; + right: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + transform: rotate(135deg); +} +/* + * # Semantic - Modal + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Modal +*******************************/ +.ui.modal { + display: none; + position: fixed; + z-index: 1001; + top: 50%; + left: 50%; + text-align: left; + width: 800px; + margin-left: -400px; + background-color: #FFFFFF; + border: 1px solid #DDDDDD; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +/******************************* + Content +*******************************/ +/*-------------- + Close +---------------*/ +.ui.modal > .close { + cursor: pointer; + position: absolute; + opacity: 0.8; + font-size: 1.25em; + top: -1.75em; + right: -1.75em; + color: #FFFFFF; +} +.ui.modal > .close:hover { + opacity: 1; +} +/*-------------- + Header +---------------*/ +.ui.modal > .header { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding: 1.5rem 2rem; + font-size: 1.6em; + font-weight: bold; + -webkit-border-radius: 0.325em 0.325em 0px 0px; + -moz-border-radius: 0.325em 0.325em 0px 0px; + border-radius: 0.325em 0.325em 0px 0px; +} +/*-------------- + Content +---------------*/ +.ui.modal > .content { + display: table; + width: 100%; + position: relative; + padding: 2em; + background-color: #F4F4F4; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.modal > .content > .left { + display: table-cell; + padding-right: 5%; +} +.ui.modal > .content > .right { + display: table-cell; + padding-left: 5%; + vertical-align: middle; + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.modal > .content p { + line-height: 1.6; +} +/*-------------- + Actions +---------------*/ +.ui.modal .actions { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding: 1rem 2rem; + text-align: right; +} +.ui.modal .actions > .button { + margin-left: 0.75em; +} +/******************************* + Types +*******************************/ +.ui.basic.modal { + background-color: transparent; + border: none; + color: #FFFFFF; +} +.ui.basic.modal .content { + background-color: transparent; +} +/******************************* + Variations +*******************************/ +/* A modal that cannot fit on the page */ +.ui.modal.scrolling { + position: absolute; + margin-top: 100px; +} +/******************************* + States +*******************************/ +.ui.active.modal { + display: block; +} +/* + * # Semantic - Nag + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Nag +*******************************/ +.ui.nag { + display: none; + opacity: 0.95; + position: relative; + top: 0px; + left: 0%; + z-index: 101; + min-height: 0; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 0em; + line-height: 3em; + padding: 0em 1em; + background-color: #555555; + -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + font-size: 1em; + text-align: center; + color: rgba(255, 255, 255, 0.8); + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; + -webkit-transition: 0.2s background; + -moz-transition: 0.2s background; + -o-transition: 0.2s background; + -ms-transition: 0.2s background; + transition: 0.2s background; +} +a.ui.nag { + cursor: pointer; +} +.ui.nag > .title { + display: inline-block; + margin: 0em 0.5em; + color: #FFFFFF; +} +.ui.nag > .close.icon { + cursor: pointer; + opacity: 0.4; + position: absolute; + top: 50%; + right: 1em; + margin-top: -0.5em; + color: #FFFFFF; + -webkit-transition: 0.1s opacity; + -moz-transition: 0.1s opacity; + -o-transition: 0.1s opacity; + -ms-transition: 0.1s opacity; + transition: 0.1s opacity; +} +/******************************* + States +*******************************/ +/* Hover */ +.ui.nag:hover { + opacity: 1; +} +.ui.nag .close:hover { + opacity: 1; +} +/******************************* + Variations +*******************************/ +/*-------------- + Static +---------------*/ +.ui.overlay.nag { + position: absolute; + display: block; +} +/*-------------- + Fixed +---------------*/ +.ui.fixed.nag { + position: fixed; +} +/*-------------- + Bottom +---------------*/ +.ui.botton.nag { + -webkit-border-radius: 5px 5px 0px 0px; + -moz-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.fixed.bottom.nags, +.ui.fixed.bottom.nag { + top: auto; + bottom: 0px; +} +/*-------------- + White +---------------*/ +.ui.white.nags .nag, +.ui.white.nag { + background-color: #F1F1F1; + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); + color: #ACACAC; +} +.ui.white.nags .nag .close, +.ui.white.nags .nag .title, +.ui.white.nag .close, +.ui.white.nag .title { + color: #333333; +} +/******************************* + Groups +*******************************/ +.ui.nags .nag { + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} +/* + * # Semantic - Popup + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Popup +*******************************/ +.ui.popup { + display: none; + position: absolute; + top: 0px; + right: 0px; + z-index: 900; + border: 1px solid #DCDDDE; + max-width: 250px; + background-color: #FFFFFF; + padding: 0.8em 1.2em; + font-size: 0.875rem; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.7); + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + -webkit-box-shadow: 0px 1px 1px #DCDDDE; + -moz-box-shadow: 0px 1px 1px #DCDDDE; + box-shadow: 0px 1px 1px #DCDDDE; +} +.ui.popup .header { + padding: 0em 0em 0.5em; + font-size: 1.125em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup:before { + position: absolute; + content: ""; + width: 0.75em; + height: 0.75rem; + background-image: none; + background-color: #FFFFFF; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 1px 1px 1px #DCDDDE; + -moz-box-shadow: 1px 1px 1px #DCDDDE; + box-shadow: 1px 1px 1px #DCDDDE; +} +.ui.popup .ui.button { + width: 100%; +} +/******************************* + Types +*******************************/ +/*-------------- + Spacing +---------------*/ +.ui.popup { + margin: 0em; +} +.ui.popup.bottom { + margin: 0.75em 0em 0em; +} +.ui.popup.top { + margin: 0em 0em 0.75em; +} +.ui.popup.left.center { + margin: 0em 0.75em 0em 0em; +} +.ui.popup.right.center { + margin: 0em 0em 0em 0.75em; +} +.ui.popup.center { + margin-left: -1.25em; +} +/*-------------- + Pointer +---------------*/ +/*--- Below ---*/ +.ui.bottom.center.popup:before { + margin-left: -0.4em; + top: -0.4em; + left: 50%; + right: auto; + bottom: auto; + -webkit-box-shadow: -1px -1px 1px #dcddde; + -moz-box-shadow: -1px -1px 1px #dcddde; + box-shadow: -1px -1px 1px #dcddde; +} +.ui.bottom.left.popup:before { + top: -0.4em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px #dcddde; + -moz-box-shadow: -1px -1px 1px #dcddde; + box-shadow: -1px -1px 1px #dcddde; +} +.ui.bottom.right.popup:before { + top: -0.4em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px #dcddde; + -moz-box-shadow: -1px -1px 1px #dcddde; + box-shadow: -1px -1px 1px #dcddde; +} +/*--- Above ---*/ +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.4em; + left: 50%; + margin-left: -0.4em; +} +.ui.top.left.popup:before { + bottom: -0.4em; + left: 1em; + top: auto; + right: auto; + margin-left: 0em; +} +.ui.top.right.popup:before { + bottom: -0.4em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} +/*--- Left ---*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.35em; + bottom: auto; + left: auto; + margin-top: -0.4em; + -moz-box-shadow: 1px -1px 1px #dcddde; + -webkit-box-shadow: 1px -1px 1px #dcddde; + box-shadow: 1px -1px 1px #dcddde; +} +/*--- Right ---*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.35em; + bottom: auto; + right: auto; + margin-top: -0.4em; + -moz-box-shadow: -1px 1px 1px #dcddde; + -webkit-box-shadow: -1px 1px 1px #dcddde; + box-shadow: -1px 1px 1px #dcddde; +} +/******************************* + States +*******************************/ +.ui.loading.popup { + display: block; + visibility: hidden; +} +.ui.active.popup { + display: block; +} +/******************************* + Variations +*******************************/ +/*-------------- + Size +---------------*/ +.ui.small.popup { + font-size: 0.75rem; +} +.ui.large.popup { + font-size: 1rem; +} +/*-------------- + Colors +---------------*/ +/* Inverted colors */ +.ui.inverted.popup { + background-color: #333333; + border: none; + color: #FFFFFF; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: rgba(0, 0, 0, 0.2); + color: #FFFFFF; +} +.ui.inverted.popup:before { + background-color: #333333; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* + * # Semantic - Rating + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Rating +*******************************/ +.ui.rating { + display: inline-block; + vertical-align: middle; + margin: 0em 0.5em 0em 0em; +} +.ui.rating:last-child { + margin-right: 0em; +} +.ui.rating:after { + display: block; + content: ''; + visibility: hidden; + clear: both; + height: 0; +} +/* Icon */ +.ui.rating .icon { + cursor: default; + float: left; + margin: 0em; + width: 1em; + height: auto; + padding: 0em; + font-weight: normal; + font-style: normal; +} +.ui.rating .icon:after { + content: "\2605"; + color: rgba(0, 0, 0, 0.15); + -webkit-transition: color 0.3s ease, + opacity 0.3s ease + ; + -moz-transition: color 0.3s ease, + opacity 0.3s ease + ; + -ms-transition: color 0.3s ease, + opacity 0.3s ease + ; + -o-transition: color 0.3s ease, + opacity 0.3s ease + ; + transition: color 0.3s ease, + opacity 0.3s ease + ; +} +/******************************* + Types +*******************************/ +/*------------------- + Star +--------------------*/ +.ui.star.rating .icon { + width: 1em; + margin-right: 0.1em; +} +.ui.star.rating .icon:last-child { + margin: 0em; +} +.ui.star.rating .icon:after { + content: '\f006'; + font-family: 'Icons'; +} +.ui.star.rating .active.icon:after { + content: '\f005'; + font-family: 'Icons'; +} +/*------------------- + Heart +--------------------*/ +.ui.heart.rating .icon { + width: 1em; + margin-right: 0.1em; +} +.ui.heart.rating .icon:last-child { + margin: 0em; +} +.ui.heart.rating .icon:after { + content: '\f08a'; + font-family: 'Icons'; +} +.ui.heart.rating .active.icon:after { + content: '\f004'; + font-family: 'Icons'; + color: #EF404A; +} +.ui.heart.rating .hover.icon:after, +.ui.heart.rating .active.hover.icon:after { + color: #FF2733; +} +/******************************* + States +*******************************/ +/*------------------- + Active +--------------------*/ +/* active rating */ +.ui.active.rating .icon { + cursor: pointer; +} +/* active icons */ +.ui.rating .active.icon:after { + color: #FFCB08; +} +/*------------------- + Hover +--------------------*/ +/* rating */ +.ui.rating.hover .active.icon:after { + opacity: 0.5; +} +/* icon */ +.ui.rating .icon.hover:after, +.ui.rating .icon.hover.active:after { + opacity: 1; + color: #FFB70A; +} +/******************************* + Variations +*******************************/ +.ui.mini.rating { + font-size: 1rem; +} +.ui.small.rating { + font-size: 1.25rem; +} +.ui.rating { + font-size: 1.5rem; +} +.ui.large.rating { + font-size: 2rem; +} +/* + * # Semantic - Reveal + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Reveal +*******************************/ +.ui.reveal { + display: inline-block; + position: relative !important; + z-index: 2 !important; + font-size: 0em !important; +} +.ui.reveal > .content { + font-size: 1em !important; +} +.ui.reveal > .visible.content { + -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: 4 !important; + -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: 3 !important; +} +/*------------------ + Loose Coupling +-------------------*/ +.ui.reveal.button { + overflow: hidden; +} +/******************************* + Types +*******************************/ +/*-------------- + Slide +---------------*/ +.ui.slide.reveal { + position: relative !important; + display: block; + overflow: hidden !important; + white-space: nowrap; +} +.ui.slide.reveal > .content { + display: block; + float: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 0em; + -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -ms-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 100% !important; + width: 100% !important; +} +.ui.slide.reveal:hover > .visible.content { + left: -100% !important; +} +.ui.slide.reveal:hover > .hidden.content { + left: 0% !important; +} +.ui.right.slide.reveal > .visible.content { + left: 0%; +} +.ui.right.slide.reveal > .hidden.content { + left: auto !important; + right: 100% !important; +} +.ui.right.slide.reveal:hover > .visible.content { + left: 100% !important; + right: auto !important; +} +.ui.right.slide.reveal:hover > .hidden.content { + left: auto !important; + right: 0% !important; +} +.ui.up.slide.reveal > .visible.content { + top: 0% !important; + left: 0% !important; + right: auto !important; + bottom: auto !important; +} +.ui.up.slide.reveal > .hidden.content { + top: 100% !important; + left: 0% !important; + right: auto !important; + bottom: auto !important; +} +.ui.slide.up.reveal:hover > .visible.content { + top: -100% !important; + left: 0% !important; +} +.ui.slide.up.reveal:hover > .hidden.content { + top: 0% !important; + left: 0% !important; +} +.ui.down.slide.reveal > .visible.content { + top: auto !important; + right: auto !important; + bottom: auto !important; + bottom: 0% !important; +} +.ui.down.slide.reveal > .hidden.content { + top: auto !important; + right: auto !important; + bottom: 100% !important; + left: 0% !important; +} +.ui.slide.down.reveal:hover > .visible.content { + left: 0% !important; + bottom: -100% !important; +} +.ui.slide.down.reveal:hover > .hidden.content { + left: 0% !important; + bottom: 0% !important; +} +/*-------------- + Fade +---------------*/ +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} +/*-------------- + Move +---------------*/ +.ui.move.reveal > .visible.content, +.ui.move.left.reveal > .visible.content { + left: auto !important; + top: auto !important; + bottom: auto !important; + right: 0% !important; +} +.ui.move.reveal:hover > .visible.content, +.ui.move.left.reveal:hover > .visible.content { + right: 100% !important; +} +.ui.move.right.reveal > .visible.content { + right: auto !important; + top: auto !important; + bottom: auto !important; + left: 0% !important; +} +.ui.move.right.reveal:hover > .visible.content { + left: 100% !important; +} +.ui.move.up.reveal > .visible.content { + right: auto !important; + left: auto !important; + top: auto !important; + bottom: 0% !important; +} +.ui.move.up.reveal:hover > .visible.content { + bottom: 100% !important; +} +.ui.move.down.reveal > .visible.content { + right: auto !important; + left: auto !important; + top: 0% !important; + bottom: auto !important; +} +.ui.move.down.reveal:hover > .visible.content { + top: 100% !important; +} +/*-------------- + Rotate +---------------*/ +.ui.rotate.reveal > .visible.content { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; + -o-transition-duration: 0.8s; + -ms-transition-duration: 0.8s; + transition-duration: 0.8s; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + -moz-transform-origin: bottom right; + -o-transform-origin: bottom right; + -ms-transform-origin: bottom right; + transform-origin: bottom right; +} +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + -webkit-transform: rotate(110deg); + -moz-transform: rotate(110deg); + -o-transform: rotate(110deg); + -ms-transform: rotate(110deg); + transform: rotate(110deg); +} +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + -moz-transform-origin: bottom left; + -o-transform-origin: bottom left; + -ms-transform-origin: bottom left; + transform-origin: bottom left; +} +.ui.rotate.left.reveal:hover > .visible.content { + -webkit-transform: rotate(-110deg); + -moz-transform: rotate(-110deg); + -o-transform: rotate(-110deg); + -ms-transform: rotate(-110deg); + transform: rotate(-110deg); +} +/******************************* + States +*******************************/ +.ui.disabled.reveal { + opacity: 1 !important; +} +.ui.disabled.reveal > .content { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + -ms-transition: none !important; + transition: none !important; +} +.ui.disabled.reveal:hover > .visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.content { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Masked +---------------*/ +.ui.masked.reveal { + overflow: hidden; +} +/*-------------- + Instant +---------------*/ +.ui.instant.reveal > .content { + -webkit-transition-delay: 0s !important; + -moz-transition-delay: 0s !important; + -o-transition-delay: 0s !important; + -ms-transition-delay: 0s !important; + transition-delay: 0s !important; +} +/* + * # Semantic - Search + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Search +*******************************/ +.ui.search { + position: relative; + text-shadow: none; + font-style: normal; + font-weight: normal; +} +.ui.search input { + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*-------------- + Button +---------------*/ +.ui.search > .button { + position: relative; + z-index: 2; + float: right; + margin: 0px 0px 0px -15px; + padding: 6px 15px 7px; + -webkit-border-radius: 0px 15px 15px 0px; + -moz-border-radius: 0px 15px 15px 0px; + border-radius: 0px 15px 15px 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*-------------- + Results +---------------*/ +.ui.search .results { + display: none; + position: absolute; + z-index: 999; + top: 100%; + left: 0px; + overflow: hidden; + background-color: #FFFFFF; + margin-top: 0.5em; + width: 380px; + font-size: 0.875em; + line-height: 1.2; + color: #555555; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; +} +.ui.search .result { + cursor: pointer; + overflow: hidden; + padding: 0.5em 1em; +} +.ui.search .result:first-child { + border-top: none; +} +.ui.search .result .image { + background: #F0F0F0; + margin-right: 10px; + float: left; + overflow: hidden; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + width: 38px; + height: 38px; +} +.ui.search .result .image img { + display: block; + width: 38px; + height: 38px; +} +.ui.search .result .image ~ .info { + float: none; + margin-left: 50px; +} +.ui.search .result .info { + float: left; +} +.ui.search .result .title { + font-weight: bold; + color: rgba(0, 0, 0, 0.8); +} +.ui.search .result .description { + color: rgba(0, 0, 0, 0.6); +} +.ui.search .result .price { + float: right; + color: #5BBD72; + font-weight: bold; +} +/*-------------- + Message +---------------*/ +.ui.search .message { + padding: 1em; +} +.ui.search .message .text .title { + margin: 0em 0em 0.5rem; + font-size: 1.25rem; + font-weight: bold; + color: rgba(0, 0, 0, 0.8); +} +.ui.search .message .text .description { + margin: 0em; + font-size: 1rem; + color: rgba(0, 0, 0, 0.5); +} +/*-------------- + Categories +---------------*/ +.ui.search .results .category { + background-color: #FAFAFA; + border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-transition: background 0.2s ease-in; + -moz-transition: background 0.2s ease-in; + -o-transition: background 0.2s ease-in; + -ms-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; +} +.ui.search .results .category:first-child { + border-top: none; +} +.ui.search .results .category > .name { + float: left; + padding: 12px 0px 0px 8px; + font-weight: bold; + color: #777777; + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); +} +.ui.search .results .category .result { + background-color: #FFFFFF; + margin-left: 80px; + border-left: 1px solid rgba(0, 0, 0, 0.1); +} +/* View All Results */ +.ui.search .all { + display: block; + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: #FAFAFA; + height: 2em; + line-height: 2em; + color: rgba(0, 0, 0, 0.6); + font-weight: bold; + text-align: center; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.search .result:hover, +.ui.search .category .result:hover { + background-color: #F8F8F8; +} +.ui.search .all:hover { + background-color: #F0F0F0; +} +/*-------------- + Loading +---------------*/ +.ui.search.loading .input .icon { + background: url('../build/uncompressed/images/loader-mini.gif') no-repeat 50% 50%; +} +.ui.search.loading .input .icon:before, +.ui.search.loading .input .icon:after { + display: none; +} +/*-------------- + Active +---------------*/ +.ui.search .results .category.active { + background-color: #F1F1F1; +} +.ui.search .results .category.active > .name { + color: #333333; +} +.ui.search .result.active, +.ui.search .category .result.active { + background-color: #FBFBFB; +} +.ui.search .result.active .title { + color: #000000; +} +.ui.search .result.active .description { + color: #555555; +} +/******************************* + Variations +*******************************/ +/* Large */ +.ui.search .large.result .image, +.ui.search .large.result .image img { + width: 50px; + height: 50px; +} +.ui.search .large.results .indented.info { + margin-left: 65px; +} +.ui.search .large.results .info .title { + font-size: 16px; +} +.ui.search .large.results .info .description { + font-size: 11px; +} +/* + * # Semantic - Shape + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Shape +*******************************/ +.ui.shape { + position: relative; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; +} +.ui.shape .sides { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.ui.shape .side { + opacity: 1; + width: 100%; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +.ui.shape .side { + display: none; +} +/******************************* + States +*******************************/ +/*-------------- + Animating +---------------*/ +.ui.shape.animating .sides { + position: absolute; +} +.ui.shape .animating.side { + position: absolute; + width: 100%; + top: 0px; + left: 0px; + z-index: 100; +} +.ui.shape .hidden.side { + opacity: 0.4; +} +/*-------------- + CSS +---------------*/ +.ui.shape.css { + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + -ms-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +.ui.shape.css .sides { + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + -ms-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +.ui.shape.css .side { + -webkit-transition: opacity 0.6s ease-in-out; + -moz-transition: opacity 0.6s ease-in-out; + -o-transition: opacity 0.6s ease-in-out; + -ms-transition: opacity 0.6s ease-in-out; + transition: opacity 0.6s ease-in-out; +} +/*-------------- + Active +---------------*/ +.ui.shape .active.side { + display: block; +} +/* + * # Semantic - Sidebar + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Sidebar +*******************************/ +body { + -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease; + -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease; + -o-transition: margin 0.3s ease, + transform 0.3s ease + ; + -ms-transition: margin 0.3s ease, + transform 0.3s ease + ; + transition: margin 0.3s ease, + transform 0.3s ease + ; +} +.ui.sidebar { + position: fixed; + margin: 0 !important; + width: 275px !important; + height: 100% !important; + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + border-radius: 0px !important; + -ms-overflow-y: auto; + overflow-y: auto; + top: 0px; + left: 0px; + z-index: 999; + -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -o-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease; + transition: margin-left 0.3s ease, margin-top 0.3s ease; +} +/******************************* + Types +*******************************/ +.ui.sidebar { + margin-left: -275px !important; +} +.ui.right.sidebar { + left: 100%; + margin: 0px !important; +} +.ui.top.sidebar { + margin: -40px 0px 0px 0px !important; + width: 100% !important; + height: 40px !important; +} +.ui.bottom.sidebar { + width: 100% !important; + height: 40px !important; + top: 100%; + margin: 0px !important; +} +/******************************* + States +*******************************/ +.ui.active.sidebar { + margin-left: 0px !important; +} +.ui.active.right.sidebar { + margin-left: -275px !important; +} +.ui.active.top.sidebar { + margin-top: 0px !important; +} +.ui.active.bottom.sidebar { + margin-top: -40px !important; +} +/******************************* + Variations +*******************************/ +.ui.floating.sidebar { + -webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); +} +.ui.right.floating.sidebar { + -webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); +} +.ui.top.floating.sidebar { + -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); +} +.ui.bottom.floating.sidebar { + -webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); +} +/* + * # Semantic - Tab + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + UI Tabs +*******************************/ +.ui.tab { + display: none; +} +/******************************* + States +*******************************/ +/*-------------------- + Active +---------------------*/ +.ui.tab.active, +.ui.tab.open { + display: block; +} +/*-------------------- + Loading +---------------------*/ +.ui.tab.loading { + position: relative; + overflow: hidden; + display: block; + min-height: 250px; + text-indent: -10000px; +} +.ui.tab.loading * { + position: relative !important; + left: -10000px !important; +} +.ui.tab.loading:after { + position: absolute; + top: 50px; + left: 50%; + content: 'Loading...'; + margin-left: -32px; + text-indent: 5px; + color: rgba(0, 0, 0, 0.4); + width: 100%; + height: 100%; + padding-top: 75px; + background: url('../build/uncompressed/images/loader-large.gif') no-repeat 0px 0px; + visibility: visible; +} +/******************************* + Semantic - Transition + Author: Jack Lukic + + CSS animation definitions for + transition module + +*******************************/ +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css +*/ +.ui.transition { + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-animation-iteration-count: 1; + -moz-animation-iteration-count: 1; + -ms-animation-iteration-count: 1; + -o-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -ms-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + animation-timing-function: ease; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); +} +/******************************* + States +*******************************/ +/* Loading */ +.ui.loading.transition { + position: absolute; + top: -999999px; + left: -99999px; +} +/* Hidden */ +.ui.hidden.transition { + display: none; +} +/* Visible */ +.ui.visible.transition { + display: block; + visibility: visible; +} +/* Direction */ +.ui.out.transition { + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + -o-animation-direction: reverse; + animation-direction: reverse; +} +/* Disabled */ +.ui.disabled.transition { + -webkit-animation-play-state: paused; + -moz-animation-play-state: paused; + -ms-animation-play-state: paused; + -o-animation-play-state: paused; + animation-play-state: paused; +} +/******************************* + Variations +*******************************/ +.ui.looping.transition { + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +/******************************* + Types +*******************************/ +/*-------------- + Emphasis +---------------*/ +.ui.flash.transition { + -webkit-animation-name: flash; + -moz-animation-name: flash; + -o-animation-name: flash; + animation-name: flash; +} +.ui.shake.transition { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} +.ui.bounce.transition { + -webkit-animation-name: bounce; + -moz-animation-name: bounce; + -o-animation-name: bounce; + animation-name: bounce; +} +.ui.tada.transition { + -webkit-animation-name: tada; + -moz-animation-name: tada; + -o-animation-name: tada; + animation-name: tada; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +.ui.pulse.transition { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + -o-animation-name: pulse; + animation-name: pulse; +} +/*-------------- + Flips +---------------*/ +.ui.flip.transition.in, +.ui.flip.transition.out { + -webkit-perspective: 2000px; + perspective: 2000px; +} +.ui.horizontal.flip.transition.in, +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlip; + -moz-animation-name: horizontalFlip; + -o-animation-name: horizontalFlip; + animation-name: horizontalFlip; +} +.ui.vertical.flip.transition.in, +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlip; + -moz-animation-name: verticalFlip; + -o-animation-name: verticalFlip; + animation-name: verticalFlip; +} +/*-------------- + Fades +---------------*/ +.ui.fade.transition.in, +.ui.fade.transition.out { + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; +} +.ui.fade.up.transition.in { + -webkit-animation-name: fadeUp; + -moz-animation-name: fadeUp; + -o-animation-name: fadeUp; + animation-name: fadeUp; +} +.ui.fade.up.transition.out { + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; +} +.ui.fade.down.transition.in { + -webkit-animation-name: fadeDown; + -moz-animation-name: fadeDown; + -o-animation-name: fadeDown; + animation-name: fadeDown; +} +.ui.fade.down.transition.out { + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; +} +/*-------------- + Scale +---------------*/ +.ui.scale.transition.in, +.ui.scale.transition.out { + -webkit-animation-name: scale; + -moz-animation-name: scale; + -o-animation-name: scale; + animation-name: scale; +} +/*-------------- + Slide +---------------*/ +.ui.slide.down.transition.in, +.ui.slide.down.transition.out { + -webkit-animation-name: slide; + -moz-animation-name: slide; + -o-animation-name: slide; + animation-name: slide; + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} +.ui.slide.up.transition.in, +.ui.slide.up.transition.out { + -webkit-animation-name: slide; + -moz-animation-name: slide; + -o-animation-name: slide; + animation-name: slide; + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} +@-moz-keyframes slide { + 0% { + opacity: 0; + -moz-transform: scaleY(0); + } + 100% { + opacity: 1; + -moz-transform: scaleY(1); + } +} +@-webkit-keyframes slide { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + } +} +@keyframes slide { + 0% { + opacity: 0; + transform: scaleY(0); + } + 100% { + opacity: 1; + transform: scaleY(1); + } +} +/******************************* + Animations +*******************************/ +/*-------------- + Emphasis +---------------*/ +/* Flash */ +@-webkit-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@-moz-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@-o-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +/* Shake */ +@-webkit-keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + } +} +@-moz-keyframes shake { + 0%, + 100% { + -moz-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -moz-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -moz-transform: translateX(10px); + } +} +@-o-keyframes shake { + 0%, + 100% { + -o-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -o-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -o-transform: translateX(10px); + } +} +@keyframes shake { + 0%, + 100% { + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + transform: translateX(10px); + } +} +/* Bounce */ +@-webkit-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + } +} +@-moz-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -moz-transform: translateY(0); + } + 40% { + -moz-transform: translateY(-30px); + } + 60% { + -moz-transform: translateY(-15px); + } +} +@-o-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -o-transform: translateY(0); + } + 40% { + -o-transform: translateY(-30px); + } + 60% { + -o-transform: translateY(-15px); + } +} +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} +/* Tada */ +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + } +} +@-moz-keyframes tada { + 0% { + -moz-transform: scale(1); + } + 10%, + 20% { + -moz-transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -moz-transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -moz-transform: scale(1.1) rotate(-3deg); + } + 100% { + -moz-transform: scale(1) rotate(0); + } +} +@-o-keyframes tada { + 0% { + -o-transform: scale(1); + } + 10%, + 20% { + -o-transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -o-transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -o-transform: scale(1.1) rotate(-3deg); + } + 100% { + -o-transform: scale(1) rotate(0); + } +} +@keyframes tada { + 0% { + transform: scale(1); + } + 10%, + 20% { + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + transform: scale(1.1) rotate(-3deg); + } + 100% { + transform: scale(1) rotate(0); + } +} +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + } +} +@-o-keyframes pulse { + 0% { + -o-transform: scale(1); + opacity: 1; + } + 50% { + -o-transform: scale(0.9); + opacity: 0.7; + } + 100% { + -o-transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes pulse { + 0% { + -moz-transform: scale(1); + opacity: 1; + } + 50% { + -moz-transform: scale(0.9); + opacity: 0.7; + } + 100% { + -moz-transform: scale(1); + opacity: 1; + } +} +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(0.9); + opacity: 0.7; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +/*-------------- + Flips +---------------*/ +/* Horizontal */ +@-webkit-keyframes horizontalFlip { + 0% { + -webkit-transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(0deg); + opacity: 1; + } +} +@-moz-keyframes horizontalFlip { + 0% { + -moz-transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -moz-transform: rotateY(0deg); + opacity: 1; + } +} +@-o-keyframes horizontalFlip { + 0% { + -o-transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -o-transform: rotateY(0deg); + opacity: 1; + } +} +@keyframes horizontalFlip { + 0% { + transform: rotateY(-90deg); + opacity: 0; + } + 100% { + transform: rotateY(0deg); + opacity: 1; + } +} +/* Horizontal */ +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(90deg); + opacity: 1; + } +} +@-moz-keyframes horizontalFlipOut { + 0% { + -moz-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -moz-transform: rotateY(90deg); + opacity: 1; + } +} +@-o-keyframes horizontalFlipOut { + 0% { + -o-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -o-transform: rotateY(90deg); + opacity: 1; + } +} +@keyframes horizontalFlipOut { + 0% { + transform: rotateY(0deg); + opacity: 0; + } + 100% { + transform: rotateY(90deg); + opacity: 1; + } +} +/* Vertical */ +@-webkit-keyframes verticalFlip { + 0% { + -webkit-transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateX(0deg); + opacity: 1; + } +} +@-moz-keyframes verticalFlip { + 0% { + -moz-transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -moz-transform: rotateX(0deg); + opacity: 1; + } +} +@-o-keyframes verticalFlip { + 0% { + -o-transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -o-transform: rotateX(0deg); + opacity: 1; + } +} +@keyframes verticalFlip { + 0% { + transform: rotateX(-90deg); + opacity: 0; + } + 100% { + transform: rotateX(0deg); + opacity: 1; + } +} +/*-------------- + Fades +---------------*/ +/* Fade */ +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-moz-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-o-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +/* Fade Up */ +@-webkit-keyframes fadeUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeUp { + 0% { + opacity: 0; + -o-transform: translateY(20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/* Fade Down */ +@-webkit-keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/*-------------- + Scale +---------------*/ +/* Scale */ +@-webkit-keyframes scale { + 0% { + opacity: 0; + -webkit-transform: scale(0.7); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + } +} +@-moz-keyframes scale { + 0% { + opacity: 0; + -moz-transform: scale(0.7); + } + 100% { + opacity: 1; + -moz-transform: scale(1); + } +} +@-o-keyframes scale { + 0% { + opacity: 0; + -o-transform: scale(0.7); + } + 100% { + opacity: 1; + -o-transform: scale(1); + } +} +@keyframes scale { + 0% { + opacity: 0; + transform: scale(0.7); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +/* + * # Semantic - Video + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Video +*******************************/ +.ui.video { + position: relative; + max-width: 100%; +} +/*-------------- + Content +---------------*/ +/* Placeholder Image */ +.ui.video .placeholder { + background-color: #333333; +} +/* Play Icon Overlay */ +.ui.video .play { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + z-index: 10; + width: 100%; + height: 100%; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + opacity: 0.6; + -webkit-transition: opacity 0.3s; + -moz-transition: opacity 0.3s; + -o-transition: opacity 0.3s; + -ms-transition: opacity 0.3s; + transition: opacity 0.3s; +} +.ui.video .play.icon:before { + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + font-size: 6rem; + margin: -3rem 0em 0em -3rem; + color: #FFFFFF; + text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); +} +.ui.video .placeholder { + display: block; + width: 100%; + height: 100%; +} +/* IFrame Embed */ +.ui.video .embed { + display: none; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.video .play:hover { + opacity: 1; +} +/*-------------- + Active +---------------*/ +.ui.video.active .play, +.ui.video.active .placeholder { + display: none; +} +.ui.video.active .embed { + display: block; +} +/* + * # Semantic Comment View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Standard +*******************************/ +/*-------------- + Comments +---------------*/ +.ui.comments a { + cursor: pointer; +} +/*-------------- + Comment +---------------*/ +.ui.comments .comment { + position: relative; + margin-top: 0.5em; + padding-top: 0.5em; +} +.ui.comments .comment:first-child { + margin-top: 0em; + padding-top: 0em; +} +/*-------------------- + Avatar (Optional) +---------------------*/ +.ui.comments .comment .avatar { + display: block; + float: left; + width: 4em; +} +.ui.comments .comment .avatar img { + display: block; + margin: 0em auto; + width: 3em; + height: 3em; + border-radius: 500px; +} +/*-------------- + Content +---------------*/ +.ui.comments .comment > .content, +.ui.comments .comment > .avatar { + display: block; +} +.ui.comments .comment .avatar ~ .content { + padding: 0em 1em; +} +/* If there is an avatar move content over */ +.ui.comments .comment > .avatar ~ .content { + padding-top: 0.25em; + margin-left: 3.5em; +} +.ui.comments .comment .metadata { + display: inline-block; + margin-left: 0.3em; + color: rgba(0, 0, 0, 0.4); +} +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0em 0.3em 0em 0em; +} +/*-------------------- + Comment Text +---------------------*/ +.ui.comments .comment .text { + margin: 0.25em 0em 0.5em; + word-wrap: break-word; +} +/*-------------------- + User Actions +---------------------*/ +.ui.comments .comment .actions { + font-size: 0.9em; +} +.ui.comments .comment .actions a { + display: inline-block; + margin: 0em 0.3em 0em 0em; + color: rgba(0, 0, 0, 0.3); +} +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: rgba(0, 0, 0, 0.6); +} +/*-------------------- + Reply Form +---------------------*/ +.ui.comments .reply.form { + margin-top: 0.75em; + width: 100%; + max-width: 30em; +} +.ui.comments .comment .reply.form { + margin-left: 2em; +} +.ui.comments > .reply.form { + margin-top: 1.5em; + max-width: 40em; +} +.ui.comments .reply.form textarea { + height: 12em; +} +/*-------------------- + Nested Comments +---------------------*/ +.ui.comments .comment .comments { + margin-top: 0.5em; + padding-top: 0.5em; + padding-bottom: 1em; +} +.ui.comments .comment .comments:before { + position: absolute; + top: 0px; + left: 0px; +} +/* One Deep */ +.ui.comments > .comment .comments { + margin-left: 2em; +} +/* Two Deep */ +.ui.comments > .comment > .comments > .comment > .comments { + margin-left: 1.75em; +} +/* Three Deep */ +.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { + margin-left: 1.5em; +} +/* Four Deep or more */ +.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { + margin-left: 0.5em; +} +/******************************* + Variations +*******************************/ +/*-------------------- + Threaded +---------------------*/ +.ui.threaded.comments .comment .comments { + margin-left: 2em !important; + padding-left: 2em !important; + -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); +} +/*-------------------- + Minimal +---------------------*/ +.ui.minimal.comments .comment .actions { + opacity: 0; + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + -o-transition: opacity 0.1s ease-out; + -ms-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + -webkit-transition-delay: 0.1s; + -moz-transition-delay: 0.1s; + -o-transition-delay: 0.1s; + -ms-transition-delay: 0.1s; + transition-delay: 0.1s; +} +.ui.minimal.comments .comment > .content:hover > .actions { + opacity: 1; +} +/*-------------------- + Sizes +---------------------*/ +.ui.small.comments { + font-size: 0.875em; +} +/* + * # Activity Feed View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: May 22, 2013 + */ +/******************************* + Activity Feed +*******************************/ +.ui.feed a { + cursor: pointer; +} +.ui.feed, +.ui.feed .event, +.ui.feed .label, +.ui.feed .content, +.ui.feed .extra { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/******************************* + Content +*******************************/ +/* Event */ +.ui.feed .event { + width: 100%; + display: table; + padding: 1em; +} +.ui.feed .event:first-child { + border-top: 0px; +} +.ui.feed .event:last-child { + margin-bottom: 1em; +} +/* Event Label */ +.ui.feed .label { + width: 3em; + display: table-cell; + vertical-align: top; + text-align: left; +} +.ui.feed .label .icon { + font-size: 1.5em; + padding: 0.5em; + margin: 0em; +} +.ui.feed .label img { + width: 3em; + margin: 0em; + border-radius: 50em; +} +.ui.feed .label + .content { + padding: 0.75em 1em 0em; +} +/* Content */ +.ui.feed .content { + display: table-cell; + vertical-align: top; + text-align: left; + word-wrap: break-word; +} +/* Date */ +.ui.feed .content .date { + float: right; + padding-left: 1em; + color: rgba(0, 0, 0, 0.4); +} +/* Summary */ +.ui.feed .content .summary { + color: rgba(0, 0, 0, 0.75); +} +.ui.feed .content .summary img { + display: inline-block; + margin-right: 0.25em; + width: 4em; + border-radius: 500px; +} +/* Additional Information */ +.ui.feed .content .extra { + margin: 1em 0em 0em; + padding: 0.5em 0em 0em; + color: rgba(0, 0, 0, 0.5); +} +.ui.feed .content .extra.images img { + display: inline-block; + margin-right: 0.25em; + width: 6em; +} +.ui.feed .content .extra.text { + padding: 0.5em 1em; + border-left: 0.2em solid rgba(0, 0, 0, 0.1); +} +/******************************* + Variations +*******************************/ +.ui.small.feed { + font-size: 0.875em; +} +.ui.small.feed .label img { + width: 2.5em; +} +.ui.small.feed .label .icon { + font-size: 1.25em; +} +.ui.feed .event { + padding: 0.75em 0em; +} +.ui.small.feed .label + .content { + padding: 0.5em 0.5em 0; +} +.ui.small.feed .content .extra.images img { + width: 5em; +} +.ui.small.feed .content .extra { + margin: 0.5em 0em 0em; +} +.ui.small.feed .content .extra.text { + padding: 0.25em 0.5em; +} +/* + * # Semantic Item View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Standard +*******************************/ +/*-------------- + Items +---------------*/ +.ui.items { + margin: 1em 0em 0em; +} +.ui.items:first-child { + margin-top: 0em; +} +.ui.items:last-child { + margin-bottom: -1em; +} +/* Force Clearing */ +.ui.items:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +/*-------------- + Item +---------------*/ +.ui.items > .row > .item, +.ui.items > .item { + display: block; + float: left; + position: relative; + top: 0px; + width: 316px; + min-height: 375px; + margin: 0em 0.5em 2.5em; + padding: 0em; + background-color: #FFFFFF; + line-height: 1.2; + font-size: 1em; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); + -moz-border-radius: 0.33em; + -webkit-border-radius: 0.33em; + border-radius: 0.33em; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; + padding: 0.5em; +} +.ui.items a.item, +.ui.items .item a { + cursor: pointer; +} +.ui.items .item, +.ui.items .item > .image, +.ui.items .item > .image .overlay, +.ui.items .item > .content, +.ui.items .item > .content > .meta, +.ui.items .item > .content > .extra { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------- + Images +---------------*/ +.ui.items .item > .image { + display: block; + position: relative; + background-color: rgba(0, 0, 0, 0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +.ui.items .item > .image > img { + position: relative; + display: block; + width: 100%; + overflow: hidden; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +/*-------------- + Content +---------------*/ +.ui.items .item > .content { + padding: 0.75em 0.5em; +} +.ui.items .item > .content > .name { + display: block; + font-size: 1.25em; + font-weight: bold; + margin-bottom: 0.2em; + color: rgba(0, 0, 0, 0.7); +} +.ui.items .item > .content > .description { + clear: both; + margin: 0em 0em; + color: rgba(0, 0, 0, 0.45); +} +.ui.items .item > .content > .description p { + margin: 0em 0em 0.2em; +} +.ui.items .item > .content > .description p:last-child { + margin-bottom: 0em; +} +/*-------------- + Meta +---------------*/ +.ui.items .item .meta { + float: right; + color: rgba(0, 0, 0, 0.35); +} +.ui.items .item > .content > .meta + .name { + float: left; +} +/*-------------- + Labels +---------------*/ +/*-----star----- */ +/* hover */ +.ui.items .item .star.label:hover::after { + border-right-color: #F6EFC3; +} +.ui.items .item .star.label:hover::after { + border-top-color: #F6EFC3; +} +.ui.items .item .star.label:hover .icon { + color: #ac9400; +} +/* active */ +.ui.items .item .star.label.active::after { + border-right-color: #F6EFC3; +} +.ui.items .item .star.label.active::after { + border-top-color: #F6EFC3; +} +.ui.items .item .star.label.active .icon { + color: #ac9400; +} +/*-----like----- */ +/* hover */ +.ui.items .item .like.label:hover::after { + border-right-color: #F5E1E2; +} +.ui.items .item .like.label.active::after { + border-top-color: #F5E1E2; +} +.ui.items .item .like.label:hover .icon { + color: #ef404a; +} +/* active */ +.ui.items .item .like.label.active::after { + border-right-color: #F5E1E2; +} +.ui.items .item .like.label.active::after { + border-top-color: #F5E1E2; +} +.ui.items .item .like.label.active .icon { + color: #ef404a; +} +/*-------------- + Extra +---------------*/ +.ui.items .item .extra { + position: absolute; + width: 100%; + padding: 0em 0.5em; + bottom: -2em; + left: 0em; + height: 1.5em; + color: rgba(0, 0, 0, 0.25); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.items .item .extra > img { + display: inline-block; + border-radius: 500px 500px 500px 500px; + margin-right: 0.25em; + vertical-align: middle; + width: 2em; +} +.ui.items .item .extra .left { + float: left; +} +.ui.items .item .extra .right { + float: right; +} +/******************************* + States +*******************************/ +.ui.items .item:hover { + cursor: pointer; + z-index: 5; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); +} +.ui.items .item:hover .extra { + color: rgba(0, 0, 0, 0.5); +} +.ui.items .item:nth-of-type(n+1):hover { + border-bottom-color: #6ECFF5 !important; +} +.ui.items .item:nth-of-type(n+2):hover { + border-bottom-color: #5C6166 !important; +} +.ui.items .item:nth-of-type(n+3):hover { + border-bottom-color: #A1CF64 !important; +} +.ui.items .item:nth-of-type(n+4):hover { + border-bottom-color: #D95C5C !important; +} +.ui.items .item:nth-of-type(n+5):hover { + border-bottom-color: #564F8A !important; +} +.ui.items .item:nth-of-type(n+6):hover { + border-bottom-color: #00B5AD !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Connected +---------------*/ +.ui.connected.items { + display: table; + width: 100%; + margin-left: 0em !important; + margin-right: 0em !important; +} +.ui.connected.items > .row > .item, +.ui.connected.items > .item { + float: none; + display: table-cell; + vertical-align: top; + height: auto; + border-radius: 0px; + margin: 0em; + width: 33.33%; +} +.ui.connected.items > .row { + display: table; + margin: 0.5em 0em; +} +.ui.connected.items > .row:first-child { + margin-top: 0em; +} +/* Borders */ +.ui.connected.items > .item, +.ui.connected.items > .row:last-child > .item { + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); +} +.ui.connected.items > .row:last-child > .item:first-child, +.ui.connected.items > .item:first-child { + border-radius: 0em 0em 0em 0.33em; +} +.ui.connected.items > .row:last-child > .item:last-child, +.ui.connected.items > .item:last-child { + border-radius: 0em 0em 0.33em 0em; +} +/* Hover */ +.ui.connected.items .item:hover { + border-bottom-width: 0.2em; +} +/* Item Count */ +.ui.one.connected.items > .row > .item, +.ui.one.connected.items > .item { + width: 50%; + padding-left: 2%; + padding-right: 2%; +} +.ui.two.connected.items > .row > .item, +.ui.two.connected.items > .item { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} +.ui.three.connected.items > .row > .item, +.ui.three.connected.items > .item { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} +.ui.four.connected.items > .row > .item, +.ui.four.connected.items > .item { + width: 25%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.five.connected.items > .row > .item, +.ui.five.connected.items > .item { + width: 20%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.six.connected.items > .row > .item, +.ui.six.connected.items > .item { + width: 16.66%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.seven.connected.items > .row > .item, +.ui.seven.connected.items > .item { + width: 14.28%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.eight.connected.items > .row > .item, +.ui.eight.connected.items > .item { + width: 12.5%; + padding-left: 0.25%; + padding-right: 0.25%; +} +.ui.nine.connected.items > .row > .item, +.ui.nine.connected.items > .item { + width: 11.11%; + padding-left: 0.25%; + padding-right: 0.25%; +} +.ui.ten.connected.items > .row > .item, +.ui.ten.connected.items > .item { + width: 10%; + padding-left: 0.2%; + padding-right: 0.2%; +} +.ui.eleven.connected.items > .row > .item, +.ui.eleven.connected.items > .item { + width: 9.09%; + padding-left: 0.2%; + padding-right: 0.2%; +} +.ui.twelve.connected.items > .row > .item, +.ui.twelve.connected.items > .item { + width: 8.3333%; + padding-left: 0.1%; + padding-right: 0.1%; +} +/*------------------- + Responsive +--------------------*/ +@media only screen and (max-width: 768px) { + .ui.stackable.items { + display: block !important; + } + .ui.stackable.items > .item, + .ui.stackable.items > .row > .item { + margin: 0em 2em 1em !important; + display: block !important; + height: auto !important; + width: auto !important; + padding: 0% !important; + } +} +/*-------------------- + Horizontal +---------------------*/ +.ui.horizontal.items > .item, +.ui.items > .horizontal.item { + display: table; +} +.ui.horizontal.items > .item > .image .ui.items > .horizontal.item > .image { + display: table-cell; + width: 50%; +} +.ui.horizontal.items > .item > .image + .content, +.ui.items > .horizontal.item > .image + .content { + width: 50%; + display: table-cell; +} +.ui.horizontal.items > .item > .content, +.ui.items > .horizontal.item > .content { + padding: 1% 1.7% 11% 3%; + vertical-align: top; +} +.ui.horizontal.items > .item > .meta, +.ui.items > .horizontal.item > .meta { + position: absolute; + padding: 0%; + bottom: 7%; + left: 3%; + width: 94%; +} +.ui.horizontal.items > .item > .image + .content + .meta, +.ui.items > .horizontal.item > .image + .content + .meta { + bottom: 7%; + left: 53%; + width: 44%; +} +.ui.horizontal.items > .item .avatar, +.ui.items > .horizontal.item .avatar { + width: 11.5%; +} +.ui.items > .item .avatar { + max-width: 25px; +} +/*-------------- + Item Count +---------------*/ +.ui.one.items { + margin-left: -2%; + margin-right: -2%; +} +.ui.one.items > .item { + width: 100%; + margin-left: 2%; + margin-right: 2%; +} +.ui.two.items { + margin-left: -1%; + margin-right: -1%; +} +.ui.two.items > .item { + width: 48%; + margin-left: 1%; + margin-right: 1%; +} +.ui.two.items > .item:nth-child(2n+1) { + clear: left; +} +.ui.three.items { + margin-left: -1%; + margin-right: -1%; +} +.ui.three.items > .item { + width: 31.333%; + margin-left: 1%; + margin-right: 1%; +} +.ui.three.items > .item:nth-child(3n+1) { + clear: left; +} +.ui.four.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.four.items > .item { + width: 24%; + margin-left: 0.5%; + margin-right: 0.5%; +} +.ui.four.items > .item:nth-child(4n+1) { + clear: left; +} +.ui.five.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.five.items > .item { + width: 19%; + margin-left: 0.5%; + margin-right: 0.5%; +} +.ui.five.items > .item:nth-child(5n+1) { + clear: left; +} +.ui.six.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.six.items > .item { + width: 15.66%; + margin-left: 0.5%; + margin-right: 0.5%; +} +.ui.six.items > .item:nth-child(6n+1) { + clear: left; +} +.ui.seven.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.seven.items > .item { + width: 13.28%; + margin-left: 0.5%; + margin-right: 0.5%; + font-size: 11px; +} +.ui.seven.items > .item:nth-child(7n+1) { + clear: left; +} +.ui.eight.items { + margin-left: -0.25%; + margin-right: -0.25%; +} +.ui.eight.items > .item { + width: 12.0%; + margin-left: 0.25%; + margin-right: 0.25%; + font-size: 11px; +} +.ui.eight.items > .item:nth-child(8n+1) { + clear: left; +} +.ui.nine.items { + margin-left: -0.25%; + margin-right: -0.25%; +} +.ui.nine.items > .item { + width: 10.61%; + margin-left: 0.25%; + margin-right: 0.25%; + font-size: 10px; +} +.ui.nine.items > .item:nth-child(9n+1) { + clear: left; +} +.ui.ten.items { + margin-left: -0.2%; + margin-right: -0.2%; +} +.ui.ten.items > .item { + width: 9.6%; + margin-left: 0.2%; + margin-right: 0.2%; + font-size: 10px; +} +.ui.ten.items > .item:nth-child(10n+1) { + clear: left; +} +.ui.eleven.items { + margin-left: -0.2%; + margin-right: -0.2%; +} +.ui.eleven.items > .item { + width: 8.69%; + margin-left: 0.2%; + margin-right: 0.2%; + font-size: 9px; +} +.ui.eleven.items > .item:nth-child(11n+1) { + clear: left; +} +.ui.twelve.items { + margin-left: -0.1%; + margin-right: -0.1%; +} +.ui.twelve.items > .item { + width: 8.1333%; + margin-left: 0.1%; + margin-right: 0.1%; + font-size: 9px; +} +.ui.twelve.items > .item:nth-child(12n+1) { + clear: left; +} +/* + * # Semantic List - Flat + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 26 2013 + */ +/******************************* + List +*******************************/ +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: none; + margin: 1em 0em; + padding: 0em; +} +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + margin: 0em; + padding: 0.5em 0em 0.5em 1em; +} +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; +} +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; +} +/******************************* + Content +*******************************/ +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list .item { + display: list-item; + list-style-type: none; + list-style-position: inside; + padding: 0.3em 0em; + line-height: 1.2; +} +/* Icon */ +.ui.list .item > .icon { + margin: 0em 0.5em 0em 0em; +} +.ui.horizontal.list .item > .icon { + margin: 0em 0.25em 0em 0em; +} +/* Image */ +.ui.list .item > img { + display: inline-block; + width: 2em; + margin-right: 0.5em; + vertical-align: middle; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +/* Content */ +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2; +} +/* Link */ +.ui.list a { + cursor: pointer; +} +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Header */ +.ui.list .header { + font-weight: bold; +} +.ui.list .description { + color: rgba(0, 0, 0, 0.5); +} +/* Floated Content */ +.ui.list .item > .left.floated { + float: left; +} +.ui.list .item > .right.floated { + float: right; +} +/******************************* + Types +*******************************/ +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list .item { + display: inline-block; + margin-left: 1em; + font-size: 1rem; +} +.ui.horizontal.list .item:first-child { + margin-left: 0em; +} +/******************************* + States +*******************************/ +/*------------------- + Hover +--------------------*/ +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +.ui.link.list a { + color: rgba(0, 0, 0, 0.5); +} +.ui.link.list a:hover { + color: rgba(0, 0, 0, 0.7); +} +.ui.link.list a:active { + color: rgba(0, 0, 0, 0.9); +} +.ui.link.list .active { + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Selection +--------------------*/ +.ui.selection.list .item { + cursor: pointer; + color: rgba(0, 0, 0, 0.4); + padding: 0.5em; + -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -ms-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; +} +.ui.selection.list .item:hover { + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list:not(.horizontal, .ordered) .item:hover { + padding-left: 1em; +} +.ui.selection.list:not(.horizontal, .ordered) .item:hover .item:hover { + padding-left: 0.5em; +} +.ui.selection.list .item:active { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item.active { + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Bulleted +--------------------*/ +ul.ui.list, +.ui.bulleted.list { + margin-left: 1em; +} +ul.ui.list li, +.ui.bulleted.list .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + left: -1em; + content: '•'; + line-height: 1.2rem; + vertical-align: top; +} +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: 1.2em; +} +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list .item { + margin-left: 1.5em; +} +ul.ui.horizontal.bulleted.list li:before, +.ui.horizontal.bulleted.list .item:before { + left: -0.9em; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list .item:first-child::before { + display: none; +} +/*------------------- + Ordered +--------------------*/ +ol.ui.list, +.ui.ordered.list { + counter-reset: ordered; + margin-left: 2em; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .item:before { + position: absolute; + left: -2em; + counter-increment: ordered; + content: counters(ordered, "."); + text-align: right; + vertical-align: top; + opacity: 0.75; +} +ol.ui.list ol, +.ui.ordered.list .list { + counter-reset: ordered; + padding-left: 3em; +} +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { + left: -2.5em; +} +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .item:before { + position: static; + margin: 0em 0.5em 0em 0em; +} +/*------------------- + Divided +--------------------*/ +.ui.divided.list > .item, +.ui.divided.list > .list { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.divided.list .item .menu .item { + border-width: 0px; +} +.ui.divided.list .item:first-child { + border-top-width: 0px; +} +/* Sub Menu */ +.ui.divided.list .list { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.divided.list .list .item { + padding-left: 1em; + padding-right: 1em; +} +.ui.divided.list .list .item:first-child { + border-top-width: 1px; +} +/* Divided bulleted */ +.ui.divided.bulleted.list { + margin-left: 0em; +} +.ui.divided.bulleted.list .item { + padding-left: 1.5em; +} +.ui.divided.bulleted.list .item:before { + left: 0.5em; +} +/* Divided ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list > .item { + padding-left: 2em; + padding-right: 2em; +} +.ui.divided.ordered.list > .item:before { + left: 0.5em; +} +.ui.divided.ordered.list .item .list { + margin-left: -2em; + margin-right: -2em; +} +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list .item { + border-top: none; + border-left: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding-left: 0.75em; + padding-right: 0.75em; + line-height: 0.6; +} +.ui.horizontal.divided.list .item:first-child { + border-left: none; + padding-left: 0em; +} +/*------------------- + Celled +--------------------*/ +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.celled.list > .item:last-child { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +/* Sub Menu */ +.ui.celled.list .item .list { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.celled.list .item .list .item { + border-width: 0px; +} +.ui.celled.list .list .item:first-child { + border-top-width: 0px; +} +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list > .item { + padding-left: 1.5em; +} +.ui.celled.bulleted.list > .item:before { + left: 0.5em; +} +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .item { + padding-left: 2em; + padding-right: 2em; +} +.ui.celled.ordered.list .item:before { + left: 0.5em; +} +.ui.celled.ordered.list .item .list { + margin-left: -2em; + margin-right: -2em; +} +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .item { + border-top: none; + border-left: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding-left: 0.75em; + padding-right: 0.75em; + line-height: 0.6; +} +.ui.horizontal.celled.list .item:last-child { + border-bottom: none; + border-right: 1px solid rgba(0, 0, 0, 0.1); +} +/*------------------- + Relaxed +--------------------*/ +.ui.relaxed.list:not(.horizontal) .item { + padding-top: 0.5em; + padding-bottom: 0.5em; +} +.ui.horizontal.relaxed.list .item { + padding-left: 1.25em; + padding-right: 1.25em; +} +.ui.very.relaxed.list:not(.horizontal) .item { + padding-top: 1em; + padding-bottom: 1em; +} +.ui.horizontal.very.relaxed.list .item { + padding-left: 2em; + padding-right: 2em; +} +/*------------------- + Sizes +--------------------*/ +.ui.mini.list .item { + font-size: 0.7rem; +} +.ui.tiny.list .item { + font-size: 0.8125rem; +} +.ui.small.list .item { + font-size: 0.875rem; +} +.ui.list .item { + font-size: 1em; +} +.ui.large.list .item { + font-size: 1.125rem; +} +.ui.big.list .item { + font-size: 1.25rem; +} +.ui.huge.list .item { + font-size: 1.375rem; +} +.ui.massive.list .item { + font-size: 1.5rem; +} +/* + * # Statistic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: Aug 20, 2013 + */ +/******************************* + Statistic +*******************************/ +.ui.statistic { + text-align: center; +} +/******************************* + Content +*******************************/ +.ui.statistic > .number { + font-size: 4em; + font-weight: bold; + color: rgba(0, 0, 0, 0.7); +} +.ui.statistic > .description { + opacity: 0.8; +} diff --git a/node/Gruntfile.js b/node/Gruntfile.js index a91067ae4..83fd67b58 100755 --- a/node/Gruntfile.js +++ b/node/Gruntfile.js @@ -39,6 +39,8 @@ module.exports = function(grunt) { // creates custom license in header 'cssmin:addBanner', + 'concat_css', + // creates minified js of each file 'uglify:minifyJS', @@ -252,7 +254,17 @@ module.exports = function(grunt) { ] } }, - + + concat_css: { + options: { + // Task-specific options go here. + }, + all: { + src: ["../build/uncompressed/**/*.css"], + dest: "../build/packaged/css/semantic.css" + }, + }, + cssmin: { // copy minified css to minified release @@ -353,6 +365,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-docco'); + grunt.loadNpmTasks('grunt-concat-css'); grunt.initConfig(config); diff --git a/node/package.json b/node/package.json index 0df15b135..7ca36c131 100755 --- a/node/package.json +++ b/node/package.json @@ -20,6 +20,7 @@ "grunt-docco": "~0.2.0", "grunt-bower-task": "~0.3.1", "grunt-css": "~0.5.4", - "grunt-contrib-compress": "~0.5.2" + "grunt-contrib-compress": "~0.5.2", + "grunt-concat-css": "~0.1.0" } } diff --git a/node/src/files/build/packaged/css/semantic.css b/node/src/files/build/packaged/css/semantic.css new file mode 100644 index 000000000..42601c5ea --- /dev/null +++ b/node/src/files/build/packaged/css/semantic.css @@ -0,0 +1,13876 @@ +/* + * # Semantic - Breadcrumb + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Breadcrumb +*******************************/ +.ui.breadcrumb { + margin: 1em 0em; + display: inline-block; + vertical-align: middle; +} +.ui.breadcrumb:first-child { + margin-top: 0em; +} +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} +/******************************* + Content +*******************************/ +.ui.breadcrumb .divider { + display: inline-block; + opacity: 0.5; + margin: 0em 0.15em 0em; + font-size: 1em; + color: rgba(0, 0, 0, 0.3); +} +.ui.breadcrumb a.section { + cursor: pointer; +} +.ui.breadcrumb .section { + display: inline-block; + margin: 0em; + padding: 0em; +} +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: 0.5em 1em; +} +/******************************* + States +*******************************/ +.ui.breadcrumb .active.section { + font-weight: bold; +} +/******************************* + Variations +*******************************/ +.ui.small.breadcrumb { + font-size: 0.75em; +} +.ui.large.breadcrumb { + font-size: 1.1em; +} +.ui.huge.breadcrumb { + font-size: 1.3em; +} +/* + * # Semantic - Form + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------------- + Form +---------------------*/ +.ui.form { + position: relative; + max-width: 100%; +} +.ui.form :first-child { + margin-top: 0em; +} +.ui.form :last-child { + margin-bottom: 0em; +} +/*-------------------- + Content +---------------------*/ +.ui.form > p { + margin: 1em 0; +} +/*-------------------- + Field +---------------------*/ +.ui.form .field { + clear: both; + margin: 0em 0em 1em; +} +/*-------------------- + Labels +---------------------*/ +.ui.form .field > label { + margin: 0em 0em 0.3em; + display: block; + color: #555555; + font-size: 0.875em; +} +/*-------------------- + Standard Inputs +---------------------*/ +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form .ui.input { + width: 100%; +} +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="date"], +.ui.form input[type="password"] { + margin: 0em; + padding: 0.85em 1.2em; + font-size: 0.875em; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.7); + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.textarea, +.ui.form textarea { + line-height: 1.33; + min-height: 8em; + height: 12em; + max-height: 24em; + resize: vertical; +} +.ui.form select { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +} +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; +} +/*-------------------- + Dividers +---------------------*/ +.ui.form .divider { + clear: both; + margin: 1em 0em; +} +/*-------------------- + Types of Messages +---------------------*/ +.ui.form .info.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; +} +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0px; +} +/*-------------------- + Validation Prompt +---------------------*/ +.ui.form .field .prompt.label { + white-space: nowrap; +} +.ui.form .inline.field .prompt { + margin-top: 0em; + margin-left: 1em; +} +.ui.form .inline.field .prompt:before { + margin-top: -0.3em; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/******************************* + States +*******************************/ +/*-------------------- + Focus +---------------------*/ +.ui.form input[type="text"]:focus, +.ui.form input[type="password"]:focus, +.ui.form textarea:focus { + color: rgba(0, 0, 0, 0.85); + border-color: rgba(0, 0, 0, 0.2); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-appearance: none; + -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; + box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; +} +/*-------------------- + Error +---------------------*/ +/* On Form */ +.ui.form.warning .warning.message { + display: block; +} +/*-------------------- + Warning +---------------------*/ +/* On Form */ +.ui.form.error .error.message { + display: block; +} +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label { + color: #D95C5C; +} +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="password"], +.ui.form .field.error textarea, +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="password"] { + background-color: #FFFAFA; + border-color: #E7BEBE; + border-left: none; + color: #D95C5C; + padding-left: 1.2em; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; + -moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset; + box-shadow: 0.3em 0em 0em 0em #D95C5C inset; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="password"]:focus { + border-color: #ff5050; + color: #ff5050; + -webkit-appearance: none; + -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; + -moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset; + box-shadow: 0.3em 0em 0em 0em #FF5050 inset; +} +/*-------------------- + Empty (Placeholder) +---------------------*/ +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: #E0E0E0; +} +.ui.form ::-moz-placeholder { + color: #E0E0E0; +} +.ui.form :focus::-webkit-input-placeholder { + color: #AAAAAA; +} +.ui.form :focus::-moz-placeholder { + color: #AAAAAA; +} +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.form .error ::-moz-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.form .error :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} +.ui.form .error :focus::-moz-placeholder { + color: rgba(255, 80, 80, 0.7); +} +/*-------------------- + Disabled +---------------------*/ +.ui.form .field :disabled, +.ui.form .field.disabled { + opacity: 0.5; +} +.ui.form .field.disabled label { + opacity: 0.5; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} +/*-------------------- + Loading State +---------------------*/ +/* On Form */ +.ui.form.loading { + position: relative; +} +.ui.form.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url('../build/uncompressed/images/loader-large.gif') no-repeat 50% 50%; + visibility: visible; +} +/******************************* + Variations +*******************************/ +/*-------------------- + Fluid Width +---------------------*/ +.ui.form.fluid { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------------------- + Input w/ attached Button +---------------------------*/ +.ui.form input.attached { + width: auto; +} +/*-------------------- + Date Input +---------------------*/ +.ui.form .date.field > label { + position: relative; +} +.ui.form .date.field > label:after { + position: absolute; + top: 1.4em; + right: 0.5em; + font-family: 'Icons'; + content: '📅'; + /* '\1f4c5' */ + + font-size: 1.5em; + font-weight: normal; + color: #CCCCCC; +} +/*-------------------- + Inverted Colors +---------------------*/ +.ui.inverted.form label { + color: #FFFFFF; +} +.ui.inverted.form .field.error textarea, +.ui.inverted.form .field.error input[type="text"] { + background-color: #FFCCCC; +} +/*-------------------- + Field Groups +---------------------*/ +/* Grouped Vertically */ +.ui.form .grouped.fields { + margin: 0em 0em 1em; +} +.ui.form .grouped.fields .field { + display: block; + float: none; + margin: 0.5em 0em; + padding: 0em; +} +/*-------------------- + Fields +---------------------*/ +/* Split fields */ +.ui.form .fields { + clear: both; +} +.ui.form .fields:after { + content: ' '; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} +.ui.form .fields .field { + clear: none; + float: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.form .fields .field:first-child { + border-left: none; + box-shadow: none; +} +/* Other Combinations */ +.ui.form .two.fields .field { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .three.fields .field { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .four.fields .field { + width: 25%; + padding-left: 1%; + padding-right: 1%; +} +.ui.form .five.fields .field { + width: 20%; + padding-left: 1%; + padding-right: 1%; +} +/* override sides, ie8 no last-child */ +.ui.form .fields .field:first-child { + padding-left: 0%; +} +.ui.form .fields .field:last-child { + padding-right: 0%; +} +/*-------------------- + Inline Fields +---------------------*/ +.ui.form .inline.fields .field { + min-height: 1.3em; + margin-right: 0.5em; +} +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > label, +.ui.form .inline.field > p, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: middle; + font-size: 1em; +} +.ui.form .inline.fields .field > input, +.ui.form .inline.field > input { + font-size: 0.875em; +} +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em 0.5em 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} +/*-------------------- + Sizes +---------------------*/ +/* Standard */ +.ui.small.form { + font-size: 0.875em; +} +.ui.small.form textarea, +.ui.small.form input[type="text"], +.ui.small.form input[type="password"], +.ui.small.form label { + font-size: 1em; +} +/* Large */ +.ui.large.form { + font-size: 1.125em; +} +/* + * # Semantic - Grid + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Grid +*******************************/ +.ui.grid { + display: block; + text-align: left; + font-size: 0em; + margin: 0% -1.5%; + padding: 0%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.grid:after, +.ui.row:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +/*------------------- + Columns +--------------------*/ +.ui.grid > .column, +.ui.grid > .row > .column { + display: inline-block; + text-align: left; + font-size: 1rem; + padding-left: 1.5%; + padding-right: 1.5%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + vertical-align: top; +} +/*------------------- + Rows +--------------------*/ +.ui.grid > .row { + display: block; + width: 100% !important; + margin-top: 1.5%; + padding: 1.5% 0% 0%; + font-size: 0rem; +} +.ui.grid > .row:first-child { + padding-top: 0rem; + margin-top: 0rem; +} +/*------------------- + Content +--------------------*/ +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: 100%; +} +.ui.grid .column > .ui.segment:only-child { + margin: 0em; +} +/******************************* + Variations +*******************************/ +/*------------------- + Page +--------------------*/ +.ui.page.grid { + margin: 0%; + padding: 0% 2%; +} +/*------------------- + Responsive +--------------------*/ +.ui.responsive.grid { + margin-left: 0% !important; + margin-right: 0% !important; + min-width: 320px; +} +@media only screen and (max-width: 1000px) { + .ui.responsive.grid { + padding: 0% 5.55%; + } +} +@media only screen and (min-width: 1000px) { + .ui.responsive.grid { + padding: 0% 8%; + } +} +@media only screen and (min-width: 1500px) { + .ui.responsive.grid { + padding: 0% 13%; + } +} +@media only screen and (min-width: 1750px) { + .ui.responsive.grid { + padding: 0% 18%; + } +} +@media only screen and (min-width: 2000px) { + .ui.responsive.grid { + padding: 0% 23%; + } +} +/*------------------- + Column Width +--------------------*/ +/* Sizing Combinations */ +.ui.grid .one.wide.column { + width: 6.25%; +} +.ui.grid .two.wide.column { + width: 12.5%; +} +.ui.grid .three.wide.column { + width: 18.75%; +} +.ui.grid .four.wide.column { + width: 25%; +} +.ui.grid .five.wide.column { + width: 31.25%; +} +.ui.grid .six.wide.column { + width: 37.5%; +} +.ui.grid .seven.wide.column { + width: 43.75%; +} +.ui.grid .eight.wide.column { + width: 50%; +} +.ui.grid .nine.wide.column { + width: 56.25%; +} +.ui.grid .ten.wide.column { + width: 62.5%; +} +.ui.grid .eleven.wide.column { + width: 68.75%; +} +.ui.grid .twelve.wide.column { + width: 75%; +} +.ui.grid .thirteen.wide.column { + width: 81.25%; +} +.ui.grid .fourteen.wide.column { + width: 87.5%; +} +.ui.grid .fifteen.wide.column { + width: 93.75%; +} +.ui.grid .sixteen.wide.column { + width: 100%; +} +/*------------------- + Column Count +--------------------*/ +/* Standard */ +.ui.grid > .column, +.ui.grid > .row > .column { + width: 6.25%; +} +/* Assume full width with one column */ +.ui.one.column.grid > .row > .column, +.ui.one.column.grid > .column, +.ui.grid > .one.column.row > .column { + width: 100%; +} +.ui.two.column.grid > .row > .column, +.ui.two.column.grid > .column, +.ui.grid > .two.column.row > .column { + width: 50%; +} +.ui.three.column.grid > .row > .column, +.ui.three.column.grid > .column, +.ui.grid > .three.column.row > .column { + width: 33.3333%; +} +.ui.four.column.grid > .row > .column, +.ui.four.column.grid > .column, +.ui.grid > .four.column.row > .column { + width: 25%; +} +.ui.five.column.grid > .row > .column, +.ui.five.column.grid > .column, +.ui.grid > .five.column.row > .column { + width: 20%; +} +.ui.six.column.grid > .row > .column, +.ui.six.column.grid > .column, +.ui.grid > .six.column.row > .column { + width: 16.66667%; +} +.ui.seven.column.grid > .row > .column, +.ui.seven.column.grid > .column, +.ui.grid > .seven.column.row > .column { + width: 14.2857%; +} +.ui.eight.column.grid > .row > .column, +.ui.eight.column.grid > .column, +.ui.grid > .eight.column.row > .column { + width: 12.5%; +} +.ui.nine.column.grid > .row > .column, +.ui.nine.column.grid > .column, +.ui.grid > .nine.column.row > .column { + width: 11.1111%; +} +.ui.ten.column.grid > .row > .column, +.ui.ten.column.grid > .column, +.ui.grid > .ten.column.row > .column { + width: 10%; +} +.ui.eleven.column.grid > .row > .column, +.ui.eleven.column.grid > .column, +.ui.grid > .eleven.column.row > .column { + width: 9.0909%; +} +.ui.twelve.column.grid > .row > .column, +.ui.twelve.column.grid > .column, +.ui.grid > .twelve.column.row > .column { + width: 8.3333%; +} +.ui.thirteen.column.grid > .row > .column, +.ui.thirteen.column.grid > .column, +.ui.grid > .thirteen.column.row > .column { + width: 7.6923%; +} +.ui.fourteen.column.grid > .row > .column, +.ui.fourteen.column.grid > .column, +.ui.grid > .fourteen.column.row > .column { + width: 7.1428%; +} +.ui.fifteen.column.grid > .row > .column, +.ui.fifteen.column.grid > .column, +.ui.grid > .fifteen.column.row > .column { + width: 6.6666%; +} +.ui.sixteen.column.grid > .row > .column, +.ui.sixteen.column.grid > .column, +.ui.grid > .sixteen.column.row > .column { + width: 6.25%; +} +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: 100%; +} +/*---------------------- + Relaxed +-----------------------*/ +.ui.relaxed.grid { + margin: 0% -2.5%; +} +.ui.relaxed.grid > .column, +.ui.relaxed.grid > .row > .column { + padding-left: 2.5%; + padding-right: 2.5%; +} +/*---------------------- + "Floated" +-----------------------*/ +.ui.grid .left.floated.column { + float: left; +} +.ui.grid .right.floated.column { + float: right; +} +/*---------------------- + Divided +-----------------------*/ +.ui.divided.grid, +.ui.divided.grid > .row { + display: table; + width: 100%; + margin-left: 0% !important; + margin-right: 0% !important; +} +.ui.divided.grid > .column:not(.row), +.ui.divided.grid > .row > .column { + display: table-cell; + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); +} +.ui.divided.grid > .column.row { + display: table; +} +.ui.divided.grid > .column:first-child, +.ui.divided.grid > .row > .column:first-child { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Vertically Divided */ +.ui.vertically.divided.grid > .row { + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; +} +.ui.vertically.divided.grid > .row > .column, +.ui.vertically.divided.grid > .column:not(.row), +.ui.vertically.divided.grid > .row:first-child { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} +/*---------------------- + Celled +-----------------------*/ +.ui.celled.grid { + display: table; + width: 100%; + margin-left: 0% !important; + margin-right: 0% !important; + -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF; + -moz-box-shadow: 0px 0px 0px 1px #DFDFDF; + box-shadow: 0px 0px 0px 1px #DFDFDF; +} +.ui.celled.grid > .row, +.ui.celled.grid > .column.row, +.ui.celled.grid > .column.row:first-child { + display: table; + width: 100%; + margin-top: 0em; + padding-top: 0em; + -webkit-box-shadow: 0px -1px 0px 0px #dfdfdf; + -moz-box-shadow: 0px -1px 0px 0px #dfdfdf; + box-shadow: 0px -1px 0px 0px #dfdfdf; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + display: table-cell; + padding: 0.75em; + -webkit-box-shadow: -1px 0px 0px 0px #dfdfdf; + -moz-box-shadow: -1px 0px 0px 0px #dfdfdf; + box-shadow: -1px 0px 0px 0px #dfdfdf; +} +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.celled.responsive.grid { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*---------------------- + Horizontally Centered +-----------------------*/ +/* Vertical Centered */ +.ui.left.aligned.grid, +.ui.left.aligned.grid > .row > .column, +.ui.left.aligned.grid > .column, +.ui.grid .left.aligned.column, +.ui.grid > .left.aligned.row > .column { + text-align: left; +} +.ui.center.aligned.grid, +.ui.center.aligned.grid > .row > .column, +.ui.center.aligned.grid > .column, +.ui.grid .center.aligned.column, +.ui.grid > .center.aligned.row > .column { + text-align: center; +} +.ui.right.aligned.grid, +.ui.right.aligned.grid > .row > .column, +.ui.right.aligned.grid > .column, +.ui.grid .right.aligned.column, +.ui.grid > .right.aligned.row > .column { + text-align: right; +} +/*---------------------- + Vertically Centered +-----------------------*/ +/* Vertical Centered */ +.ui.top.aligned.grid, +.ui.top.aligned.grid > .row > .column, +.ui.top.aligned.grid > .column, +.ui.grid .top.aligned.column, +.ui.grid > .top.aligned.row > .column { + vertical-align: top; +} +.ui.middle.aligned.grid, +.ui.middle.aligned.grid > .row > .column, +.ui.middle.aligned.grid > .column, +.ui.grid .middle.aligned.column, +.ui.grid > .middle.aligned.row > .column { + vertical-align: middle; +} +.ui.bottom.aligned.grid, +.ui.bottom.aligned.grid > .row > .column, +.ui.bottom.aligned.grid > .column, +.ui.grid .bottom.aligned.column, +.ui.grid > .bottom.aligned.row > .column { + vertical-align: bottom; +} +/*---------------------- + Equal Height Columns +-----------------------*/ +.ui.grid > .equal.height.row { + display: table; + width: 100%; +} +.ui.grid > .equal.height.row > .column { + display: table-cell; +} +/*---------------------- + Only (Device) +-----------------------*/ +/* Mobile Only */ +@media only screen and (max-width: 768px) { + .ui.mobile.only.grid, + .ui.grid > .mobile.only.row { + display: block !important; + } + .ui.grid > .row > .mobile.only.column { + display: inline-block !important; + } + .ui.divided.mobile.only.grid, + .ui.celled.mobile.only.grid, + .ui.divided.mobile.only.grid .row, + .ui.celled.mobile.only.grid .row, + .ui.divided.grid .mobile.only.row, + .ui.celled.grid .mobile.only.row, + .ui.grid .mobile.only.equal.height.row, + .ui.mobile.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .mobile.only.column, + .ui.celled.grid > .row > .mobile.only.column, + .ui.divided.mobile.only.grid > .row > .column, + .ui.celled.mobile.only.grid > .row > .column, + .ui.divided.mobile.only.grid > .column, + .ui.celled.mobile.only.grid > .column { + display: table-cell !important; + } +} +@media only screen and (min-width: 768px) { + .ui.mobile.only.grid, + .ui.grid > .mobile.only.row, + .ui.grid > .row > .mobile.only.column { + display: none; + } +} +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 998px) { + .ui.tablet.only.grid, + .ui.grid > .tablet.only.row { + display: block !important; + } + .ui.grid > .row > .tablet.only.column { + display: inline-block !important; + } + .ui.divided.tablet.only.grid, + .ui.celled.tablet.only.grid, + .ui.divided.tablet.only.grid .row, + .ui.celled.tablet.only.grid .row, + .ui.divided.grid .tablet.only.row, + .ui.celled.grid .tablet.only.row, + .ui.grid .tablet.only.equal.height.row, + .ui.tablet.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .tablet.only.column, + .ui.celled.grid > .row > .tablet.only.column, + .ui.divided.tablet.only.grid > .row > .column, + .ui.celled.tablet.only.grid > .row > .column, + .ui.divided.tablet.only.grid > .column, + .ui.celled.tablet.only.grid > .column { + display: table-cell !important; + } +} +@media only screen and (max-width: 768px), (min-width: 998px) { + .ui.tablet.only.grid, + .ui.grid > .tablet.only.row, + .ui.grid > .row > .tablet.only.column { + display: none; + } +} +/* Computer Only */ +@media only screen and (min-width: 998px) { + .ui.computer.only.grid, + .ui.grid > .computer.only.row { + display: block !important; + } + .ui.grid > .row > .computer.only.column { + display: inline-block !important; + } + .ui.divided.computer.only.grid, + .ui.celled.computer.only.grid, + .ui.divided.computer.only.grid .row, + .ui.celled.computer.only.grid .row, + .ui.divided.grid .computer.only.row, + .ui.celled.grid .computer.only.row, + .ui.grid .computer.only.equal.height.row, + .ui.computer.only.grid .equal.height.row { + display: table !important; + } + .ui.divided.grid > .row > .computer.only.column, + .ui.celled.grid > .row > .computer.only.column, + .ui.divided.computer.only.grid > .row > .column, + .ui.celled.computer.only.grid > .row > .column, + .ui.divided.computer.only.grid > .column, + .ui.celled.computer.only.grid > .column { + display: table-cell !important; + } +} +@media only screen and (max-width: 998px) { + .ui.computer.only.grid, + .ui.grid > .computer.only.row, + .ui.grid > .row > .computer.only.column { + display: none; + } +} +/*------------------- + Stackable +--------------------*/ +@media only screen and (max-width: 768px) { + .ui.stackable.grid { + display: block !important; + padding: 0em; + } + .ui.stackable.grid .row > .column, + .ui.stackable.grid > .column { + display: block !important; + width: auto !important; + margin: 1.5em 5% 0em !important; + padding: 1.5em 0em 0em !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + .ui.stackable.divided.grid .column, + .ui.stackable.celled.grid .column { + border-top: 1px dotted rgba(0, 0, 0, 0.1); + } + .ui.stackable.grid > .row:first-child > .column:first-child, + .ui.stackable.grid > .column:first-child { + margin-top: 0em !important; + padding-top: 0em !important; + } + .ui.stackable.divided.grid > .row:first-child > .column:first-child, + .ui.stackable.celled.grid > .row:first-child > .column:first-child, + .ui.stackable.divided.grid > .column:first-child, + .ui.stackable.celled.grid > .column:first-child { + border-top: none !important; + } + /* Remove pointers from vertical menus */ + .ui.stackable.grid .vertical.pointing.menu .item:after { + display: none; + } +} +/* + * # Semantic - Menu + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------- + Menu +---------------*/ +.ui.menu { + margin: 1rem 0rem; + background-color: #FFFFFF; + font-size: 0px; + font-weight: normal; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + border-radius: 0.1875rem; +} +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} +.ui.menu:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.menu > .item:first-child { + border-radius: 0.1875em 0px 0px 0.1875em; +} +.ui.menu > .item:last-child { + border-radius: 0px 0.1875em 0.1875em 0px; +} +.ui.menu .item { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + -moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + -o-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + -ms-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; +} +/*-------------- + Colors +---------------*/ +/* Text Color */ +.ui.menu .item, +.ui.menu .item > a { + color: rgba(0, 0, 0, 0.75); +} +.ui.menu .item .item, +.ui.menu .item .item > a { + color: rgba(30, 30, 30, 0.7); +} +.ui.menu .item .item .item, +.ui.menu .item .item .item > a { + color: rgba(30, 30, 30, 0.6); +} +.ui.menu .dropdown.item .menu .item, +.ui.menu .dropdown.item .menu .item a { + color: rgba(0, 0, 0, 0.75); +} +/* Hover */ +.ui.menu .item .menu a.item:hover, +.ui.menu .item .menu a.item.hover, +.ui.menu .item .menu .link.item:hover, +.ui.menu .item .menu .link.item.hover { + color: rgba(0, 0, 0, 0.85); +} +.ui.menu .dropdown.item .menu .item a:hover { + color: rgba(0, 0, 0, 0.85); +} +/* Active */ +.ui.menu .active.item, +.ui.menu .active.item a { + color: rgba(0, 0, 0, 0.85); + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; +} +/*-------------- + Items +---------------*/ +.ui.menu .item { + position: relative; + display: inline-block; + padding: 0.83em 0.95em; + border-top: 0em solid rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -moz-user-select: -moz-none; + -khtml-user-select: none; + user-select: none; +} +.ui.menu .menu { + margin: 0em; +} +.ui.menu .item.left, +.ui.menu .menu.left { + float: left; +} +.ui.menu .item.right, +.ui.menu .menu.right { + float: right; +} +/*-------------- + Borders +---------------*/ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + width: 1px; + height: 100%; + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); +} +.ui.menu .menu.right .item:before, +.ui.menu .item.right:before { + right: auto; + left: 0px; +} +/*-------------- + Text Content +---------------*/ +.ui.menu .text.item > *, +.ui.menu .item > p:only-child { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + line-height: 1.3; + color: rgba(0, 0, 0, 0.6); +} +.ui.menu .item > p:first-child { + margin-top: 0px; +} +.ui.menu .item > p:last-child { + margin-bottom: 0px; +} +/*-------------- + Inputs +---------------*/ +.ui.menu .item > .input, +.ui.menu .item > .input input { + width: 100%; +} +.ui.menu .input .icon { + padding-top: 0em; + height: auto; +} +.ui.menu .item > .input input, +.ui.menu .item > input { + position: relative; + top: -0.45em; + margin: 0em; + padding-top: 0.45em; + padding-bottom: 0.45em; +} +.ui.vertical.menu .item > .input input, +.ui.vertical.menu .item > input { + top: 0em; + margin: 0em; + padding-top: 0.63em; + padding-bottom: 0.63em; +} +.ui.vertical.menu .item > .input .icon { + top: 0px; + padding-top: 0.63em; +} +/*-------------- + Header +---------------*/ +.ui.menu .header.item { + background-color: rgba(0, 0, 0, 0.04); + margin: 0em; +} +.ui.vertical.menu .header.item { + font-weight: bold; +} +/*-------------- + Dropdowns +---------------*/ +/*.ui.menu .dropdown.item .menu { + margin: 1px 0px 0px 0px; +}*/ +.ui.menu .simple.dropdown.item .menu { + margin: 0px !important; +} +.ui.menu .dropdown.item .menu .item { + width: 100%; + color: rgba(0, 0, 0, 0.75); +} +.ui.menu .dropdown.item .menu .active.item { + box-shadow: none !important; +} +.ui.menu .ui.dropdown .menu .item:before { + display: none; +} +/*-------------- + Labels +---------------*/ +.ui.menu .item > .label { + background-color: rgba(0, 0, 0, 0.35); + color: #FFFFFF; + margin: -0.15em 0em -0.15em 0.5em; + padding: 0.3em 0.8em; + vertical-align: baseline; +} +.ui.menu .item > .floating.label { + padding: 0.3em 0.8em; +} +/*-------------- + Images +---------------*/ +.ui.menu .item > img:only-child { + display: block; + max-width: 100%; + margin: 0em auto; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.link.menu .item:hover, +.ui.menu .item.hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover, +.ui.menu .ui.dropdown .menu .item.hover, +.ui.menu .ui.dropdown .menu .item:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.02); +} +.ui.menu .ui.dropdown.active { + background-color: rgba(0, 0, 0, 0.02); + -webkit-box-shadow: none; + box-shadow: none; + -webkit-border-bottom-right-radius: 0em; + -moz-border-bottom-right-radius: 0em; + border-bottom-right-radius: 0em; + -webkit-border-bottom-left-radius: 0em; + -moz-border-bottom-left-radius: 0em; + border-bottom-left-radius: 0em; +} +/*-------------- + Down +---------------*/ +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active, +.ui.menu .ui.dropdown .menu .item:active { + background-color: rgba(0, 0, 0, 0.05); +} +/*-------------- + Active +---------------*/ +.ui.menu .active.item { + background-color: rgba(0, 0, 0, 0.01); + color: rgba(0, 0, 0, 0.95); + -webkit-box-shadow: 0em 0.2em 0em inset; + -moz-box-shadow: 0em 0.2em 0em inset; + box-shadow: 0em 0.2em 0em inset; +} +.ui.vertical.menu .active.item { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + -moz-box-shadow: 0.2em 0em 0em inset; + -webkit-box-shadow: 0.2em 0em 0em inset; + box-shadow: 0.2em 0em 0em inset; +} +.ui.vertical.menu > .active.item:first-child { + -webkit-border-radius: 0em 0.1875em 0em 0em; + -moz-border-radius: 0em 0.1875em 0em 0em; + border-radius: 0em 0.1875em 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + -webkit-border-radius: 0em 0em 0.1875em 0em; + -moz-border-radius: 0em 0em 0.1875em 0em; + border-radius: 0em 0em 0.1875em 0em; +} +.ui.vertical.menu > .active.item:only-child { + -webkit-border-radius: 0em 0.1875em 0.1875em 0em; + -moz-border-radius: 0em 0.1875em 0.1875em 0em; + border-radius: 0em 0.1875em 0.1875em 0em; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} +.ui.vertical.menu .active.item .menu .active.item { + padding-left: 1.5rem; +} +.ui.vertical.menu .item .menu .active.item { + background-color: rgba(0, 0, 0, 0.03); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*-------------- + Disabled +---------------*/ +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover, +.ui.menu .item.disabled.hover { + cursor: default; + color: rgba(0, 0, 0, 0.2); + background-color: transparent !important; +} +/*-------------------- + Loading +---------------------*/ +/* On Form */ +.ui.menu.loading { + position: relative; +} +.ui.menu.loading:after { + position: absolute; + top: 0%; + left: 0%; + content: ''; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8) url('../build/uncompressed/images/loader-large.gif') no-repeat 50% 50%; + visibility: visible; +} +/******************************* + Types +*******************************/ +/*-------------- + Vertical +---------------*/ +.ui.vertical.menu .item { + display: block; + height: auto !important; + border-top: none; + border-left: 0em solid rgba(0, 0, 0, 0); + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: 0.1875em 0.1875em 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px 0.1875em 0.1875em; +} +.ui.vertical.menu .item > .label { + float: right; + min-width: 2.5; + text-align: center; +} +.ui.vertical.menu .item > .icon:not(.input) { + float: right; + width: 1.22em; + margin: 0em 0em 0em 0.5em; +} +.ui.vertical.menu .item > .label + .icon { + float: none; + margin: 0em 0.25em 0em 0em; +} +/*--- Border ---*/ +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: 1px; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); + background-image: linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%); +} +.ui.vertical.menu .item:first-child:before { + background-image: none !important; +} +/*--- Dropdown ---*/ +.ui.vertical.menu .dropdown.item > i { + float: right; +} +.ui.vertical.menu .dropdown.item .menu { + top: 0% !important; + left: 100%; + margin: 0px 0px 0px 1px; +} +.ui.vertical.menu .dropdown.item.active { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.item .menu .item { + font-size: 1rem; +} +.ui.vertical.menu .dropdown.item .menu .item .icon { + margin-right: 0em; +} +.ui.vertical.menu .dropdown.item.active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*--- Sub Menu ---*/ +.ui.vertical.menu .item > .menu { + margin: 0.5em -0.95em 0em; +} +.ui.vertical.menu .item > .menu > .item { + padding: 0.5rem 1.5rem; + font-size: 0.875em; +} +.ui.vertical.menu .item > .menu > .item:before { + display: none; +} +/*-------------- + Tiered +---------------*/ +.ui.tiered.menu > .sub.menu > .item { + color: rgba(0, 0, 0, 0.4); +} +.ui.tiered.menu > .menu > .item:hover, +.ui.tiered.menu > .menu > .item.hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.tiered.menu .item.active { + color: rgba(0, 0, 0, 0.8); +} +.ui.tiered.menu > .menu .item.active:after { + position: absolute; + content: ''; + top: 100%; + left: 0px; + width: 100%; + height: 1px; + background-color: #FBFBFB; +} +.ui.tiered.menu .sub.menu { + background-color: rgba(0, 0, 0, 0.01); + border-radius: 0em; + border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + color: #FFFFFF; +} +.ui.tiered.menu .sub.menu .item { + font-size: 0.875rem; +} +.ui.tiered.menu .sub.menu .item:before { + background-image: none; +} +.ui.tiered.menu .sub.menu .active.item { + padding-top: 0.83em; + background-color: transparent; + border-radius: 0 0 0 0; + border-top: medium none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + color: rgba(0, 0, 0, 0.7) !important; +} +.ui.tiered.menu .sub.menu .active.item:after { + display: none; +} +/* Inverted */ +.ui.inverted.tiered.menu > .menu > .item { + color: rgba(255, 255, 255, 0.5); +} +.ui.inverted.tiered.menu .sub.menu { + background-color: rgba(0, 0, 0, 0.2); +} +.ui.inverted.tiered.menu .sub.menu .item { + color: rgba(255, 255, 255, 0.6); +} +.ui.inverted.tiered.menu > .menu > .item:hover, +.ui.inverted.tiered.menu > .menu > .item.hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.tiered.menu .active.item:after { + display: none; +} +.ui.inverted.tiered.menu > .sub.menu > .active.item, +.ui.inverted.tiered.menu > .menu > .active.item { + color: #ffffff !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Tiered pointing */ +.ui.pointing.tiered.menu > .menu > .item:after { + display: none; +} +.ui.pointing.tiered.menu > .sub.menu > .item:after { + display: block; +} +/*-------------- + Tabular +---------------*/ +.ui.tabular.menu { + background-color: transparent; + border-bottom: 1px solid #DCDDDE; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} +.ui.tabular.menu .item { + background-color: transparent; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 1px solid transparent; + padding-left: 1.4em; + padding-right: 1.4em; + color: rgba(0, 0, 0, 0.6); +} +.ui.tabular.menu .item:before { + display: none; +} +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.8); +} +/* Active */ +.ui.tabular.menu .active.item { + position: relative; + top: 1px; + background-color: #FFFFFF; + color: rgba(0, 0, 0, 0.8); + border-color: #DCDDDE; + padding-top: 0.83em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} +/* Coupling with segment for attachment */ +.ui.attached.tabular.menu { + position: relative; + z-index: 2; +} +.ui.tabular.menu ~ .bottom.attached.segment { + margin: 1px 0px 0px 1px; +} +/*-------------- + Pagination +---------------*/ +.ui.pagination.menu { + margin: 0em; + display: inline-block; +} +.ui.pagination.menu .item { + min-width: 2.7em; + min-height: 2.66em; + text-align: center; +} +.ui.pagination.menu.floated { + display: block; +} +/* active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: 0.83em; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*-------------- + Secondary +---------------*/ +.ui.secondary.menu { + background-color: transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.secondary.menu > .item { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + border: none; + height: auto !important; + margin: 0em 0.25em; + padding: 0.5em 1em; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +.ui.secondary.menu > .item:before { + display: none !important; +} +.ui.secondary.menu .link.item, +.ui.secondary.menu a.item { + opacity: 0.8; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; +} +.ui.secondary.menu .header.item { + border-right: 0.1em solid rgba(0, 0, 0, 0.1); + background-color: transparent; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/* hover */ +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + opacity: 1; +} +/* active */ +.ui.secondary.menu > .active.item { + background-color: rgba(0, 0, 0, 0.08); + opacity: 1; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.secondary.vertical.menu > .active.item { + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +/* inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: rgba(255, 255, 255, 0.5); +} +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.secondary.inverted.menu > .active.item { + background-color: rgba(255, 255, 255, 0.9); +} +/* disable variations */ +.ui.secondary.item.menu > .item { + margin: 0em; +} +.ui.secondary.attached.menu { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*--------------------- + Secondary Pointing +-----------------------*/ +.ui.secondary.pointing.menu { + border-bottom: 3px solid rgba(0, 0, 0, 0.1); +} +.ui.secondary.pointing.menu .header.item { + border-right-width: 0px; + font-weight: bold; +} +.ui.secondary.pointing.menu .text.item { + box-shadow: none !important; +} +.ui.secondary.pointing.menu > .item { + margin: 0em 0em -3px; + padding: 0.6em 0.95em; + border-bottom: 3px solid rgba(0, 0, 0, 0); + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + -webkit-transition: color 0.2s + ; + -moz-transition: color 0.2s + ; + -o-transition: color 0.2s + ; + -ms-transition: color 0.2s + ; + transition: color 0.2s + ; +} +.ui.secondary.pointing.menu > .item:after { + display: none; +} +/* Hover */ +.ui.secondary.pointing.menu > .item.hover, +.ui.secondary.pointing.menu > .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); +} +/* Down */ +.ui.secondary.pointing.menu > .item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} +/* Active */ +.ui.secondary.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*--------------------- + Secondary Vertical +-----------------------*/ +.ui.secondary.vertical.pointing.menu { + border: none; + border-right: 3px solid rgba(0, 0, 0, 0.1); +} +.ui.secondary.vertical.menu > .item { + border: none; + margin: 0em 0em 0.3em; + padding: 0.6em 0.8em; + -webkit-border-radius: 0.1875em; + -moz-border-radius: 0.1875em; + border-radius: 0.1875em; +} +.ui.secondary.vertical.menu > .header.item { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +.ui.secondary.vertical.pointing.menu > .item { + margin: 0em -3px 0em 0em; + border-bottom: none; + border-right: 3px solid transparent; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/* Hover */ +.ui.secondary.vertical.pointing.menu > .item.hover, +.ui.secondary.vertical.pointing.menu > .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); +} +/* Down */ +.ui.secondary.vertical.pointing.menu > .item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} +/* Active */ +.ui.secondary.vertical.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.4); + color: rgba(0, 0, 0, 0.85); +} +/*-------------- + Inverted +---------------*/ +.ui.secondary.inverted.menu { + background-color: transparent; +} +.ui.secondary.inverted.pointing.menu { + border-bottom: 3px solid rgba(255, 255, 255, 0.1); +} +.ui.secondary.inverted.pointing.menu > .item { + color: rgba(255, 255, 255, 0.7); +} +/* Hover */ +.ui.secondary.inverted.pointing.menu > .item.hover, +.ui.secondary.inverted.pointing.menu > .item:hover { + color: rgba(255, 255, 255, 0.85); +} +/* Down */ +.ui.secondary.inverted.pointing.menu > .item:active { + border-color: rgba(255, 255, 255, 0.4) !important; +} +/* Active */ +.ui.secondary.inverted.pointing.menu > .item.active { + border-color: rgba(255, 255, 255, 0.8) !important; + color: #ffffff; +} +/*--------------------- + Inverted Vertical +----------------------*/ +.ui.secondary.inverted.vertical.pointing.menu { + border-right: 3px solid rgba(255, 255, 255, 0.1); + border-bottom: none; +} +/*-------------- + Text Menu +---------------*/ +.ui.text.menu { + background-color: transparent; + margin: 1rem -1rem; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.text.menu > .item { + opacity: 0.8; + margin: 0em 1em; + padding: 0em; + height: auto !important; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-transition: opacity 0.2s ease + ; + -moz-transition: opacity 0.2s ease + ; + -o-transition: opacity 0.2s ease + ; + -ms-transition: opacity 0.2s ease + ; + transition: opacity 0.2s ease + ; +} +.ui.text.menu > .item:before { + display: none !important; +} +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: rgba(50, 50, 50, 0.8); + font-size: 0.875rem; + padding: 0em; + text-transform: uppercase; + font-weight: bold; +} +/*--- fluid text ---*/ +.ui.text.item.menu .item { + margin: 0em; +} +/*--- vertical text ---*/ +.ui.vertical.text.menu { + margin: 1rem 0em; +} +.ui.vertical.text.menu:first-child { + margin-top: 0rem; +} +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; +} +.ui.vertical.text.menu .item { + float: left; + clear: left; + margin: 0.5em 0em; +} +.ui.vertical.text.menu .item > .icon { + float: none; + margin: 0em 0.83em 0em 0em; +} +.ui.vertical.text.menu .header.item { + margin: 0.8em 0em; +} +/*--- hover ---*/ +.ui.text.menu .item.hover, +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; +} +/*--- active ---*/ +.ui.text.menu .active.item { + background-color: transparent; + padding: 0em; + border: none; + opacity: 1; + font-weight: bold; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* disable variations */ +.ui.text.pointing.menu .active.item:after { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.text.attached.menu { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .item.active { + background-color: transparent; +} +/*-------------- + Icon Only +---------------*/ +.ui.icon.menu, +.ui.vertical.icon.menu { + width: auto; + display: inline-block; + height: auto; +} +.ui.icon.menu > .item { + height: auto; + text-align: center; + color: rgba(60, 60, 60, 0.7); +} +.ui.icon.menu > .item > .icon { + display: block; + float: none !important; + opacity: 1; + margin: 0em auto !important; +} +.ui.icon.menu .icon:before { + opacity: 1; +} +/* Item Icon Only */ +.ui.menu .icon.item .icon { + margin: 0em; +} +.ui.vertical.icon.menu { + float: none; +} +/*--- inverted ---*/ +.ui.inverted.icon.menu .item { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.icon.menu .icon { + color: #ffffff; +} +/*-------------- + Labeled Icon +---------------*/ +.ui.labeled.icon.menu { + text-align: center; +} +.ui.labeled.icon.menu > .item > .icon { + display: block; + font-size: 1.5em !important; + margin: 0em auto 0.3em !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Colors +---------------*/ +/*--- Light Colors ---*/ +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: #A1CF64 !important; + color: #A1CF64 !important; +} +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: #D95C5C !important; + color: #D95C5C !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: #6ECFF5 !important; + color: #6ECFF5 !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: #564F8A !important; + color: #564F8A !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: #F05940 !important; + color: #F05940 !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: #00B5AD !important; + color: #00B5AD !important; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.menu { + background-color: #333333; + box-shadow: none; +} +.ui.inverted.menu .header.item { + margin: 0em; + background-color: rgba(0, 0, 0, 0.3); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.menu .item, +.ui.inverted.menu .item > a { + color: #FFFFFF; +} +.ui.inverted.menu .item .item, +.ui.inverted.menu .item .item > a { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.menu .dropdown.item .menu .item, +.ui.inverted.menu .dropdown.item .menu .item a { + color: rgba(0, 0, 0, 0.75) !important; +} +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover, +.ui.inverted.menu .item.disabled.hover { + color: rgba(255, 255, 255, 0.2); +} +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); +} +.ui.vertical.inverted.menu .item:before { + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); +} +/*--- Hover ---*/ +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .item.hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .dropdown.item.hover, +.ui.inverted.menu .dropdown.item:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.ui.inverted.menu a.item:hover, +.ui.inverted.menu .item.hover, +.ui.inverted.menu .item > a:hover, +.ui.inverted.menu .item .menu a.item:hover, +.ui.inverted.menu .item .menu a.item.hover, +.ui.inverted.menu .item .menu .link.item:hover, +.ui.inverted.menu .item .menu .link.item.hover { + color: #ffffff; +} +/*--- Down ---*/ +.ui.inverted.menu a.item:active, +.ui.inverted.menu .dropdown.item:active, +.ui.inverted.menu .link.item:active, +.ui.inverted.menu a.item:active { + background-color: rgba(255, 255, 255, 0.15); +} +/*--- Active ---*/ +.ui.inverted.menu .active.item { + box-shadow: none !important; + background-color: rgba(255, 255, 255, 0.2); +} +.ui.inverted.menu .active.item, +.ui.inverted.menu .active.item a { + color: #ffffff !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background-color: rgba(255, 255, 255, 0.2); + color: #ffffff; +} +/*--- Pointers ---*/ +.ui.inverted.pointing.menu .active.item:after { + background-color: #505050; + box-shadow: none; +} +.ui.inverted.pointing.menu .active.item:hover:after { + background-color: #3B3B3B; +} +/*-------------- + Selection +---------------*/ +.ui.selection.menu > .item { + color: rgba(0, 0, 0, 0.4); +} +.ui.selection.menu > .item:hover { + color: rgba(0, 0, 0, 0.6); +} +.ui.selection.menu > .item.active { + color: rgba(0, 0, 0, 0.85); +} +.ui.inverted.selection.menu > .item { + color: rgba(255, 255, 255, 0.4); +} +.ui.inverted.selection.menu > .item:hover { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.selection.menu > .item.active { + color: #FFFFFF; +} +/*-------------- + Floated +---------------*/ +.ui.floated.menu { + float: left; + margin: 0rem 0.5rem 0rem 0rem; +} +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem 0.5rem; +} +/*-------------- + Inverted Colors +---------------*/ +/*--- Light Colors ---*/ +.ui.grey.menu { + background-color: #F0F0F0; +} +/*--- Inverted Colors ---*/ +.ui.inverted.green.menu { + background-color: #A1CF64; +} +.ui.inverted.green.pointing.menu .active.item:after { + background-color: #A1CF64; +} +.ui.inverted.red.menu { + background-color: #D95C5C; +} +.ui.inverted.red.pointing.menu .active.item:after { + background-color: #F16883; +} +.ui.inverted.blue.menu { + background-color: #6ECFF5; +} +.ui.inverted.blue.pointing.menu .active.item:after { + background-color: #6ECFF5; +} +.ui.inverted.purple.menu { + background-color: #564F8A; +} +.ui.inverted.purple.pointing.menu .active.item:after { + background-color: #564F8A; +} +.ui.inverted.orange.menu { + background-color: #F05940; +} +.ui.inverted.orange.pointing.menu .active.item:after { + background-color: #F05940; +} +.ui.inverted.teal.menu { + background-color: #00B5AD; +} +.ui.inverted.teal.pointing.menu .active.item:after { + background-color: #00B5AD; +} +/*-------------- + Fitted +---------------*/ +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: 0.83em; + padding-bottom: 0.83em; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: 0.95em; + padding-right: 0.95em; +} +/*-------------- + Borderless +---------------*/ +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background-image: none; +} +/*------------------- + Compact +--------------------*/ +.ui.compact.menu { + display: inline-block; + margin: 0em; + vertical-align: middle; +} +.ui.compact.vertical.menu { + width: auto !important; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} +/*------------------- + Fluid +--------------------*/ +.ui.menu.fluid, +.ui.vertical.menu.fluid { + display: block; + width: 100% !important; +} +/*------------------- + Evenly Sized +--------------------*/ +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0px !important; + padding-right: 0px !important; + text-align: center; +} +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.500%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10.0%; +} +.ui.menu.eleven.item .item { + width: 9.09%; +} +.ui.menu.twelve.item .item { + width: 8.333%; +} +/*-------------- + Fixed +---------------*/ +.ui.menu.fixed { + position: fixed; + z-index: 10; + margin: 0em; + border: none; + width: 100%; +} +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + border-radius: 0px !important; +} +.ui.menu.fixed.top { + top: 0px; + left: 0px; + right: auto; + bottom: auto; +} +.ui.menu.fixed.right { + top: 0px; + right: 0px; + left: auto; + bottom: auto; + width: auto; + height: 100%; +} +.ui.menu.fixed.bottom { + bottom: 0px; + left: 0px; + top: auto; + right: auto; +} +.ui.menu.fixed.left { + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; +} +/*------------------- + Pointing +--------------------*/ +.ui.pointing.menu .active.item:after { + position: absolute; + bottom: -0.35em; + left: 50%; + content: ""; + margin-left: -0.3em; + width: 0.6em; + height: 0.6em; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); + background-image: none; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-transition: background 0.2s ease + ; + -moz-transition: background 0.2s ease + ; + -o-transition: background 0.2s ease + ; + -ms-transition: background 0.2s ease + ; + transition: background 0.2s ease + ; +} +/* Don't double up pointers */ +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} +.ui.vertical.pointing.menu .active.item:after { + position: absolute; + top: 50%; + margin-top: -0.3em; + right: -0.4em; + bottom: auto; + left: auto; + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); +} +/* Colors */ +.ui.pointing.menu .active.item:after { + background-color: #FCFCFC; +} +.ui.pointing.menu .active.item.hover:after, +.ui.pointing.menu .active.item:hover:after { + background-color: #FAFAFA; +} +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: #F4F4F4; +} +.ui.pointing.menu a.active.item:active:after { + background-color: #F0F0F0; +} +/*-------------- + Attached +---------------*/ +.ui.menu.attached { + margin: 0rem; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; + /* avoid rgba multiplying */ + + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; +} +.ui.top.attached.menu { + -moz-border-radius: 0.1875em 0.1875em 0px 0px; + -webkit-border-radius: 0.1875em 0.1875em 0px 0px; + border-radius: 0.1875em 0.1875em 0px 0px; +} +.ui.menu.bottom.attached { + -moz-border-radius: 0px 0px 0.1875em 0.1875em; + -webkit-border-radius: 0px 0px 0.1875em 0.1875em; + border-radius: 0px 0px 0.1875em 0.1875em; +} +/*-------------- + Sizes +---------------*/ +.ui.small.menu .item { + font-size: 0.875rem; +} +.ui.small.vertical.menu { + width: 13rem; +} +.ui.menu .item { + font-size: 1rem; + height: 2.66em; +} +.ui.vertical.menu { + width: 15rem; +} +.ui.large.menu .item { + font-size: 1.125rem; +} +.ui.large.menu .item .item { + font-size: 0.875rem; +} +.ui.large.vertical.menu { + width: 18rem; +} +/* + * # Semantic - Message + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Message +*******************************/ +.ui.message { + position: relative; + min-height: 18px; + margin: 1em 0em; + height: auto; + background-color: #EFEFEF; + padding: 1em; + line-height: 1.33; + color: rgba(0, 0, 0, 0.6); + -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -o-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -ms-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; + -moz-border-radius: 0.325em 0.325em 0.325em 0.325em; + border-radius: 0.325em 0.325em 0.325em 0.325em; +} +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} +/*-------------- + Content +---------------*/ +/* block with headers */ +.ui.message .header { + margin: 0em; + font-size: 1.33em; + font-weight: bold; +} +/* block with paragraphs */ +.ui.message p { + opacity: 0.85; + margin: 1em 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: 0.3em; +} +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} +/* block with child list */ +.ui.message ul.list { + opacity: 0.85; + list-style-position: inside; + margin: 0.2em 0em; + padding: 0em; +} +.ui.message ul.list li { + position: relative; + list-style-type: none; + margin: 0em 0em 0em 1em; + padding: 0em; +} +.ui.message ul.list li:before { + position: absolute; + content: '\2022'; + top: -0.05em; + left: -0.8em; + height: 100%; + vertical-align: baseline; + opacity: 0.5; +} +.ui.message ul.list li:first-child { + margin-top: 0em; +} +/* dismissable block */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + top: 1em; + right: 0.5em; + opacity: 0.7; + -webkit-transition: opacity 0.1s linear + ; + -moz-transition: opacity 0.1s linear + ; + -o-transition: opacity 0.1s linear + ; + -ms-transition: opacity 0.1s linear + ; + transition: opacity 0.1s linear + ; +} +.ui.message > .close.icon:hover { + opacity: 1; +} +/******************************* + States +*******************************/ +.ui.message.visible, +.ui.header.visible { + display: block !important; +} +.ui.message.hidden, +.ui.header.hidden { + display: none; +} +/******************************* + Variations +*******************************/ +/*-------------- + Compact +---------------*/ +.ui.compact.message { + display: inline-block; +} +/*-------------- + Attached +---------------*/ +.ui.attached.message { + margin-left: -1px; + margin-right: -1px; + margin-bottom: -1px; + -webkit-border-radius: 0.325em 0.325em 0em 0em; + -moz-border-radius: 0.325em 0.325em 0em 0em; + border-radius: 0.325em 0.325em 0em 0em; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.bottom.attached.message { + margin-top: -1px; + -webkit-border-radius: 0em 0em 0.325em 0.325em; + -moz-border-radius: 0em 0em 0.325em 0.325em; + border-radius: 0em 0em 0.325em 0.325em; +} +/*-------------- + Icon +---------------*/ +.ui.icon.message { + display: table; + width: 100%; +} +.ui.icon.message > .icon { + display: table-cell; + vertical-align: middle; + font-size: 3.8em; + opacity: 0.2; +} +.ui.icon.message > .icon + .content { + padding-left: 1em; +} +.ui.icon.message > .content { + display: table-cell; + vertical-align: middle; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.message { + background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.95); +} +/*-------------- + Floating +---------------*/ +.ui.floating.message { + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; + -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset; +} +/*-------------- + Colors +---------------*/ +.ui.black.message { + background-color: #333333; + color: rgba(255, 255, 255, 0.95); +} +/*-------------- + Types +---------------*/ +.ui.blue.message, +.ui.info.message { + background-color: #E6F4F9; + color: #4D8796; +} +/* Green Text Block */ +.ui.green.message { + background-color: #DEFCD5; + color: #52A954; +} +/* Yellow Text Block */ +.ui.yellow.message, +.ui.warning.message { + background-color: #F6F3D5; + color: #96904D; +} +/* Red Text Block */ +.ui.red.message { + background-color: #F1D7D7; + color: #A95252; +} +/* Success Text Block */ +.ui.success.message, +.ui.positive.message { + background-color: #5BBD72; + color: #FFFFFF; +} +/* Error Text Block */ +.ui.error.message, +.ui.negative.message { + background-color: #D95C5C; + color: #FFFFFF; +} +/*-------------- + Sizes +---------------*/ +.ui.small.message { + font-size: 0.875em; +} +.ui.message { + font-size: 1em; +} +.ui.large.message { + font-size: 1.125em; +} +.ui.huge.message { + font-size: 1.5em; +} +.ui.massive.message { + font-size: 2em; +} +/* + * # Semantic - Table + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Table +*******************************/ +/* Prototype */ +.ui.table { + width: 100%; + border-collapse: collapse; +} +/* Table Content */ +.ui.table th, +.ui.table tr, +.ui.table td { + border-collapse: collapse; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all 0.1s ease-out; + -moz-transition: all 0.1s ease-out; + -o-transition: all 0.1s ease-out; + -ms-transition: all 0.1s ease-out; + transition: all 0.1s ease-out; +} +/* Headers */ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table th { + cursor: auto; + background-color: rgba(0, 0, 0, 0.03); + text-align: left; + color: rgba(0, 0, 0, 0.8); + padding: 0.5em 0.7em; + vertical-align: middle; +} +.ui.table thead th:first-child { + border-radius: 5px 0px 0px 0px; +} +.ui.table thead th:last-child { + border-radius: 0px 5px 0px 0px; +} +.ui.table tfoot th:first-child { + border-radius: 0px 0px 0px 5px; +} +.ui.table tfoot th:last-child { + border-radius: 0px 0px 5px 0px; +} +/* Table Cells */ +.ui.table td { + padding: 0.40em 0.7em; + vertical-align: middle; +} +/* Footer */ +.ui.table tfoot { + border-top: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table tfoot th { + font-weight: normal; + font-style: italic; +} +/* Table Striping */ +.ui.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 50, 0.02); +} +/* Icons */ +.ui.table > .icon { + vertical-align: baseline; +} +.ui.table > .icon:only-child { + margin: 0em; +} +/* Table Segment */ +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +/* Sortable */ +.ui.sortable.table thead th:hover { + background-image: none; + color: rgba(0, 0, 0, 0.8); +} +.ui.sortable.table th.disabled:hover { + cursor: auto; + background-color: rgba(0, 0, 0, 0.1); + text-align: left; + font-weight: bold; + color: #333333; + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Positive +---------------*/ +.ui.table tr.positive, +.ui.table td.positive { + -webkit-box-shadow: 2px 0px 0px #119000 inset; + -moz-box-shadow: 2px 0px 0px #119000 inset; + box-shadow: 2px 0px 0px #119000 inset; +} +.ui.table tr.positive td, +.ui.table td.positive { + background-color: #F2F8F0 !important; + color: #119000 !important; +} +.ui.celled.table tr.positive:hover td, +.ui.celled.table tr:hover td.positive, +.ui.table tr.positive:hover td, +.ui.table td:hover.positive, +.ui.table th:hover.positive { + background-color: #ECF5E9 !important; + color: #119000 !important; +} +/*-------------- + Negative +---------------*/ +.ui.table tr.negative, +.ui.table td.negative { + -webkit-box-shadow: 2px 0px 0px #CD2929 inset; + -moz-box-shadow: 2px 0px 0px #CD2929 inset; + box-shadow: 2px 0px 0px #CD2929 inset; +} +.ui.table tr.negative td, +.ui.table td.negative { + background-color: #F9F4F4; + color: #CD2929 !important; +} +.ui.celled.table tr.negative:hover td, +.ui.celled.table tr:hover td.negative, +.ui.table tr.negative:hover td, +.ui.table td:hover.negative, +.ui.table th:hover.negative { + background-color: #F2E8E8 !important; + color: #CD2929 !important; +} +/*-------------- + Error +---------------*/ +.ui.table tr.error, +.ui.table td.error { + -webkit-box-shadow: 2px 0px 0px #CD2929 inset; + -moz-box-shadow: 2px 0px 0px #CD2929 inset; + box-shadow: 2px 0px 0px #CD2929 inset; +} +.ui.table tr.error td, +.ui.table td.error, +.ui.table th.error { + background-color: #F9F4F4 !important; + color: #CD2929 !important; +} +.ui.celled.table tr.error:hover td, +.ui.celled.table tr:hover td.error, +.ui.table tr.error:hover td, +.ui.table td:hover.error, +.ui.table th:hover.error { + background-color: #F2E8E8 !important; + color: #CD2929 !important; +} +/*-------------- + Warning +---------------*/ +.ui.table tr.warning, +.ui.table td.warning { + -webkit-box-shadow: 2px 0px 0px #7D6C00 inset; + -moz-box-shadow: 2px 0px 0px #7D6C00 inset; + box-shadow: 2px 0px 0px #7D6C00 inset; +} +.ui.table tr.warning td, +.ui.table td.warning, +.ui.table th.warning { + background-color: #FBF6E9; + color: #7D6C00 !important; +} +.ui.celled.table tr.warning:hover td, +.ui.celled.table tr:hover td.warning, +.ui.table tr.warning:hover td, +.ui.table td:hover.warning, +.ui.table th:hover.warning { + background-color: #F3EDDC !important; + color: #7D6C00 !important; +} +/*-------------- + Active +---------------*/ +.ui.table tr.active, +.ui.table td.active { + -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; + -moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; + box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; +} +.ui.table tr.active td, +.ui.table tr td.active { + background-color: #E0E0E0 !important; + color: rgba(50, 50, 50, 0.9); + /* border-color: rgba(0, 0, 0, 0.15) !important; */ + +} +/*-------------- + Disabled +---------------*/ +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover td, +.ui.table tr:hover td.disabled { + color: rgba(150, 150, 150, 0.3); +} +/******************************* + Variations +*******************************/ +/*-------------- + Column Count +---------------*/ +.ui.two.column.table td { + width: 50%; +} +.ui.three.column.table td { + width: 33.3333%; +} +.ui.four.column.table td { + width: 25%; +} +.ui.five.column.table td { + width: 20%; +} +.ui.six.column.table td { + width: 16.66667%; +} +.ui.seven.column.table td { + width: 14.2857%; +} +.ui.eight.column.table td { + width: 12.5%; +} +.ui.nine.column.table td { + width: 11.1111%; +} +.ui.ten.column.table td { + width: 10%; +} +.ui.eleven.column.table td { + width: 9.0909%; +} +.ui.twelve.column.table td { + width: 8.3333%; +} +.ui.thirteen.column.table td { + width: 7.6923%; +} +.ui.fourteen.column.table td { + width: 7.1428%; +} +.ui.fifteen.column.table td { + width: 6.6666%; +} +.ui.sixteen.column.table td { + width: 6.25%; +} +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} +/*-------------- + Celled +---------------*/ +.ui.celled.table { + color: rgba(0, 0, 0, 0.8); +} +.ui.celled.table tbody tr, +.ui.celled.table tfoot tr { + border: none; +} +.ui.celled.table th, +.ui.celled.table tbody td { + border: 1px solid rgba(0, 0, 0, 0.1); +} +/* Coupling with segment */ +.ui.celled.table.segment th { + border: none; +} +.ui.celled.table.segment tbody td:first-child { + border-left: none; +} +.ui.celled.table.segment tbody td:last-child { + border-right: none; +} +/*-------------- + Sortable +---------------*/ +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.ui.sortable.table thead th:after { + display: inline-block; + content: ''; + width: 1em; + opacity: 0.8; + margin: 0em 0em 0em 0.5em; + font-family: 'Icons'; + font-style: normal; + font-weight: normal; + text-decoration: inherit; +} +.ui.sortable.table thead th.ascending:after { + content: '\25b4'; +} +.ui.sortable.table thead th.descending:after { + content: '\25be'; +} +/*-------------- + Inverted +---------------*/ +/* Text Color */ +.ui.inverted.table td { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.table th { + background-color: rgba(0, 0, 0, 0.15); + color: rgba(255, 255, 255, 0.9); +} +/* Stripes */ +.ui.inverted.table tbody tr:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.06); +} +/*-------------- + Definition +---------------*/ +.ui.definition.table td:first-child { + font-weight: bold; +} +/*-------------- + Collapsing +---------------*/ +.ui.collapsing.table { + width: auto; +} +/*-------------- + Basic +---------------*/ +.ui.basic.table th { + background-color: transparent; + padding: 0.5em; +} +.ui.basic.table tbody tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.basic.table td { + padding: 0.8em 0.5em; +} +/*-------------- + Padded +---------------*/ +.ui.padded.table th, +.ui.padded.table td { + padding: 0.8em 1em; +} +.ui.compact.table th { + padding: 0.3em 0.5em; +} +.ui.compact.table td { + padding: 0.2em 0.5em; +} +/*-------------- + Sizes +---------------*/ +/* Small */ +.ui.small.table { + font-size: 0.875em; +} +/* Standard */ +.ui.table { + font-size: 1em; +} +/* Large */ +.ui.large.table { + font-size: 1.1em; +} +/* + * # Semantic - Icon (Basic) + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Icon +*******************************/ +@font-face { + font-family: 'Basic Icons'; + src: url('../build/uncompressed/fonts/basic.icons.eot'); + src: url('../build/uncompressed/fonts/basic.icons.eot?#iefix') format('embedded-opentype'), url('../build/uncompressed/fonts/basic.icons.woff') format('woff'), url('../build/uncompressed/fonts/basic.icons.ttf') format('truetype'), url('../build/uncompressed/fonts/basic.icons.svg#icons') format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 1.23em; + height: 1em; + font-family: 'Basic Icons'; + font-style: normal; + line-height: 1; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; +} +/* icons available */ +i.icon.circle.attention:before { + content: '\2757'; +} +/* '❗' */ +i.icon.circle.help:before { + content: '\e704'; +} +/* '' */ +i.icon.circle.info:before { + content: '\e705'; +} +/* '' */ +i.icon.add:before { + content: '\2795'; +} +/* '➕' */ +i.icon.chart:before { + content: '📈'; +} +/* '\1f4c8' */ +i.icon.chart.bar:before { + content: '📊'; +} +/* '\1f4ca' */ +i.icon.chart.pie:before { + content: '\e7a2'; +} +/* '' */ +i.icon.resize.full:before { + content: '\e744'; +} +/* '' */ +i.icon.resize.horizontal:before { + content: '\2b0d'; +} +/* '⬍' */ +i.icon.resize.small:before { + content: '\e746'; +} +/* '' */ +i.icon.resize.vertical:before { + content: '\2b0c'; +} +/* '⬌' */ +i.icon.down:before { + content: '\2193'; +} +/* '↓' */ +i.icon.down.triangle:before { + content: '\25be'; +} +/* '▾' */ +i.icon.down.arrow:before { + content: '\e75c'; +} +/* '' */ +i.icon.left:before { + content: '\2190'; +} +/* '←' */ +i.icon.left.triangle:before { + content: '\25c2'; +} +/* '◂' */ +i.icon.left.arrow:before { + content: '\e75d'; +} +/* '' */ +i.icon.right:before { + content: '\2192'; +} +/* '→' */ +i.icon.right.triangle:before { + content: '\25b8'; +} +/* '▸' */ +i.icon.right.arrow:before { + content: '\e75e'; +} +/* '' */ +i.icon.up:before { + content: '\2191'; +} +/* '↑' */ +i.icon.up.triangle:before { + content: '\25b4'; +} +/* '▴' */ +i.icon.up.arrow:before { + content: '\e75f'; +} +/* '' */ +i.icon.folder:before { + content: '\e810'; +} +/* '' */ +i.icon.open.folder:before { + content: '📂'; +} +/* '\1f4c2' */ +i.icon.globe:before { + content: '𝌍'; +} +/* '\1d30d' */ +i.icon.desk.globe:before { + content: '🌐'; +} +/* '\1f310' */ +i.icon.star:before { + content: '\e801'; +} +/* '' */ +i.icon.star.empty:before { + content: '\e800'; +} +/* '' */ +i.icon.star.half:before { + content: '\e701'; +} +/* '' */ +i.icon.lock:before { + content: '🔒'; +} +/* '\1f512' */ +i.icon.unlock:before { + content: '🔓'; +} +/* '\1f513' */ +i.icon.layout.grid:before { + content: '\e80c'; +} +/* '' */ +i.icon.layout.block:before { + content: '\e708'; +} +/* '' */ +i.icon.layout.list:before { + content: '\e80b'; +} +/* '' */ +i.icon.heart.empty:before { + content: '\2661'; +} +/* '♡' */ +i.icon.heart:before { + content: '\2665'; +} +/* '♥' */ +i.icon.asterisk:before { + content: '\2731'; +} +/* '✱' */ +i.icon.attachment:before { + content: '📎'; +} +/* '\1f4ce' */ +i.icon.attention:before { + content: '\26a0'; +} +/* '⚠' */ +i.icon.trophy:before { + content: '🏉'; +} +/* '\1f3c9' */ +i.icon.barcode:before { + content: '\e792'; +} +/* '' */ +i.icon.cart:before { + content: '\e813'; +} +/* '' */ +i.icon.block:before { + content: '🚫'; +} +/* '\1f6ab' */ +i.icon.book:before { + content: '📖'; +} +i.icon.bookmark:before { + content: '🔖'; +} +/* '\1f516' */ +i.icon.calendar:before { + content: '📅'; +} +/* '\1f4c5' */ +i.icon.cancel:before { + content: '\2716'; +} +/* '✖' */ +i.icon.close:before { + content: '\e80d'; +} +/* '' */ +i.icon.color:before { + content: '\e794'; +} +/* '' */ +i.icon.chat:before { + content: '\e720'; +} +/* '' */ +i.icon.check:before { + content: '\2611'; +} +/* '☑' */ +i.icon.time:before { + content: '🕔'; +} +/* '\1f554' */ +i.icon.cloud:before { + content: '\2601'; +} +/* '☁' */ +i.icon.code:before { + content: '\e714'; +} +/* '' */ +i.icon.email:before { + content: '\40'; +} +/* '@' */ +i.icon.settings:before { + content: '\26ef'; +} +/* '⛯' */ +i.icon.setting:before { + content: '\2699'; +} +/* '⚙' */ +i.icon.comment:before { + content: '\e802'; +} +/* '' */ +i.icon.clockwise.counter:before { + content: '\27f2'; +} +/* '⟲' */ +i.icon.clockwise:before { + content: '\27f3'; +} +/* '⟳' */ +i.icon.cube:before { + content: '\e807'; +} +/* '' */ +i.icon.direction:before { + content: '\27a2'; +} +/* '➢' */ +i.icon.doc:before { + content: '📄'; +} +/* '\1f4c4' */ +i.icon.docs:before { + content: '\e736'; +} +/* '' */ +i.icon.dollar:before { + content: '💵'; +} +/* '\1f4b5' */ +i.icon.paint:before { + content: '\e7b5'; +} +/* '' */ +i.icon.edit:before { + content: '\270d'; +} +/* '✍' */ +i.icon.eject:before { + content: '\2ecf'; +} +/* '⻏' */ +i.icon.export:before { + content: '\e715'; +} +/* '' */ +i.icon.hide:before { + content: '\e80f'; +} +/* '' */ +i.icon.unhide:before { + content: '\e70b'; +} +/* '' */ +i.icon.facebook:before { + content: '\f301'; +} +/* '' */ +i.icon.fast-forward:before { + content: '\e804'; +} +/* '' */ +i.icon.fire:before { + content: '🔥'; +} +/* '\1f525' */ +i.icon.flag:before { + content: '\2691'; +} +/* '⚑' */ +i.icon.lightning:before { + content: '\26a1'; +} +/* '⚡' */ +i.icon.lab:before { + content: '\68'; +} +/* 'h' */ +i.icon.flight:before { + content: '\2708'; +} +/* '✈' */ +i.icon.forward:before { + content: '\27a6'; +} +/* '➦' */ +i.icon.gift:before { + content: '🎁'; +} +/* '\1f381' */ +i.icon.github:before { + content: '\f308'; +} +/* '' */ +i.icon.globe:before { + content: '\e817'; +} +/* '' */ +i.icon.headphones:before { + content: '🎧'; +} +/* '\1f3a7' */ +i.icon.question:before { + content: '\2753'; +} +/* '❓' */ +i.icon.home:before { + content: '\2302'; +} +/* '⌂' */ +i.icon.i:before { + content: '\2139'; +} +/* 'ℹ' */ +i.icon.idea:before { + content: '💡'; +} +/* '\1f4a1' */ +i.icon.open:before { + content: '🔗'; +} +/* '\1f517' */ +i.icon.content:before { + content: '\e782'; +} +/* '' */ +i.icon.location:before { + content: '\e724'; +} +/* '' */ +i.icon.mail:before { + content: '\2709'; +} +/* '✉' */ +i.icon.mic:before { + content: '🎤'; +} +/* '\1f3a4' */ +i.icon.minus:before { + content: '\2d'; +} +/* '-' */ +i.icon.money:before { + content: '💰'; +} +/* '\1f4b0' */ +i.icon.off:before { + content: '\e78e'; +} +/* '' */ +i.icon.pause:before { + content: '\e808'; +} +/* '' */ +i.icon.photos:before { + content: '\e812'; +} +/* '' */ +i.icon.photo:before { + content: '🌄'; +} +/* '\1f304' */ +i.icon.pin:before { + content: '📌'; +} +/* '\1f4cc' */ +i.icon.play:before { + content: '\e809'; +} +/* '' */ +i.icon.plus:before { + content: '\2b'; +} +/* '+' */ +i.icon.print:before { + content: '\e716'; +} +/* '' */ +i.icon.rss:before { + content: '\e73a'; +} +/* '' */ +i.icon.search:before { + content: '🔍'; +} +/* '\1f50d' */ +i.icon.shuffle:before { + content: '\e803'; +} +/* '' */ +i.icon.tag:before { + content: '\e80a'; +} +/* '' */ +i.icon.tags:before { + content: '\e70d'; +} +/* '' */ +i.icon.terminal:before { + content: '\e7ac'; +} +/* '' */ +i.icon.thumbs.down:before { + content: '👎'; +} +/* '\1f44e' */ +i.icon.thumbs.up:before { + content: '👍'; +} +/* '\1f44d' */ +i.icon.to-end:before { + content: '\e806'; +} +/* '' */ +i.icon.to-start:before { + content: '\e805'; +} +/* '' */ +i.icon.top.list:before { + content: '🏆'; +} +/* '\1f3c6' */ +i.icon.trash:before { + content: '\e729'; +} +/* '' */ +i.icon.twitter:before { + content: '\f303'; +} +/* '' */ +i.icon.upload:before { + content: '\e711'; +} +/* '' */ +i.icon.user.add:before { + content: '\e700'; +} +/* '' */ +i.icon.user:before { + content: '👤'; +} +/* '\1f464' */ +i.icon.community:before { + content: '\e814'; +} +/* '' */ +i.icon.users:before { + content: '👥'; +} +/* '\1f465' */ +i.icon.id:before { + content: '\e722'; +} +/* '' */ +i.icon.url:before { + content: '🔗'; +} +/* '\1f517' */ +i.icon.zoom.in:before { + content: '\e750'; +} +/* '' */ +i.icon.zoom.out:before { + content: '\e751'; +} +/* '' */ +/*-------------- + Spacing Fix +---------------*/ +/* dropdown arrows are to the right */ +i.dropdown.icon { + margin: 0em 0em 0em 0.5em; +} +/* stars are usually consecutive */ +i.icon.star { + width: auto; + margin: 0em; +} +/* left side icons */ +i.icon.left, +i.icon.left, +i.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} +/* right side icons */ +i.icon.search, +i.icon.up, +i.icon.down, +i.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} +/*-------------- + Aliases +---------------*/ +/* aliases for convenience */ +i.icon.delete:before { + content: '\e80d'; +} +/* '' */ +i.icon.dropdown:before { + content: '\25be'; +} +/* '▾' */ +i.icon.help:before { + content: '\e704'; +} +/* '' */ +i.icon.info:before { + content: '\e705'; +} +/* '' */ +i.icon.error:before { + content: '\e80d'; +} +/* '' */ +i.icon.dislike:before { + content: '\2661'; +} +/* '♡' */ +i.icon.like:before { + content: '\2665'; +} +/* '♥' */ +i.icon.eye:before { + content: '\e80f'; +} +/* '' */ +i.icon.eye.hidden:before { + content: '\e70b'; +} +/* '' */ +i.icon.date:before { + content: '📅'; +} +/* '\1f4c5' */ +/******************************* + States +*******************************/ +i.icon.hover { + opacity: 1; +} +i.icon.active { + opacity: 1; +} +i.emphasized.icon { + opacity: 1; +} +i.icon.disabled { + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +i.link.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +.link.icon:hover { + opacity: 1 !important; +} +/*------------------- + Circular +--------------------*/ +i.circular.icon { + -webkit-border-radius: 500px !important; + -moz-border-radius: 500px !important; + border-radius: 500px !important; + padding: 0.5em 0em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Flipped +--------------------*/ +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -o-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +/*------------------- + Rotated +--------------------*/ +i.left.rotated.icon { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +i.right.rotated.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +/*------------------- + Square +--------------------*/ +i.square.icon { + width: 2em; + height: 2em; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} +i.square.icon:before { + vertical-align: middle; +} +i.square.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Inverted +--------------------*/ +i.inverted.icon { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Colors +--------------------*/ +i.blue.icon { + color: #6ECFF5 !important; +} +i.black.icon { + color: #5C6166 !important; +} +i.green.icon { + color: #A1CF64 !important; +} +i.red.icon { + color: #D95C5C !important; +} +i.purple.icon { + color: #564F8A !important; +} +i.teal.icon { + color: #00B5AD !important; +} +/*------------------- + Inverted Colors +--------------------*/ +i.inverted.black.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +i.inverted.blue.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +i.inverted.green.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +i.inverted.red.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +i.inverted.purple.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +i.inverted.teal.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Sizes +--------------------*/ +i.small.icon { + font-size: 0.875em; +} +i.icon { + font-size: 1em; +} +i.large.icon { + font-size: 2em; + margin-right: 0.5em; + vertical-align: middle; +} +i.huge.icon { + font-size: 4em; + margin-right: 0.75em; + vertical-align: middle; +} +i.massive.icon { + font-size: 8em; + margin-right: 1em; + vertical-align: middle; +} +/* + * # Semantic - Button + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Button +*******************************/ +/* Prototype */ +.ui.button { + cursor: pointer; + display: inline-block; + vertical-align: middle; + min-height: 1em; + outline: none; + border: none; + background-color: #EBEBEB; + color: #999999; + padding: 0.8em 1.5em; + font-size: 1rem; + text-transform: uppercase; + line-height: 1; + font-weight: bold; + font-style: normal; + text-align: center; + text-decoration: none; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + -webkit-box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + -moz-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + -o-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + -ms-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; + transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; +} +/*-------------- + Count +---------------*/ +.ui.count.button { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; +} +.ui.count.button > .count { + position: absolute; + background-color: #FFFFFF; + border: 1px solid #F0F0F0; + margin: -0.8em -1.5em; + padding: 0.8em 1.5em; +} +/*------------------- + Primary +--------------------*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #D95C5C; + color: #FFFFFF; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*------------------- + Secondary +--------------------*/ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover, +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #00847E; + color: #FFFFFF; +} +/*------------------- + Social +--------------------*/ +/* Facebook */ +.ui.facebook.button { + background-color: #3B579D; + color: #FFFFFF; +} +.ui.facebook.button:hover { + background-color: #3A59A9; +} +.ui.facebook.button:active { + background-color: #334F95; +} +/* Twitter */ +.ui.twitter.button { + background-color: #00ACED; + color: #FFFFFF; +} +.ui.twitter.button:hover { + background-color: #00B9FF; +} +.ui.twitter.button:active { + background-color: #009EDA; +} +/*-------------- + Icon +---------------*/ +.ui.button > .icon { + margin-right: 0.5em; + line-height: 1; + -webkit-transition: opacity 0.1s ease + ; + -moz-transition: opacity 0.1s ease + ; + -o-transition: opacity 0.1s ease + ; + -ms-transition: opacity 0.1s ease + ; + transition: opacity 0.1s ease + ; +} +/******************************* + States +*******************************/ +/*-------------- + Active +---------------*/ +.ui.buttons .active.button, +.ui.active.button { + opacity: 1 !important; + background-color: #B0B0B0; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset; +} +/*-------------- + Hover +---------------*/ +.ui.button:hover, +.ui.active.button:hover { + opacity: 1 !important; + background-color: #A4A4A4; + color: #FFFFFF; +} +.ui.button:hover .icon, +.ui.button.hover .icon { + opacity: 0.85; +} +/*-------------- + Down +---------------*/ +.ui.button:active, +.ui.active.button:active { + opacity: 1 !important; + background-color: #8C8C8C; + color: #FFFFFF; + -webkit-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; +} +/*-------------- + Loading +---------------*/ +.ui.loading.button { + position: relative; + cursor: default; + background-color: #F3F3F3 !important; + color: transparent !important; + background-image: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.loading.button:after { + position: absolute; + top: 0em; + left: 0em; + width: 100%; + height: 100%; + content: ''; + background: transparent url('../build/uncompressed/images/loader-mini.gif') no-repeat 50% 50%; +} +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Disabled +--------------------*/ +.ui.disabled.button { + cursor: default; + color: #DDDDDD !important; + background-color: rgba(50, 50, 50, 0.05) !important; + background-image: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} +/******************************* + Variations +*******************************/ +/*------------------- + Floated +--------------------*/ +.ui.left.floated.buttons, +.ui.left.floated.button { + float: left; + margin-right: 0.25em; +} +.ui.right.floated.buttons, +.ui.right.floated.button { + float: right; + margin-left: 0.25em; +} +/*------------------- + Sizes +--------------------*/ +.ui.buttons .button, +.ui.button { + font-size: 1rem; +} +.ui.buttons.mini .button, +.ui.mini.button { + font-size: 0.8125rem; + padding: 0.6em 0.8em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.tiny.buttons .button, +.ui.tiny.button { + font-size: 0.875rem; + padding: 0.6em 0.8em; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.small.buttons .button, +.ui.small.button { + font-size: 0.875rem; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.large.buttons .button, +.ui.large.button { + font-size: 1.125rem; +} +.ui.big.buttons .button, +.ui.big.button { + font-size: 1.25rem; +} +.ui.huge.buttons .button, +.ui.huge.button { + font-size: 1.375rem; +} +.ui.massive.buttons .button, +.ui.massive.button { + font-size: 1.5rem; + font-weight: bold; +} +/* loading */ +.ui.huge.loading.button:after { + background-image: url('../build/uncompressed/images/loader-small.gif'); +} +.ui.massive.buttons .loading.button:after, +.ui.gigantic.buttons .loading.button:after, +.ui.massive.loading.button:after, +.ui.gigantic.loading.button:after { + background-image: url('../build/uncompressed/images/loader-medium.gif'); +} +.ui.huge.loading.button:after, +.ui.huge.loading.button.active:after { + background-image: url('../build/uncompressed/images/loader-small.gif'); +} +.ui.massive.buttons .loading.button:after, +.ui.gigantic.buttons .loading.button:after, +.ui.massive.loading.button:after, +.ui.gigantic.loading.button:after, +.ui.massive.buttons .loading.button.active:after, +.ui.gigantic.buttons .loading.button.active:after, +.ui.massive.loading.button.active:after, +.ui.gigantic.loading.button.active:after { + background-image: url('../build/uncompressed/images/loader-medium.gif'); +} +/*-------------- + Icon Only +---------------*/ +.ui.icon.buttons .button, +.ui.icon.button { + padding: 0.8em; +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: 1; + margin: 0em; + vertical-align: top; +} +/*------------------- + Basic +--------------------*/ +.ui.basic.buttons .button, +.ui.basic.button { + background-color: transparent !important; + background-image: none; + color: #999999 !important; + font-weight: normal; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.basic.buttons { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: #7F7F7F !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background-color: rgba(0, 0, 0, 0.02) !important; + color: #7F7F7F !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.basic.buttons .button.active, +.ui.basic.button.active { + background-color: rgba(0, 0, 0, 0.05); + color: #7F7F7F; + -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset; + box-shadow: 0px 0px 0px 1px #BDBDBD inset; +} +.ui.basic.buttons .button.active:hover, +.ui.basic.button.active:hover { + background-color: rgba(0, 0, 0, 0.1); +} +/* Basic Group */ +.ui.basic.buttons .button { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.buttons .button.active { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +/*-------------- + Labeled Icon +---------------*/ +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: 4em !important; + padding-right: 1.4em !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + top: 0em; + left: 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + width: 2.75em; + height: 100%; + padding-top: 0.8em; + background-color: rgba(0, 0, 0, 0.05); + text-align: center; + -webkit-border-radius: 0.2em 0px 0px 0.2em; + -moz-border-radius: 0.2em 0px 0px 0.2em; + border-radius: 0.2em 0px 0px 0.2em; + line-height: 1; + -webkit-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + -moz-box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: -2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} +.ui.labeled.icon.buttons .button > .icon { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: 0.2em; + border-bottom-left-radius: 0.2em; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: 0.2em; + border-bottom-right-radius: 0.2em; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + border-top-left-radius: 0.2em; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + border-bottom-left-radius: 0.2em; +} +.ui.right.labeled.icon.button { + padding-left: 1.4em !important; + padding-right: 4em !important; +} +.ui.left.fluid.labeled.icon.button, +.ui.right.fluid.labeled.icon.button { + padding-left: 1.4em !important; + padding-right: 1.4em !important; +} +.ui.right.labeled.icon.button .icon { + left: auto; + right: 0em; + -webkit-border-radius: 0em 0.2em 0.2em 0em; + -moz-border-radius: 0em 0.2em 0.2em 0em; + border-radius: 0em 0.2em 0.2em 0em; + -webkit-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + -moz-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} +/*-------------- + Toggle +---------------*/ +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: #5BBD72 !important; + color: #FFFFFF !important; +} +.ui.button.toggle.active:hover { + background-color: #58CB73 !important; + color: #FFFFFF !important; +} +/*-------------- + Bubbly +---------------*/ +.ui.circular.button { + -webkit-border-radius: 10em; + -moz-border-radius: 10em; + border-radius: 10em; +} +/*-------------- + Attached +---------------*/ +.ui.attached.button { + display: block; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; +} +.ui.attached.top.button { + -webkit-border-radius: 0.2em 0.2em 0em 0em; + -moz-border-radius: 0.2em 0.2em 0em 0em; + border-radius: 0.2em 0.2em 0em 0em; +} +.ui.attached.bottom.button { + -webkit-border-radius: 0em 0em 0.2em 0.2em; + -moz-border-radius: 0em 0em 0.2em 0.2em; + border-radius: 0em 0em 0.2em 0.2em; +} +.ui.attached.left.button { + display: inline-block; + border-left: none; + padding-right: 0.75em; + text-align: right; + -webkit-border-radius: 0.2em 0em 0em 0.2em; + -moz-border-radius: 0.2em 0em 0em 0.2em; + border-radius: 0.2em 0em 0em 0.2em; +} +.ui.attached.right.button { + display: inline-block; + padding-left: 0.75em; + text-align: left; + -webkit-border-radius: 0em 0.2em 0.2em 0em; + -moz-border-radius: 0em 0.2em 0.2em 0em; + border-radius: 0em 0.2em 0.2em 0em; +} +/*------------------- + Or Buttons +--------------------*/ +.ui.buttons .or { + position: relative; + float: left; + width: 0.3em; + height: 1em; + z-index: 3; +} +.ui.buttons .or:before { + position: absolute; + top: 50%; + left: 50%; + content: 'or'; + background-color: #FFFFFF; + margin-top: -0.15em; + margin-left: -0.9em; + width: 1.8em; + height: 1.8em; + line-height: 1.66; + color: #AAAAAA; + font-style: normal; + font-weight: normal; + text-align: center; + -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) inset; + -moz-border-radius: 500px; + -webkit-border-radius: 500px; + border-radius: 500px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.buttons .or:after { + position: absolute; + top: 0em; + left: 0em; + content: ' '; + width: 0.3em; + height: 1.8em; + background-color: transparent; + border-top: 0.6em solid #FFFFFF; + border-bottom: 0.6em solid #FFFFFF; +} +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} +/*------------------- + Attached +--------------------*/ +/* Plural Attached */ +.attached.ui.buttons { + margin: 0px; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; +} +.attached.ui.buttons .button:first-child { + -webkit-border-radius: 4px 0px 0px 0px; + -moz-border-radius: 4px 0px 0px 0px; + border-radius: 4px 0px 0px 0px; +} +.attached.ui.buttons .button:last-child { + -webkit-border-radius: 0px 4px 0px 0px; + -moz-border-radius: 0px 4px 0px 0px; + border-radius: 0px 4px 0px 0px; +} +/* Bottom Side */ +.bottom.attached.ui.buttons { + margin-top: -1px; + -webkit-border-radius: 0px 0px 4px 4px; + -moz-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.bottom.attached.ui.buttons .button:first-child { + -webkit-border-radius: 0px 0px 0px 4px; + -moz-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} +.bottom.attached.ui.buttons .button:last-child { + -webkit-border-radius: 0px 0px 4px 0px; + -moz-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; +} +/* Left Side */ +.left.attached.ui.buttons { + margin-left: -1px; + -webkit-border-radius: 0px 4px 4px 0px; + -moz-border-radius: 0px 4px 4px 0px; + border-radius: 0px 4px 4px 0px; +} +.left.attached.ui.buttons .button:first-child { + margin-left: -1px; + -webkit-border-radius: 0px 4px 0px 0px; + -moz-border-radius: 0px 4px 0px 0px; + border-radius: 0px 4px 0px 0px; +} +.left.attached.ui.buttons .button:last-child { + margin-left: -1px; + -webkit-border-radius: 0px 0px 4px 0px; + -moz-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; +} +/* Right Side */ +.right.attached.ui.buttons, +.right.attached.ui.buttons .button { + margin-right: -1px; + -webkit-border-radius: 4px 0px 0px 4px; + -moz-border-radius: 4px 0px 0px 4px; + border-radius: 4px 0px 0px 4px; +} +.right.attached.ui.buttons .button:first-child { + margin-left: -1px; + -webkit-border-radius: 4px 0px 0px 0px; + -moz-border-radius: 4px 0px 0px 0px; + border-radius: 4px 0px 0px 0px; +} +.right.attached.ui.buttons .button:last-child { + margin-left: -1px; + -webkit-border-radius: 0px 0px 0px 4px; + -moz-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} +/* Fluid */ +.ui.fluid.buttons, +.ui.button.fluid, +.ui.fluid.buttons > .button { + display: block; + width: 100%; +} +.ui.two.buttons > .button { + width: 50%; +} +.ui.three.buttons > .button { + width: 33.333%; +} +.ui.four.buttons > .button { + width: 25%; +} +.ui.five.buttons > .button { + width: 20%; +} +.ui.six.buttons > .button { + width: 16.666%; +} +.ui.seven.buttons > .button { + width: 14.285%; +} +.ui.eight.buttons > .button { + width: 12.500%; +} +.ui.nine.buttons > .button { + width: 11.11%; +} +.ui.ten.buttons > .button { + width: 10%; +} +.ui.eleven.buttons > .button { + width: 9.09%; +} +.ui.twelve.buttons > .button { + width: 8.3333%; +} +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + width: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: #5C6166; + color: #FFFFFF; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: #4C4C4C; + color: #FFFFFF; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: #333333; + color: #FFFFFF; +} +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: #5BBD72; + color: #FFFFFF; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover, +.ui.green.buttons .active.button, +.ui.green.button.active { + background-color: #58cb73; + color: #FFFFFF; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: #4CB164; + color: #FFFFFF; +} +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: #D95C5C; + color: #FFFFFF; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover, +.ui.red.buttons .active.button, +.ui.red.button.active { + background-color: #E75859; + color: #FFFFFF; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: #D24B4C; + color: #FFFFFF; +} +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #E96633; + color: #FFFFFF; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover, +.ui.orange.buttons .active.button, +.ui.orange.button.active { + background-color: #FF7038; + color: #FFFFFF; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #DA683B; + color: #FFFFFF; +} +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: #6ECFF5; + color: #FFFFFF; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover, +.ui.blue.buttons .active.button, +.ui.blue.button.active { + background-color: #1AB8F3; + color: #FFFFFF; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: #0AA5DF; + color: #FFFFFF; +} +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: #564F8A; + color: #FFFFFF; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover, +.ui.purple.buttons .active.button, +.ui.purple.button.active { + background-color: #3E3773; + color: #FFFFFF; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: #2E2860; + color: #FFFFFF; +} +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: #00B5AD; + color: #FFFFFF; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover, +.ui.teal.buttons .active.button, +.ui.teal.button.active { + background-color: #009A93; + color: #FFFFFF; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: #00847E; + color: #FFFFFF; +} +/*--------------- + Positive +----------------*/ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #5BBD72 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover, +.ui.positive.buttons .active.button, +.ui.positive.button.active { + background-color: #58CB73 !important; + color: #FFFFFF; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #4CB164 !important; + color: #FFFFFF; +} +/*--------------- + Negative +----------------*/ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #D95C5C !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover, +.ui.negative.buttons .active.button, +.ui.negative.button.active { + background-color: #E75859 !important; + color: #FFFFFF; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #D24B4C !important; + color: #FFFFFF; +} +/******************************* + Groups +*******************************/ +.ui.buttons { + display: inline-block; + vertical-align: middle; +} +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.buttons .button:first-child { + border-left: none; +} +.ui.buttons .button { + float: left; + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; + border-left: 1px solid rgba(0, 0, 0, 0.05); +} +.ui.buttons .button:first-child { + margin-left: 0em; + border-top-left-radius: 0.2em; + border-bottom-left-radius: 0.2em; +} +.ui.buttons .button:last-child { + border-top-right-radius: 0.2em; + border-bottom-right-radius: 0.2em; +} +/* Vertical Style */ +.ui.vertical.buttons { + display: inline-block; +} +.ui.vertical.buttons .button { + display: block; + float: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-left: none; + box-shadow: none; +} +.ui.vertical.buttons .button:first-child, +.ui.vertical.buttons .mini.button:first-child, +.ui.vertical.buttons .tiny.button:first-child, +.ui.vertical.buttons .small.button:first-child, +.ui.vertical.buttons .massive.button:first-child, +.ui.vertical.buttons .huge.button:first-child { + margin-top: 0px; + -moz-border-radius: 0.2em 0.2em 0px 0px; + -webkit-border-radius: 0.2em 0.2em 0px 0px; + border-radius: 0.2em 0.2em 0px 0px; +} +.ui.vertical.buttons .button:last-child, +.ui.vertical.buttons .mini.button:last-child, +.ui.vertical.buttons .tiny.button:last-child, +.ui.vertical.buttons .small.button:last-child, +.ui.vertical.buttons .massive.button:last-child, +.ui.vertical.buttons .huge.button:last-child, +.ui.vertical.buttons .gigantic.button:last-child { + -moz-border-radius: 0px 0px 0.2em 0.2em; + -webkit-border-radius: 0px 0px 0.2em 0.2em; + border-radius: 0px 0px 0.2em 0.2em; +} +/* + * # Semantic - Divider + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Divider +*******************************/ +.ui.divider { + margin: 1rem 0rem; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.8); + line-height: 1; + height: 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.ui.vertical.divider, +.ui.horizontal.divider { + position: absolute; + border: none; + height: 0em; + margin: 0em; + background-color: transparent; + font-size: 0.875rem; + font-weight: bold; + text-align: center; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Vertical +---------------*/ +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + margin: 0% 0% 0% -3%; + width: 6%; + height: 50%; + line-height: 0; + padding: 0em; +} +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: " "; + z-index: 3; + border-left: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(255, 255, 255, 0.8); + width: 0%; + height: 80%; +} +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} +/*-------------- + Horizontal +---------------*/ +.ui.horizontal.divider { + position: relative; + top: 0%; + left: 0%; + margin: 1rem 1.5rem; + height: auto; + padding: 0em; + line-height: 1; +} +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + position: absolute; + content: " "; + z-index: 3; + width: 50%; + top: 50%; + height: 0%; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.8); +} +.ui.horizontal.divider:before { + left: 0%; + margin-left: -1.5rem; +} +.ui.horizontal.divider:after { + left: auto; + right: 0%; + margin-right: -1.5rem; +} +/*-------------- + Icon +---------------*/ +.ui.divider > .icon { + margin: 0em; + font-size: 1rem; + vertical-align: middle; +} +/******************************* + Variations +*******************************/ +/*-------------- + Inverted +---------------*/ +.ui.divider.inverted { + color: #ffffff; +} +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: rgba(255, 255, 255, 0.9); +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: rgba(0, 0, 0, 0.15); + border-bottom-color: rgba(255, 255, 255, 0.15); + border-left-color: rgba(0, 0, 0, 0.15); + border-right-color: rgba(255, 255, 255, 0.15); +} +/*-------------- + Fitted +---------------*/ +.ui.fitted.divider { + margin: 0em; +} +/*-------------- + Clearing +---------------*/ +.ui.clearing.divider { + clear: both; +} +/*-------------- + Section +---------------*/ +.ui.section.divider { + margin-top: 2rem; + margin-bottom: 2rem; +} +/* + * # Semantic - Header + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Header +*******************************/ +/* Standard */ +.ui.header { + border: none; + margin: 1em 0em 1rem; + padding: 0em; + font-size: 1.33em; + font-weight: bold; + line-height: 1.33; +} +.ui.header .sub.header { + font-size: 1rem; + font-weight: normal; + margin: 0em; + padding: 0em; + line-height: 1.2; + color: rgba(0, 0, 0, 0.5); +} +.ui.header .content { + display: inline-block; + vertical-align: top; +} +.ui.header .icon { + margin-right: 0.5em; +} +/* Positioning */ +.ui.header:first-child { + margin-top: 0em; +} +.ui.header:last-child { + margin-bottom: 0em; +} +.ui.header + p { + margin-top: 0em; +} +/*-------------- + Page Heading +---------------*/ +h1.ui.header { + min-height: 1rem; + line-height: 1.33; + font-size: 2rem; +} +h2.ui.header { + line-height: 1.33; + font-size: 1.75rem; +} +h3.ui.header { + line-height: 1.33; + font-size: 1.33rem; +} +h4.ui.header { + line-height: 1.33; + font-size: 1.1rem; +} +h5.ui.header { + line-height: 1.2; + font-size: 1rem; +} +/*-------------- + Content Heading +---------------*/ +.ui.huge.header { + min-height: 1em; + font-size: 2em; +} +.ui.large.header { + font-size: 1.75em; +} +.ui.medium.header { + font-size: 1.33em; +} +.ui.small.header { + font-size: 1.1em; +} +.ui.tiny.header { + font-size: 1em; +} +/******************************* + States +*******************************/ +.ui.disabled.header { + opacity: 0.5; +} +/******************************* + Variations +*******************************/ +/*------------------- + Colors +--------------------*/ +.ui.blue.header { + color: #6ECFF5 !important; +} +.ui.black.header { + color: #5C6166 !important; +} +.ui.green.header { + color: #A1CF64 !important; +} +.ui.red.header { + color: #D95C5C !important; +} +.ui.purple.header { + color: #564F8A !important; +} +.ui.teal.header { + color: #00B5AD !important; +} +.ui.blue.dividing.header { + border-bottom: 3px solid #6ECFF5; +} +.ui.black.dividing.header { + border-bottom: 3px solid #5C6166; +} +.ui.green.dividing.header { + border-bottom: 3px solid #A1CF64; +} +.ui.red.dividing.header { + border-bottom: 3px solid #D95C5C; +} +.ui.purple.dividing.header { + border-bottom: 3px solid #564F8A; +} +.ui.teal.dividing.header { + border-bottom: 3px solid #00B5AD; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.header { + color: #FFFFFF; +} +.ui.inverted.header .sub.header { + color: rgba(255, 255, 255, 0.85); +} +/*------------------- + Inverted Colors +--------------------*/ +.ui.inverted.black.header { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.header { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.inverted.green.header { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.inverted.red.header { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.header { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.header { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +.ui.inverted.block.header { + border-bottom: none; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.center.aligned.header { + text-align: center; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.header, +.ui.left.floated.header { + float: left; + margin-top: 0em; + margin-right: 0.5em; +} +.ui.right.floated.header { + float: right; + margin-top: 0em; + margin-left: 0.5em; +} +/*------------------- + Fittted +--------------------*/ +.ui.fitted.header { + padding: 0em; +} +/*------------------- + Dividing +--------------------*/ +.ui.dividing.header { + padding-bottom: 0.2rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.dividing.header .sub.header { + padding-bottom: 0.5em; +} +.ui.dividing.header .icon { + margin-bottom: 0.2em; +} +/*------------------- + Block +--------------------*/ +.ui.block.header { + background-color: #F5F5F5; + padding: 0.5em 1em; +} +/*------------------- + Attached +--------------------*/ +.ui.attached.header { + background-color: #E0E0E0; + padding: 0.5em 1rem; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.top.attached.header { + margin-bottom: 0em; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +/*------------------- + Icon +--------------------*/ +.ui.icon.header { + display: inline-block; + text-align: center; +} +.ui.icon.header .icon { + float: none; + display: block; + font-size: 3em; + margin: 0em auto 0.2em; +} +.ui.icon.header .circular.icon, +.ui.icon.header .square.icon { + font-size: 2em; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} +/* + * # Semantic - Icon + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/*! + * Font Awesome 3.2.1 + * the iconic font designed for Bootstrap + * ------------------------------------------------------------------------------ + * The full suite of pictographic icons, examples, and documentation can be + * found at http://fon.io. Stay up to date on Twitter at + * http://twitter.com/fon. + * + * License + * ------------------------------------------------------------------------------ + * - The Font Awesome font is licensed under SIL OFL 1.1 - + * http://scripts.sil.org/OFL + +/******************************* + Icon +*******************************/ +@font-face { + font-family: 'Icons'; + src: url('../build/uncompressed/fonts/icons.eot'); + src: url('../build/uncompressed/fonts/icons.eot?#iefix') format('embedded-opentype'), url('../build/uncompressed/fonts/icons.woff') format('woff'), url('../build/uncompressed/fonts/icons.ttf') format('truetype'), url('../build/uncompressed/fonts/icons.svg#icons') format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 1.23em; + height: 1em; + font-family: 'Icons'; + font-style: normal; + line-height: 1; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + font-smoothing: antialiased; +} +i.icon.add.sign.box:before { + content: "\f0fe"; +} +i.icon.add.sign:before { + content: "\f055"; +} +i.icon.add:before { + content: "\f067"; +} +i.icon.adjust:before { + content: "\f042"; +} +i.icon.adn:before { + content: "\f170"; +} +i.icon.align.center:before { + content: "\f037"; +} +i.icon.align.justify:before { + content: "\f039"; +} +i.icon.align.left:before { + content: "\f036"; +} +i.icon.align.right:before { + content: "\f038"; +} +i.icon.ambulance:before { + content: "\f0f9"; +} +i.icon.anchor:before { + content: "\f13d"; +} +i.icon.android:before { + content: "\f17b"; +} +i.icon.angle.down:before { + content: "\f107"; +} +i.icon.angle.left:before { + content: "\f104"; +} +i.icon.angle.right:before { + content: "\f105"; +} +i.icon.angle.up:before { + content: "\f106"; +} +i.icon.apple:before { + content: "\f179"; +} +i.icon.archive:before { + content: "\f187"; +} +i.icon.arrow.down:before { + content: "\f078"; +} +i.icon.arrow.left:before { + content: "\f053"; +} +i.icon.arrow.right:before { + content: "\f054"; +} +i.icon.arrow.sign.down:before { + content: "\f13a"; +} +i.icon.arrow.sign.left:before { + content: "\f137"; +} +i.icon.arrow.sign.right:before { + content: "\f138"; +} +i.icon.arrow.sign.up:before { + content: "\f139"; +} +i.icon.arrow.up:before { + content: "\f077"; +} +i.icon.asterisk:before { + content: "\f069"; +} +i.icon.attachment:before { + content: "\f0c6"; +} +i.icon.attention:before { + content: "\f06a"; +} +i.icon.backward:before { + content: "\f04a"; +} +i.icon.ban.circle:before { + content: "\f05e"; +} +i.icon.bar.chart:before { + content: "\f080"; +} +i.icon.barcode:before { + content: "\f02a"; +} +i.icon.beer:before { + content: "\f0fc"; +} +i.icon.bell.outline:before { + content: "\f0a2"; +} +i.icon.bell:before { + content: "\f0f3"; +} +i.icon.bitbucket.sign:before { + content: "\f172"; +} +i.icon.bitbucket:before { + content: "\f171"; +} +i.icon.bitcoin:before { + content: "\f15a"; +} +i.icon.bold:before { + content: "\f032"; +} +i.icon.bolt:before { + content: "\f0e7"; +} +i.icon.book:before { + content: "\f02d"; +} +i.icon.bookmark.empty:before { + content: "\f097"; +} +i.icon.bookmark:before { + content: "\f02e"; +} +i.icon.box.arrow.down:before { + content: "\f150"; +} +i.icon.box.arrow.right:before { + content: "\f152"; +} +i.icon.box.arrow.up:before { + content: "\f151"; +} +i.icon.briefcase:before { + content: "\f0b1"; +} +i.icon.browser:before { + content: "\f022"; +} +i.icon.bug:before { + content: "\f188"; +} +i.icon.building:before { + content: "\f0f7"; +} +i.icon.bullhorn:before { + content: "\f0a1"; +} +i.icon.bullseye:before { + content: "\f140"; +} +i.icon.calendar.empty:before { + content: "\f133"; +} +i.icon.calendar:before { + content: "\f073"; +} +i.icon.camera.retro:before { + content: "\f083"; +} +i.icon.camera:before { + content: "\f030"; +} +i.icon.triangle.down:before { + content: "\f0d7"; +} +i.icon.triangle.left:before { + content: "\f0d9"; +} +i.icon.triangle.right:before { + content: "\f0da"; +} +i.icon.triangle.up:before { + content: "\f0d8"; +} +i.icon.cart:before { + content: "\f07a"; +} +i.icon.certificate:before { + content: "\f0a3"; +} +i.icon.chat.outline:before { + content: "\f0e6"; +} +i.icon.chat:before { + content: "\f086"; +} +i.icon.checkbox.empty:before { + content: "\f096"; +} +i.icon.checkbox.minus:before { + content: "\f147"; +} +i.icon.checked.checkbox:before { + content: "\f046"; +} +i.icon.checkmark.sign:before { + content: "\f14a"; +} +i.icon.checkmark:before { + content: "\f00c"; +} +i.icon.circle.blank:before { + content: "\f10c"; +} +i.icon.circle.down:before { + content: "\f0ab"; +} +i.icon.circle.left:before { + content: "\f0a8"; +} +i.icon.circle.right:before { + content: "\f0a9"; +} +i.icon.circle.up:before { + content: "\f0aa"; +} +i.icon.circle:before { + content: "\f111"; +} +i.icon.cloud.download:before { + content: "\f0ed"; +} +i.icon.cloud.upload:before { + content: "\f0ee"; +} +i.icon.cloud:before { + content: "\f0c2"; +} +i.icon.code.fork:before { + content: "\f126"; +} +i.icon.code:before { + content: "\f121"; +} +i.icon.coffee:before { + content: "\f0f4"; +} +i.icon.collapse:before { + content: "\f117"; +} +i.icon.comment.outline:before { + content: "\f0e5"; +} +i.icon.comment:before { + content: "\f075"; +} +i.icon.copy:before { + content: "\f0c5"; +} +i.icon.crop:before { + content: "\f125"; +} +i.icon.css3:before { + content: "\f13c"; +} +i.icon.cut:before { + content: "\f0c4"; +} +i.icon.dashboard:before { + content: "\f0e4"; +} +i.icon.desktop:before { + content: "\f108"; +} +i.icon.doctor:before { + content: "\f0f0"; +} +i.icon.dollar:before { + content: "\f155"; +} +i.icon.double.angle.down:before { + content: "\f103"; +} +i.icon.double.angle.left:before { + content: "\f100"; +} +i.icon.double.angle.right:before { + content: "\f101"; +} +i.icon.double.angle.up:before { + content: "\f102"; +} +i.icon.down:before { + content: "\f063"; +} +i.icon.download.disk:before { + content: "\f019"; +} +i.icon.download:before { + content: "\f01a"; +} +i.icon.dribbble:before { + content: "\f17d"; +} +i.icon.dropbox:before { + content: "\f16b"; +} +i.icon.edit.sign:before { + content: "\f14b"; +} +i.icon.edit:before { + content: "\f044"; +} +i.icon.eject:before { + content: "\f052"; +} +i.icon.ellipsis.horizontal:before { + content: "\f141"; +} +i.icon.ellipsis.vertical:before { + content: "\f142"; +} +i.icon.eraser:before { + content: "\f12d"; +} +i.icon.euro:before { + content: "\f153"; +} +i.icon.exchange:before { + content: "\f0ec"; +} +i.icon.exclamation:before { + content: "\f12a"; +} +i.icon.expand:before { + content: "\f116"; +} +i.icon.external.url.sign:before { + content: "\f14c"; +} +i.icon.external.url:before { + content: "\f08e"; +} +i.icon.facebook.sign:before { + content: "\f082"; +} +i.icon.facebook:before { + content: "\f09a"; +} +i.icon.facetime.video:before { + content: "\f03d"; +} +i.icon.fast.backward:before { + content: "\f049"; +} +i.icon.fast.forward:before { + content: "\f050"; +} +i.icon.female:before { + content: "\f182"; +} +i.icon.fighter.jet:before { + content: "\f0fb"; +} +i.icon.file.outline:before { + content: "\f016"; +} +i.icon.file.text.outline:before { + content: "\f0f6"; +} +i.icon.file.text:before { + content: "\f15c"; +} +i.icon.file:before { + content: "\f15b"; +} +i.icon.filter:before { + content: "\f0b0"; +} +i.icon.fire.extinguisher:before { + content: "\f134"; +} +i.icon.fire:before { + content: "\f06d"; +} +i.icon.flag.checkered:before { + content: "\f11e"; +} +i.icon.flag.empty:before { + content: "\f11d"; +} +i.icon.flag:before { + content: "\f024"; +} +i.icon.flickr:before { + content: "\f16e"; +} +i.icon.folder.open.outline:before { + content: "\f115"; +} +i.icon.folder.open:before { + content: "\f07c"; +} +i.icon.folder.outline:before { + content: "\f114"; +} +i.icon.folder:before { + content: "\f07b"; +} +i.icon.font:before { + content: "\f031"; +} +i.icon.food:before { + content: "\f0f5"; +} +i.icon.forward.mail:before { + content: "\f064"; +} +i.icon.forward:before { + content: "\f04e"; +} +i.icon.foursquare:before { + content: "\f180"; +} +i.icon.frown:before { + content: "\f119"; +} +i.icon.fullscreen:before { + content: "\f0b2"; +} +i.icon.gamepad:before { + content: "\f11b"; +} +i.icon.gift:before { + content: "\f06b"; +} +i.icon.github.alternate:before { + content: "\f09b"; +} +i.icon.github.sign:before { + content: "\f092"; +} +i.icon.github:before { + content: "\f113"; +} +i.icon.gittip:before { + content: "\f184"; +} +i.icon.glass:before { + content: "\f000"; +} +i.icon.globe:before { + content: "\f0ac"; +} +i.icon.google.plus.sign:before { + content: "\f0d4"; +} +i.icon.google.plus:before { + content: "\f0d5"; +} +i.icon.h.sign:before { + content: "\f0fd"; +} +i.icon.hand.down:before { + content: "\f0a7"; +} +i.icon.hand.left:before { + content: "\f0a5"; +} +i.icon.hand.right:before { + content: "\f0a4"; +} +i.icon.hand.up:before { + content: "\f0a6"; +} +i.icon.hdd:before { + content: "\f0a0"; +} +i.icon.headphones:before { + content: "\f025"; +} +i.icon.heart.empty:before { + content: "\f08a"; +} +i.icon.heart:before { + content: "\f004"; +} +i.icon.help:before { + content: "\f059"; +} +i.icon.hide:before { + content: "\f070"; +} +i.icon.home:before { + content: "\f015"; +} +i.icon.hospital:before { + content: "\f0f8"; +} +i.icon.html5:before { + content: "\f13b"; +} +i.icon.inbox:before { + content: "\f01c"; +} +i.icon.indent.left:before { + content: "\f03b"; +} +i.icon.indent.right:before { + content: "\f03c"; +} +i.icon.info.letter:before { + content: "\f129"; +} +i.icon.info:before { + content: "\f05a"; +} +i.icon.instagram:before { + content: "\f16d"; +} +i.icon.italic:before { + content: "\f033"; +} +i.icon.key:before { + content: "\f084"; +} +i.icon.keyboard:before { + content: "\f11c"; +} +i.icon.lab:before { + content: "\f0c3"; +} +i.icon.laptop:before { + content: "\f109"; +} +i.icon.layout.block:before { + content: "\f009"; +} +i.icon.layout.column:before { + content: "\f0db"; +} +i.icon.layout.grid:before { + content: "\f00a"; +} +i.icon.layout.list:before { + content: "\f00b"; +} +i.icon.leaf:before { + content: "\f06c"; +} +i.icon.left:before { + content: "\f060"; +} +i.icon.legal:before { + content: "\f0e3"; +} +i.icon.lemon:before { + content: "\f094"; +} +i.icon.level.down:before { + content: "\f149"; +} +i.icon.level.up:before { + content: "\f148"; +} +i.icon.lightbulb:before { + content: "\f0eb"; +} +i.icon.linkedin.sign:before { + content: "\f08c"; +} +i.icon.linkedin:before { + content: "\f0e1"; +} +i.icon.linux:before { + content: "\f17c"; +} +i.icon.list.ordered:before { + content: "\f0cb"; +} +i.icon.list.unordered:before { + content: "\f0ca"; +} +i.icon.list:before { + content: "\f03a"; +} +i.icon.loading:before { + content: "\f110"; +} +i.icon.location:before { + content: "\f124"; +} +i.icon.lock:before { + content: "\f023"; +} +i.icon.long.arrow.down:before { + content: "\f175"; +} +i.icon.long.arrow.left:before { + content: "\f177"; +} +i.icon.long.arrow.right:before { + content: "\f178"; +} +i.icon.long.arrow.up:before { + content: "\f176"; +} +i.icon.magic:before { + content: "\f0d0"; +} +i.icon.magnet:before { + content: "\f076"; +} +i.icon.mail.outline:before { + content: "\f003"; +} +i.icon.mail.reply:before { + content: "\f112"; +} +i.icon.mail:before { + content: "\f0e0"; +} +i.icon.male:before { + content: "\f183"; +} +i.icon.map.marker:before { + content: "\f041"; +} +i.icon.map:before { + content: "\f14e"; +} +i.icon.maxcdn:before { + content: "\f136"; +} +i.icon.medkit:before { + content: "\f0fa"; +} +i.icon.meh:before { + content: "\f11a"; +} +i.icon.minus.sign.alternate:before { + content: "\f146"; +} +i.icon.minus.sign:before { + content: "\f056"; +} +i.icon.minus:before { + content: "\f068"; +} +i.icon.mobile:before { + content: "\f10b"; +} +i.icon.money:before { + content: "\f0d6"; +} +i.icon.moon:before { + content: "\f186"; +} +i.icon.move:before { + content: "\f047"; +} +i.icon.music:before { + content: "\f001"; +} +i.icon.mute:before { + content: "\f131"; +} +i.icon.off:before { + content: "\f011"; +} +i.icon.ok.circle:before { + content: "\f05d"; +} +i.icon.ok.sign:before { + content: "\f058"; +} +i.icon.paste:before { + content: "\f0ea"; +} +i.icon.pause:before { + content: "\f04c"; +} +i.icon.payment:before { + content: "\f09d"; +} +i.icon.pencil:before { + content: "\f040"; +} +i.icon.phone.sign:before { + content: "\f098"; +} +i.icon.phone:before { + content: "\f095"; +} +i.icon.photo:before { + content: "\f03e"; +} +i.icon.pin:before { + content: "\f08d"; +} +i.icon.pinterest.sign:before { + content: "\f0d3"; +} +i.icon.pinterest:before { + content: "\f0d2"; +} +i.icon.plane:before { + content: "\f072"; +} +i.icon.play.circle:before { + content: "\f01d"; +} +i.icon.play.sign:before { + content: "\f144"; +} +i.icon.play:before { + content: "\f04b"; +} +i.icon.pound:before { + content: "\f154"; +} +i.icon.print:before { + content: "\f02f"; +} +i.icon.puzzle.piece:before { + content: "\f12e"; +} +i.icon.qr.code:before { + content: "\f029"; +} +i.icon.question:before { + content: "\f128"; +} +i.icon.quote.left:before { + content: "\f10d"; +} +i.icon.quote.right:before { + content: "\f10e"; +} +i.icon.refresh:before { + content: "\f021"; +} +i.icon.remove.circle:before { + content: "\f05c"; +} +i.icon.remove.sign:before { + content: "\f057"; +} +i.icon.remove:before { + content: "\f00d"; +} +i.icon.renren:before { + content: "\f18b"; +} +i.icon.reorder:before { + content: "\f0c9"; +} +i.icon.repeat:before { + content: "\f01e"; +} +i.icon.reply.all.mail:before { + content: "\f122"; +} +i.icon.resize.full:before { + content: "\f065"; +} +i.icon.resize.horizontal:before { + content: "\f07e"; +} +i.icon.resize.small:before { + content: "\f066"; +} +i.icon.resize.vertical:before { + content: "\f07d"; +} +i.icon.retweet:before { + content: "\f079"; +} +i.icon.right:before { + content: "\f061"; +} +i.icon.road:before { + content: "\f018"; +} +i.icon.rocket:before { + content: "\f135"; +} +i.icon.rss.sign:before { + content: "\f143"; +} +i.icon.rss:before { + content: "\f09e"; +} +i.icon.rupee:before { + content: "\f156"; +} +i.icon.save:before { + content: "\f0c7"; +} +i.icon.screenshot:before { + content: "\f05b"; +} +i.icon.search:before { + content: "\f002"; +} +i.icon.setting:before { + content: "\f013"; +} +i.icon.settings:before { + content: "\f085"; +} +i.icon.share.sign:before { + content: "\f14d"; +} +i.icon.share:before { + content: "\f045"; +} +i.icon.shield:before { + content: "\f132"; +} +i.icon.shuffle:before { + content: "\f074"; +} +i.icon.sign.in:before { + content: "\f090"; +} +i.icon.sign.out:before { + content: "\f08b"; +} +i.icon.sign:before { + content: "\f0c8"; +} +i.icon.signal:before { + content: "\f012"; +} +i.icon.sitemap:before { + content: "\f0e8"; +} +i.icon.skype:before { + content: "\f17e"; +} +i.icon.smile:before { + content: "\f118"; +} +i.icon.sort.alphabet.descending:before { + content: "\f15e"; +} +i.icon.sort.alphabet:before { + content: "\f15d"; +} +i.icon.sort.ascending:before { + content: "\f0de"; +} +i.icon.sort.attributes.descending:before { + content: "\f161"; +} +i.icon.sort.attributes:before { + content: "\f160"; +} +i.icon.sort.descending:before { + content: "\f0dd"; +} +i.icon.sort.order.descending:before { + content: "\f163"; +} +i.icon.sort.order:before { + content: "\f162"; +} +i.icon.sort:before { + content: "\f0dc"; +} +i.icon.stackexchange:before { + content: "\f16c"; +} +i.icon.star.empty:before { + content: "\f006"; +} +i.icon.star.half.empty:before { + content: "\f123"; +} +i.icon.star.half.full:before, +i.icon.star.half:before { + content: "\f089"; +} +i.icon.star:before { + content: "\f005"; +} +i.icon.step.backward:before { + content: "\f048"; +} +i.icon.step.forward:before { + content: "\f051"; +} +i.icon.stethoscope:before { + content: "\f0f1"; +} +i.icon.stop:before { + content: "\f04d"; +} +i.icon.strikethrough:before { + content: "\f0cc"; +} +i.icon.subscript:before { + content: "\f12c"; +} +i.icon.suitcase:before { + content: "\f0f2"; +} +i.icon.sun:before { + content: "\f185"; +} +i.icon.superscript:before { + content: "\f12b"; +} +i.icon.table:before { + content: "\f0ce"; +} +i.icon.tablet:before { + content: "\f10a"; +} +i.icon.tag:before { + content: "\f02b"; +} +i.icon.tags:before { + content: "\f02c"; +} +i.icon.tasks:before { + content: "\f0ae"; +} +i.icon.terminal:before { + content: "\f120"; +} +i.icon.text.height:before { + content: "\f034"; +} +i.icon.text.width:before { + content: "\f035"; +} +i.icon.thumbs.down.outline:before { + content: "\f088"; +} +i.icon.thumbs.down:before { + content: "\f165"; +} +i.icon.thumbs.up.outline:before { + content: "\f087"; +} +i.icon.thumbs.up:before { + content: "\f164"; +} +i.icon.ticket:before { + content: "\f145"; +} +i.icon.time:before { + content: "\f017"; +} +i.icon.tint:before { + content: "\f043"; +} +i.icon.trash:before { + content: "\f014"; +} +i.icon.trello:before { + content: "\f181"; +} +i.icon.trophy:before { + content: "\f091"; +} +i.icon.truck:before { + content: "\f0d1"; +} +i.icon.tumblr.sign:before { + content: "\f174"; +} +i.icon.tumblr:before { + content: "\f173"; +} +i.icon.twitter.sign:before { + content: "\f081"; +} +i.icon.twitter:before { + content: "\f099"; +} +i.icon.umbrella:before { + content: "\f0e9"; +} +i.icon.underline:before { + content: "\f0cd"; +} +i.icon.undo:before { + content: "\f0e2"; +} +i.icon.unhide:before { + content: "\f06e"; +} +i.icon.unlink:before { + content: "\f127"; +} +i.icon.unlock.alternate:before { + content: "\f13e"; +} +i.icon.unlock:before { + content: "\f09c"; +} +i.icon.unmute:before { + content: "\f130"; +} +i.icon.up:before { + content: "\f062"; +} +i.icon.upload.disk:before { + content: "\f093"; +} +i.icon.upload:before { + content: "\f01b"; +} +i.icon.url:before { + content: "\f0c1"; +} +i.icon.user:before { + content: "\f007"; +} +i.icon.users:before { + content: "\f0c0"; +} +i.icon.video:before { + content: "\f008"; +} +i.icon.vk:before { + content: "\f189"; +} +i.icon.volume.down:before { + content: "\f027"; +} +i.icon.volume.off:before { + content: "\f026"; +} +i.icon.volume.up:before { + content: "\f028"; +} +i.icon.warning:before { + content: "\f071"; +} +i.icon.weibo:before { + content: "\f18a"; +} +i.icon.windows:before { + content: "\f17a"; +} +i.icon.won:before { + content: "\f159"; +} +i.icon.wrench:before { + content: "\f0ad"; +} +i.icon.xing.sign:before { + content: "\f169"; +} +i.icon.xing:before { + content: "\f168"; +} +i.icon.yen:before { + content: "\f157"; +} +i.icon.youtube.play:before { + content: "\f16a"; +} +i.icon.youtube.sign:before { + content: "\f166"; +} +i.icon.youtube:before { + content: "\f167"; +} +i.icon.yuan:before { + content: "\f158"; +} +i.icon.zoom.in:before { + content: "\f00e"; +} +i.icon.zoom.out:before { + content: "\f010"; +} +/*-------------- + Aliases +---------------*/ +i.icon.check:before { + content: "\f00c"; +} +i.icon.close:before { + content: "\f00d"; +} +i.icon.delete:before { + content: "\f00d"; +} +i.icon.like:before { + content: "\f004"; +} +i.icon.signup:before { + content: "\f044"; +} +i.icon.dropdown:before { + content: "\f0d7"; +} +/*-------------- + Spacing Fix +---------------*/ +/* dropdown arrows are to the right */ +i.dropdown.icon { + margin: 0em 0em 0em 0.5em; +} +/* stars are usually consecutive */ +i.icon.star { + width: auto; + margin: 0em; +} +/* left side icons */ +i.icon.left, +i.icon.left, +i.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} +/* right side icons */ +i.icon.search, +i.icon.up, +i.icon.down, +i.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} +/******************************* + Types +*******************************/ +/*-------------- + Loading +---------------*/ +i.icon.loading { + -webkit-animation: icon-loading 2s linear infinite; + -moz-animation: icon-loading 2s linear infinite; + -ms-animation: icon-loading 2s linear infinite; + -o-animation: icon-loading 2s linear infinite; + animation: icon-loading 2s linear infinite; +} +@keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes icon-loading { + from { + -moz-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-ms-keyframes icon-loading { + from { + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes icon-loading { + from { + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/******************************* + States +*******************************/ +i.icon.hover { + opacity: 1; +} +i.icon.active { + opacity: 1; +} +i.emphasized.icon { + opacity: 1; +} +i.icon.disabled { + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +i.link.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +i.link.icon:hover { + opacity: 1 !important; +} +/*------------------- + Circular +--------------------*/ +i.circular.icon { + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + line-height: 1 !important; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Flipped +--------------------*/ +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -o-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +/*------------------- + Rotated +--------------------*/ +i.left.rotated.icon { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +i.right.rotated.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +/*------------------- + Square +--------------------*/ +i.square.icon { + width: 2em; + height: 2em; + padding: 0.5em 0.35em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} +i.square.icon:before { + vertical-align: middle; +} +i.square.inverted.icon { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*------------------- + Inverted +--------------------*/ +i.inverted.icon { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Colors +--------------------*/ +i.blue.icon { + color: #6ECFF5 !important; +} +i.black.icon { + color: #5C6166 !important; +} +i.green.icon { + color: #A1CF64 !important; +} +i.red.icon { + color: #D95C5C !important; +} +i.purple.icon { + color: #564F8A !important; +} +i.teal.icon { + color: #00B5AD !important; +} +/*------------------- + Inverted Colors +--------------------*/ +i.inverted.black.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +i.inverted.blue.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +i.inverted.green.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +i.inverted.red.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +i.inverted.purple.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +i.inverted.teal.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Sizes +--------------------*/ +i.small.icon { + font-size: 0.875em; +} +i.icon { + font-size: 1em; +} +i.large.icon { + font-size: 2em; + margin-right: 0.5em; + vertical-align: middle; +} +i.huge.icon { + font-size: 4em; + margin-right: 0.75em; + vertical-align: middle; +} +i.massive.icon { + font-size: 8em; + margin-right: 1em; + vertical-align: middle; +} +/* + * # Semantic - Image + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Image +*******************************/ +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: rgba(0, 0, 0, 0.05); +} +img.ui.image { + display: block; + background: none; +} +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} +/******************************* + States +*******************************/ +.ui.disabled.image { + cursor: default; + opacity: 0.3; +} +/******************************* + Variations +*******************************/ +/*-------------- + Rounded +---------------*/ +.ui.rounded.images .image, +.ui.rounded.images img, +.ui.rounded.image img, +.ui.rounded.image { + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +/*-------------- + Circular +---------------*/ +.ui.circular.images .image, +.ui.circular.images img, +.ui.circular.image img, +.ui.circular.image { + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*-------------- + Avatar +---------------*/ +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.image img, +.ui.avatar.image { + margin-right: 0.5em; + display: inline-block; + width: 2em; + height: 2em; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: 1em; + margin-bottom: 1em; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-bottom: 1em; + margin-left: 1em; +} +/*-------------- + Sizes +---------------*/ +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.image { + width: 20px; + font-size: 0.7rem; +} +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.image { + width: 35px; + font-size: 0.8rem; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.image { + width: 80px; + font-size: 0.9rem; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.image { + width: 300px; + font-size: 1rem; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.image { + width: 450px; + font-size: 1.1rem; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.image { + width: 600px; + font-size: 1.2rem; +} +/******************************* + Groups +*******************************/ +.ui.images { + font-size: 0em; + margin: 0em -0.25rem 0rem; +} +.ui.images .image, +.ui.images img { + display: inline-block; + margin: 0em 0.25em 0.5em; +} +/* + * # Semantic - Input + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Standard +*******************************/ +/*-------------------- + Inputs +---------------------*/ +.ui.input { + display: inline-block; + position: relative; +} +.ui.input input { + width: 100%; + font-family: "Helvetica Neue", "Helvetica", Arial; + margin: 0em; + padding: 0.85em 1.2em; + font-size: 0.875em; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.7); + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -moz-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -o-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -ms-transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------------- + Placeholder +---------------------*/ +/* browsers require these rules separate */ +.ui.input::-web inputkit-input-placeholder { + color: #E0E0E0; +} +.ui.input::-moz input-placeholder { + color: #E0E0E0; +} +/******************************* + States +*******************************/ +/*-------------------- + Active +---------------------*/ +.ui.input input:active, +.ui.input.down input { + border-color: rgba(0, 0, 0, 0.3); + background-color: #FAFAFA; +} +/*-------------------- + Loading +---------------------*/ +.ui.loading.input > .icon { + background: url('../build/uncompressed/images/loader-mini.gif') no-repeat 50% 50%; +} +.ui.loading.input > .icon:before, +.ui.loading.input > .icon:after { + display: none; +} +/*-------------------- + Focus +---------------------*/ +.ui.input.focus input, +.ui.input input:focus { + border-color: rgba(0, 0, 0, 0.2); + color: rgba(0, 0, 0, 0.85); +} +.ui.input.focus input input::-webkit-input-placeholder, +.ui.input input:focus input::-webkit-input-placeholder { + color: #AAAAAA; +} +.ui.input.focus input input::-moz-placeholder, +.ui.input input:focus input::-moz-placeholder { + color: #AAAAAA; +} +/*-------------------- + Error +---------------------*/ +.ui.input.error input { + background-color: #FFFAFA; + border-color: #E7BEBE; + color: #D95C5C; +} +/* Error Placeholder */ +.ui.input.error input ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.input.error input ::-moz-placeholder { + color: rgba(255, 80, 80, 0.4); +} +.ui.input.error input :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} +.ui.input.error input :focus::-moz-placeholder { + color: rgba(255, 80, 80, 0.7); +} +/******************************* + Variations +*******************************/ +/*-------------------- + Transparent +---------------------*/ +.ui.transparent.input input { + border: none; + background-color: transparent; +} +/*-------------------- + Icon +---------------------*/ +.ui.icon.input > .icon { + position: absolute; + opacity: 0.5; + top: 0px; + right: 0px; + margin: 0em; + width: 2.6em; + height: 100%; + padding-top: 0.85em; + text-align: center; + -webkit-border-radius: 0em 0.3125em 0.3125em 0em; + -moz-border-radius: 0em 0.3125em 0.3125em 0em; + border-radius: 0em 0.3125em 0.3125em 0em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +.ui.icon.input input { + padding-right: 3em !important; +} +.ui.icon.input > .circular.icon { + top: 0.35em; + right: 0.5em; +} +/* Left Side */ +.ui.left.icon.input > .icon { + right: auto; + left: 1px; + -webkit-border-radius: 0.3125em 0em 0em 0.3125em; + -moz-border-radius: 0.3125em 0em 0em 0.3125em; + border-radius: 0.3125em 0em 0em 0.3125em; +} +.ui.left.icon.input > .circular.icon { + right: auto; + left: 0.5em; +} +.ui.left.icon.input > input { + padding-left: 3em !important; + padding-right: 1.2em !important; +} +/* Focus */ +.ui.icon.input > input:focus ~ .icon { + opacity: 1; +} +/*-------------------- + Labeled +---------------------*/ +.ui.labeled.input .corner.label { + top: 1px; + right: 1px; + -webkit-border-top-right-radius: 0.3125em; + -moz-border-top-right-radius: 0.3125em; + border-top-right-radius: 0.3125em; +} +.ui.labeled.input input { + padding-right: 2.5em !important; +} +/* Spacing with corner label */ +.ui.labeled.icon.input:not(.left) > input { + padding-right: 3.25em !important; +} +.ui.labeled.icon.input:not(.left) > .icon { + margin-right: 0.75em; +} +/*-------------------- + Action +---------------------*/ +.ui.action.input { + display: table; +} +.ui.action.input > input { + display: table-cell; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right: none; +} +.ui.action.input > .button { + display: table-cell; + opacity: 0.9; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + white-space: nowrap; +} +.ui.action.input > .button > .icon { + display: inline; +} +.ui.action.input > input:focus ~ .button { + opacity: 1; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset; +} +/*-------------------- + Fluid +---------------------*/ +.ui.fluid.input { + display: block; +} +/*-------------------- + Size +---------------------*/ +.ui.mini.input { + font-size: 0.8125rem; +} +.ui.tiny.input { + font-size: 0.875rem; +} +.ui.small.input { + font-size: 0.875rem; +} +.ui.input { + font-size: 1rem; +} +.ui.large.input { + font-size: 1.125rem; +} +.ui.big.input { + font-size: 1.25rem; +} +.ui.huge.input { + font-size: 1.375rem; +} +.ui.massive.input { + font-size: 1.5rem; +} +/* + * # Semantic - Label + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Label +*******************************/ +.ui.label { + display: inline-block; + vertical-align: middle; + margin: -0.25em 0.25em 0em; + background-color: #E8E8E8; + border-color: #E8E8E8; + padding: 0.5em 0.8em; + color: rgba(0, 0, 0, 0.65); + text-transform: uppercase; + font-weight: normal; + -webkit-border-radius: 0.325em; + -moz-border-radius: 0.325em; + border-radius: 0.325em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} +/* Link */ +a.ui.label { + cursor: pointer; +} +/* Detail */ +.ui.label .detail { + display: inline-block; + margin-left: 0.5em; + font-weight: bold; + opacity: 0.8; +} +/* Icon */ +.ui.label .icon { + width: auto; +} +/* Removable label */ +.ui.label .delete.icon { + cursor: pointer; + margin: 0em 0em 0em 0.5em; + opacity: 0.7; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.label .delete.icon:hover { + opacity: 0.99; +} +/******************************* + Types +*******************************/ +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + padding-top: 0.4em; + padding-bottom: 0.4em; + line-height: 1.5em; + vertical-align: baseline; + text-transform: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} +.ui.image.label img { + display: inline-block; + height: 2.25em; + margin: -0.4em 0.8em -0.4em -0.8em; + vertical-align: top; + -moz-border-radius: 0.325em 0em 0em 0.325em; + -webkit-border-radius: 0.325em 0em 0em 0.325em; + border-radius: 0.325em 0em 0em 0.325em; +} +/******************************* + States +*******************************/ +/*------------------- + Disabled +--------------------*/ +.ui.label.disabled { + opacity: 0.5; +} +/*------------------- + Hover +--------------------*/ +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: #E0E0E0; + border-color: #E0E0E0; + color: rgba(0, 0, 0, 0.7); +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + background-color: #E0E0E0; + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Visible +--------------------*/ +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} +/*------------------- + Hidden +--------------------*/ +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*------------------- + Tag +--------------------*/ +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding: 0.33em 1.3em 0.33em 1.4em; + -webkit-border-radius: 0px 3px 3px 0px; + -moz-border-radius: 0px 3px 3px 0px; + border-radius: 0px 3px 3px 0px; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + top: 0.3em; + left: 0.3em; + content: ''; + margin-left: -1em; + background-image: none; + width: 1.5em; + height: 1.5em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -0.25em; + margin-top: -0.3em; + background-color: #FFFFFF; + width: 0.55em; + height: 0.55em; + -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + -moz-border-radius: 100px 100px 100px 100px; + -webkit-border-radius: 100px 100px 100px 100px; + border-radius: 100px 100px 100px 100px; +} +/*------------------- + Ribbon +--------------------*/ +.ui.ribbon.label { + position: relative; + left: -1.8rem; + padding-left: 2rem; + -webkit-border-radius: 0px 4px 4px 0px; + -moz-border-radius: 0px 4px 4px 0px; + border-radius: 0px 4px 4px 0px; +} +.ui.ribbon.label:after { + position: absolute; + content: ""; + top: 100%; + left: 0%; + border-top: 0em solid transparent; + border-right-width: 1em; + border-right-color: inherit; + border-right-style: solid; + border-bottom: 1em solid transparent; + border-left: 0em solid transparent; + width: 0em; + height: 0em; +} +/*------------------- + Attached +--------------------*/ +.ui.top.attached.label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + -webkit-border-radius: 4px 4px 0em 0em; + -moz-border-radius: 4px 4px 0em 0em; + border-radius: 4px 4px 0em 0em; +} +.ui.bottom.attached.label { + top: auto; + bottom: 0em; + -webkit-border-radius: 0em 0em 4px 4px; + -moz-border-radius: 0em 0em 4px 4px; + border-radius: 0em 0em 4px 4px; +} +.ui.top.left.attached.label { + width: auto; + margin-top: 0em !important; + -webkit-border-radius: 4px 0em 4px 0em; + -moz-border-radius: 4px 0em 4px 0em; + border-radius: 4px 0em 4px 0em; +} +.ui.top.right.attached.label { + width: auto; + left: auto; + right: 0em; + -webkit-border-radius: 0em 4px 0em 4px; + -moz-border-radius: 0em 4px 0em 4px; + border-radius: 0em 4px 0em 4px; +} +.ui.bottom.left.attached.label { + width: auto; + top: auto; + bottom: 0em; + -webkit-border-radius: 4px 0em 0em 4px; + -moz-border-radius: 4px 0em 0em 4px; + border-radius: 4px 0em 0em 4px; +} +.ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + -webkit-border-radius: 4px 0em 4px 0em; + -moz-border-radius: 4px 0em 4px 0em; + border-radius: 4px 0em 4px 0em; +} +/*------------------- + Corner Label +--------------------*/ +.ui.corner.label { + background-color: transparent; + position: absolute; + top: 0em; + right: 0em; + z-index: 10; + margin: 0em; + font-size: 0.8125em; + width: 2rem; + height: 2rem; + padding: 0em; + text-align: center; + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + width: 0em; + height: 0em; + border-top: 0em solid transparent; + border-right: 3em solid transparent; + border-bottom: 3em solid transparent; + border-left: 0em solid transparent; + border-right-color: inherit; + -webkit-transition: border-color 0.2s ease; + -moz-transition: border-color 0.2s ease; + -o-transition: border-color 0.2s ease; + -ms-transition: border-color 0.2s ease; + transition: border-color 0.2s ease; +} +.ui.corner.label .icon { + margin: 0.4em 0em 0em 0.7em; +} +.ui.corner.label .text { + display: inline-block; + font-weight: bold; + margin: 0.5em 0em 0em 0.6em; + width: 2.5em; + font-size: 0.82em; + text-align: center; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: 3em solid transparent; + border-right: 3em solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + border-top-color: inherit; +} +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} +.ui.left.corner.label .text { + margin: 0.5em 0em 0em -0.6em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +/* Hover */ +.ui.corner.label:hover { + background-color: transparent; +} +/*------------------- + Fluid +--------------------*/ +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.labels .label, +.ui.inverted.label { + color: #FFFFFF !important; +} +/*------------------- + Colors +--------------------*/ +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: #5C6166 !important; + border-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.labels .black.label:before, +.ui.black.labels .label:before, +.ui.black.label:before { + background-color: #5C6166 !important; +} +/* Hover */ +a.ui.black.labels .label:hover, +a.ui.black.label:hover { + background-color: #888888 !important; + border-color: #888888 !important; +} +.ui.labels a.black.label:hover:before, +.ui.black.labels a.label:hover:before, +a.ui.black.label:hover:before { + background-color: #888888 !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: #A1CF64 !important; + border-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.labels .green.label:before, +.ui.green.labels .label:before, +.ui.green.label:before { + background-color: #A1CF64 !important; +} +/* Hover */ +a.ui.green.labels .label:hover, +a.ui.green.label:hover { + background-color: #89B84C !important; + border-color: #89B84C !important; +} +.ui.labels a.green.label:hover:before, +.ui.green.labels a.label:hover:before, +a.ui.green.label:hover:before { + background-color: #89B84C !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: #D95C5C !important; + border-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.labels .red.label:before, +.ui.red.labels .label:before, +.ui.red.label:before { + background-color: #D95C5C !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Hover */ +a.ui.red.labels .label:hover, +a.ui.red.label:hover { + background-color: #DE3859 !important; + border-color: #DE3859 !important; + color: #FFFFFF !important; +} +.ui.labels a.red.label:hover:before, +.ui.red.labels a.label:hover:before, +a.ui.red.label:hover:before { + background-color: #DE3859 !important; +} +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: #6ECFF5 !important; + border-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.labels .blue.label:before, +.ui.blue.labels .label:before, +.ui.blue.label:before { + background-color: #6ECFF5 !important; +} +/* Hover */ +a.ui.blue.labels .label:hover, +.ui.blue.labels a.label:hover, +a.ui.blue.label:hover { + background-color: #1AB8F3 !important; + border-color: #1AB8F3 !important; + color: #FFFFFF !important; +} +.ui.labels a.blue.label:hover:before, +.ui.blue.labels a.label:hover:before, +a.ui.blue.label:hover:before { + background-color: #1AB8F3 !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: #564F8A !important; + border-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.labels .purple.label:before, +.ui.purple.labels .label:before, +.ui.purple.label:before { + background-color: #564F8A !important; +} +/* Hover */ +a.ui.purple.labels .label:hover, +.ui.purple.labels a.label:hover, +a.ui.purple.label:hover { + background-color: #3E3773 !important; + border-color: #3E3773 !important; + color: #FFFFFF !important; +} +.ui.labels a.purple.label:hover:before, +.ui.purple.labels a.label:hover:before, +a.ui.purple.label:hover:before { + background-color: #3E3773 !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/*--- Pink ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: #00B5AD !important; + border-color: #00B5AD !important; + color: #FFFFFF !important; +} +.ui.labels .teal.label:before, +.ui.teal.labels .label:before, +.ui.teal.label:before { + background-color: #00B5AD !important; +} +/* Hover */ +a.ui.teal.labels .label:hover, +.ui.teal.labels a.label:hover, +a.ui.teal.label:hover { + background-color: #009A93 !important; + border-color: #009A93 !important; + color: #FFFFFF !important; +} +.ui.labels a.teal.label:hover:before, +.ui.teal.labels a.label:hover:before, +a.ui.teal.label:hover:before { + background-color: #009A93 !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: -0.125em 0.5em -0.125em 0em; + padding: 0.35em 1em; + min-width: 6em; + text-align: center; +} +/*------------------- + Circular +--------------------*/ +.ui.circular.labels .label, +.ui.circular.label { + min-height: 1em; + max-height: 2em; + padding: 0.5em !important; + line-height: 1em; + text-align: center; + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*------------------- + Pointing +--------------------*/ +.ui.pointing.label { + position: relative; +} +.ui.attached.pointing.label { + position: absolute; +} +.ui.pointing.label:before { + position: absolute; + content: ""; + width: 0.6em; + height: 0.6em; + background-image: none; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-transition: background 0.1s linear + ; + -moz-transition: background 0.1s linear + ; + -o-transition: background 0.1s linear + ; + -ms-transition: background 0.1s linear + ; + transition: background 0.1s linear + ; +} +/*--- Above ---*/ +.ui.pointing.label:before { + background-color: #E8E8E8; +} +.ui.pointing.label, +.ui.pointing.above.label { + margin-top: 1em; +} +.ui.pointing.label:before, +.ui.pointing.above.label:before { + margin-left: -0.3em; + top: -0.3em; + left: 50%; +} +/*--- Below ---*/ +.ui.pointing.below.label { + margin-top: 0em; + margin-bottom: 1em; +} +.ui.pointing.below.label:before { + margin-left: -0.3em; + top: auto; + right: auto; + bottom: -0.3em; + left: 50%; +} +/*--- Left ---*/ +.ui.pointing.left.label { + margin-top: 0em; + margin-left: 1em; +} +.ui.pointing.left.label:before { + margin-top: -0.3em; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui.pointing.right.label { + margin-top: 0em; + margin-right: 1em; +} +.ui.pointing.right.label:before { + margin-top: -0.3em; + right: -0.3em; + top: 50%; + bottom: auto; + left: auto; +} +/*------------------ + Floating Label +-------------------*/ +.ui.floating.label { + position: absolute; + z-index: 100; + top: -1em; + left: 100%; + margin: 0em 0em 0em -1.5em !important; +} +/*------------------- + Sizes +--------------------*/ +.ui.small.labels .label, +.ui.small.label { + font-size: 0.75rem; +} +.ui.label { + font-size: 0.8125rem; +} +.ui.large.labels .label, +.ui.large.label { + font-size: 0.875rem; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: 1rem; +} +/* + * # Semantic - Loader + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Loader +*******************************/ +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: 50%; + left: 50%; + margin: 0px; + z-index: 1000; + -webkit-transform: translateX(-50%) translateY(-50%); + -moz-transform: translateX(-50%) translateY(-50%); + -o-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} +.ui.dimmer .loader { + display: block; +} +/******************************* + Types +*******************************/ +/*------------------- + Text +--------------------*/ +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} +.ui.mini.text.loader { + min-width: 16px; + padding-top: 2em; + font-size: 0.875em; +} +.ui.small.text.loader { + min-width: 24px; + padding-top: 2.5em; + font-size: 0.875em; +} +.ui.text.loader { + min-width: 32px; + font-size: 1em; + padding-top: 3em; +} +.ui.large.text.loader { + min-width: 64px; + padding-top: 5em; + font-size: 1.2em; +} +/******************************* + States +*******************************/ +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} +/******************************* + Variations +*******************************/ +/*------------------- + Inverted +--------------------*/ +.ui.dimmer .ui.text.loader, +.ui.inverted.text.loader { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.dimmer .ui.text.loader { + color: rgba(0, 0, 0, 0.8); +} +/* Tiny Size */ +.ui.dimmer .mini.ui.loader, +.ui.inverted .mini.ui.loader { + background-image: url('../build/uncompressed/images/loader-mini-inverted.gif'); +} +/* Small Size */ +.ui.dimmer .small.ui.loader, +.ui.inverted .small.ui.loader { + background-image: url('../build/uncompressed/images/loader-small-inverted.gif'); +} +/* Standard Size */ +.ui.dimmer .ui.loader, +.ui.inverted.loader { + background-image: url('../build/uncompressed/images/loader-medium-inverted.gif'); +} +/* Large Size */ +.ui.dimmer .large.ui.loader, +.ui.inverted .large.ui.loader { + background-image: url('../build/uncompressed/images/loader-large-inverted.gif'); +} +/*------------------- + Sizes +--------------------*/ +/* Tiny Size */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: 16px; + height: 16px; + background-image: url('../build/uncompressed/images/loader-mini.gif'); +} +/* Small Size */ +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 24px; + height: 24px; + background-image: url('../build/uncompressed/images/loader-small.gif'); +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 32px; + height: 32px; + background: url('../build/uncompressed/images/loader-medium.gif') no-repeat; + background-position: 48% 0px; +} +/* Large Size */ +.ui.inverted.dimmer .ui.loader.large, +.ui.loader.large { + width: 64px; + height: 64px; + background-image: url('../build/uncompressed/images/loader-large.gif'); +} +/*------------------- + Inline +--------------------*/ +.ui.inline.loader { + position: static; + vertical-align: middle; + margin: 0em; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; +} +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} +/* + * # Semantic - Progress Bar + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Progress Bar +*******************************/ +.ui.progress { + border: 1px solid rgba(0, 0, 0, 0.1); + width: 100%; + height: 35px; + background-color: #FAFAFA; + padding: 5px; + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.progress .bar { + display: inline-block; + height: 100%; + background-color: #CCCCCC; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-transition: width 1s ease-in-out, background-color 1s ease-out; + -moz-transition: width 1s ease-in-out, background-color 1s ease-out; + -ms-transition: width 1s ease-in-out, background-color 1s ease-out; + -o-transition: width 1s ease-in-out, background-color 1s ease-out; + transition: width 1s ease-in-out, background-color 1s ease-out; +} +/******************************* + States +*******************************/ +/*-------------- + Successful +---------------*/ +.ui.successful.progress .bar { + background-color: #73E064 !important; +} +.ui.successful.progress .bar, +.ui.successful.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/*-------------- + Failed +---------------*/ +.ui.failed.progress .bar { + background-color: #DF9BA4 !important; +} +.ui.failed.progress .bar, +.ui.failed.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/*-------------- + Active +---------------*/ +.ui.active.progress .bar { + position: relative; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFFFFF; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-animation: progress-active 2s ease-out infinite; + -moz-animation: progress-active 2s ease-out infinite; + animation: progress-active 2s ease-out infinite; +} +@-webkit-keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 95%; + } +} +@-moz-keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 0; + width: 100%; + } +} +/*-------------- + Disabled +---------------*/ +.ui.disabled.progress { + opacity: 0.35; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; + animation: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Attached +---------------*/ +/* bottom attached */ +.ui.progress.attached { + position: relative; + border: none; +} +.ui.progress.attached, +.ui.progress.attached .bar { + display: block; + height: 3px; + padding: 0px; + overflow: hidden; + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +.ui.progress.attached .bar { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/* top attached */ +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: -2px; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.ui.progress.top.attached .bar { + -webkit-border-radius: 0em; + -moz-border-radius: 0em; + border-radius: 0em; +} +/*-------------- + Colors +---------------*/ +.ui.blue.progress .bar { + background-color: #6ECFF5; +} +.ui.black.progress .bar { + background-color: #5C6166; +} +.ui.green.progress .bar { + background-color: #A1CF64; +} +.ui.red.progress .bar { + background-color: #EF4D6D; +} +.ui.purple.progress .bar { + background-color: #564F8A; +} +.ui.teal.progress .bar { + background-color: #00B5AD; +} +/*-------------- + Striped +---------------*/ +.ui.progress.striped .bar { + -webkit-background-size: 30px 30px; + -moz-background-size: 30px 30px; + background-size: 30px 30px; + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.ui.progress.active.striped .bar:after { + -webkit-animation: none; + -moz-animation: none; + -ms-animation: none; + -o-animation: none; + animation: none; +} +.ui.progress.active.striped .bar { + -webkit-animation: progress-striped 3s linear infinite; + -moz-animation: progress-striped 3s linear infinite; + animation: progress-striped 3s linear infinite; +} +@-webkit-keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +@-moz-keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +@keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} +/*-------------- + Sizes +---------------*/ +.ui.small.progress .bar { + height: 14px; +} +/* + * # Semantic - Segment + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Segment +*******************************/ +.ui.segment { + position: relative; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + margin: 1em 0em; + padding: 1em; + -webkit-border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} +.ui.segment:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + background-color: transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); +} +.ui.vertical.segment:first-child { + padding-top: 0em; +} +.ui.horizontal.segment { + margin: 0em; + padding-top: 0em; + padding-bottom: 0em; + background-color: transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.horizontal.segment:first-child { + padding-left: 0em; +} +/*------------------- + Loose Coupling +--------------------*/ +.ui.pointing.menu + .ui.attached.segment { + top: 1px; +} +/* No padding on edge content */ +.ui.segment > :first-child { + margin-top: 0em; +} +.ui.segment > :last-child { + margin-bottom: 0em; +} +/* Padding on next content after a label */ +.ui.segment > .attached.label:first-child + * { + margin-top: 2em; +} +.ui.segment > .bottom.attached.label:first-child ~ :last-child { + margin-top: 0em; + margin-bottom: 2em; +} +/******************************* + Types +*******************************/ +/*------------------- + Piled +--------------------*/ +.ui.piled.segment { + margin: 2em 0em; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15); +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: #FFFFFF; + visibility: visible; + content: ""; + display: block; + height: 100%; + left: -1px; + position: absolute; + width: 100%; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); +} +.ui.piled.segment:after { + -webkit-transform: rotate(1.2deg); + -moz-transform: rotate(1.2deg); + -ms-transform: rotate(1.2deg); + -o-transform: rotate(1.2deg); + transform: rotate(1.2deg); + top: 0; + z-index: -1; +} +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + -moz-transform: rotate(-1.2deg); + -ms-transform: rotate(-1.2deg); + -o-transform: rotate(-1.2deg); + transform: rotate(-1.2deg); + top: 0; + z-index: -2; +} +/*------------------- + Stacked +--------------------*/ +.ui.stacked.segment { + padding-bottom: 1.7em; +} +.ui.stacked.segment:after, +.ui.stacked.segment:before { + content: ''; + position: absolute; + bottom: -3px; + left: 0%; + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, 0.02); + width: 100%; + height: 5px; + visibility: visible; +} +.ui.stacked.segment:before { + bottom: 0px; +} +/* Inverted */ +.ui.stacked.inverted.segment:after, +.ui.stacked.inverted.segment:before { + background-color: rgba(255, 255, 255, 0.1); + border-top: 1px solid rgba(255, 255, 255, 0.35); +} +/*------------------- + Raised +--------------------*/ +.ui.raised.segment { + -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); +} +/******************************* + States +*******************************/ +.ui.disabled.segment { + opacity: 0.8; + color: #DDDDDD; +} +/******************************* + Variations +*******************************/ +/*------------------- + Basic +--------------------*/ +.ui.basic.segment { + position: relative; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} +.ui.basic.segment:first-child { + padding-top: 0em; +} +.ui.basic.segment:last-child { + padding-bottom: 0em; +} +/*------------------- + Fittted +--------------------*/ +.ui.fitted.segment { + padding: 0em; +} +/*------------------- + Colors +--------------------*/ +.ui.blue.segment { + border-top: 0.2em solid #6ECFF5; +} +.ui.green.segment { + border-top: 0.2em solid #A1CF64; +} +.ui.red.segment { + border-top: 0.2em solid #D95C5C; +} +.ui.purple.segment { + border-top: 0.2em solid #564F8A; +} +.ui.teal.segment { + border-top: 0.2em solid #00B5AD; +} +/*------------------- + Inverted Colors +--------------------*/ +.ui.inverted.black.segment { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.segment { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} +.ui.inverted.green.segment { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} +.ui.inverted.red.segment { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.segment { + background-color: #564F8A !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.segment { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.segment { + text-align: left; +} +.ui.right.aligned.segment { + text-align: right; +} +.ui.center.aligned.segment { + text-align: center; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.segment, +.ui.left.floated.segment { + float: left; +} +.ui.right.floated.segment { + float: right; +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background-color: #222222; + color: #FFFFFF; +} +/*------------------- + Ordinality +--------------------*/ +.ui.primary.segment { + background-color: #FFFFFF; + color: #555555; +} +.ui.secondary.segment { + background-color: #FAF9FA; + color: #777777; +} +.ui.tertiary.segment { + background-color: #EBEBEB; + color: #B0B0B0; +} +.ui.secondary.inverted.segment { + background-color: #555555; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); + color: #FAFAFA; +} +.ui.tertiary.inverted.segment { + background-color: #555555; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%); + color: #EEEEEE; +} +/*------------------- + Attached +--------------------*/ +.ui.segment.attached { + top: -1px; + bottom: -1px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + border-radius: 0px; + margin: 0em; + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; +} +.ui.top.attached.segment { + top: 0px; + bottom: -1px; + margin-top: 1em; + margin-bottom: 0em; + -moz-border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.segment.bottom.attached { + top: -1px; + bottom: 0px; + margin-top: 0em; + margin-bottom: 1em; + -moz-border-radius: 0px 0px 5px 5px; + -webkit-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} +/* + * # Semantic - Steps + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Step +*******************************/ +.ui.step, +.ui.steps .step { + display: inline-block; + position: relative; + padding: 1em 2em 1em 3em; + vertical-align: top; + background-color: #FFFFFF; + color: #888888; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.step:after, +.ui.steps .step:after { + position: absolute; + z-index: 2; + content: ''; + top: 0em; + right: -1.45em; + border-bottom: 1.5em solid transparent; + border-left: 1.5em solid #FFFFFF; + border-top: 1.5em solid transparent; + width: 0em; + height: 0em; +} +.ui.step, +.ui.steps .step, +.ui.steps .step:after { + -webkit-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + -moz-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + -o-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + -ms-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; +} +/******************************* + Group +*******************************/ +.ui.steps { + cursor: pointer; + display: inline-block; + font-size: 0em; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + line-height: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -moz-border-radius: 0.3125rem; + -webkit-border-radius: 0.3125rem; + border-radius: 0.3125rem; +} +.ui.steps .step:first-child { + padding-left: 1.35em; + -webkit-border-radius: 0.3125em 0em 0em 0.3125em; + -moz-border-radius: 0.3125em 0em 0em 0.3125em; + border-radius: 0.3125em 0em 0em 0.3125em; +} +.ui.steps .step:last-child { + -webkit-border-radius: 0em 0.3125em 0.3125em 0em; + -moz-border-radius: 0em 0.3125em 0.3125em 0em; + border-radius: 0em 0.3125em 0.3125em 0em; +} +.ui.steps .step:only-child { + -webkit-border-radius: 0.3125em; + -moz-border-radius: 0.3125em; + border-radius: 0.3125em; +} +.ui.steps .step:last-child { + margin-right: 0em; +} +.ui.steps .step:last-child:after { + display: none; +} +/******************************* + States +*******************************/ +/* Hover */ +.ui.step:hover, +.ui.step.hover { + background-color: #F7F7F7; + color: rgba(0, 0, 0, 0.8); +} +.ui.steps .step.hover:after, +.ui.steps .step:hover:after, +.ui.step:hover, +.ui.step.hover::after { + border-left-color: #F7F7F7; +} +/* Hover */ +.ui.steps .step.down, +.ui.steps .step:active, +.ui.step.down, +.ui.step:active { + background-color: #F0F0F0; +} +.ui.steps .step.down:after, +.ui.steps .step:active:after, +.ui.steps.down::after, +.ui.steps:active::after { + border-left-color: #F0F0F0; +} +/* Active */ +.ui.steps .step.active, +.ui.active.step { + cursor: auto; + background-color: #555555; + color: #FFFFFF; + font-weight: bold; +} +.ui.steps .step.active:after, +.ui.active.steps:after { + border-left-color: #555555; +} +/* Disabled */ +.ui.steps .disabled.step, +.ui.disabled.step { + cursor: auto; + background-color: #FFFFFF; + color: #CBCBCB; +} +.ui.disabled.step:after { + border: none; + background-color: #FFFFFF; + top: 0.42em; + right: -1em; + width: 2.15em; + height: 2.15em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; + box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; +} +/******************************* + Variations +*******************************/ +/* Attached */ +.attached.ui.steps { + margin: 0em; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em; + -moz-border-radius: 0.3125em 0.3125em 0em 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} +.attached.ui.steps .step:first-child { + -webkit-border-radius: 0.3125em 0em 0em 0em; + -moz-border-radius: 0.3125em 0em 0em 0em; + border-radius: 0.3125em 0em 0em 0em; +} +.attached.ui.steps .step:last-child { + -webkit-border-radius: 0em 0.3125em 0em 0em; + -moz-border-radius: 0em 0.3125em 0em 0em; + border-radius: 0em 0.3125em 0em 0em; +} +/* Bottom Side */ +.bottom.attached.ui.steps { + margin-top: -1px; + -webkit-border-radius: 0em 0em 0.3125em 0.3125em; + -moz-border-radius: 0em 0em 0.3125em 0.3125em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +.bottom.attached.ui.steps .step:first-child { + -webkit-border-radius: 0em 0em 0em 0.3125em; + -moz-border-radius: 0em 0em 0em 0.3125em; + border-radius: 0em 0em 0em 0.3125em; +} +.bottom.attached.ui.steps .step:last-child { + -webkit-border-radius: 0em 0em 0.3125em 0em; + -moz-border-radius: 0em 0em 0.3125em 0em; + border-radius: 0em 0em 0.3125em 0em; +} +/* Evenly divided */ +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + display: block; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.500%; +} +/******************************* + Sizes +*******************************/ +.ui.small.step, +.ui.small.steps .step { + font-size: 0.8rem; +} +.ui.step, +.ui.steps .step { + font-size: 1rem; +} +.ui.large.step, +.ui.large.steps .step { + font-size: 1.25rem; +} +/* + * # Semantic - Accordion + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Button +*******************************/ +.ui.accordion { + width: 600px; + max-width: 100%; + overflow: hidden; + font-size: 1rem; + border-radius: 0.3125em; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.accordion .title { + cursor: pointer; + margin: 0em; + padding: 0.75em 1em; + color: rgba(0, 0, 0, 0.6); + border-top: 1px solid rgba(0, 0, 0, 0.05); + -webkit-transition: background-color 0.2s ease-out; + -moz-transition: background-color 0.2s ease-out; + -o-transition: background-color 0.2s ease-out; + -ms-transition: background-color 0.2s ease-out; + transition: background-color 0.2s ease-out; +} +.ui.accordion .title:first-child { + border-top: none; +} +/* Content */ +.ui.accordion .content { + display: none; + margin: 0em; + padding: 1.3em 1em; +} +/* Arrow */ +.ui.accordion .title .dropdown.icon { + display: inline-block; + float: none; + margin: 0em 0.5em 0em 0em; + -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease; + -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease; + -o-transition: -o-transform 0.2s ease, opacity 0.2s ease; + -ms-transition: -ms-transform 0.2s ease, opacity 0.2s ease; + transition: transform 0.2s ease, + opacity 0.2s ease + ; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.accordion .title .dropdown.icon:before { + content: '\f0da'; +} +/*-------------- + Loose Coupling +---------------*/ +.ui.basic.accordion.menu { + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.basic.accordion.menu .title, +.ui.basic.accordion.menu .content { + padding: 0em; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.accordion .title:hover, +.ui.accordion .active.title { + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Active +---------------*/ +.ui.accordion .active.title { + background-color: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.8); +} +.ui.accordion .active.title .dropdown.icon { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.ui.accordion .active.content { + display: block; +} +/******************************* + Variations +*******************************/ +.ui.basic.accordion { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.accordion .title { + background-color: transparent; + border-top: none; +} +.ui.basic.accordion .title, +.ui.basic.accordion .content { + padding-left: 0em; + padding-right: 0em; +} +/* + * # Semantic - Chat Room + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Chat Room +*******************************/ +.ui.chatroom { + background-color: #F8F8F8; + width: 330px; + height: 370px; + padding: 0px; +} +.ui.chatroom .room { + position: relative; + background-color: #FFFFFF; + overflow: hidden; + height: 286px; + border: 1px solid rgba(0, 0, 0, 0.1); + border-top: none; + border-bottom: none; +} +.ui.chatroom .room .loader { + display: none; + margin: -25px 0px 0px -25px; +} +/* Chat Room Actions */ +.ui.chatroom .actions { + overflow: hidden; + background-color: #EEEEEE; + padding: 4px; + border: 1px solid rgba(0, 0, 0, 0.1); + -moz-border-radius: 5px 5px 0px 0px; + -webkit-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.chatroom .actions .button { + float: right; + margin-left: 3px; +} +/* Online User Count */ +.ui.chatroom .actions .message { + float: left; + margin-left: 6px; + font-size: 11px; + color: #AAAAAA; + text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); + line-height: 28px; +} +.ui.chatroom .actions .message .loader { + display: inline-block; + margin-right: 8px; +} +/* Chat Room Text Log */ +.ui.chatroom .log { + float: left; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; +} +.ui.chatroom .log .message { + padding: 3px 0px; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .message:first-child { + border-top: none; +} +/* status event */ +.ui.chatroom .status { + padding: 5px 0px; + color: #AAAAAA; + font-size: 12px; + font-style: italic; + line-height: 1.33; + border-top: 1px dotted #DADADA; +} +.ui.chatroom .log .status:first-child { + border-top: none; +} +.ui.chatroom .log .flag { + float: left; +} +.ui.chatroom .log p { + margin-left: 0px; +} +.ui.chatroom .log .author { + font-weight: bold; + -webkit-transition: color 0.3s ease-out; + -moz-transition: color 0.3s ease-out; + -o-transition: color 0.3s ease-out; + -ms-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; +} +.ui.chatroom .log a.author:hover { + opacity: 0.8; +} +.ui.chatroom .log .message.admin p { + font-weight: bold; + margin: 1px 0px 0px 23px; +} +.ui.chatroom .log .divider { + margin: -1px 0px; + font-size: 11px; + padding: 10px 0px; + border-top: 1px solid #F8F8F8; + border-bottom: 1px solid #F8F8F8; +} +.ui.chatroom .log .divider .rule { + top: 50%; + width: 15%; +} +.ui.chatroom .log .divider .label { + color: #777777; + margin: 0px; +} +/* Chat Room User List */ +.ui.chatroom .room .list { + position: relative; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; + float: left; + background-color: #EEEEEE; + border-left: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user { + display: table; + padding: 3px 7px; + border-bottom: 1px solid #DDDDDD; +} +.ui.chatroom .room .list .user:hover { + background-color: #F8F8F8; +} +.ui.chatroom .room .list .image { + display: table-cell; + vertical-align: middle; + width: 20px; +} +.ui.chatroom .room .list .image img { + width: 20px; + height: 20px; + vertical-align: middle; +} +.ui.chatroom .room .list p { + display: table-cell; + vertical-align: middle; + padding-left: 7px; + padding-right: 14px; + font-size: 11px; + line-height: 1.2; + font-weight: bold; +} +.ui.chatroom .room .list a:hover { + opacity: 0.8; +} +/* User List Loading */ +.ui.chatroom.loading .loader { + display: block; +} +/* Chat Room Talk Input */ +.ui.chatroom .talk { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 0px 0px; + background-color: #EEEEEE; + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; +} +.ui.chatroom .talk .avatar, +.ui.chatroom .talk input, +.ui.chatroom .talk .button { + float: left; +} +.ui.chatroom .talk .avatar img { + display: block; + width: 30px; + height: 30px; + margin-right: 4px; + border-radius: 500rem; +} +.ui.chatroom .talk input { + border: 1px solid #CCCCCC; + margin: 0px; + width: 196px; + height: 14px; + padding: 8px 5px; + font-size: 12px; + color: #555555; +} +.ui.chatroom .talk input.focus { + border: 1px solid #AAAAAA; +} +.ui.chatroom .send { + width: 80px; + height: 32px; + margin-left: -1px; + padding: 4px 12px; + font-size: 12px; + line-height: 23px; + -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 0 5px 5px 0; +} +.ui.chatroom .talk .log-in.button { + display: block; + float: none; + margin-top: -6px; + height: 22px; + border-radius: 0px 0px 4px 4px; +} +.ui.chatroom .talk .log-in.button i { + vertical-align: text-top; +} +/* Quirky Flags */ +.ui.chatroom .log .team.flag { + width: 18px; +} +/* Chat room Loaded */ +.ui.chatroom.loading .loader { + display: block; +} +/* Standard Size */ +.ui.chatroom { + width: 330px; + height: 370px; +} +.ui.chatroom .room .container { + width: 3000px; +} +.ui.chatroom .log { + width: 314px; + height: 278px; + padding: 4px 7px; +} +.ui.chatroom .room .list { + width: 124px; + height: 278px; + padding: 4px 0px; +} +.ui.chatroom .room .list .user { + width: 110px; +} +.ui.chatroom .talk { + height: 40px; +} +/* + * # Semantic - Checkbox + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Checkbox +*******************************/ +/*-------------- + Standard +---------------*/ +/*--- Content ---*/ +.ui.checkbox { + position: relative; + display: inline-block; + outline: none; + margin-right: 0.5em; + vertical-align: middle; +} +.ui.checkbox input { + visibility: hidden; + outline: none; +} +/*--- Box ---*/ +.ui.checkbox .box, +.ui.checkbox label { + outline: none; + cursor: pointer; + position: absolute; + line-height: 1; + width: 1em; + height: 1em; + bottom: 0em; + left: 0em; + border-radius: 4px; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + background: #FFFFFF; + -webkit-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + -moz-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + -o-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + -ms-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; + transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; +} +/*--- Checkbox ---*/ +.ui.checkbox .box:after, +.ui.checkbox label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + content: ''; + position: absolute; + background: transparent; + border: 0.2em solid #333333; + border-top: none; + border-right: none; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.checkbox .box:after, +.ui.checkbox label:after { + top: 0.3em; + left: 0.2em; + width: 0.45em; + height: 0.15em; +} +/*--- Label ---*/ +.ui.checkbox + label { + cursor: pointer; + opacity: 0.85; + vertical-align: middle; +} +.ui.checkbox + label:hover { + opacity: 1; +} +/******************************* + States +*******************************/ +/*--- Hover ---*/ +.ui.checkbox .box:hover, +.ui.checkbox label:hover { + background-color: #FAFAFA; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} +/*--- Down ---*/ +.ui.checkbox .box:active, +.ui.checkbox label:active { + background-color: #F5F5F5; +} +/*--- Active ---*/ +.ui.checkbox input:checked + .box:after, +.ui.checkbox input:checked + label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} +/*--- Disabled ---*/ +.ui.disabled.checkbox + .box:after, +.ui.checkbox input[disabled] + .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] + label { + opacity: 0.4; +} +/******************************* + Variations +*******************************/ +/*-------------- + Radio +---------------*/ +.ui.radio.checkbox { + width: 14px; + height: 16px; +} +.ui.radio.checkbox .box, +.ui.radio.checkbox label { + width: 14px; + height: 14px; + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + top: 3px; + left: 3px; + border: none; + width: 8px; + height: 8px; + background-color: #555555; + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} +/*-------------- + Slider +---------------*/ +.ui.slider.checkbox { + cursor: pointer; + width: 3em; + height: 2em; +} +/* Line */ +.ui.slider.checkbox:after { + position: absolute; + top: 1em; + left: 0em; + content: ''; + width: 100%; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} +/* Button */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + cursor: pointer; + display: block; + position: absolute; + top: 0.25em; + left: 0; + z-index: 1; + width: 1.5em; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; +} +/* Button Activation Light */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + opacity: 1; + position: absolute; + content: ''; + top: 0.375em; + left: 0.375em; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active Slider Toggle */ +.ui.slider.checkbox input:checked + .box, +.ui.slider.checkbox input:checked + label { + left: 1.75em; +} +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + background-color: #89B84C; +} +/*-------------- + Toggle +---------------*/ +.ui.toggle.checkbox { + cursor: pointer; + width: 3em; + height: 2em; +} +/* Line */ +.ui.toggle.checkbox:after { + cursor: pointer; + display: block; + position: absolute; + content: ''; + top: 0.25em; + left: 0em; + z-index: 1; + background-color: #FFFFFF; + width: 100%; + height: 1.5em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 50rem; +} +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + position: absolute; + top: 0.65em; + left: 0.5em; + -webkit-transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* Button Activation Light */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; + content: ''; + position: absolute; + top: 0px; + left: 0px; + z-index: 2; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s; + -moz-transition: background 0.3s ease 0s; + -o-transition: background 0.3s ease 0s; + -ms-transition: background 0.3s ease 0s; + transition: background 0.3s ease 0s; +} +/* Active toggle Toggle */ +.ui.toggle.checkbox input:checked + .box, +.ui.toggle.checkbox input:checked + label { + left: 1.75em; +} +.ui.toggle.checkbox input:checked + .box:after, +.ui.toggle.checkbox input:checked + label:after { + background-color: #89B84C; +} +/*-------------- + Sizes +---------------*/ +.ui.checkbox { + width: 1em; + height: 1em; +} +.ui.checkbox, +.ui.checkbox .box, +.ui.checkbox label { + font-size: 1em; +} +.ui.large.checkbox { + width: 1.25em; + height: 1.25em; +} +.ui.large.checkbox, +.ui.large.checkbox .box, +.ui.large.checkbox label { + font-size: 1.25em; +} +.ui.huge.checkbox { + width: 1.5em; + height: 1.5em; +} +.ui.huge.checkbox, +.ui.huge.checkbox .box, +.ui.huge.checkbox label { + font-size: 1.5em; +} +/* + * # Semantic - Dimmer + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Dimmer +*******************************/ +.ui.dimmable { + position: relative; +} +.ui.dimmer { + display: none; + position: absolute; + top: 0em !important; + left: 0em !important; + width: 0%; + height: 0%; + text-align: center; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.85); + opacity: 0; + line-height: 1; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + -ms-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-transition: background-color 0.5s linear; + -moz-transition: background-color 0.5s linear; + -o-transition: background-color 0.5s linear; + -ms-transition: background-color 0.5s linear; + transition: background-color 0.5s linear; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + z-index: 1000; +} +/* +.ui.dimmed.dimmable > :not(.dimmer) { + -webkit-transition: + filter 0.5s ease + ; + -moz-transition: + filter 0.5s ease + ; + -o-transition: + filter 0.5s ease + ; + -ms-transition: + filter 0.5s ease + ; + transition: + filter 0.5s ease + ; +} +*/ +/* Dimmer Content */.ui.dimmer > .content { + width: 100%; + height: 100%; + display: table; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.ui.dimmer > .content > div { + display: table-cell; + vertical-align: middle; + color: #FFFFFF; +} +/* Loose Coupling */ +.ui.segment > .ui.dimmer { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.ui.horizontal.segment > .ui.dimmer, +.ui.vertical.segment > .ui.dimmer { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +/******************************* + States +*******************************/ +/* +.ui.dimmed.dimmable > :not(.dimmer) { + -webkit-filter: ~"blur(5px) grayscale(0.7)"; + -moz-filter: ~"blur(5px) grayscale(0.7)"; +} +*/ +.ui.dimmed.dimmable > .ui.dimmer, +.ui.active.dimmer { + display: block; + width: 100%; + height: 100%; + opacity: 1; +} +.ui.disabled.dimmer { + width: 0em !important; + height: 0em !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Page +---------------*/ +.ui.page.dimmer { + position: fixed; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + perspective: 2000px; + -webkit-transform-origin: top center; + -moz-transform-origin: top center; + -o-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +/* +body.ui.dimmed.dimmable > :not(.dimmer){ + -webkit-filter: ~"blur(15px) grayscale(0.7)"; + -moz-filter: ~"blur(15px) grayscale(0.7)"; +} +*/ +/*-------------- + Aligned +---------------*/ +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} +/*-------------- + Inverted +---------------*/ +.ui.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} +.ui.inverted.dimmer > .content > * { + color: rgba(0, 0, 0, 0.8); +} +/*-------------- + Simple +---------------*/ +/* Displays without javascript */ +.ui.simple.dimmer { + display: block; + overflow: hidden; + opacity: 1; + z-index: -100; + background-color: rgba(0, 0, 0, 0); +} +.ui.dimmed.dimmable > .ui.simple.dimmer { + overflow: visible; + opacity: 1; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + z-index: 1; +} +.ui.simple.inverted.dimmer { + background-color: rgba(255, 255, 255, 0); +} +.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} +/* + * # Semantic - Dropdown + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Dropdown +*******************************/ +.ui.dropdown { + position: relative; + display: inline-block; + line-height: 1; + -webkit-transition: border-radius 0.1s ease, width 0.2s ease; + -moz-transition: border-radius 0.1s ease, width 0.2s ease; + -o-transition: border-radius 0.1s ease, width 0.2s ease; + -ms-transition: border-radius 0.1s ease, width 0.2s ease; + transition: border-radius 0.1s ease, width 0.2s ease; +} +.ui.dropdown .menu { + position: absolute; + display: none; + top: 100%; + margin: 0em; + background-color: #FFFFFF; + min-width: 100%; + white-space: nowrap; + font-size: 0.875em; + text-shadow: none; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + -moz-border-radius: 0px 0px 0.325em 0.325em; + -webkit-border-radius: 0px 0px 0.325em 0.325em; + border-radius: 0px 0px 0.325em 0.325em; + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + z-index: 11; +} +/* Dropdown Icon */ +.ui.dropdown > .dropdown.icon { + width: auto; +} +/* Dropdown Text */ +.ui.dropdown > .text { + cursor: pointer; + display: inline-block; + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Flyout Direction */ +.ui.dropdown .menu { + left: 0px; +} +.ui.menu .dropdown:last-child .menu, +.ui > .ui.dropdown:last-child .menu { + left: auto; + right: 0px; +} +/* Sub Menu Position */ +.ui.dropdown .menu .menu { + top: 0% !important; + left: 100% !important; + margin: 0em !important; + border-radius: 0 0.325em 0.325em 0em !important; +} +.ui.dropdown .menu .menu:after { + display: none; +} +.ui.dropdown .menu .item { + cursor: pointer; + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.05); + height: auto; + font-size: 0.875em; + display: block; + color: rgba(0, 0, 0, 0.75); + padding: 0.85em 1em !important; + font-size: 0.875rem; + text-transform: none; + font-weight: normal; + text-align: left; + -webkit-touch-callout: none; +} +.ui.dropdown .menu .item:before { + display: none; +} +.ui.dropdown .menu .item .icon { + margin-right: 0.75em; +} +.ui.dropdown .menu .item:first-child { + border-top: none; +} +/******************************* + States +*******************************/ +/* Dropdown Visible */ +.ui.visible.dropdown { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +.ui.visible.dropdown > .menu { + display: block; +} +/* Menu Item Hover */ +.ui.dropdown .menu .item:hover { + background-color: rgba(0, 0, 0, 0.02); + z-index: 12; +} +/* Menu Item Active */ +.ui.dropdown .menu .active.item { + background-color: rgba(0, 0, 0, 0.04); + border-left: none; + -webkit-box-shadow: none; + -moz-shadow: none; + box-shadow: none; + z-index: 12; +} +/* Default Text */ +.ui.dropdown > .default.text, +.ui.default.dropdown > .text { + color: rgba(0, 0, 0, 0.5); +} +.ui.dropdown:hover > .default.text, +.ui.default.dropdown:hover > .text { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*-------------- + Simple +---------------*/ +/* Displays without javascript */ +.ui.simple.dropdown .menu:before, +.ui.simple.dropdown .menu:after { + display: none; +} +.ui.simple.dropdown .menu { + display: block; + overflow: hidden; + top: -9999px !important; + position: absolute; + opacity: 0; + width: 0; + height: 0; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + -ms-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} +.ui.simple.active.dropdown, +.ui.simple.dropdown:hover { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +.ui.simple.active.dropdown > .menu, +.ui.simple.dropdown:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 100% !important; + opacity: 1; +} +.ui.simple.dropdown > .menu .item:active > .menu, +.ui.simple.dropdown:hover > .menu .item:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 0% !important; + left: 100% !important; + opacity: 1; +} +.ui.simple.disabled.dropdown:hover .menu { + display: none; + height: 0px; + width: 0px; + overflow: hidden; +} +/*-------------- + Selection +---------------*/ +/* Displays like a select box */ +.ui.selection.dropdown { + cursor: pointer; + display: inline-block; + word-wrap: break-word; + white-space: normal; + background-color: #FFFFFF; + padding: 0.5em 1em; + line-height: 1.33; + color: rgba(0, 0, 0, 0.8); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-border-radius: 0.3125em !important; + -moz-border-radius: 0.3125em !important; + border-radius: 0.3125em !important; +} +.ui.selection.dropdown > .dropdown.icon { + float: right; + opacity: 0.7; + margin: 0.2em 0em 0.2em 1.25em; + -webkit-transition: opacity 0.2s ease-out; + -moz-transition: opacity 0.2s ease-out; + -o-transition: opacity 0.2s ease-out; + -ms-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} +.ui.selection.dropdown, +.ui.selection.dropdown .menu { + top: 100%; + -webkit-transition: box-shadow 0.2s ease-out; + -moz-transition: box-shadow 0.2s ease-out; + -o-transition: box-shadow 0.2s ease-out; + -ms-transition: box-shadow 0.2s ease-out; + transition: box-shadow 0.2s ease-out; +} +.ui.selection.dropdown .menu { + max-height: 312px; + overflow-x: hidden; + overflow-y: auto; + -webkit-box-shadow: 0px 1px 0px 1px #EEEEEE; + -moz-box-shadow: 0px 1px 0px 1px #EEEEEE; + box-shadow: 0px 1px 0px 1px #EEEEEE; + -moz-border-radius: 0px 0px 0.325em 0.325em; + -webkit-border-radius: 0px 0px 0.325em 0.325em; + border-radius: 0px 0px 0.325em 0.325em; +} +.ui.selection.dropdown .menu:after, +.ui.selection.dropdown .menu:before { + display: none; +} +.ui.selection.dropdown .menu img { + height: 2.5em; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; +} +/* Hover */ +.ui.selection.dropdown:hover, +.ui.selection.dropdown.hover { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); +} +.ui.selection.dropdown:hover > .dropdown.icon { + opacity: 1; +} +/* Visible */ +.ui.selection.active.dropdown { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; + -webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; + -moz-border-radius: 0.3125em 0.3125em 0em 0em !important; + border-radius: 0.3125em 0.3125em 0em 0em !important; +} +.ui.selection.active.dropdown > .dropdown.icon { + opacity: 1; +} +.ui.selection.active.dropdown .menu { + -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; + -moz-box-shadow: 0px 1px 0px 1px #D3D3D3; + box-shadow: 0px 1px 0px 1px #D3D3D3; +} +/*-------------- + Fluid +---------------*/ +.ui.fluid.dropdown { + display: block; +} +/*-------------- + Inline +---------------*/ +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: inherit; +} +.ui.inline.dropdown .dropdown.icon { + margin: 0em 0.5em 0em 0.25em; +} +.ui.inline.dropdown .text { + font-weight: bold; +} +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: 0.25em; + -webkit-border-radius: 0.325em; + -moz-border-radius: 0.325em; + border-radius: 0.325em; +} +/*-------------- + Floating +---------------*/ +.ui.floating.dropdown .menu { + left: 0; + right: auto; + margin-top: 0.5em; + -webkit-border-radius: 0.325em; + -moz-border-radius: 0.325em; + border-radius: 0.325em; +} +/*-------------- + Pointing +---------------*/ +.ui.pointing.dropdown .menu { + top: 100%; + margin-top: 0.75em; + -moz-border-radius: 0.325em; + -webkit-border-radius: 0.325em; + border-radius: 0.325em; +} +.ui.pointing.dropdown .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: " "; + visibility: visible; + width: 0.5em; + height: 0.5em; + -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); + background-image: none; + background-color: #FFFFFF; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; +} +.ui.pointing.dropdown .menu .item.active:first-child { + background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); +} +/* Directions */ +.ui.pointing.dropdown .menu:after { + top: -0.25em; + left: 50%; + margin: 0em 0em 0em -0.25em; +} +.ui.top.left.pointing.dropdown .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: 0.75em 0em 0em; +} +.ui.top.left.pointing.dropdown .menu:after { + top: -0.25em; + left: 1.25em; + right: auto; + margin: 0em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); +} +.ui.top.right.pointing.dropdown .menu { + top: 100%; + bottom: auto; + right: 0%; + left: auto; + margin: 0.75em 0em 0em; +} +.ui.top.right.pointing.dropdown .menu:after { + top: -0.25em; + left: auto; + right: 1.25em; + margin: 0em; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); +} +.ui.left.pointing.dropdown .menu { + top: 0%; + left: 100%; + right: auto; + margin: 0em 0em 0em 0.75em; +} +.ui.left.pointing.dropdown .menu:after { + top: 1em; + left: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.right.pointing.dropdown .menu { + top: 0%; + left: auto; + right: 100%; + margin: 0em 0.75em 0em 0em; +} +.ui.right.pointing.dropdown .menu:after { + top: 1em; + left: auto; + right: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + transform: rotate(135deg); +} +/* + * # Semantic - Modal + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Modal +*******************************/ +.ui.modal { + display: none; + position: fixed; + z-index: 1001; + top: 50%; + left: 50%; + text-align: left; + width: 800px; + margin-left: -400px; + background-color: #FFFFFF; + border: 1px solid #DDDDDD; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +/******************************* + Content +*******************************/ +/*-------------- + Close +---------------*/ +.ui.modal > .close { + cursor: pointer; + position: absolute; + opacity: 0.8; + font-size: 1.25em; + top: -1.75em; + right: -1.75em; + color: #FFFFFF; +} +.ui.modal > .close:hover { + opacity: 1; +} +/*-------------- + Header +---------------*/ +.ui.modal > .header { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding: 1.5rem 2rem; + font-size: 1.6em; + font-weight: bold; + -webkit-border-radius: 0.325em 0.325em 0px 0px; + -moz-border-radius: 0.325em 0.325em 0px 0px; + border-radius: 0.325em 0.325em 0px 0px; +} +/*-------------- + Content +---------------*/ +.ui.modal > .content { + display: table; + width: 100%; + position: relative; + padding: 2em; + background-color: #F4F4F4; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +.ui.modal > .content > .left { + display: table-cell; + padding-right: 5%; +} +.ui.modal > .content > .right { + display: table-cell; + padding-left: 5%; + vertical-align: middle; + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.modal > .content p { + line-height: 1.6; +} +/*-------------- + Actions +---------------*/ +.ui.modal .actions { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding: 1rem 2rem; + text-align: right; +} +.ui.modal .actions > .button { + margin-left: 0.75em; +} +/******************************* + Types +*******************************/ +.ui.basic.modal { + background-color: transparent; + border: none; + color: #FFFFFF; +} +.ui.basic.modal .content { + background-color: transparent; +} +/******************************* + Variations +*******************************/ +/* A modal that cannot fit on the page */ +.ui.modal.scrolling { + position: absolute; + margin-top: 100px; +} +/******************************* + States +*******************************/ +.ui.active.modal { + display: block; +} +/* + * # Semantic - Nag + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Nag +*******************************/ +.ui.nag { + display: none; + opacity: 0.95; + position: relative; + top: 0px; + left: 0%; + z-index: 101; + min-height: 0; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 0em; + line-height: 3em; + padding: 0em 1em; + background-color: #555555; + -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + font-size: 1em; + text-align: center; + color: rgba(255, 255, 255, 0.8); + -webkit-border-radius: 0px 0px 5px 5px; + -moz-border-radius: 0px 0px 5px 5px; + border-radius: 0px 0px 5px 5px; + -webkit-transition: 0.2s background; + -moz-transition: 0.2s background; + -o-transition: 0.2s background; + -ms-transition: 0.2s background; + transition: 0.2s background; +} +a.ui.nag { + cursor: pointer; +} +.ui.nag > .title { + display: inline-block; + margin: 0em 0.5em; + color: #FFFFFF; +} +.ui.nag > .close.icon { + cursor: pointer; + opacity: 0.4; + position: absolute; + top: 50%; + right: 1em; + margin-top: -0.5em; + color: #FFFFFF; + -webkit-transition: 0.1s opacity; + -moz-transition: 0.1s opacity; + -o-transition: 0.1s opacity; + -ms-transition: 0.1s opacity; + transition: 0.1s opacity; +} +/******************************* + States +*******************************/ +/* Hover */ +.ui.nag:hover { + opacity: 1; +} +.ui.nag .close:hover { + opacity: 1; +} +/******************************* + Variations +*******************************/ +/*-------------- + Static +---------------*/ +.ui.overlay.nag { + position: absolute; + display: block; +} +/*-------------- + Fixed +---------------*/ +.ui.fixed.nag { + position: fixed; +} +/*-------------- + Bottom +---------------*/ +.ui.botton.nag { + -webkit-border-radius: 5px 5px 0px 0px; + -moz-border-radius: 5px 5px 0px 0px; + border-radius: 5px 5px 0px 0px; +} +.ui.fixed.bottom.nags, +.ui.fixed.bottom.nag { + top: auto; + bottom: 0px; +} +/*-------------- + White +---------------*/ +.ui.white.nags .nag, +.ui.white.nag { + background-color: #F1F1F1; + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); + color: #ACACAC; +} +.ui.white.nags .nag .close, +.ui.white.nags .nag .title, +.ui.white.nag .close, +.ui.white.nag .title { + color: #333333; +} +/******************************* + Groups +*******************************/ +.ui.nags .nag { + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} +/* + * # Semantic - Popup + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Popup +*******************************/ +.ui.popup { + display: none; + position: absolute; + top: 0px; + right: 0px; + z-index: 900; + border: 1px solid #DCDDDE; + max-width: 250px; + background-color: #FFFFFF; + padding: 0.8em 1.2em; + font-size: 0.875rem; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.7); + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; + -webkit-box-shadow: 0px 1px 1px #DCDDDE; + -moz-box-shadow: 0px 1px 1px #DCDDDE; + box-shadow: 0px 1px 1px #DCDDDE; +} +.ui.popup .header { + padding: 0em 0em 0.5em; + font-size: 1.125em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup:before { + position: absolute; + content: ""; + width: 0.75em; + height: 0.75rem; + background-image: none; + background-color: #FFFFFF; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 1px 1px 1px #DCDDDE; + -moz-box-shadow: 1px 1px 1px #DCDDDE; + box-shadow: 1px 1px 1px #DCDDDE; +} +.ui.popup .ui.button { + width: 100%; +} +/******************************* + Types +*******************************/ +/*-------------- + Spacing +---------------*/ +.ui.popup { + margin: 0em; +} +.ui.popup.bottom { + margin: 0.75em 0em 0em; +} +.ui.popup.top { + margin: 0em 0em 0.75em; +} +.ui.popup.left.center { + margin: 0em 0.75em 0em 0em; +} +.ui.popup.right.center { + margin: 0em 0em 0em 0.75em; +} +.ui.popup.center { + margin-left: -1.25em; +} +/*-------------- + Pointer +---------------*/ +/*--- Below ---*/ +.ui.bottom.center.popup:before { + margin-left: -0.4em; + top: -0.4em; + left: 50%; + right: auto; + bottom: auto; + -webkit-box-shadow: -1px -1px 1px #dcddde; + -moz-box-shadow: -1px -1px 1px #dcddde; + box-shadow: -1px -1px 1px #dcddde; +} +.ui.bottom.left.popup:before { + top: -0.4em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px #dcddde; + -moz-box-shadow: -1px -1px 1px #dcddde; + box-shadow: -1px -1px 1px #dcddde; +} +.ui.bottom.right.popup:before { + top: -0.4em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px #dcddde; + -moz-box-shadow: -1px -1px 1px #dcddde; + box-shadow: -1px -1px 1px #dcddde; +} +/*--- Above ---*/ +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.4em; + left: 50%; + margin-left: -0.4em; +} +.ui.top.left.popup:before { + bottom: -0.4em; + left: 1em; + top: auto; + right: auto; + margin-left: 0em; +} +.ui.top.right.popup:before { + bottom: -0.4em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} +/*--- Left ---*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.35em; + bottom: auto; + left: auto; + margin-top: -0.4em; + -moz-box-shadow: 1px -1px 1px #dcddde; + -webkit-box-shadow: 1px -1px 1px #dcddde; + box-shadow: 1px -1px 1px #dcddde; +} +/*--- Right ---*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.35em; + bottom: auto; + right: auto; + margin-top: -0.4em; + -moz-box-shadow: -1px 1px 1px #dcddde; + -webkit-box-shadow: -1px 1px 1px #dcddde; + box-shadow: -1px 1px 1px #dcddde; +} +/******************************* + States +*******************************/ +.ui.loading.popup { + display: block; + visibility: hidden; +} +.ui.active.popup { + display: block; +} +/******************************* + Variations +*******************************/ +/*-------------- + Size +---------------*/ +.ui.small.popup { + font-size: 0.75rem; +} +.ui.large.popup { + font-size: 1rem; +} +/*-------------- + Colors +---------------*/ +/* Inverted colors */ +.ui.inverted.popup { + background-color: #333333; + border: none; + color: #FFFFFF; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: rgba(0, 0, 0, 0.2); + color: #FFFFFF; +} +.ui.inverted.popup:before { + background-color: #333333; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* + * # Semantic - Rating + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Rating +*******************************/ +.ui.rating { + display: inline-block; + vertical-align: middle; + margin: 0em 0.5em 0em 0em; +} +.ui.rating:last-child { + margin-right: 0em; +} +.ui.rating:after { + display: block; + content: ''; + visibility: hidden; + clear: both; + height: 0; +} +/* Icon */ +.ui.rating .icon { + cursor: default; + float: left; + margin: 0em; + width: 1em; + height: auto; + padding: 0em; + font-weight: normal; + font-style: normal; +} +.ui.rating .icon:after { + content: "\2605"; + color: rgba(0, 0, 0, 0.15); + -webkit-transition: color 0.3s ease, + opacity 0.3s ease + ; + -moz-transition: color 0.3s ease, + opacity 0.3s ease + ; + -ms-transition: color 0.3s ease, + opacity 0.3s ease + ; + -o-transition: color 0.3s ease, + opacity 0.3s ease + ; + transition: color 0.3s ease, + opacity 0.3s ease + ; +} +/******************************* + Types +*******************************/ +/*------------------- + Star +--------------------*/ +.ui.star.rating .icon { + width: 1em; + margin-right: 0.1em; +} +.ui.star.rating .icon:last-child { + margin: 0em; +} +.ui.star.rating .icon:after { + content: '\f006'; + font-family: 'Icons'; +} +.ui.star.rating .active.icon:after { + content: '\f005'; + font-family: 'Icons'; +} +/*------------------- + Heart +--------------------*/ +.ui.heart.rating .icon { + width: 1em; + margin-right: 0.1em; +} +.ui.heart.rating .icon:last-child { + margin: 0em; +} +.ui.heart.rating .icon:after { + content: '\f08a'; + font-family: 'Icons'; +} +.ui.heart.rating .active.icon:after { + content: '\f004'; + font-family: 'Icons'; + color: #EF404A; +} +.ui.heart.rating .hover.icon:after, +.ui.heart.rating .active.hover.icon:after { + color: #FF2733; +} +/******************************* + States +*******************************/ +/*------------------- + Active +--------------------*/ +/* active rating */ +.ui.active.rating .icon { + cursor: pointer; +} +/* active icons */ +.ui.rating .active.icon:after { + color: #FFCB08; +} +/*------------------- + Hover +--------------------*/ +/* rating */ +.ui.rating.hover .active.icon:after { + opacity: 0.5; +} +/* icon */ +.ui.rating .icon.hover:after, +.ui.rating .icon.hover.active:after { + opacity: 1; + color: #FFB70A; +} +/******************************* + Variations +*******************************/ +.ui.mini.rating { + font-size: 1rem; +} +.ui.small.rating { + font-size: 1.25rem; +} +.ui.rating { + font-size: 1.5rem; +} +.ui.large.rating { + font-size: 2rem; +} +/* + * # Semantic - Reveal + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Reveal +*******************************/ +.ui.reveal { + display: inline-block; + position: relative !important; + z-index: 2 !important; + font-size: 0em !important; +} +.ui.reveal > .content { + font-size: 1em !important; +} +.ui.reveal > .visible.content { + -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: 4 !important; + -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: 3 !important; +} +/*------------------ + Loose Coupling +-------------------*/ +.ui.reveal.button { + overflow: hidden; +} +/******************************* + Types +*******************************/ +/*-------------- + Slide +---------------*/ +.ui.slide.reveal { + position: relative !important; + display: block; + overflow: hidden !important; + white-space: nowrap; +} +.ui.slide.reveal > .content { + display: block; + float: left; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 0em; + -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + -ms-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; + transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; +} +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 100% !important; + width: 100% !important; +} +.ui.slide.reveal:hover > .visible.content { + left: -100% !important; +} +.ui.slide.reveal:hover > .hidden.content { + left: 0% !important; +} +.ui.right.slide.reveal > .visible.content { + left: 0%; +} +.ui.right.slide.reveal > .hidden.content { + left: auto !important; + right: 100% !important; +} +.ui.right.slide.reveal:hover > .visible.content { + left: 100% !important; + right: auto !important; +} +.ui.right.slide.reveal:hover > .hidden.content { + left: auto !important; + right: 0% !important; +} +.ui.up.slide.reveal > .visible.content { + top: 0% !important; + left: 0% !important; + right: auto !important; + bottom: auto !important; +} +.ui.up.slide.reveal > .hidden.content { + top: 100% !important; + left: 0% !important; + right: auto !important; + bottom: auto !important; +} +.ui.slide.up.reveal:hover > .visible.content { + top: -100% !important; + left: 0% !important; +} +.ui.slide.up.reveal:hover > .hidden.content { + top: 0% !important; + left: 0% !important; +} +.ui.down.slide.reveal > .visible.content { + top: auto !important; + right: auto !important; + bottom: auto !important; + bottom: 0% !important; +} +.ui.down.slide.reveal > .hidden.content { + top: auto !important; + right: auto !important; + bottom: 100% !important; + left: 0% !important; +} +.ui.slide.down.reveal:hover > .visible.content { + left: 0% !important; + bottom: -100% !important; +} +.ui.slide.down.reveal:hover > .hidden.content { + left: 0% !important; + bottom: 0% !important; +} +/*-------------- + Fade +---------------*/ +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} +/*-------------- + Move +---------------*/ +.ui.move.reveal > .visible.content, +.ui.move.left.reveal > .visible.content { + left: auto !important; + top: auto !important; + bottom: auto !important; + right: 0% !important; +} +.ui.move.reveal:hover > .visible.content, +.ui.move.left.reveal:hover > .visible.content { + right: 100% !important; +} +.ui.move.right.reveal > .visible.content { + right: auto !important; + top: auto !important; + bottom: auto !important; + left: 0% !important; +} +.ui.move.right.reveal:hover > .visible.content { + left: 100% !important; +} +.ui.move.up.reveal > .visible.content { + right: auto !important; + left: auto !important; + top: auto !important; + bottom: 0% !important; +} +.ui.move.up.reveal:hover > .visible.content { + bottom: 100% !important; +} +.ui.move.down.reveal > .visible.content { + right: auto !important; + left: auto !important; + top: 0% !important; + bottom: auto !important; +} +.ui.move.down.reveal:hover > .visible.content { + top: 100% !important; +} +/*-------------- + Rotate +---------------*/ +.ui.rotate.reveal > .visible.content { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; + -o-transition-duration: 0.8s; + -ms-transition-duration: 0.8s; + transition-duration: 0.8s; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + -moz-transform-origin: bottom right; + -o-transform-origin: bottom right; + -ms-transform-origin: bottom right; + transform-origin: bottom right; +} +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + -webkit-transform: rotate(110deg); + -moz-transform: rotate(110deg); + -o-transform: rotate(110deg); + -ms-transform: rotate(110deg); + transform: rotate(110deg); +} +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + -moz-transform-origin: bottom left; + -o-transform-origin: bottom left; + -ms-transform-origin: bottom left; + transform-origin: bottom left; +} +.ui.rotate.left.reveal:hover > .visible.content { + -webkit-transform: rotate(-110deg); + -moz-transform: rotate(-110deg); + -o-transform: rotate(-110deg); + -ms-transform: rotate(-110deg); + transform: rotate(-110deg); +} +/******************************* + States +*******************************/ +.ui.disabled.reveal { + opacity: 1 !important; +} +.ui.disabled.reveal > .content { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + -ms-transition: none !important; + transition: none !important; +} +.ui.disabled.reveal:hover > .visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.content { + display: none !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Masked +---------------*/ +.ui.masked.reveal { + overflow: hidden; +} +/*-------------- + Instant +---------------*/ +.ui.instant.reveal > .content { + -webkit-transition-delay: 0s !important; + -moz-transition-delay: 0s !important; + -o-transition-delay: 0s !important; + -ms-transition-delay: 0s !important; + transition-delay: 0s !important; +} +/* + * # Semantic - Search + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Search +*******************************/ +.ui.search { + position: relative; + text-shadow: none; + font-style: normal; + font-weight: normal; +} +.ui.search input { + -webkit-border-radius: 500rem; + -moz-border-radius: 500rem; + border-radius: 500rem; +} +/*-------------- + Button +---------------*/ +.ui.search > .button { + position: relative; + z-index: 2; + float: right; + margin: 0px 0px 0px -15px; + padding: 6px 15px 7px; + -webkit-border-radius: 0px 15px 15px 0px; + -moz-border-radius: 0px 15px 15px 0px; + border-radius: 0px 15px 15px 0px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/*-------------- + Results +---------------*/ +.ui.search .results { + display: none; + position: absolute; + z-index: 999; + top: 100%; + left: 0px; + overflow: hidden; + background-color: #FFFFFF; + margin-top: 0.5em; + width: 380px; + font-size: 0.875em; + line-height: 1.2; + color: #555555; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset; +} +.ui.search .result { + cursor: pointer; + overflow: hidden; + padding: 0.5em 1em; +} +.ui.search .result:first-child { + border-top: none; +} +.ui.search .result .image { + background: #F0F0F0; + margin-right: 10px; + float: left; + overflow: hidden; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + width: 38px; + height: 38px; +} +.ui.search .result .image img { + display: block; + width: 38px; + height: 38px; +} +.ui.search .result .image ~ .info { + float: none; + margin-left: 50px; +} +.ui.search .result .info { + float: left; +} +.ui.search .result .title { + font-weight: bold; + color: rgba(0, 0, 0, 0.8); +} +.ui.search .result .description { + color: rgba(0, 0, 0, 0.6); +} +.ui.search .result .price { + float: right; + color: #5BBD72; + font-weight: bold; +} +/*-------------- + Message +---------------*/ +.ui.search .message { + padding: 1em; +} +.ui.search .message .text .title { + margin: 0em 0em 0.5rem; + font-size: 1.25rem; + font-weight: bold; + color: rgba(0, 0, 0, 0.8); +} +.ui.search .message .text .description { + margin: 0em; + font-size: 1rem; + color: rgba(0, 0, 0, 0.5); +} +/*-------------- + Categories +---------------*/ +.ui.search .results .category { + background-color: #FAFAFA; + border-top: 1px solid rgba(0, 0, 0, 0.1); + -webkit-transition: background 0.2s ease-in; + -moz-transition: background 0.2s ease-in; + -o-transition: background 0.2s ease-in; + -ms-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; +} +.ui.search .results .category:first-child { + border-top: none; +} +.ui.search .results .category > .name { + float: left; + padding: 12px 0px 0px 8px; + font-weight: bold; + color: #777777; + text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); +} +.ui.search .results .category .result { + background-color: #FFFFFF; + margin-left: 80px; + border-left: 1px solid rgba(0, 0, 0, 0.1); +} +/* View All Results */ +.ui.search .all { + display: block; + border-top: 1px solid rgba(0, 0, 0, 0.1); + background-color: #FAFAFA; + height: 2em; + line-height: 2em; + color: rgba(0, 0, 0, 0.6); + font-weight: bold; + text-align: center; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.search .result:hover, +.ui.search .category .result:hover { + background-color: #F8F8F8; +} +.ui.search .all:hover { + background-color: #F0F0F0; +} +/*-------------- + Loading +---------------*/ +.ui.search.loading .input .icon { + background: url('../build/uncompressed/images/loader-mini.gif') no-repeat 50% 50%; +} +.ui.search.loading .input .icon:before, +.ui.search.loading .input .icon:after { + display: none; +} +/*-------------- + Active +---------------*/ +.ui.search .results .category.active { + background-color: #F1F1F1; +} +.ui.search .results .category.active > .name { + color: #333333; +} +.ui.search .result.active, +.ui.search .category .result.active { + background-color: #FBFBFB; +} +.ui.search .result.active .title { + color: #000000; +} +.ui.search .result.active .description { + color: #555555; +} +/******************************* + Variations +*******************************/ +/* Large */ +.ui.search .large.result .image, +.ui.search .large.result .image img { + width: 50px; + height: 50px; +} +.ui.search .large.results .indented.info { + margin-left: 65px; +} +.ui.search .large.results .info .title { + font-size: 16px; +} +.ui.search .large.results .info .description { + font-size: 11px; +} +/* + * # Semantic - Shape + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Shape +*******************************/ +.ui.shape { + position: relative; + -webkit-perspective: 2000px; + -moz-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; +} +.ui.shape .sides { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.ui.shape .side { + opacity: 1; + width: 100%; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +.ui.shape .side { + display: none; +} +/******************************* + States +*******************************/ +/*-------------- + Animating +---------------*/ +.ui.shape.animating .sides { + position: absolute; +} +.ui.shape .animating.side { + position: absolute; + width: 100%; + top: 0px; + left: 0px; + z-index: 100; +} +.ui.shape .hidden.side { + opacity: 0.4; +} +/*-------------- + CSS +---------------*/ +.ui.shape.css { + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + -ms-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +.ui.shape.css .sides { + -webkit-transition: all 0.6s ease-in-out; + -moz-transition: all 0.6s ease-in-out; + -o-transition: all 0.6s ease-in-out; + -ms-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} +.ui.shape.css .side { + -webkit-transition: opacity 0.6s ease-in-out; + -moz-transition: opacity 0.6s ease-in-out; + -o-transition: opacity 0.6s ease-in-out; + -ms-transition: opacity 0.6s ease-in-out; + transition: opacity 0.6s ease-in-out; +} +/*-------------- + Active +---------------*/ +.ui.shape .active.side { + display: block; +} +/* + * # Semantic - Sidebar + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Sidebar +*******************************/ +body { + -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease; + -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease; + -o-transition: margin 0.3s ease, + transform 0.3s ease + ; + -ms-transition: margin 0.3s ease, + transform 0.3s ease + ; + transition: margin 0.3s ease, + transform 0.3s ease + ; +} +.ui.sidebar { + position: fixed; + margin: 0 !important; + width: 275px !important; + height: 100% !important; + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + border-radius: 0px !important; + -ms-overflow-y: auto; + overflow-y: auto; + top: 0px; + left: 0px; + z-index: 999; + -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -o-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease; + transition: margin-left 0.3s ease, margin-top 0.3s ease; +} +/******************************* + Types +*******************************/ +.ui.sidebar { + margin-left: -275px !important; +} +.ui.right.sidebar { + left: 100%; + margin: 0px !important; +} +.ui.top.sidebar { + margin: -40px 0px 0px 0px !important; + width: 100% !important; + height: 40px !important; +} +.ui.bottom.sidebar { + width: 100% !important; + height: 40px !important; + top: 100%; + margin: 0px !important; +} +/******************************* + States +*******************************/ +.ui.active.sidebar { + margin-left: 0px !important; +} +.ui.active.right.sidebar { + margin-left: -275px !important; +} +.ui.active.top.sidebar { + margin-top: 0px !important; +} +.ui.active.bottom.sidebar { + margin-top: -40px !important; +} +/******************************* + Variations +*******************************/ +.ui.floating.sidebar { + -webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); +} +.ui.right.floating.sidebar { + -webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); +} +.ui.top.floating.sidebar { + -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); +} +.ui.bottom.floating.sidebar { + -webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); +} +/* + * # Semantic - Tab + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + UI Tabs +*******************************/ +.ui.tab { + display: none; +} +/******************************* + States +*******************************/ +/*-------------------- + Active +---------------------*/ +.ui.tab.active, +.ui.tab.open { + display: block; +} +/*-------------------- + Loading +---------------------*/ +.ui.tab.loading { + position: relative; + overflow: hidden; + display: block; + min-height: 250px; + text-indent: -10000px; +} +.ui.tab.loading * { + position: relative !important; + left: -10000px !important; +} +.ui.tab.loading:after { + position: absolute; + top: 50px; + left: 50%; + content: 'Loading...'; + margin-left: -32px; + text-indent: 5px; + color: rgba(0, 0, 0, 0.4); + width: 100%; + height: 100%; + padding-top: 75px; + background: url('../build/uncompressed/images/loader-large.gif') no-repeat 0px 0px; + visibility: visible; +} +/******************************* + Semantic - Transition + Author: Jack Lukic + + CSS animation definitions for + transition module + +*******************************/ +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css +*/ +.ui.transition { + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-animation-iteration-count: 1; + -moz-animation-iteration-count: 1; + -ms-animation-iteration-count: 1; + -o-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -ms-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + animation-timing-function: ease; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); +} +/******************************* + States +*******************************/ +/* Loading */ +.ui.loading.transition { + position: absolute; + top: -999999px; + left: -99999px; +} +/* Hidden */ +.ui.hidden.transition { + display: none; +} +/* Visible */ +.ui.visible.transition { + display: block; + visibility: visible; +} +/* Direction */ +.ui.out.transition { + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + -o-animation-direction: reverse; + animation-direction: reverse; +} +/* Disabled */ +.ui.disabled.transition { + -webkit-animation-play-state: paused; + -moz-animation-play-state: paused; + -ms-animation-play-state: paused; + -o-animation-play-state: paused; + animation-play-state: paused; +} +/******************************* + Variations +*******************************/ +.ui.looping.transition { + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} +/******************************* + Types +*******************************/ +/*-------------- + Emphasis +---------------*/ +.ui.flash.transition { + -webkit-animation-name: flash; + -moz-animation-name: flash; + -o-animation-name: flash; + animation-name: flash; +} +.ui.shake.transition { + -webkit-animation-name: shake; + -moz-animation-name: shake; + -o-animation-name: shake; + animation-name: shake; +} +.ui.bounce.transition { + -webkit-animation-name: bounce; + -moz-animation-name: bounce; + -o-animation-name: bounce; + animation-name: bounce; +} +.ui.tada.transition { + -webkit-animation-name: tada; + -moz-animation-name: tada; + -o-animation-name: tada; + animation-name: tada; +} +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +.ui.pulse.transition { + -webkit-animation-name: pulse; + -moz-animation-name: pulse; + -o-animation-name: pulse; + animation-name: pulse; +} +/*-------------- + Flips +---------------*/ +.ui.flip.transition.in, +.ui.flip.transition.out { + -webkit-perspective: 2000px; + perspective: 2000px; +} +.ui.horizontal.flip.transition.in, +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlip; + -moz-animation-name: horizontalFlip; + -o-animation-name: horizontalFlip; + animation-name: horizontalFlip; +} +.ui.vertical.flip.transition.in, +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlip; + -moz-animation-name: verticalFlip; + -o-animation-name: verticalFlip; + animation-name: verticalFlip; +} +/*-------------- + Fades +---------------*/ +.ui.fade.transition.in, +.ui.fade.transition.out { + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; +} +.ui.fade.up.transition.in { + -webkit-animation-name: fadeUp; + -moz-animation-name: fadeUp; + -o-animation-name: fadeUp; + animation-name: fadeUp; +} +.ui.fade.up.transition.out { + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; +} +.ui.fade.down.transition.in { + -webkit-animation-name: fadeDown; + -moz-animation-name: fadeDown; + -o-animation-name: fadeDown; + animation-name: fadeDown; +} +.ui.fade.down.transition.out { + -webkit-animation-name: fade; + -moz-animation-name: fade; + -o-animation-name: fade; + animation-name: fade; +} +/*-------------- + Scale +---------------*/ +.ui.scale.transition.in, +.ui.scale.transition.out { + -webkit-animation-name: scale; + -moz-animation-name: scale; + -o-animation-name: scale; + animation-name: scale; +} +/*-------------- + Slide +---------------*/ +.ui.slide.down.transition.in, +.ui.slide.down.transition.out { + -webkit-animation-name: slide; + -moz-animation-name: slide; + -o-animation-name: slide; + animation-name: slide; + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} +.ui.slide.up.transition.in, +.ui.slide.up.transition.out { + -webkit-animation-name: slide; + -moz-animation-name: slide; + -o-animation-name: slide; + animation-name: slide; + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} +@-moz-keyframes slide { + 0% { + opacity: 0; + -moz-transform: scaleY(0); + } + 100% { + opacity: 1; + -moz-transform: scaleY(1); + } +} +@-webkit-keyframes slide { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + } +} +@keyframes slide { + 0% { + opacity: 0; + transform: scaleY(0); + } + 100% { + opacity: 1; + transform: scaleY(1); + } +} +/******************************* + Animations +*******************************/ +/*-------------- + Emphasis +---------------*/ +/* Flash */ +@-webkit-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@-moz-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@-o-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +/* Shake */ +@-webkit-keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + } +} +@-moz-keyframes shake { + 0%, + 100% { + -moz-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -moz-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -moz-transform: translateX(10px); + } +} +@-o-keyframes shake { + 0%, + 100% { + -o-transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -o-transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -o-transform: translateX(10px); + } +} +@keyframes shake { + 0%, + 100% { + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + transform: translateX(10px); + } +} +/* Bounce */ +@-webkit-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + } +} +@-moz-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -moz-transform: translateY(0); + } + 40% { + -moz-transform: translateY(-30px); + } + 60% { + -moz-transform: translateY(-15px); + } +} +@-o-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -o-transform: translateY(0); + } + 40% { + -o-transform: translateY(-30px); + } + 60% { + -o-transform: translateY(-15px); + } +} +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} +/* Tada */ +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + } +} +@-moz-keyframes tada { + 0% { + -moz-transform: scale(1); + } + 10%, + 20% { + -moz-transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -moz-transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -moz-transform: scale(1.1) rotate(-3deg); + } + 100% { + -moz-transform: scale(1) rotate(0); + } +} +@-o-keyframes tada { + 0% { + -o-transform: scale(1); + } + 10%, + 20% { + -o-transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -o-transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -o-transform: scale(1.1) rotate(-3deg); + } + 100% { + -o-transform: scale(1) rotate(0); + } +} +@keyframes tada { + 0% { + transform: scale(1); + } + 10%, + 20% { + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + transform: scale(1.1) rotate(-3deg); + } + 100% { + transform: scale(1) rotate(0); + } +} +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + } +} +@-o-keyframes pulse { + 0% { + -o-transform: scale(1); + opacity: 1; + } + 50% { + -o-transform: scale(0.9); + opacity: 0.7; + } + 100% { + -o-transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes pulse { + 0% { + -moz-transform: scale(1); + opacity: 1; + } + 50% { + -moz-transform: scale(0.9); + opacity: 0.7; + } + 100% { + -moz-transform: scale(1); + opacity: 1; + } +} +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(0.9); + opacity: 0.7; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +/*-------------- + Flips +---------------*/ +/* Horizontal */ +@-webkit-keyframes horizontalFlip { + 0% { + -webkit-transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(0deg); + opacity: 1; + } +} +@-moz-keyframes horizontalFlip { + 0% { + -moz-transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -moz-transform: rotateY(0deg); + opacity: 1; + } +} +@-o-keyframes horizontalFlip { + 0% { + -o-transform: rotateY(-90deg); + opacity: 0; + } + 100% { + -o-transform: rotateY(0deg); + opacity: 1; + } +} +@keyframes horizontalFlip { + 0% { + transform: rotateY(-90deg); + opacity: 0; + } + 100% { + transform: rotateY(0deg); + opacity: 1; + } +} +/* Horizontal */ +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateY(90deg); + opacity: 1; + } +} +@-moz-keyframes horizontalFlipOut { + 0% { + -moz-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -moz-transform: rotateY(90deg); + opacity: 1; + } +} +@-o-keyframes horizontalFlipOut { + 0% { + -o-transform: rotateY(0deg); + opacity: 0; + } + 100% { + -o-transform: rotateY(90deg); + opacity: 1; + } +} +@keyframes horizontalFlipOut { + 0% { + transform: rotateY(0deg); + opacity: 0; + } + 100% { + transform: rotateY(90deg); + opacity: 1; + } +} +/* Vertical */ +@-webkit-keyframes verticalFlip { + 0% { + -webkit-transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: rotateX(0deg); + opacity: 1; + } +} +@-moz-keyframes verticalFlip { + 0% { + -moz-transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -moz-transform: rotateX(0deg); + opacity: 1; + } +} +@-o-keyframes verticalFlip { + 0% { + -o-transform: rotateX(-90deg); + opacity: 0; + } + 100% { + -o-transform: rotateX(0deg); + opacity: 1; + } +} +@keyframes verticalFlip { + 0% { + transform: rotateX(-90deg); + opacity: 0; + } + 100% { + transform: rotateX(0deg); + opacity: 1; + } +} +/*-------------- + Fades +---------------*/ +/* Fade */ +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-moz-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-o-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +/* Fade Up */ +@-webkit-keyframes fadeUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeUp { + 0% { + opacity: 0; + -o-transform: translateY(20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/* Fade Down */ +@-webkit-keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/*-------------- + Scale +---------------*/ +/* Scale */ +@-webkit-keyframes scale { + 0% { + opacity: 0; + -webkit-transform: scale(0.7); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + } +} +@-moz-keyframes scale { + 0% { + opacity: 0; + -moz-transform: scale(0.7); + } + 100% { + opacity: 1; + -moz-transform: scale(1); + } +} +@-o-keyframes scale { + 0% { + opacity: 0; + -o-transform: scale(0.7); + } + 100% { + opacity: 1; + -o-transform: scale(1); + } +} +@keyframes scale { + 0% { + opacity: 0; + transform: scale(0.7); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +/* + * # Semantic - Video + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Video +*******************************/ +.ui.video { + position: relative; + max-width: 100%; +} +/*-------------- + Content +---------------*/ +/* Placeholder Image */ +.ui.video .placeholder { + background-color: #333333; +} +/* Play Icon Overlay */ +.ui.video .play { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + z-index: 10; + width: 100%; + height: 100%; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + opacity: 0.6; + -webkit-transition: opacity 0.3s; + -moz-transition: opacity 0.3s; + -o-transition: opacity 0.3s; + -ms-transition: opacity 0.3s; + transition: opacity 0.3s; +} +.ui.video .play.icon:before { + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + font-size: 6rem; + margin: -3rem 0em 0em -3rem; + color: #FFFFFF; + text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); +} +.ui.video .placeholder { + display: block; + width: 100%; + height: 100%; +} +/* IFrame Embed */ +.ui.video .embed { + display: none; +} +/******************************* + States +*******************************/ +/*-------------- + Hover +---------------*/ +.ui.video .play:hover { + opacity: 1; +} +/*-------------- + Active +---------------*/ +.ui.video.active .play, +.ui.video.active .placeholder { + display: none; +} +.ui.video.active .embed { + display: block; +} +/* + * # Semantic Comment View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Standard +*******************************/ +/*-------------- + Comments +---------------*/ +.ui.comments a { + cursor: pointer; +} +/*-------------- + Comment +---------------*/ +.ui.comments .comment { + position: relative; + margin-top: 0.5em; + padding-top: 0.5em; +} +.ui.comments .comment:first-child { + margin-top: 0em; + padding-top: 0em; +} +/*-------------------- + Avatar (Optional) +---------------------*/ +.ui.comments .comment .avatar { + display: block; + float: left; + width: 4em; +} +.ui.comments .comment .avatar img { + display: block; + margin: 0em auto; + width: 3em; + height: 3em; + border-radius: 500px; +} +/*-------------- + Content +---------------*/ +.ui.comments .comment > .content, +.ui.comments .comment > .avatar { + display: block; +} +.ui.comments .comment .avatar ~ .content { + padding: 0em 1em; +} +/* If there is an avatar move content over */ +.ui.comments .comment > .avatar ~ .content { + padding-top: 0.25em; + margin-left: 3.5em; +} +.ui.comments .comment .metadata { + display: inline-block; + margin-left: 0.3em; + color: rgba(0, 0, 0, 0.4); +} +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0em 0.3em 0em 0em; +} +/*-------------------- + Comment Text +---------------------*/ +.ui.comments .comment .text { + margin: 0.25em 0em 0.5em; + word-wrap: break-word; +} +/*-------------------- + User Actions +---------------------*/ +.ui.comments .comment .actions { + font-size: 0.9em; +} +.ui.comments .comment .actions a { + display: inline-block; + margin: 0em 0.3em 0em 0em; + color: rgba(0, 0, 0, 0.3); +} +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: rgba(0, 0, 0, 0.6); +} +/*-------------------- + Reply Form +---------------------*/ +.ui.comments .reply.form { + margin-top: 0.75em; + width: 100%; + max-width: 30em; +} +.ui.comments .comment .reply.form { + margin-left: 2em; +} +.ui.comments > .reply.form { + margin-top: 1.5em; + max-width: 40em; +} +.ui.comments .reply.form textarea { + height: 12em; +} +/*-------------------- + Nested Comments +---------------------*/ +.ui.comments .comment .comments { + margin-top: 0.5em; + padding-top: 0.5em; + padding-bottom: 1em; +} +.ui.comments .comment .comments:before { + position: absolute; + top: 0px; + left: 0px; +} +/* One Deep */ +.ui.comments > .comment .comments { + margin-left: 2em; +} +/* Two Deep */ +.ui.comments > .comment > .comments > .comment > .comments { + margin-left: 1.75em; +} +/* Three Deep */ +.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { + margin-left: 1.5em; +} +/* Four Deep or more */ +.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { + margin-left: 0.5em; +} +/******************************* + Variations +*******************************/ +/*-------------------- + Threaded +---------------------*/ +.ui.threaded.comments .comment .comments { + margin-left: 2em !important; + padding-left: 2em !important; + -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); +} +/*-------------------- + Minimal +---------------------*/ +.ui.minimal.comments .comment .actions { + opacity: 0; + -webkit-transition: opacity 0.1s ease-out; + -moz-transition: opacity 0.1s ease-out; + -o-transition: opacity 0.1s ease-out; + -ms-transition: opacity 0.1s ease-out; + transition: opacity 0.1s ease-out; + -webkit-transition-delay: 0.1s; + -moz-transition-delay: 0.1s; + -o-transition-delay: 0.1s; + -ms-transition-delay: 0.1s; + transition-delay: 0.1s; +} +.ui.minimal.comments .comment > .content:hover > .actions { + opacity: 1; +} +/*-------------------- + Sizes +---------------------*/ +.ui.small.comments { + font-size: 0.875em; +} +/* + * # Activity Feed View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: May 22, 2013 + */ +/******************************* + Activity Feed +*******************************/ +.ui.feed a { + cursor: pointer; +} +.ui.feed, +.ui.feed .event, +.ui.feed .label, +.ui.feed .content, +.ui.feed .extra { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/******************************* + Content +*******************************/ +/* Event */ +.ui.feed .event { + width: 100%; + display: table; + padding: 1em; +} +.ui.feed .event:first-child { + border-top: 0px; +} +.ui.feed .event:last-child { + margin-bottom: 1em; +} +/* Event Label */ +.ui.feed .label { + width: 3em; + display: table-cell; + vertical-align: top; + text-align: left; +} +.ui.feed .label .icon { + font-size: 1.5em; + padding: 0.5em; + margin: 0em; +} +.ui.feed .label img { + width: 3em; + margin: 0em; + border-radius: 50em; +} +.ui.feed .label + .content { + padding: 0.75em 1em 0em; +} +/* Content */ +.ui.feed .content { + display: table-cell; + vertical-align: top; + text-align: left; + word-wrap: break-word; +} +/* Date */ +.ui.feed .content .date { + float: right; + padding-left: 1em; + color: rgba(0, 0, 0, 0.4); +} +/* Summary */ +.ui.feed .content .summary { + color: rgba(0, 0, 0, 0.75); +} +.ui.feed .content .summary img { + display: inline-block; + margin-right: 0.25em; + width: 4em; + border-radius: 500px; +} +/* Additional Information */ +.ui.feed .content .extra { + margin: 1em 0em 0em; + padding: 0.5em 0em 0em; + color: rgba(0, 0, 0, 0.5); +} +.ui.feed .content .extra.images img { + display: inline-block; + margin-right: 0.25em; + width: 6em; +} +.ui.feed .content .extra.text { + padding: 0.5em 1em; + border-left: 0.2em solid rgba(0, 0, 0, 0.1); +} +/******************************* + Variations +*******************************/ +.ui.small.feed { + font-size: 0.875em; +} +.ui.small.feed .label img { + width: 2.5em; +} +.ui.small.feed .label .icon { + font-size: 1.25em; +} +.ui.feed .event { + padding: 0.75em 0em; +} +.ui.small.feed .label + .content { + padding: 0.5em 0.5em 0; +} +.ui.small.feed .content .extra.images img { + width: 5em; +} +.ui.small.feed .content .extra { + margin: 0.5em 0em 0em; +} +.ui.small.feed .content .extra.text { + padding: 0.25em 0.5em; +} +/* + * # Semantic Item View + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Standard +*******************************/ +/*-------------- + Items +---------------*/ +.ui.items { + margin: 1em 0em 0em; +} +.ui.items:first-child { + margin-top: 0em; +} +.ui.items:last-child { + margin-bottom: -1em; +} +/* Force Clearing */ +.ui.items:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +/*-------------- + Item +---------------*/ +.ui.items > .row > .item, +.ui.items > .item { + display: block; + float: left; + position: relative; + top: 0px; + width: 316px; + min-height: 375px; + margin: 0em 0.5em 2.5em; + padding: 0em; + background-color: #FFFFFF; + line-height: 1.2; + font-size: 1em; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); + -moz-border-radius: 0.33em; + -webkit-border-radius: 0.33em; + border-radius: 0.33em; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + transition: all 0.2s ease; + padding: 0.5em; +} +.ui.items a.item, +.ui.items .item a { + cursor: pointer; +} +.ui.items .item, +.ui.items .item > .image, +.ui.items .item > .image .overlay, +.ui.items .item > .content, +.ui.items .item > .content > .meta, +.ui.items .item > .content > .extra { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} +/*-------------- + Images +---------------*/ +.ui.items .item > .image { + display: block; + position: relative; + background-color: rgba(0, 0, 0, 0.05); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +.ui.items .item > .image > img { + position: relative; + display: block; + width: 100%; + overflow: hidden; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +/*-------------- + Content +---------------*/ +.ui.items .item > .content { + padding: 0.75em 0.5em; +} +.ui.items .item > .content > .name { + display: block; + font-size: 1.25em; + font-weight: bold; + margin-bottom: 0.2em; + color: rgba(0, 0, 0, 0.7); +} +.ui.items .item > .content > .description { + clear: both; + margin: 0em 0em; + color: rgba(0, 0, 0, 0.45); +} +.ui.items .item > .content > .description p { + margin: 0em 0em 0.2em; +} +.ui.items .item > .content > .description p:last-child { + margin-bottom: 0em; +} +/*-------------- + Meta +---------------*/ +.ui.items .item .meta { + float: right; + color: rgba(0, 0, 0, 0.35); +} +.ui.items .item > .content > .meta + .name { + float: left; +} +/*-------------- + Labels +---------------*/ +/*-----star----- */ +/* hover */ +.ui.items .item .star.label:hover::after { + border-right-color: #F6EFC3; +} +.ui.items .item .star.label:hover::after { + border-top-color: #F6EFC3; +} +.ui.items .item .star.label:hover .icon { + color: #ac9400; +} +/* active */ +.ui.items .item .star.label.active::after { + border-right-color: #F6EFC3; +} +.ui.items .item .star.label.active::after { + border-top-color: #F6EFC3; +} +.ui.items .item .star.label.active .icon { + color: #ac9400; +} +/*-----like----- */ +/* hover */ +.ui.items .item .like.label:hover::after { + border-right-color: #F5E1E2; +} +.ui.items .item .like.label.active::after { + border-top-color: #F5E1E2; +} +.ui.items .item .like.label:hover .icon { + color: #ef404a; +} +/* active */ +.ui.items .item .like.label.active::after { + border-right-color: #F5E1E2; +} +.ui.items .item .like.label.active::after { + border-top-color: #F5E1E2; +} +.ui.items .item .like.label.active .icon { + color: #ef404a; +} +/*-------------- + Extra +---------------*/ +.ui.items .item .extra { + position: absolute; + width: 100%; + padding: 0em 0.5em; + bottom: -2em; + left: 0em; + height: 1.5em; + color: rgba(0, 0, 0, 0.25); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.items .item .extra > img { + display: inline-block; + border-radius: 500px 500px 500px 500px; + margin-right: 0.25em; + vertical-align: middle; + width: 2em; +} +.ui.items .item .extra .left { + float: left; +} +.ui.items .item .extra .right { + float: right; +} +/******************************* + States +*******************************/ +.ui.items .item:hover { + cursor: pointer; + z-index: 5; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); +} +.ui.items .item:hover .extra { + color: rgba(0, 0, 0, 0.5); +} +.ui.items .item:nth-of-type(n+1):hover { + border-bottom-color: #6ECFF5 !important; +} +.ui.items .item:nth-of-type(n+2):hover { + border-bottom-color: #5C6166 !important; +} +.ui.items .item:nth-of-type(n+3):hover { + border-bottom-color: #A1CF64 !important; +} +.ui.items .item:nth-of-type(n+4):hover { + border-bottom-color: #D95C5C !important; +} +.ui.items .item:nth-of-type(n+5):hover { + border-bottom-color: #564F8A !important; +} +.ui.items .item:nth-of-type(n+6):hover { + border-bottom-color: #00B5AD !important; +} +/******************************* + Variations +*******************************/ +/*-------------- + Connected +---------------*/ +.ui.connected.items { + display: table; + width: 100%; + margin-left: 0em !important; + margin-right: 0em !important; +} +.ui.connected.items > .row > .item, +.ui.connected.items > .item { + float: none; + display: table-cell; + vertical-align: top; + height: auto; + border-radius: 0px; + margin: 0em; + width: 33.33%; +} +.ui.connected.items > .row { + display: table; + margin: 0.5em 0em; +} +.ui.connected.items > .row:first-child { + margin-top: 0em; +} +/* Borders */ +.ui.connected.items > .item, +.ui.connected.items > .row:last-child > .item { + border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); +} +.ui.connected.items > .row:last-child > .item:first-child, +.ui.connected.items > .item:first-child { + border-radius: 0em 0em 0em 0.33em; +} +.ui.connected.items > .row:last-child > .item:last-child, +.ui.connected.items > .item:last-child { + border-radius: 0em 0em 0.33em 0em; +} +/* Hover */ +.ui.connected.items .item:hover { + border-bottom-width: 0.2em; +} +/* Item Count */ +.ui.one.connected.items > .row > .item, +.ui.one.connected.items > .item { + width: 50%; + padding-left: 2%; + padding-right: 2%; +} +.ui.two.connected.items > .row > .item, +.ui.two.connected.items > .item { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} +.ui.three.connected.items > .row > .item, +.ui.three.connected.items > .item { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} +.ui.four.connected.items > .row > .item, +.ui.four.connected.items > .item { + width: 25%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.five.connected.items > .row > .item, +.ui.five.connected.items > .item { + width: 20%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.six.connected.items > .row > .item, +.ui.six.connected.items > .item { + width: 16.66%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.seven.connected.items > .row > .item, +.ui.seven.connected.items > .item { + width: 14.28%; + padding-left: 0.5%; + padding-right: 0.5%; +} +.ui.eight.connected.items > .row > .item, +.ui.eight.connected.items > .item { + width: 12.5%; + padding-left: 0.25%; + padding-right: 0.25%; +} +.ui.nine.connected.items > .row > .item, +.ui.nine.connected.items > .item { + width: 11.11%; + padding-left: 0.25%; + padding-right: 0.25%; +} +.ui.ten.connected.items > .row > .item, +.ui.ten.connected.items > .item { + width: 10%; + padding-left: 0.2%; + padding-right: 0.2%; +} +.ui.eleven.connected.items > .row > .item, +.ui.eleven.connected.items > .item { + width: 9.09%; + padding-left: 0.2%; + padding-right: 0.2%; +} +.ui.twelve.connected.items > .row > .item, +.ui.twelve.connected.items > .item { + width: 8.3333%; + padding-left: 0.1%; + padding-right: 0.1%; +} +/*------------------- + Responsive +--------------------*/ +@media only screen and (max-width: 768px) { + .ui.stackable.items { + display: block !important; + } + .ui.stackable.items > .item, + .ui.stackable.items > .row > .item { + margin: 0em 2em 1em !important; + display: block !important; + height: auto !important; + width: auto !important; + padding: 0% !important; + } +} +/*-------------------- + Horizontal +---------------------*/ +.ui.horizontal.items > .item, +.ui.items > .horizontal.item { + display: table; +} +.ui.horizontal.items > .item > .image .ui.items > .horizontal.item > .image { + display: table-cell; + width: 50%; +} +.ui.horizontal.items > .item > .image + .content, +.ui.items > .horizontal.item > .image + .content { + width: 50%; + display: table-cell; +} +.ui.horizontal.items > .item > .content, +.ui.items > .horizontal.item > .content { + padding: 1% 1.7% 11% 3%; + vertical-align: top; +} +.ui.horizontal.items > .item > .meta, +.ui.items > .horizontal.item > .meta { + position: absolute; + padding: 0%; + bottom: 7%; + left: 3%; + width: 94%; +} +.ui.horizontal.items > .item > .image + .content + .meta, +.ui.items > .horizontal.item > .image + .content + .meta { + bottom: 7%; + left: 53%; + width: 44%; +} +.ui.horizontal.items > .item .avatar, +.ui.items > .horizontal.item .avatar { + width: 11.5%; +} +.ui.items > .item .avatar { + max-width: 25px; +} +/*-------------- + Item Count +---------------*/ +.ui.one.items { + margin-left: -2%; + margin-right: -2%; +} +.ui.one.items > .item { + width: 100%; + margin-left: 2%; + margin-right: 2%; +} +.ui.two.items { + margin-left: -1%; + margin-right: -1%; +} +.ui.two.items > .item { + width: 48%; + margin-left: 1%; + margin-right: 1%; +} +.ui.two.items > .item:nth-child(2n+1) { + clear: left; +} +.ui.three.items { + margin-left: -1%; + margin-right: -1%; +} +.ui.three.items > .item { + width: 31.333%; + margin-left: 1%; + margin-right: 1%; +} +.ui.three.items > .item:nth-child(3n+1) { + clear: left; +} +.ui.four.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.four.items > .item { + width: 24%; + margin-left: 0.5%; + margin-right: 0.5%; +} +.ui.four.items > .item:nth-child(4n+1) { + clear: left; +} +.ui.five.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.five.items > .item { + width: 19%; + margin-left: 0.5%; + margin-right: 0.5%; +} +.ui.five.items > .item:nth-child(5n+1) { + clear: left; +} +.ui.six.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.six.items > .item { + width: 15.66%; + margin-left: 0.5%; + margin-right: 0.5%; +} +.ui.six.items > .item:nth-child(6n+1) { + clear: left; +} +.ui.seven.items { + margin-left: -0.5%; + margin-right: -0.5%; +} +.ui.seven.items > .item { + width: 13.28%; + margin-left: 0.5%; + margin-right: 0.5%; + font-size: 11px; +} +.ui.seven.items > .item:nth-child(7n+1) { + clear: left; +} +.ui.eight.items { + margin-left: -0.25%; + margin-right: -0.25%; +} +.ui.eight.items > .item { + width: 12.0%; + margin-left: 0.25%; + margin-right: 0.25%; + font-size: 11px; +} +.ui.eight.items > .item:nth-child(8n+1) { + clear: left; +} +.ui.nine.items { + margin-left: -0.25%; + margin-right: -0.25%; +} +.ui.nine.items > .item { + width: 10.61%; + margin-left: 0.25%; + margin-right: 0.25%; + font-size: 10px; +} +.ui.nine.items > .item:nth-child(9n+1) { + clear: left; +} +.ui.ten.items { + margin-left: -0.2%; + margin-right: -0.2%; +} +.ui.ten.items > .item { + width: 9.6%; + margin-left: 0.2%; + margin-right: 0.2%; + font-size: 10px; +} +.ui.ten.items > .item:nth-child(10n+1) { + clear: left; +} +.ui.eleven.items { + margin-left: -0.2%; + margin-right: -0.2%; +} +.ui.eleven.items > .item { + width: 8.69%; + margin-left: 0.2%; + margin-right: 0.2%; + font-size: 9px; +} +.ui.eleven.items > .item:nth-child(11n+1) { + clear: left; +} +.ui.twelve.items { + margin-left: -0.1%; + margin-right: -0.1%; +} +.ui.twelve.items > .item { + width: 8.1333%; + margin-left: 0.1%; + margin-right: 0.1%; + font-size: 9px; +} +.ui.twelve.items > .item:nth-child(12n+1) { + clear: left; +} +/* + * # Semantic List - Flat + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 26 2013 + */ +/******************************* + List +*******************************/ +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: none; + margin: 1em 0em; + padding: 0em; +} +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + margin: 0em; + padding: 0.5em 0em 0.5em 1em; +} +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; +} +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; +} +/******************************* + Content +*******************************/ +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list .item { + display: list-item; + list-style-type: none; + list-style-position: inside; + padding: 0.3em 0em; + line-height: 1.2; +} +/* Icon */ +.ui.list .item > .icon { + margin: 0em 0.5em 0em 0em; +} +.ui.horizontal.list .item > .icon { + margin: 0em 0.25em 0em 0em; +} +/* Image */ +.ui.list .item > img { + display: inline-block; + width: 2em; + margin-right: 0.5em; + vertical-align: middle; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +/* Content */ +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2; +} +/* Link */ +.ui.list a { + cursor: pointer; +} +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Header */ +.ui.list .header { + font-weight: bold; +} +.ui.list .description { + color: rgba(0, 0, 0, 0.5); +} +/* Floated Content */ +.ui.list .item > .left.floated { + float: left; +} +.ui.list .item > .right.floated { + float: right; +} +/******************************* + Types +*******************************/ +/*------------------- + Horizontal +--------------------*/ +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list .item { + display: inline-block; + margin-left: 1em; + font-size: 1rem; +} +.ui.horizontal.list .item:first-child { + margin-left: 0em; +} +/******************************* + States +*******************************/ +/*------------------- + Hover +--------------------*/ +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*------------------- + Link +--------------------*/ +.ui.link.list a { + color: rgba(0, 0, 0, 0.5); +} +.ui.link.list a:hover { + color: rgba(0, 0, 0, 0.7); +} +.ui.link.list a:active { + color: rgba(0, 0, 0, 0.9); +} +.ui.link.list .active { + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Selection +--------------------*/ +.ui.selection.list .item { + cursor: pointer; + color: rgba(0, 0, 0, 0.4); + padding: 0.5em; + -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -ms-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; +} +.ui.selection.list .item:hover { + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list:not(.horizontal, .ordered) .item:hover { + padding-left: 1em; +} +.ui.selection.list:not(.horizontal, .ordered) .item:hover .item:hover { + padding-left: 0.5em; +} +.ui.selection.list .item:active { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item.active { + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.7); +} +/*------------------- + Bulleted +--------------------*/ +ul.ui.list, +.ui.bulleted.list { + margin-left: 1em; +} +ul.ui.list li, +.ui.bulleted.list .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + left: -1em; + content: '•'; + line-height: 1.2rem; + vertical-align: top; +} +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: 1.2em; +} +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list .item { + margin-left: 1.5em; +} +ul.ui.horizontal.bulleted.list li:before, +.ui.horizontal.bulleted.list .item:before { + left: -0.9em; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list .item:first-child::before { + display: none; +} +/*------------------- + Ordered +--------------------*/ +ol.ui.list, +.ui.ordered.list { + counter-reset: ordered; + margin-left: 2em; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .item:before { + position: absolute; + left: -2em; + counter-increment: ordered; + content: counters(ordered, "."); + text-align: right; + vertical-align: top; + opacity: 0.75; +} +ol.ui.list ol, +.ui.ordered.list .list { + counter-reset: ordered; + padding-left: 3em; +} +ol.ui.list ol li:before, +.ui.ordered.list .list .item:before { + left: -2.5em; +} +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .item:before { + position: static; + margin: 0em 0.5em 0em 0em; +} +/*------------------- + Divided +--------------------*/ +.ui.divided.list > .item, +.ui.divided.list > .list { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.divided.list .item .menu .item { + border-width: 0px; +} +.ui.divided.list .item:first-child { + border-top-width: 0px; +} +/* Sub Menu */ +.ui.divided.list .list { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.divided.list .list .item { + padding-left: 1em; + padding-right: 1em; +} +.ui.divided.list .list .item:first-child { + border-top-width: 1px; +} +/* Divided bulleted */ +.ui.divided.bulleted.list { + margin-left: 0em; +} +.ui.divided.bulleted.list .item { + padding-left: 1.5em; +} +.ui.divided.bulleted.list .item:before { + left: 0.5em; +} +/* Divided ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list > .item { + padding-left: 2em; + padding-right: 2em; +} +.ui.divided.ordered.list > .item:before { + left: 0.5em; +} +.ui.divided.ordered.list .item .list { + margin-left: -2em; + margin-right: -2em; +} +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list .item { + border-top: none; + border-left: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding-left: 0.75em; + padding-right: 0.75em; + line-height: 0.6; +} +.ui.horizontal.divided.list .item:first-child { + border-left: none; + padding-left: 0em; +} +/*------------------- + Celled +--------------------*/ +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: 1px solid rgba(0, 0, 0, 0.1); + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.celled.list > .item:last-child { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +/* Sub Menu */ +.ui.celled.list .item .list { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.celled.list .item .list .item { + border-width: 0px; +} +.ui.celled.list .list .item:first-child { + border-top-width: 0px; +} +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list > .item { + padding-left: 1.5em; +} +.ui.celled.bulleted.list > .item:before { + left: 0.5em; +} +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .item { + padding-left: 2em; + padding-right: 2em; +} +.ui.celled.ordered.list .item:before { + left: 0.5em; +} +.ui.celled.ordered.list .item .list { + margin-left: -2em; + margin-right: -2em; +} +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .item { + border-top: none; + border-left: 1px solid rgba(0, 0, 0, 0.1); + margin: 0em; + padding-left: 0.75em; + padding-right: 0.75em; + line-height: 0.6; +} +.ui.horizontal.celled.list .item:last-child { + border-bottom: none; + border-right: 1px solid rgba(0, 0, 0, 0.1); +} +/*------------------- + Relaxed +--------------------*/ +.ui.relaxed.list:not(.horizontal) .item { + padding-top: 0.5em; + padding-bottom: 0.5em; +} +.ui.horizontal.relaxed.list .item { + padding-left: 1.25em; + padding-right: 1.25em; +} +.ui.very.relaxed.list:not(.horizontal) .item { + padding-top: 1em; + padding-bottom: 1em; +} +.ui.horizontal.very.relaxed.list .item { + padding-left: 2em; + padding-right: 2em; +} +/*------------------- + Sizes +--------------------*/ +.ui.mini.list .item { + font-size: 0.7rem; +} +.ui.tiny.list .item { + font-size: 0.8125rem; +} +.ui.small.list .item { + font-size: 0.875rem; +} +.ui.list .item { + font-size: 1em; +} +.ui.large.list .item { + font-size: 1.125rem; +} +.ui.big.list .item { + font-size: 1.25rem; +} +.ui.huge.list .item { + font-size: 1.375rem; +} +.ui.massive.list .item { + font-size: 1.5rem; +} +/* + * # Statistic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: Aug 20, 2013 + */ +/******************************* + Statistic +*******************************/ +.ui.statistic { + text-align: center; +} +/******************************* + Content +*******************************/ +.ui.statistic > .number { + font-size: 4em; + font-weight: bold; + color: rgba(0, 0, 0, 0.7); +} +.ui.statistic > .description { + opacity: 0.8; +}