diff --git a/cmd/web.go b/cmd/web.go index e8ffe65..3379eb0 100644 --- a/cmd/web.go +++ b/cmd/web.go @@ -44,7 +44,7 @@ var CmdWeb = cli.Command{ cli.StringFlag{ Name: "d", Value: "false", - Usage: "-d=true, run app as daemon", + Usage: "-d=true, run app as daemon, not support windows", }, }, } @@ -131,6 +131,10 @@ func catchSignal() { } func becomeDaemon(ctx *cli.Context) { + // 不支持windows + if app.IsWindows { + return + } var daemond string = "false" if ctx.IsSet("d") { daemond = ctx.String("d") @@ -139,7 +143,6 @@ func becomeDaemon(ctx *cli.Context) { return } - if os.Getppid() == InitProcess { // 已是守护进程,不再处理 return diff --git a/modules/app/app.go b/modules/app/app.go index 78b28a3..b60de51 100644 --- a/modules/app/app.go +++ b/modules/app/app.go @@ -2,7 +2,6 @@ package app import ( "os" - "runtime" "github.com/ouqiang/cron-scheduler/models" "github.com/ouqiang/cron-scheduler/modules/ansible" @@ -10,6 +9,7 @@ import ( "github.com/ouqiang/cron-scheduler/service" "github.com/ouqiang/cron-scheduler/modules/setting" "github.com/ouqiang/cron-scheduler/modules/logger" + "runtime" ) var ( @@ -20,15 +20,19 @@ var ( AppConfig string // 应用配置文件 AnsibleHosts string // ansible hosts文件 Installed bool // 应用是否安装过 + IsWindows bool // 是否是在windows上运行 ) +func init() { + IsWindows = runtime.GOOS == "windows" +} + func InitEnv() { logger.InitLogger() wd, err := os.Getwd() if err != nil { logger.Fatal(err) } - checkEnv() AppDir = wd ConfDir = AppDir + "/conf" LogDir = AppDir + "/log" @@ -45,13 +49,6 @@ func InitEnv() { } } -func checkEnv() { - if runtime.GOOS == "windows" { - logger.Fatal("不支持在windows上运行") - } -} - - // 判断应用是否安装过 func IsInstalled() bool { _, err := os.Stat(ConfDir + "/install.lock") diff --git a/public/resource/css/framework.css b/public/resource/css/framework.css new file mode 100644 index 0000000..fb09e20 --- /dev/null +++ b/public/resource/css/framework.css @@ -0,0 +1,17470 @@ +.container { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} +.bigcontainer{ + margin:0 auto; +} +.bigcontainer:before,.container:before, +.bigcontainer:after, .container:after { + display: table; + content: " "; +} +.bigcontainer:after, .container:after { + clear: both; +} + +.bigcontainer:before, .container:before, +.bigcontainer:after, .container:after { + display: table; + content: " "; +} + +.bigcontainer:after, .container:after { + clear: both; +} +@media (min-width: 992px) { + .container { + width: 970px; + } + .bigcontainer{ + width:1000px; +} +} +@media (min-width: 1200px) { + .container { + width: 1170px; + } +.bigcontainer{ + width:1200px; +} +} +/******************************* + 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="email"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form input[type="number"], +.ui.form input[type="tel"], +.ui.form .ui.input { + width: 100%; +} + +.ui.form textarea, +.ui.form input[type="text"], +.ui.form input[type="email"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form input[type="number"], +.ui.form input[type="tel"] { + 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); + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, -webkit-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; + 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; + max-height: 24em; + resize: vertical; +} + +.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="email"]:focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="tel"]: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; + 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, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: #D95C5C; +} + +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: #D95C5C; + color: #FFFFFF; +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .field.error textarea, +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="tel"] { + 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; + 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="email"]:focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="tel"]:focus { + border-color: #ff5050; + color: #ff5050; + -webkit-appearance: none; + -webkit-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: #AAAAAA; +} + +.ui.form :focus::-webkit-input-placeholder { + color: #999999; +} + +/* Error Placeholder */ + +.ui.form .error ::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.4); +} + +.ui.form .error :focus::-webkit-input-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(../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: 2em; + right: 0.5em; + font-family: 'Icons'; + content: '\f133'; + font-size: 1.2em; + 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"], +.ui.inverted.form .field.error input[type="email"], +.ui.inverted.form .field.error input[type="date"], +.ui.inverted.form .field.error input[type="password"], +.ui.inverted.form .field.error input[type="number"], +.ui.inverted.form .field.error input[type="tel"] { + 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; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Other Combinations */ + +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: 50%; + padding-left: 1%; + padding-right: 1%; +} + +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: 33.333%; + padding-left: 1%; + padding-right: 1%; +} + +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: 25%; + padding-left: 1%; + padding-right: 1%; +} + +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: 20%; + padding-left: 1%; + padding-right: 1%; +} + +.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.field > label, +.ui.form .inline.field > p, +.ui.form .inline.field > input { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: middle; +} + +.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="email"], +.ui.small.form input[type="date"], +.ui.small.form input[type="password"], +.ui.small.form input[type="number"], +.ui.small.form input[type="tel"], +.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; +} + +body > .ui.grid { + margin-left: 0% !important; + margin-right: 0% !important; +} + +.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 Grid (Responsive) +-------------------------*/ + +.ui.page.grid { + min-width: 320px; + margin-left: 0%; + margin-right: 0%; +} + +@media only screen and (max-width: 998px) { + .ui.page.grid { + padding: 0% 4%; + } +} + +@media only screen and (min-width: 998px) { + .ui.page.grid { + padding: 0% 8%; + } +} + +@media only screen and (min-width: 1500px) { + .ui.page.grid { + padding: 0% 13%; + } +} + +@media only screen and (min-width: 1750px) { + .ui.page.grid { + padding: 0% 18%; + } +} + +@media only screen and (min-width: 2000px) { + .ui.page.grid { + padding: 0% 23%; + } +} + +/*------------------- + Column Width +--------------------*/ + +/* Sizing Combinations */ + +.ui.grid > .row > .one.wide.column, +.ui.grid > .one.wide.column { + width: 6.25%; +} + +.ui.grid > .row > .two.wide.column, +.ui.grid > .two.wide.column { + width: 12.5%; +} + +.ui.grid > .row > .three.wide.column, +.ui.grid > .three.wide.column { + width: 18.75%; +} + +.ui.grid > .row > .four.wide.column, +.ui.grid > .four.wide.column { + width: 25%; +} + +.ui.grid > .row > .five.wide.column, +.ui.grid > .five.wide.column { + width: 31.25%; +} + +.ui.grid > .row > .six.wide.column, +.ui.grid > .six.wide.column { + width: 37.5%; +} + +.ui.grid > .row > .seven.wide.column, +.ui.grid > .seven.wide.column { + width: 43.75%; +} + +.ui.grid > .row > .eight.wide.column, +.ui.grid > .eight.wide.column { + width: 50%; +} + +.ui.grid > .row > .nine.wide.column, +.ui.grid > .nine.wide.column { + width: 56.25%; +} + +.ui.grid > .row > .ten.wide.column, +.ui.grid > .ten.wide.column { + width: 62.5%; +} + +.ui.grid > .row > .eleven.wide.column, +.ui.grid > .eleven.wide.column { + width: 68.75%; +} + +.ui.grid > .row > .twelve.wide.column, +.ui.grid > .twelve.wide.column { + width: 75%; +} + +.ui.grid > .row > .thirteen.wide.column, +.ui.grid > .thirteen.wide.column { + width: 81.25%; +} + +.ui.grid > .row > .fourteen.wide.column, +.ui.grid > .fourteen.wide.column { + width: 87.5%; +} + +.ui.grid > .row > .fifteen.wide.column, +.ui.grid > .fifteen.wide.column { + width: 93.75%; +} + +.ui.grid > .row > .sixteen.wide.column, +.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); + 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; + 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; + 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; + 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; + 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; + 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; + box-shadow: -1px 0px 0px 0px #dfdfdf; +} + +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.celled.page.grid { + -webkit-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 > .mobile.only.column, + .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 > .tablet.only.column, + .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 > .computer.only.column, + .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; + 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; + } +} + +/******************************* + Standard +*******************************/ + +/*-------------- + Menu +---------------*/ + +.ui.menu { + margin-bottom:1rem; + margin-bottom:16px; + background-color: #FFFFFF; + font-size: 0px; + font-weight: normal; + -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); +} + +.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, -webkit-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); + 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; + -webkit-user-select: none; + -ms-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-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0.05)), color-stop(50%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.05)), color-stop(50%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); + background-image: linear-gradient(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; +} + +/*-------------- + Button +---------------*/ + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: -0.05em; + margin: -0.55em 0; + padding-bottom: 0.55em; + padding-top: 0.55em; + font-size: 0.875em; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------- + Inputs +---------------*/ + +.ui.menu:not(.vertical) .item > .input { + margin-top: -0.83em; + margin-bottom: -0.83em; + padding-top: 0.3em; + padding-bottom: 0.3em; + width: 100%; +} + +.ui.menu .item > .input input { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +.ui.vertical.menu .item > .input input { + margin: 0em; + padding-top: 0.63em; + padding-bottom: 0.63em; +} + +.ui.vertical.menu .ui.input > .icon { + 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 { + left: 1px; + margin: 0px; + min-width: -webkit-calc(99%); + min-width: calc(99%); + -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1); +} + +.ui.secondary.menu .dropdown.item .menu { + left: 0px; + min-width: 100%; +} + +.ui.menu .pointing.dropdown.item .menu { + margin-top: 0.75em; +} + +.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 { + -webkit-box-shadow: none !important; + 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; + border-bottom-right-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; + box-shadow: 0em 0.2em 0em inset; +} + +.ui.vertical.menu .active.item { + border-radius: 0em; + -webkit-box-shadow: 0.2em 0em 0em inset; + box-shadow: 0.2em 0em 0em inset; +} + +.ui.vertical.menu > .active.item:first-child { + border-radius: 0em 0.1875em 0em 0em; +} + +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em 0.1875em 0em; +} + +.ui.vertical.menu > .active.item:only-child { + 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; + 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(../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; + 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: -webkit-gradient(linear, top left, top right, from(rgba(0, 0, 0, 0.03)), color-stop(1.5em, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.03))); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.03)), color-stop(1.5em, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.03))); + 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; + content: "\f0da"; +} + +.ui.vertical.menu .dropdown.item .menu { + top: 0% !important; + left: 100%; + margin: 0px 0px 0px 1px; + -webkit-box-shadow: 0 0px 1px 1px #DDDDDD; + box-shadow: 0 0px 1px 1px #DDDDDD; +} + +.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; + 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: ''; + margin-top: -1px; + top: 100%; + left: 0px; + width: 100%; + height: 2px; + 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; + 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; + 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; + 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; + border-radius: 0em; + -webkit-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; + background-color: #FFFFFF; + color: rgba(0, 0, 0, 0.8); + border-color: #DCDDDE; + font-weight: bold; + margin-bottom: -1px; + border-bottom: 1px solid #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; + 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 { + float:right; + margin: 56px 0 0; + display: inline-block; + vertical-align: middle; +} + +.ui.pagination.menu .item { + min-width: 3em; + text-align: center; +} + +.ui.pagination.menu .icon.item .icon { + vertical-align: top; +} + +.ui.pagination.menu.floated { + display: block; +} + +/* active */ + +.ui.pagination.menu .active.item { + border-top: none; + padding-top: 0.83em; + background-color: rgba(0, 0, 0, 0.05); + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background-color: transparent; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.secondary.menu > .menu > .item, +.ui.secondary.menu > .item { + -webkit-box-shadow: none; + box-shadow: none; + border: none; + height: auto !important; + margin: 0em 0.25em; + padding: 0.5em 1em; + border-radius: 0.3125em; +} + +.ui.secondary.menu > .menu > .item:before, +.ui.secondary.menu > .item:before { + display: none !important; +} + +.ui.secondary.menu .item > .input input { + background-color: transparent; + border: none; +} + +.ui.secondary.menu .link.item, +.ui.secondary.menu a.item { + opacity: 0.8; + -webkit-transition: none; + transition: none; +} + +.ui.secondary.menu .header.item { + border-right: 0.1em solid rgba(0, 0, 0, 0.1); + background-color: transparent; + border-radius: 0em; +} + +/* hover */ + +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + opacity: 1; +} + +/* active */ + +.ui.secondary.menu > .menu > .active.item, +.ui.secondary.menu > .active.item { + background-color: rgba(0, 0, 0, 0.08); + opacity: 1; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.secondary.vertical.menu > .active.item { + 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.1); +} + +/* disable variations */ + +.ui.secondary.item.menu > .item { + margin: 0em; +} + +.ui.secondary.attached.menu { + -webkit-box-shadow: none; + box-shadow: none; +} + +/*--------------------- + Secondary Pointing +-----------------------*/ +.ui.secondary.pointing.menu > .menu > .item, +.ui.secondary.pointing.menu > .item { + margin: 0em 0em -3px; + padding: 0.6em 0.95em; + border-bottom: 3px solid rgba(0, 0, 0, 0); + border-radius: 0em; + -webkit-transition: color 0.2s; + transition: color 0.2s; +} + +/* Item Types */ + +.ui.secondary.pointing.menu .header.item { + margin-bottom: -3px; + background-color: transparent !important; + border-right-width: 0px !important; + font-weight: bold !important; + color: rgba(0, 0, 0, 0.8) !important; +} + +.ui.secondary.pointing.menu .text.item { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +.ui.secondary.pointing.menu > .menu > .item:after, +.ui.secondary.pointing.menu > .item:after { + display: none; +} + +/* Hover */ + +.ui.secondary.pointing.menu > .menu > .link.item:hover, +.ui.secondary.pointing.menu > .link.item:hover, +.ui.secondary.pointing.menu > .menu > a.item:hover, +.ui.secondary.pointing.menu > a.item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +/* Down */ + +.ui.secondary.pointing.menu > .menu > .link.item:active, +.ui.secondary.pointing.menu > .link.item:active, +.ui.secondary.pointing.menu > .menu > a.item:active, +.ui.secondary.pointing.menu > a.item:active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +/* Active */ + +.ui.secondary.pointing.menu > .menu > .item.active, +.ui.secondary.pointing.menu > .item.active { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.6); + -webkit-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; + border-radius: 0.1875em; +} + +.ui.secondary.vertical.menu > .header.item { + border-radius: 0em; +} + +.ui.secondary.vertical.pointing.menu > .item { + margin: 0em -3px 0em 0em; + border-bottom: none; + border-right: 3px solid transparent; + 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); +} + +.ui.secondary.inverted.pointing.menu > .header.item { + color: #FFFFFF !important; +} + +/* Hover */ + +.ui.secondary.inverted.pointing.menu > .menu > .item:hover, +.ui.secondary.inverted.pointing.menu > .item:hover { + color: rgba(255, 255, 255, 0.85); +} + +/* Down */ + +.ui.secondary.inverted.pointing.menu > .menu > .item:active, +.ui.secondary.inverted.pointing.menu > .item:active { + border-color: rgba(255, 255, 255, 0.4); +} + +/* Active */ + +.ui.secondary.inverted.pointing.menu > .menu > .item.active, +.ui.secondary.inverted.pointing.menu > .item.active { + border-color: rgba(255, 255, 255, 0.8); + 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; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.text.menu > .item { + opacity: 0.8; + margin: 0em 1em; + padding: 0em; + height: auto !important; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-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; + box-shadow: none; +} + +/* disable variations */ + +.ui.text.pointing.menu .active.item:after { + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.text.attached.menu { + -webkit-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: #178EFE !important; + color: #178EFE !important; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.menu { + background-color: #333333; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.inverted.menu .header.item { + margin: 0em; + background-color: rgba(0, 0, 0, 0.3); + -webkit-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(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%); + background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); + background-image: linear-gradient(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: -webkit-gradient(linear, top left, top right, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.03))); + 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 { + -webkit-box-shadow: none !important; + 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: #5B5B5B; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.inverted.pointing.menu .active.item:hover:after { + background-color: #4A4A4A; +} + +/*-------------- + 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: #007ad5 !important; +} + +.ui.inverted.teal.pointing.menu .active.item:after { + background-color: #007ad5 !important; +} + +/*-------------- + 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 { + 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.3em; + 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); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-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; + border-radius: 0px; + /* avoid rgba multiplying */ + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; +} + +.ui.top.attached.menu { + border-radius: 0.1875em 0.1875em 0px 0px; +} + +.ui.menu.bottom.attached { + border-radius: 0px 0px 0.1875em 0.1875em; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.menu .item { + font-size: 0.875rem; +} + +.ui.small.menu:not(.vertical) .item > .input input { + padding-top: 0.4em; + padding-bottom: 0.4em; +} + +.ui.small.vertical.menu { + width: 13rem; +} + +.ui.menu .item { + font-size: 1rem; +} + +.ui.vertical.menu { + width: 15rem; +} + +.ui.large.menu .item { + font-size: 1.125rem; +} + +.ui.large.menu .item .item { + font-size: 0.875rem; +} + +.ui.large.menu:not(.vertical) .item > .input input { + top: -0.125em; + padding-bottom: 0.6em; + padding-top: 0.6em; +} + +.ui.large.menu .dropdown.item .item { + font-size: 1rem; +} + +.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, -webkit-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; + 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.33rem; + 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 0.3em 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; + 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; + border-radius: 0.325em 0.325em 0em 0em; + -webkit-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; + 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.5; +} + +.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; + 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: #DEFCD5; + color: #52A954; +} + +/* Error Text Block */ + +.ui.error.message, +.ui.negative.message { + background-color: #F1D7D7; + color: #A95252; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.message { + font-size: 0.875em; +} + +.ui.message { + font-size: 0.875rem; +} + +.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; + transition: all 0.1s ease-out; +} + +/* Headers */ + +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} + +.ui.table tfoot th { + background-color: rgba(0, 0, 0, 0.03); +} + +.ui.table th { + cursor: auto; + background-color: rgba(0, 0, 0, 0.05); + 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; +} + +/* Responsive */ + +@media only screen and (max-width: 768px) { + .ui.table { + display: block; + padding: 0em; + } + + .ui.table thead, + .ui.table tfoot { + display: none; + } + + .ui.table tbody { + display: block; + } + + .ui.table tr { + display: block; + } + + .ui.table tr > td { + width: 100% !important; + display: block; + border: none !important; + padding: 0.25em 0.75em; + -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + } + + .ui.table td:first-child { + font-weight: bold; + padding-top: 1em; + } + + .ui.table td:last-child { + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + padding-bottom: 1em; + } + + /* Clear BG Colors */ + + .ui.table tr > td.warning, + .ui.table tr > td.error, + .ui.table tr > td.active, + .ui.table tr > td.positive, + .ui.table tr > td.negative { + background-color: transparent !important; + } +} + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +/* Sortable */ + +.ui.sortable.table th.disabled:hover { + cursor: auto; + text-align: left; + font-weight: bold; + color: #333333; + color: rgba(0, 0, 0, 0.8); +} + +.ui.sortable.table thead th:hover { + background-color: rgba(0, 0, 0, 0.13); + color: rgba(0, 0, 0, 0.8); +} + +/* Inverted Sortable */ + +.ui.inverted.sortable.table thead th:hover { + background-color: rgba(255, 255, 255, 0.13); + color: #ffffff; +} + +/*-------------- + Positive +---------------*/ + +.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 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; + color: #CD2929; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + -webkit-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; + color: #CD2929; +} + +.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; + color: #CD2929; +} + +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + -webkit-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; +} + +.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; + color: #7D6C00; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + -webkit-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; + 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 td { + border: 1px solid rgba(0, 0, 0, 0.1); +} + +/* Coupling with segment */ + +.ui.celled.table.segment th:first-child, +.ui.celled.table.segment td:first-child { + border-left: none; +} + +.ui.celled.table.segment th:last-child, +.ui.celled.table.segment 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; +} + +.ui.basic.table tbody tr:nth-child(2n) { + background-color: transparent !important; +} + +/*-------------- + 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 - basic.Icon (Basic) + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + basic.Icon +*******************************/ + +@font-face { + font-family: 'Basic Icons'; + src: url(../fonts/basic.icons.eot); + src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} + +i.basic.icon { + display: inline-block; + opacity: 0.75; + margin: 0em 0.25em 0em 0em; + width: 18px; + 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; +} + +/* basic.icons available */ + +i.basic.icon.circle.attention:before { + content: '\2757'; +} + +/* '❗' */ + +i.basic.icon.circle.help:before { + content: '\e704'; +} + +/* '' */ + +i.basic.icon.circle.info:before { + content: '\e705'; +} + +/* '' */ + +i.basic.icon.add:before { + content: '\2795'; +} + +/* '➕' */ + +i.basic.icon.chart:before { + content: '📈'; +} + +/* '\1f4c8' */ + +i.basic.icon.chart.bar:before { + content: '📊'; +} + +/* '\1f4ca' */ + +i.basic.icon.chart.pie:before { + content: '\e7a2'; +} + +/* '' */ + +i.basic.icon.resize.full:before { + content: '\e744'; +} + +/* '' */ + +i.basic.icon.resize.horizontal:before { + content: '\2b0d'; +} + +/* '⬍' */ + +i.basic.icon.resize.small:before { + content: '\e746'; +} + +/* '' */ + +i.basic.icon.resize.vertical:before { + content: '\2b0c'; +} + +/* '⬌' */ + +i.basic.icon.down:before { + content: '\2193'; +} + +/* '↓' */ + +i.basic.icon.down.triangle:before { + content: '\25be'; +} + +/* '▾' */ + +i.basic.icon.down.arrow:before { + content: '\e75c'; +} + +/* '' */ + +i.basic.icon.left:before { + content: '\2190'; +} + +/* '←' */ + +i.basic.icon.left.triangle:before { + content: '\25c2'; +} + +/* '◂' */ + +i.basic.icon.left.arrow:before { + content: '\e75d'; +} + +/* '' */ + +i.basic.icon.right:before { + content: '\2192'; +} + +/* '→' */ + +i.basic.icon.right.triangle:before { + content: '\25b8'; +} + +/* '▸' */ + +i.basic.icon.right.arrow:before { + content: '\e75e'; +} + +/* '' */ + +i.basic.icon.up:before { + content: '\2191'; +} + +/* '↑' */ + +i.basic.icon.up.triangle:before { + content: '\25b4'; +} + +/* '▴' */ + +i.basic.icon.up.arrow:before { + content: '\e75f'; +} + +/* '' */ + +i.basic.icon.folder:before { + content: '\e810'; +} + +/* '' */ + +i.basic.icon.open.folder:before { + content: '📂'; +} + +/* '\1f4c2' */ + +i.basic.icon.globe:before { + content: '𝌍'; +} + +/* '\1d30d' */ + +i.basic.icon.desk.globe:before { + content: '🌐'; +} + +/* '\1f310' */ + +i.basic.icon.star:before { + content: '\e801'; +} + +/* '' */ + +i.basic.icon.star.empty:before { + content: '\e800'; +} + +/* '' */ + +i.basic.icon.star.half:before { + content: '\e701'; +} + +/* '' */ + +i.basic.icon.lock:before { + content: '🔒'; +} + +/* '\1f512' */ + +i.basic.icon.unlock:before { + content: '🔓'; +} + +/* '\1f513' */ + +i.basic.icon.layout.grid:before { + content: '\e80c'; +} + +/* '' */ + +i.basic.icon.layout.block:before { + content: '\e708'; +} + +/* '' */ + +i.basic.icon.layout.list:before { + content: '\e80b'; +} + +/* '' */ + +i.basic.icon.heart.empty:before { + content: '\2661'; +} + +/* '♡' */ + +i.basic.icon.heart:before { + content: '\2665'; +} + +/* '♥' */ + +i.basic.icon.asterisk:before { + content: '\2731'; +} + +/* '✱' */ + +i.basic.icon.attachment:before { + content: '📎'; +} + +/* '\1f4ce' */ + +i.basic.icon.attention:before { + content: '\26a0'; +} + +/* '⚠' */ + +i.basic.icon.trophy:before { + content: '🏉'; +} + +/* '\1f3c9' */ + +i.basic.icon.barcode:before { + content: '\e792'; +} + +/* '' */ + +i.basic.icon.cart:before { + content: '\e813'; +} + +/* '' */ + +i.basic.icon.block:before { + content: '🚫'; +} + +/* '\1f6ab' */ + +i.basic.icon.book:before { + content: '📖'; +} + +i.basic.icon.bookmark:before { + content: '🔖'; +} + +/* '\1f516' */ + +i.basic.icon.calendar:before { + content: '📅'; +} + +/* '\1f4c5' */ + +i.basic.icon.cancel:before { + content: '\2716'; +} + +/* '✖' */ + +i.basic.icon.close:before { + content: '\e80d'; +} + +/* '' */ + +i.basic.icon.color:before { + content: '\e794'; +} + +/* '' */ + +i.basic.icon.chat:before { + content: '\e720'; +} + +/* '' */ + +i.basic.icon.check:before { + content: '\2611'; +} + +/* '☑' */ + +i.basic.icon.time:before { + content: '🕔'; +} + +/* '\1f554' */ + +i.basic.icon.cloud:before { + content: '\2601'; +} + +/* '☁' */ + +i.basic.icon.code:before { + content: '\e714'; +} + +/* '' */ + +i.basic.icon.email:before { + content: '\40'; +} + +/* '@' */ + +i.basic.icon.settings:before { + content: '\26ef'; +} + +/* '⛯' */ + +i.basic.icon.setting:before { + content: '\2699'; +} + +/* '⚙' */ + +i.basic.icon.comment:before { + content: '\e802'; +} + +/* '' */ + +i.basic.icon.clockwise.counter:before { + content: '\27f2'; +} + +/* '⟲' */ + +i.basic.icon.clockwise:before { + content: '\27f3'; +} + +/* '⟳' */ + +i.basic.icon.cube:before { + content: '\e807'; +} + +/* '' */ + +i.basic.icon.direction:before { + content: '\27a2'; +} + +/* '➢' */ + +i.basic.icon.doc:before { + content: '📄'; +} + +/* '\1f4c4' */ + +i.basic.icon.docs:before { + content: '\e736'; +} + +/* '' */ + +i.basic.icon.dollar:before { + content: '💵'; +} + +/* '\1f4b5' */ + +i.basic.icon.paint:before { + content: '\e7b5'; +} + +/* '' */ + +i.basic.icon.edit:before { + content: '\270d'; +} + +/* '✍' */ + +i.basic.icon.eject:before { + content: '\2ecf'; +} + +/* '⻏' */ + +i.basic.icon.export:before { + content: '\e715'; +} + +/* '' */ + +i.basic.icon.hide:before { + content: '\e80f'; +} + +/* '' */ + +i.basic.icon.unhide:before { + content: '\e70b'; +} + +/* '' */ + +i.basic.icon.facebook:before { + content: '\f301'; +} + +/* '' */ + +i.basic.icon.fast-forward:before { + content: '\e804'; +} + +/* '' */ + +i.basic.icon.fire:before { + content: '🔥'; +} + +/* '\1f525' */ + +i.basic.icon.flag:before { + content: '\2691'; +} + +/* '⚑' */ + +i.basic.icon.lightning:before { + content: '\26a1'; +} + +/* '⚡' */ + +i.basic.icon.lab:before { + content: '\68'; +} + +/* 'h' */ + +i.basic.icon.flight:before { + content: '\2708'; +} + +/* '✈' */ + +i.basic.icon.forward:before { + content: '\27a6'; +} + +/* '➦' */ + +i.basic.icon.gift:before { + content: '🎁'; +} + +/* '\1f381' */ + +i.basic.icon.github:before { + content: '\f308'; +} + +/* '' */ + +i.basic.icon.globe:before { + content: '\e817'; +} + +/* '' */ + +i.basic.icon.headphones:before { + content: '🎧'; +} + +/* '\1f3a7' */ + +i.basic.icon.question:before { + content: '\2753'; +} + +/* '❓' */ + +i.basic.icon.home:before { + content: '\2302'; +} + +/* '⌂' */ + +i.basic.icon.i:before { + content: '\2139'; +} + +/* 'ℹ' */ + +i.basic.icon.idea:before { + content: '💡'; +} + +/* '\1f4a1' */ + +i.basic.icon.open:before { + content: '🔗'; +} + +/* '\1f517' */ + +i.basic.icon.content:before { + content: '\e782'; +} + +/* '' */ + +i.basic.icon.location:before { + content: '\e724'; +} + +/* '' */ + +i.basic.icon.mail:before { + content: '\2709'; +} + +/* '✉' */ + +i.basic.icon.mic:before { + content: '🎤'; +} + +/* '\1f3a4' */ + +i.basic.icon.minus:before { + content: '\2d'; +} + +/* '-' */ + +i.basic.icon.money:before { + content: '💰'; +} + +/* '\1f4b0' */ + +i.basic.icon.off:before { + content: '\e78e'; +} + +/* '' */ + +i.basic.icon.pause:before { + content: '\e808'; +} + +/* '' */ + +i.basic.icon.photos:before { + content: '\e812'; +} + +/* '' */ + +i.basic.icon.photo:before { + content: '🌄'; +} + +/* '\1f304' */ + +i.basic.icon.pin:before { + content: '📌'; +} + +/* '\1f4cc' */ + +i.basic.icon.play:before { + content: '\e809'; +} + +/* '' */ + +i.basic.icon.plus:before { + content: '\2b'; +} + +/* '+' */ + +i.basic.icon.print:before { + content: '\e716'; +} + +/* '' */ + +i.basic.icon.rss:before { + content: '\e73a'; +} + +/* '' */ + +i.basic.icon.search:before { + content: '🔍'; +} + +/* '\1f50d' */ + +i.basic.icon.shuffle:before { + content: '\e803'; +} + +/* '' */ + +i.basic.icon.tag:before { + content: '\e80a'; +} + +/* '' */ + +i.basic.icon.tags:before { + content: '\e70d'; +} + +/* '' */ + +i.basic.icon.terminal:before { + content: '\e7ac'; +} + +/* '' */ + +i.basic.icon.thumbs.down:before { + content: '👎'; +} + +/* '\1f44e' */ + +i.basic.icon.thumbs.up:before { + content: '👍'; +} + +/* '\1f44d' */ + +i.basic.icon.to-end:before { + content: '\e806'; +} + +/* '' */ + +i.basic.icon.to-start:before { + content: '\e805'; +} + +/* '' */ + +i.basic.icon.top.list:before { + content: '🏆'; +} + +/* '\1f3c6' */ + +i.basic.icon.trash:before { + content: '\e729'; +} + +/* '' */ + +i.basic.icon.twitter:before { + content: '\f303'; +} + +/* '' */ + +i.basic.icon.upload:before { + content: '\e711'; +} + +/* '' */ + +i.basic.icon.user.add:before { + content: '\e700'; +} + +/* '' */ + +i.basic.icon.user:before { + content: '👤'; +} + +/* '\1f464' */ + +i.basic.icon.community:before { + content: '\e814'; +} + +/* '' */ + +i.basic.icon.users:before { + content: '👥'; +} + +/* '\1f465' */ + +i.basic.icon.id:before { + content: '\e722'; +} + +/* '' */ + +i.basic.icon.url:before { + content: '🔗'; +} + +/* '\1f517' */ + +i.basic.icon.zoom.in:before { + content: '\e750'; +} + +/* '' */ + +i.basic.icon.zoom.out:before { + content: '\e751'; +} + +/* '' */ + +/*-------------- + Spacing Fix +---------------*/ + +/* dropdown arrows are to the right */ + +i.dropdown.basic.icon { + margin: 0em 0em 0em 0.5em; +} + +/* stars are usually consecutive */ + +i.basic.icon.star { + width: auto; + margin: 0em; +} + +/* left side basic.icons */ + +i.basic.icon.left, +i.basic.icon.left, +i.basic.icon.left { + width: auto; + margin: 0em 0.5em 0em 0em; +} + +/* right side basic.icons */ + +i.basic.icon.search, +i.basic.icon.up, +i.basic.icon.down, +i.basic.icon.right { + width: auto; + margin: 0em 0em 0em 0.5em; +} + +/*-------------- + Aliases +---------------*/ + +/* aliases for convenience */ + +i.basic.icon.delete:before { + content: '\e80d'; +} + +/* '' */ + +i.basic.icon.dropdown:before { + content: '\25be'; +} + +/* '▾' */ + +i.basic.icon.help:before { + content: '\e704'; +} + +/* '' */ + +i.basic.icon.info:before { + content: '\e705'; +} + +/* '' */ + +i.basic.icon.error:before { + content: '\e80d'; +} + +/* '' */ + +i.basic.icon.dislike:before { + content: '\2661'; +} + +/* '♡' */ + +i.basic.icon.like:before { + content: '\2665'; +} + +/* '♥' */ + +i.basic.icon.eye:before { + content: '\e80f'; +} + +/* '' */ + +i.basic.icon.eye.hidden:before { + content: '\e70b'; +} + +/* '' */ + +i.basic.icon.date:before { + content: '📅'; +} + +/* '\1f4c5' */ + +/******************************* + States +*******************************/ + +i.basic.icon.hover { + opacity: 1; +} + +i.basic.icon.active { + opacity: 1; +} + +i.emphasized.basic.icon { + opacity: 1; +} + +i.basic.icon.disabled { + opacity: 0.3; +} + +/******************************* + Variations +*******************************/ + +/*------------------- + Link +--------------------*/ + +i.link.basic.icon { + cursor: pointer; + opacity: 0.7; + -webkit-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} + +.link.basic.icon:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.basic.icon { + border-radius: 500px !important; + padding: 0.5em 0em !important; + -webkit-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.basic.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.vertically.flipped.basic.icon { + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} + +i.horizontally.flipped.basic.icon { + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +/*------------------- + Rotated +--------------------*/ + +i.left.rotated.basic.icon { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +i.right.rotated.basic.icon { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +/*------------------- + Square +--------------------*/ + +i.square.basic.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; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} + +i.square.basic.icon:before { + vertical-align: middle; +} + +i.square.inverted.basic.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*------------------- + Inverted +--------------------*/ + +i.inverted.basic.icon { + background-color: #222222; + color: #FFFFFF; +} + +/*------------------- + Colors +--------------------*/ + +i.blue.basic.icon { + color: #6ECFF5 !important; +} + +i.black.basic.icon { + color: #5C6166 !important; +} + +i.green.basic.icon { + color: #A1CF64 !important; +} + +i.red.basic.icon { + color: #D95C5C !important; +} + +i.purple.basic.icon { + color: #564F8A !important; +} + +i.teal.basic.icon { + color: #00B5AD !important; +} + +/*------------------- + Inverted Colors +--------------------*/ + +i.inverted.black.basic.icon { + background-color: #5C6166 !important; + color: #FFFFFF !important; +} + +i.inverted.blue.basic.icon { + background-color: #6ECFF5 !important; + color: #FFFFFF !important; +} + +i.inverted.green.basic.icon { + background-color: #A1CF64 !important; + color: #FFFFFF !important; +} + +i.inverted.red.basic.icon { + background-color: #D95C5C !important; + color: #FFFFFF !important; +} + +i.inverted.purple.basic.icon { + background-color: #564F8A !important; + color: #FFFFFF !important; +} + +i.inverted.teal.basic.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/*------------------- + Sizes +--------------------*/ + +i.small.basic.icon { + font-size: 0.875em; +} + +i.basic.icon { + font-size: 1em; +} + +i.large.basic.icon { + font-size: 1.5em; + margin-right: 0.2em; + vertical-align: middle; +} + +i.big.basic.icon { + font-size: 2em; + margin-right: 0.5em; + vertical-align: middle; +} + +i.huge.basic.icon { + font-size: 4em; + margin-right: 0.75em; + vertical-align: middle; +} + +i.massive.basic.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: #FAFAFA; + color: #808080; + margin: 0em; + 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; + background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.05))); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + border-radius: 0.25em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) 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, -webkit-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; +} + +/******************************* + States +*******************************/ + +/*-------------- + Active +---------------*/ + +.ui.buttons .active.button, +.ui.active.button { + background-color: #EAEAEA; + background-image: none; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; + color: rgba(0, 0, 0, 0.7); +} + +/*-------------- + Hover +---------------*/ + +.ui.button:hover { + background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08))); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); + color: rgba(0, 0, 0, 0.7); +} + +.ui.button.active:hover { + background-image: none; +} + +.ui.button:hover .icon, +.ui.button.hover .icon { + opacity: 0.85; +} + +/*-------------- + Down +---------------*/ + +.ui.button:active, +.ui.active.button:active { + background-color: #F1F1F1; + color: rgba(0, 0, 0, 0.7); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.button { + position: relative; + cursor: default; + background-color: #FFFFFF !important; + color: transparent !important; + -webkit-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(../images/loader-mini.gif) no-repeat 50% 50%; +} + +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*------------------- + Disabled +--------------------*/ + +.ui.disabled.button, +.ui.disabled.button:hover, +.ui.disabled.button.active { + background-color: #DDDDDD !important; + cursor: default; + color: rgba(0, 0, 0, 0.5) !important; + opacity: 0.3 !important; + background-image: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Animated +--------------------*/ + +.ui.animated.button { + position: relative; + overflow: hidden; +} + +.ui.animated.button .visible.content { + position: relative; +} + +.ui.animated.button .hidden.content { + position: absolute; + width: 100%; +} + +/* Horizontal */ + +.ui.animated.button .visible.content, +.ui.animated.button .hidden.content { + -webkit-transition: right 0.3s ease 0s; + transition: right 0.3s ease 0s; +} + +.ui.animated.button .visible.content { + left: auto; + right: 0%; +} + +.ui.animated.button .hidden.content { + top: 50%; + left: auto; + right: -100%; + margin-top: -0.55em; +} + +.ui.animated.button:hover .visible.content { + left: auto; + right: 200%; +} + +.ui.animated.button:hover .hidden.content { + left: auto; + right: 0%; +} + +/* Vertical */ + +.ui.vertical.animated.button .visible.content, +.ui.vertical.animated.button .hidden.content { + -webkit-transition: top 0.3s ease 0s, -webkit-transform 0.3s ease 0s; + transition: top 0.3s ease 0s, transform 0.3s ease 0s; +} + +.ui.vertical.animated.button .visible.content { + -webkit-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + right: auto; +} + +.ui.vertical.animated.button .hidden.content { + top: -100%; + left: 0%; + right: auto; +} + +.ui.vertical.animated.button:hover .visible.content { + -webkit-transform: translateY(200%); + -ms-transform: translateY(200%); + transform: translateY(200%); + right: auto; +} + +.ui.vertical.animated.button:hover .hidden.content { + top: 50%; + right: auto; +} + +/* Fade */ + +.ui.fade.animated.button .visible.content, +.ui.fade.animated.button .hidden.content { + -webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s; + transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; +} + +.ui.fade.animated.button .visible.content { + left: auto; + right: auto; + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.ui.fade.animated.button .hidden.content { + opacity: 0; + left: 0%; + right: auto; + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} + +.ui.fade.animated.button:hover .visible.content { + left: auto; + right: auto; + opacity: 0; + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); +} + +.ui.fade.animated.button:hover .hidden.content { + left: 0%; + right: auto; + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +/*------------------- + 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; + color: #FFFFFF; +} + +.ui.facebook.button:active { + background-color: #334F95; + color: #FFFFFF; +} + +/* Twitter */ + +.ui.twitter.button { + background-color: #4092CC; + color: #FFFFFF; +} + +.ui.twitter.button:hover { + background-color: #399ADE; + color: #FFFFFF; +} + +.ui.twitter.button:active { + background-color: #3283BC; + color: #FFFFFF; +} + +/* Google Plus */ + +.ui.google.plus.button { + background-color: #D34836; + color: #FFFFFF; +} + +.ui.google.plus.button:hover { + background-color: #E3432E; + color: #FFFFFF; +} + +.ui.google.plus.button:active { + background-color: #CA3A27; + color: #FFFFFF; +} + +/* Linked In */ + +.ui.linkedin.button { + background-color: #1F88BE; + color: #FFFFFF; +} + +.ui.linkedin.button:hover { + background-color: #1394D6; + color: #FFFFFF; +} + +.ui.linkedin.button:active { + background-color: #1179AE; + color: #FFFFFF; +} + +/* YouTube */ + +.ui.youtube.button { + background-color: #CC181E; + color: #FFFFFF; +} + +.ui.youtube.button:hover { + background-color: #DF0209; + color: #FFFFFF; +} + +.ui.youtube.button:active { + background-color: #A50006; + color: #FFFFFF; +} + +/* Instagram */ + +.ui.instagram.button { + background-color: #49769C; + color: #FFFFFF; +} + +.ui.instagram.button:hover { + background-color: #4781B1; + color: #FFFFFF; +} + +.ui.instagram.button:active { + background-color: #38658A; + color: #FFFFFF; +} + +/* Pinterest */ + +.ui.pinterest.button { + background-color: #00ACED; + color: #FFFFFF; +} + +.ui.pinterest.button:hover { + background-color: #00B9FF; + color: #FFFFFF; +} + +.ui.pinterest.button:active { + background-color: #009EDA; + color: #FFFFFF; +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon { + margin-right: 0.6em; + line-height: 1; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} + +/******************************* + 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.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: 0.8rem; +} + +.ui.mini.buttons .button, +.ui.mini.button { + padding: 0.6em 0.8em; +} + +.ui.mini.icon.buttons .button, +.ui.mini.buttons .icon.button { + padding: 0.6em 0.6em; +} + +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: 0.875em; +} + +.ui.tiny.buttons .button, +.ui.tiny.buttons .button, +.ui.tiny.button { + padding: 0.6em 0.8em; +} + +.ui.tiny.icon.buttons .button, +.ui.tiny.buttons .icon.button { + padding: 0.6em 0.6em; +} + +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: 0.875rem; +} + +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: 1.125rem; +} + +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: 1.25rem; +} + +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: 1.375rem; +} + +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: 1.5rem; + font-weight: bold; +} + +/* Or resize */ + +.ui.tiny.buttons .or:before, +.ui.mini.buttons .or:before { + width: 1.45em; + height: 1.55em; + line-height: 1.4; + margin-left: -0.725em; + margin-top: -0.25em; +} + +.ui.tiny.buttons .or:after, +.ui.mini.buttons .or:after { + height: 1.45em; +} + +/* loading */ + +.ui.huge.loading.button:after { + background-image: url(../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(../images/loader-medium.gif); +} + +.ui.huge.loading.button:after, +.ui.huge.loading.button.active:after { + background-image: url(../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(../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: 0.9; + margin: 0em; + vertical-align: top; +} + +/*------------------- + Basic +--------------------*/ + +.ui.basic.buttons .button, +.ui.basic.button { + background-color: transparent !important; + background-image: none; + color: #808080 !important; + font-weight: normal; + text-transform: none; + -webkit-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; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + border-radius: 0.25em; +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background-image: none; + color: #7F7F7F !important; + -webkit-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; + 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; + 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); +} + +/* Inverted */ + +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + color: #FAFAFA !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; +} + +.ui.basic.inverted.buttons .button:hover, +.ui.basic.inverted.button:hover { + background-image: none; + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; +} + +.ui.basic.inverted.buttons .button:active, +.ui.basic.inverted.button:active { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8) inset !important; +} + +.ui.basic.inverted.buttons .button.active, +.ui.basic.inverted.button.active { + background-color: rgba(255, 255, 255, 0.5); + color: #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.basic.inverted.buttons .button.active:hover, +.ui.basic.inverted.button.active:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +/* Basic Group */ + +.ui.basic.buttons .button { + border-left: 1px solid rgba(0, 0, 0, 0.1); + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.basic.buttons .button:hover, +.ui.basic.buttons .button:active { + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.basic.buttons .button.active, +.ui.basic.buttons .button.active:hover { + -webkit-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; +} + +/*-------------- + 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; + border-radius: 0.25em 0px 0px 0.25em; + line-height: 1; + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; +} + +.ui.labeled.icon.buttons .button > .icon { + border-radius: 0em; +} + +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; +} + +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: 0.25em; + border-bottom-right-radius: 0.25em; +} + +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: 0.25em; +} + +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: 0.25em; +} + +.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; + border-radius: 0em 0.25em 0.25em 0em; + -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset; + box-shadow: 1px 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; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +.ui.button.toggle.active:hover { + background-color: #58CB73 !important; + color: #FFFFFF !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.button { + border-radius: 10em; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.button { + display: block; + -webkit-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 { + border-radius: 0.25em 0.25em 0em 0em; +} + +.ui.attached.bottom.button { + border-radius: 0em 0em 0.25em 0.25em; +} + +.ui.attached.left.button { + display: inline-block; + border-left: none; + padding-right: 0.75em; + text-align: right; + border-radius: 0.25em 0em 0em 0.25em; +} + +.ui.attached.right.button { + display: inline-block; + padding-left: 0.75em; + text-align: left; + border-radius: 0em 0.25em 0.25em 0em; +} + +/*------------------- + Or Buttons +--------------------*/ + +.ui.buttons .or { + position: relative; + float: left; + width: 0.3em; + height: 1.1em; + z-index: 3; +} + +.ui.buttons .or:before { + position: absolute; + top: 50%; + left: 50%; + content: 'or'; + background-color: #FFFFFF; + margin-top: -0.1em; + margin-left: -0.9em; + width: 1.8em; + height: 1.8em; + line-height: 1.55; + color: #AAAAAA; + font-style: normal; + font-weight: normal; + text-align: center; + border-radius: 500px; + -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); + -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.7em; + background-color: transparent; + border-top: 0.5em solid #FFFFFF; + border-bottom: 0.5em 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; + border-radius: 4px 4px 0px 0px; +} + +.attached.ui.buttons .button:first-child { + border-radius: 4px 0px 0px 0px; +} + +.attached.ui.buttons .button:last-child { + border-radius: 0px 4px 0px 0px; +} + +/* Bottom Side */ + +.bottom.attached.ui.buttons { + margin-top: -1px; + border-radius: 0px 0px 4px 4px; +} + +.bottom.attached.ui.buttons .button:first-child { + border-radius: 0px 0px 0px 4px; +} + +.bottom.attached.ui.buttons .button:last-child { + border-radius: 0px 0px 4px 0px; +} + +/* Left Side */ + +.left.attached.ui.buttons { + margin-left: -1px; + border-radius: 0px 4px 4px 0px; +} + +.left.attached.ui.buttons .button:first-child { + margin-left: -1px; + border-radius: 0px 4px 0px 0px; +} + +.left.attached.ui.buttons .button:last-child { + margin-left: -1px; + border-radius: 0px 0px 4px 0px; +} + +/* Right Side */ + +.right.attached.ui.buttons, +.right.attached.ui.buttons .button { + margin-right: -1px; + border-radius: 4px 0px 0px 4px; +} + +.right.attached.ui.buttons .button:first-child { + margin-left: -1px; + border-radius: 4px 0px 0px 0px; +} + +.right.attached.ui.buttons .button:last-child { + margin-left: -1px; + border-radius: 0px 0px 0px 4px; +} + +/* Fluid */ + +.ui.fluid.buttons, +.ui.button.fluid, +.ui.fluid.buttons > .button { + display: block; + width: 100%; +} + +.ui.\32.buttons > .button, +.ui.two.buttons > .button { + width: 50%; +} + +.ui.\33.buttons > .button, +.ui.three.buttons > .button { + width: 33.333%; +} + +.ui.\34.buttons > .button, +.ui.four.buttons > .button { + width: 25%; +} + +.ui.\35.buttons > .button, +.ui.five.buttons > .button { + width: 20%; +} + +.ui.\36.buttons > .button, +.ui.six.buttons > .button { + width: 16.666%; +} + +.ui.\37.buttons > .button, +.ui.seven.buttons > .button { + width: 14.285%; +} + +.ui.\38.buttons > .button, +.ui.eight.buttons > .button { + width: 12.500%; +} + +.ui.\39.buttons > .button, +.ui.nine.buttons > .button { + width: 11.11%; +} + +.ui.\31\30.buttons > .button, +.ui.ten.buttons > .button { + width: 10%; +} + +.ui.\31\31.buttons > .button, +.ui.eleven.buttons > .button { + width: 9.09%; +} + +.ui.\31\32.buttons > .button, +.ui.twelve.buttons > .button { + width: 8.3333%; +} + +/* Fluid Vertical Buttons */ + +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + display: block; + width: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.ui.\32.vertical.buttons > .button, +.ui.two.vertical.buttons > .button { + height: 50%; +} + +.ui.\33.vertical.buttons > .button, +.ui.three.vertical.buttons > .button { + height: 33.333%; +} + +.ui.\34.vertical.buttons > .button, +.ui.four.vertical.buttons > .button { + height: 25%; +} + +.ui.\35.vertical.buttons > .button, +.ui.five.vertical.buttons > .button { + height: 20%; +} + +.ui.\36.vertical.buttons > .button, +.ui.six.vertical.buttons > .button { + height: 16.666%; +} + +.ui.\37.vertical.buttons > .button, +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} + +.ui.\38.vertical.buttons > .button, +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} + +.ui.\39.vertical.buttons > .button, +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} + +.ui.\31\30.vertical.buttons > .button, +.ui.ten.vertical.buttons > .button { + height: 10%; +} + +.ui.\31\31.vertical.buttons > .button, +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} + +.ui.\31\32.vertical.buttons > .button, +.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; + border-radius: 0em; +} + +.ui.buttons .button:first-child { + margin-left: 0em; + border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; +} + +.ui.buttons .button:last-child { + border-top-right-radius: 0.25em; + border-bottom-right-radius: 0.25em; +} + +/* Vertical Style */ + +.ui.vertical.buttons { + display: inline-block; +} + +.ui.vertical.buttons .button { + display: block; + float: none; + -webkit-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.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; + border-radius: 0.25em 0.25em 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 { + border-radius: 0px 0px 0.25em 0.25em; +} +/* + * # 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: 14px; + font-size: 0.875rem; + font-weight: normal; + margin: 0em; + padding: 0em; + line-height: 1.2; + color: rgba(0, 0, 0, 0.5); +} +.ui.header .sub.header a { + color:#6ECFF5!important; +} +.ui.header .sub.header a:hover, .ui.header .sub.header a:focus, .ui.header .sub.header a:active{ + text-decoration:underline; +} +.ui.header .icon { + display: table-cell; + vertical-align: middle; + padding-right: 0.5em; +} + +.ui.header .icon:only-child { + display: inline-block; + vertical-align: baseline; +} + +.ui.header .content { + display: inline-block; + vertical-align: top; +} + +.ui.header .icon + .content { + padding-left: 0.5em; + display: table-cell; +} + +/* 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; +} + +/******************************* + Types +*******************************/ + +/*------------------- + 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; + padding: 0em; +} + +.ui.icon.header .content { + display: block; +} + +.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; +} + +/******************************* + 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: rgba(0, 0, 0, 0.05); + 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); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} + +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: 0.3125em 0.3125em 0em 0em; +} + +.ui.bottom.attached.header { + margin-top: 0em; + border-radius: 0em 0em 0.3125em 0.3125em; +} +/* + * # 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(../fonts/icons.eot); + src: url(../fonts/icons.eot?#iefix) format('embedded-opentype'), url(../fonts/icons.woff) format('woff'), url(../fonts/icons.ttf) format('truetype'), url(../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: 18px; + 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.left:before { + content: "\f060"; +} + +i.icon.right:before { + content: "\f061"; +} + +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.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.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.plus:before { + content: "\f067"; +} + +i.icon.signup:before { + content: "\f044"; +} + +/*-------------- + Spacing Fix +---------------*/ + +/* 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; + -ms-animation: icon-loading 2s linear infinite; + animation: icon-loading 2s linear infinite; +} + +@keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + -ms-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); + } +} + +/******************************* + 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; + transition: opacity 0.3s ease-out; +} + +i.link.icon:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + padding: 0.5em 0.35em !important; + -webkit-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; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + -webkit-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; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + vertical-align: baseline; +} + +i.square.inverted.icon { + border: none; + -webkit-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: 1.5em; + vertical-align: middle; +} + +i.big.icon { + font-size: 2em; + vertical-align: middle; +} + +i.huge.icon { + font-size: 4em; + vertical-align: middle; +} +i.massive.icon { + font-size: 8em; + 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 { + border-radius: 0.3125em; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.images .image, +.ui.circular.images img, +.ui.circular.image img, +.ui.circular.image { + border-radius: 500rem; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.image img { + display: block; + width: 100%; +} + +/*-------------- + Avatar +---------------*/ + +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.image img, +.ui.avatar.image { + display: inline-block; + width:28px; +} + +/*------------------- + 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 img, +.ui.medium.image { + max-width:285px !important; + height:160px; + 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; + color: rgba(0, 0, 0, 0.7); +} + +.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); + border-radius: 0.3125em; + -webkit-transition: background-color 0.3s ease-out, -webkit-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: #BBBBBB; +} + +.ui.input::-moz input-placeholder { + color: #BBBBBB; +} + +/******************************* + 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(../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; +} + +/*-------------------- + 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 :focus::-webkit-input-placeholder { + color: rgba(255, 80, 80, 0.7); +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Transparent +---------------------*/ + +.ui.transparent.input input { + border: none; + background-color: transparent; +} + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > .icon { + cursor: default; + position: absolute; + opacity: 0.5; + top: 0px; + right: 0px; + margin: 0em; + width: 2.6em; + height: 100%; + padding-top: 0.82em; + text-align: center; + 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; + transition: opacity 0.3s ease-out; +} + +.ui.icon.input > .link.icon { + cursor: pointer; +} + +.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; + 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; +} + +.ui.left.icon.input.short{ + width:30%; +} + +/* Focus */ + +.ui.icon.input > input:focus ~ .icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + +.ui.labeled.input .corner.label { + top: 1px; + right: 1px; + font-size: 0.55em; + border-top-right-radius: 0.3125em; +} + +.ui.labeled.input .corner.label > .icon { + margin: 0.4em 0em 0em 2em; +} + +.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: 1.25em; +} + +/*-------------------- + 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; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + white-space: nowrap; +} + +.ui.action.input > .button > .icon { + display: inline; + vertical-align: top; +} + +/*-------------------- + 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 0em 0em; + background-color: #E8E8E8; + border-color: #E8E8E8; + padding: 0.5em 0.5em; + color: rgba(0, 0, 0, 0.65); + text-transform: uppercase; + font-weight: normal; + -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; + 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; +} + +/* Inside Link */ + +.ui.label a { + cursor: pointer; + color: inherit; + opacity: 0.8; + -webkit-transition: 0.2s opacity ease; + transition: 0.2s opacity ease; +} + +.ui.label a:hover { + opacity: 1; +} + +/* 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; + transition: background 0.1s linear; +} + +.ui.label .delete.icon:hover { + opacity: 0.99; +} + +/*------------------- + Coupling +--------------------*/ + +/* Padding on next content after a label */ + +.ui.segment > .attached.label:first-child + * { + margin-top: 2.5em; +} + +.ui.segment > .bottom.attached.label:first-child ~ :last-child { + margin-top: 0em; + margin-bottom: 2.5em; +} + +/******************************* + 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; + 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; + 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; + 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); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-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); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + border-radius: 100px 100px 100px 100px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em 0.2em; + left: -2rem; + padding-left: 2rem; + border-radius: 0px 4px 4px 0px; + border-color: rgba(0, 0, 0, 0.15); +} + +.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; + padding:0.75em 1em; + border-radius: 4px 4px 0em 0em; +} + +.ui.bottom.attached.label { + top: auto; + bottom: 0em; + border-radius: 0em 0em 4px 4px; +} + +.ui.top.left.attached.label { + width: auto; + margin-top: 0em !important; + border-radius: 4px 0em 4px 0em; +} + +.ui.top.right.attached.label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em 4px 0em 4px; +} + +.ui.bottom.left.attached.label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 4px 0em 0em 4px; +} + +.ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + 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; + 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; + 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); + -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.2em 0em 0em -0.5em; +} + +.ui.left.corner.label .text { + margin: 6px 0 0 -2px; + -webkit-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: #333333 !important; + border-color: #333333 !important; +} + +.ui.labels a.black.label:hover:before, +.ui.black.labels a.label:hover:before, +a.ui.black.label:hover:before { + background-color: #333333 !important; +} + +/* Corner */ + +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ + +.ui.black.ribbon.label { + border-color: #333333 !important; +} + +/*--- Green ---*/ + +.ui.green.labels .label, +.ui.green.label { + background-color: #1e6823 !important; + border-color: #1e6823 !important; + color: #FFFFFF !important; + opacity:0.7; +} + +.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; +} + +/* Ribbon */ + +.ui.green.ribbon.label { + border-color: #89B84C !important; +} + +/*--- Red ---*/ + +.ui.red.labels .label, +.ui.red.label { + background-color: #fd4239 !important; + border-color: #fd4239 !important; + color: #FFFFFF !important; + opacity:0.8; +} + +.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; +} + +/* Ribbon */ + +.ui.red.ribbon.label { + border-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; +} + +/* Ribbon */ + +.ui.blue.ribbon.label { + border-color: #1AB8F3 !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; +} + +/* Ribbon */ + +.ui.purple.ribbon.label { + border-color: #3E3773 !important; +} + +/*--- Orange ---*/ + +.ui.orange.labels .label, +.ui.orange.label { + background-color: #F05940 !important; + border-color: #F05940 !important; + color: #FFFFFF !important; +} + +.ui.labels .orange.label:before, +.ui.orange.labels .label:before, +.ui.orange.label:before { + background-color: #F05940 !important; +} + +/* Hover */ + +a.ui.orange.labels .label:hover, +.ui.orange.labels a.label:hover, +a.ui.orange.label:hover { + background-color: #FF4121 !important; + border-color: #FF4121 !important; + color: #FFFFFF !important; +} + +.ui.labels a.orange.label:hover:before, +.ui.orange.labels a.label:hover:before, +a.ui.orange.label:hover:before { + background-color: #FF4121 !important; +} + +/* Corner */ + +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ + +.ui.orange.ribbon.label { + border-color: #FF4121 !important; +} + +/*--- Teal ---*/ + +.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; +} + +/* Ribbon */ + +.ui.teal.ribbon.label { + border-color: #009A93 !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; + 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); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-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%); + -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(../images/loader-mini-inverted.gif); +} + +/* Small Size */ + +.ui.dimmer .small.ui.loader, +.ui.inverted .small.ui.loader { + background-image: url(../images/loader-small-inverted.gif); +} + +/* Standard Size */ + +.ui.dimmer .ui.loader, +.ui.inverted.loader { + background-image: url(../images/loader-medium-inverted.gif); +} + +/* Large Size */ + +.ui.dimmer .large.ui.loader, +.ui.inverted .large.ui.loader { + background-image: url(../images/loader-large-inverted.gif); +} + +/*------------------- + Sizes +--------------------*/ + +/* Tiny Size */ + +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: 16px; + height: 16px; + background-image: url(../images/loader-mini.gif); +} + +/* Small Size */ + +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 24px; + height: 24px; + background-image: url(../images/loader-small.gif); +} + +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 32px; + height: 32px; + background: url(../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(../images/loader-large.gif); +} + +/*------------------- + Inline +--------------------*/ + +.ui.inline.loader { + position: static; + vertical-align: middle; + margin: 0em; + -webkit-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; + 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; + border-radius: 3px; + -webkit-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; + 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; + 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; + border-radius: 3px; + -webkit-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%; + } +} + +@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; + 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; + border-radius: 0em 0em 0.3125em 0.3125em; +} + +.ui.progress.attached .bar { + border-radius: 0em; +} + +/* top attached */ + +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: -2px; + border-radius: 0.3125em 0.3125em 0em 0em; +} + +.ui.progress.top.attached .bar { + 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; + 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: -webkit-linear-gradient(315deg, 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; + -ms-animation: none; + animation: none; +} + +.ui.progress.active.striped .bar { + -webkit-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; + } +} + +@keyframes progress-striped { + 0% { + background-position: 0px 0; + } + + 100% { + background-position: 60px 0; + } +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.progress .bar { + height: 14px; +} +/* + * # 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: 1rem !important; +} + +.ui.reveal > .visible.content { + -webkit-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; + 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; + 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; + transition-duration: 0.8s; + -webkit-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; + -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); + -ms-transform: rotate(110deg); + transform: rotate(110deg); +} + +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + -ms-transform-origin: bottom left; + transform-origin: bottom left; +} + +.ui.rotate.left.reveal:hover > .visible.content { + -webkit-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; + 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; + -webkit-transform: none !important; + -ms-transform: none !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; + transition-delay: 0s !important; +} +/* + * # 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); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + padding: 1em; + 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; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.vertical.segment:first-child { + padding-top: 0em; +} + +.ui.horizontal.segment { + margin: 0em; + padding-top: 0em; + padding-bottom: 0em; + background-color: transparent; + border-radius: 0px; + -webkit-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; +} + +.ui.page.grid.segment .ui.grid .ui.segment.column { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.ui.grid.segment, +.ui.grid .ui.segment.row, +.ui.grid .ui.segment.column { + border-radius: 0em; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + margin-bottom:22px; +} + +/* No padding on edge content */ + +.ui.segment > :first-child { + margin-top: 0em; +} + +.ui.segment > :last-child { + margin-bottom: 0em; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segment { + margin: 2em 0em; + -webkit-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); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); +} + +.ui.piled.segment:after { + -webkit-transform: rotate(1.2deg); + -ms-transform: rotate(1.2deg); + transform: rotate(1.2deg); + top: 0; + z-index: -1; +} + +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + -ms-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); + 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; + box-shadow: none; + 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.device.segment, .ui.blue.segment ,.ui.info.segment{ + -webkit-box-shadow:none; + box-shadow:none; + -webkit-box-shadow:none; + border-radius:0; + background-color:#FAFAFA!important; +} +.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.orange.segment { + border-top: 0.2em solid #F05940; +} + +.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.orange.segment { + background-color: #F05940 !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; + box-shadow: none; +} + +.ui.inverted.segment .segment { + color: rgba(0, 0, 0, 0.7); +} + +.ui.inverted.segment .inverted.segment { + color: #FFFFFF; +} + +.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: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))); + 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: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6))); + 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; + border-radius: 0px; + margin: 0em; + -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; + border-radius: 5px 5px 0px 0px; +} + +.ui.segment.top.attached:first-child { + margin-top: 0em; +} + +.ui.segment.bottom.attached { + top: -1px; + bottom: 0px; + margin-top: 0em; + margin-bottom: 1em; + border-radius: 0px 0px 5px 5px; +} + +.ui.segment.bottom.attached:last-child { + margin-bottom: 0em; +} +/* + * # 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, -webkit-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; + -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; + border-radius: 0.3125rem; +} + +.ui.steps .step:first-child { + padding-left: 1.35em; + border-radius: 0.3125em 0em 0em 0.3125em; +} + +.ui.steps .step:last-child { + border-radius: 0em 0.3125em 0.3125em 0em; +} + +.ui.steps .step:only-child { + 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); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-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; + border-radius: 0.3125em 0.3125em 0em 0em; +} + +.attached.ui.steps .step:first-child { + border-radius: 0.3125em 0em 0em 0em; +} + +.attached.ui.steps .step:last-child { + border-radius: 0em 0.3125em 0em 0em; +} + +/* Bottom Side */ + +.bottom.attached.ui.steps { + margin-top: -1px; + border-radius: 0em 0em 0.3125em 0.3125em; +} + +.bottom.attached.ui.steps .step:first-child { + border-radius: 0em 0em 0em 0.3125em; +} + +.bottom.attached.ui.steps .step:last-child { + 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 + * + */ + +/******************************* + Accordion +*******************************/ + +.ui.accordion, +.ui.accordion .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); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} + +.ui.accordion a.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; + transition: background-color 0.2s ease-out; +} + +.ui.accordion .title:first-child { + border-top: none; +} + +/* Content */ + +.ui.accordion .content { + display: none; + margin: 0em; + padding: 8px 16px; +} + +/* Arrow */ +.ui.accordion .title .dropdown.icon { + display: inline-block; + float: none; + -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease; + transition: transform 0.2s ease, + opacity 0.2s ease; + -webkit-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); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} + +.ui.basic.accordion.menu .title, +.ui.basic.accordion.menu .content { + padding: 0em; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Basic +---------------*/ + +.ui.basic.accordion { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} + +.ui.basic.accordion .title, +.ui.basic.accordion .title { + background-color: transparent; + border-top: none; + padding-left: 0em; + padding-right: 0em; +} + +.ui.basic.accordion .active.title { + background-color: transparent; +} + +/******************************* + 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); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.ui.accordion .active.content { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} +/* + * # 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); + 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; + 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; + 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; + 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; + min-width: 1em; + height: 1.25em; + line-height: 1em; + outline: none; + vertical-align: middle; +} + +.ui.checkbox input { + position: absolute; + top: 0px; + left: 0px; + opacity: 0 !important; + outline: none; +} + +/*--- Box ---*/ + +.ui.checkbox .box, +.ui.checkbox label { + cursor: pointer; + padding-left: 2em; + outline: none; +} + +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0em; + line-height: 1; + width: 1em; + height: 1em; + left: 0em; + content: ''; + border-radius: 4px; + background: #FFFFFF; + -webkit-transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); +} + +/*--- 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); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.ui.checkbox .box:after, +.ui.checkbox label:after { + top: 0.275em; + left: 0.2em; + width: 0.45em; + height: 0.15em; +} + +/*--- Inside Label ---*/ + +.ui.checkbox label { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + transition: color 0.2s ease; +} + +.ui.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} + +.ui.checkbox input:focus + label { + color: rgba(0, 0, 0, 0.8); +} + +/*--- Outside Label ---*/ + +.ui.checkbox + label { + cursor: pointer; + opacity: 0.85; + vertical-align: middle; +} + +.ui.checkbox + label:hover { + opacity: 1; +} + +/******************************* + States +*******************************/ + +/*--- Hover ---*/ + +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + -webkit-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::before, +.ui.checkbox label:active::before { + background-color: #F5F5F5; +} + +/*--- Focus ---*/ + +.ui.checkbox input:focus + .box:before, +.ui.checkbox input:focus + label:before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} + +/*--- 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; + color: rgba(0, 0, 0, 0.3); +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Radio +---------------*/ + +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + min-width: 1em; + height: 1em; + border-radius: 500px; +} + +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + border: none; + top: 0.2em; + left: 0.2em; + width: 0.6em; + height: 0.6em; + background-color: #555555; + -webkit-transform: none; + -ms-transform: none; + transform: none; + border-radius: 500px; +} + +/*-------------- + Slider +---------------*/ + +.ui.slider.checkbox { + cursor: pointer; + min-width: 3em; +} + +/* Line */ + +.ui.slider.checkbox:after { + position: absolute; + top: 0.5em; + left: 0em; + content: ''; + width: 3em; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} + +/* Button */ + +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + padding-left: 4em; +} + +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { + cursor: pointer; + display: block; + position: absolute; + top: -0.25em; + left: 0em; + z-index: 1; + width: 1.5em; + height: 1.5em; + -webkit-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; + 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.15em; + left: 0em; + z-index: 2; + margin-left: 0.375em; + border: none; + width: 0.75em; + height: 0.75em; + border-radius: 50rem; + -webkit-transform: none; + -ms-transform: none; + transform: none; + -webkit-transition: background 0.3s ease 0s, + left 0.3s ease 0s; + transition: background 0.3s ease 0s, + left 0.3s ease 0s; +} + +/* Selected Slider Toggle */ + +.ui.slider.checkbox input:checked + .box:before, +.ui.slider.checkbox input:checked + label:before, +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + left: 1.75em; +} + +/* Off Color */ + +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background-color: #D95C5C; +} + +/* On Color */ + +.ui.slider.checkbox input:checked + .box:after, +.ui.slider.checkbox input:checked + label:after { + background-color: #89B84C; +} + +/*-------------- + Toggle +---------------*/ + +.ui.toggle.checkbox { + cursor: pointer; +} + +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + padding-left: 4em; +} + +/* Switch */ + +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { + cursor: pointer; + display: block; + position: absolute; + content: ''; + top: -0.25em; + left: 0em; + z-index: 1; + background-color: #FFFFFF; + width: 3em; + height: 1.5em; + -webkit-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; +} + +/* Activation Light */ + +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + opacity: 1; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + content: ''; + position: absolute; + top: 0.15em; + left: 0.5em; + z-index: 2; + border: none; + width: 0.75em; + height: 0.75em; + background-color: #D95C5C; + border-radius: 50rem; + -webkit-transition: background 0.3s ease 0s, + left 0.3s ease 0s; + transition: background 0.3s ease 0s, + left 0.3s ease 0s; +} + +/* Active */ + +.ui.toggle.checkbox:active .box:before, +.ui.toggle.checkbox:active label:before { + background-color: #F5F5F5; +} + +/* Active */ + +.ui.toggle.checkbox input:checked + .box:after, +.ui.toggle.checkbox input:checked + label:after { + left: 1.75em; + background-color: #89B84C; +} + +/*-------------- + Sizes +---------------*/ + +.ui.checkbox { + font-size: 1em; +} + +.ui.large.checkbox { + font-size: 1.25em; +} + +.ui.huge.checkbox { + 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; + -ms-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-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; +} + +/* 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 { + border-radius: 5px; +} + +.ui.horizontal.segment > .ui.dimmer, +.ui.vertical.segment > .ui.dimmer { + border-radius: 5px; +} + +/******************************* + States +*******************************/ + +.ui.dimmed.dimmable:not(body) { + overflow: hidden; +} + +.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-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; +} + +.ui.scrolling.dimmable > .dimmer, +.ui.scrolling.page.dimmer { + position: absolute; +} + +/*-------------- + Aligned +---------------*/ + +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} + +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.dimmer { + background-color: #fff; + border: 1px solid #ccc; +} + +.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 { + cursor: pointer; + position: relative; + display: inline-block; + line-height: 1; + -webkit-transition: border-radius 0.1s ease, width 0.2s ease; + transition: border-radius 0.1s ease, width 0.2s ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -moz-tap-highlight-color: rgba(0, 0, 0, 0); + tap-highlight-color: rgba(0, 0, 0, 0); +} + +/******************************* + Content +*******************************/ + +/*-------------- + Menu +---------------*/ + +.ui.dropdown .menu { + cursor: auto; + 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); + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); + border-radius: 0px 0px 0.325em 0.325em; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + z-index: 11; +} + +/*-------------- + Icon +---------------*/ + +.ui.dropdown > .dropdown.icon { + width: auto; + margin: 0em 0em 0em 1em; +} + +.ui.dropdown > .dropdown.icon:before { + content: "\f0d7"; +} + +.ui.dropdown .menu .item .dropdown.icon { + width: auto; + float: right; + margin: 0em 0em 0em 0.5em; +} + +.ui.dropdown .menu .item .dropdown.icon:before { + content: "\f0da"; +} + +/*-------------- + Text +---------------*/ + +.ui.dropdown > .text { + display: inline-block; + -webkit-transition: color 0.2s ease; + transition: color 0.2s ease; +} + +/* Flyout Direction */ + +.ui.dropdown .menu { + left: 0px; +} + +/*-------------- + Sub Menu +---------------*/ + +.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; +} + +/******************************* + Coupling +*******************************/ + +/* Opposite on last menu on right */ + +.ui.menu .right.menu .dropdown:last-child .menu, +.ui.buttons > .ui.dropdown:last-child .menu { + left: auto; + right: 0px; +} + +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da"; +} + +.ui.dropdown.icon.button > .dropdown.icon { + margin: 0em; +} + +/******************************* + States +*******************************/ + +/* Dropdown Visible */ + +.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.06) !important; + border-left: none; + border-color: transparent !important; + -webkit-box-shadow: none; + -moz-shadow: none; + -webkit-box-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; + 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) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + border-radius: 0.3125em !important; + font-size:14px; + font-size:0.875rem; +} + +.ui.selection.dropdown select { + display: none; +} + +.ui.selection.dropdown > .dropdown.icon { + opacity: 0.7; + margin: 0.2em 0em 0.2em 1.25em; + -webkit-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; +} + +.ui.selection.dropdown, +.ui.selection.dropdown .menu { + top: 100%; + -webkit-transition: -webkit-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 #E0E0E0; + box-shadow: 0px 1px 0px 1px #E0E0E0; + 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 { + -webkit-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; +} + +.ui.selection.dropdown:hover .menu { + -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; + box-shadow: 0px 1px 0px 1px #D3D3D3; +} + +.ui.selection.dropdown:hover > .dropdown.icon { + opacity: 1; +} + +/* Visible */ + +.ui.visible.selection.dropdown { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} + +/* Active */ + +.ui.active.selection.dropdown { + border-radius: 0.3125em 0.3125em 0em 0em !important; +} + +.ui.active.selection.dropdown > .dropdown.icon { + opacity: 1; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.dropdown { + display: block; +} + +.ui.fluid.dropdown > .dropdown.icon { + float: right; +} + +/*-------------- + 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; + border-radius: 0.325em; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.dropdown .menu { + left: 0; + right: auto; + margin-top: 0.5em !important; + border-radius: 0.325em; +} + +/*-------------- + Pointing +---------------*/ + +.ui.pointing.dropdown .menu { + top: 100%; + margin-top: 0.75em; + 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; + -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); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; +} + +.ui.pointing.dropdown .menu .active.item:first-child { + background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + background: transparent-webkit-gradient(linear, top left, bottom left, from(transparent), to(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); + -ms-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); + -ms-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); + -ms-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); + -ms-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: 90%; + margin-left: -45%; + background-color: #FFFFFF; + border: 1px solid #DDDDDD; + border-radius: 5px; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +/******************************* + 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 { + margin: 0em; + padding: 1.5rem 2rem; + font-size: 1.6em; + font-weight: bold; + 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:not(.ui) { + display: table-cell; + padding-right: 1.5%; + min-width: 25%; +} + +.ui.modal > .content > .right:not(.ui) { + display: table-cell; + padding-left: 1.5%; + vertical-align: top; +} + +.ui.modal > .content > .left:not(.ui) > i.icon { + font-size: 8em; + margin: 0em; +} + +.ui.modal > .content p { + line-height: 1.6; +} + +/*-------------- + Actions +---------------*/ + +.ui.modal .actions { + padding: 1rem 2rem; + text-align: right; +} + +.ui.modal .actions > .button { + margin-left: 0.75em; +} + +/*------------------- + Sizing +--------------------*/ + +/* Mobile Only */ + +@media only screen and (max-width: 768px) { + .ui.modal .content > .left:not(.ui) { + display: block; + padding: 0em 0em 1em; + } + + .ui.modal .content > .right:not(.ui) { + display: block; + padding: 1em 0em 0em; + -webkit-box-shadow: none; + box-shadow: none; + } + + .ui.modal .content .image { + width: auto !important; + max-width: 100%; + } + + .ui.modal .actions { + padding-bottom: 0em; + } + + .ui.modal .actions > .buttons, + .ui.modal .actions > .button { + margin-bottom: 1em; + } +} + +/* Tablet and Mobile */ + +@media only screen and (max-width: 998px) { + .ui.modal { + width: 92%; + margin-left: -46%; + } + + .ui.modal > .close { + color: rgba(0, 0, 0, 0.8); + top: 1.5rem; + right: 1rem; + } +} + +/* Computer / Responsive */ + +@media only screen and (min-width: 998px) { + .ui.modal { + width: 74%; + margin-left: -37%; + } +} + +@media only screen and (min-width: 1500px) { + .ui.modal { + width: 56%; + margin-left: -28%; + } +} + +@media only screen and (min-width: 1750px) { + .ui.modal { + width: 42%; + margin-left: -21%; + } +} + +@media only screen and (min-width: 2000px) { + .ui.modal { + width: 36%; + margin-left: -18%; + } +} + +/******************************* + Types +*******************************/ + +.ui.basic.modal { + background-color: transparent; + border: none; + color: #FFFFFF; +} + +.ui.basic.modal > .close { + top: 1.5rem; + right: 1rem; +} + +.ui.basic.modal .content { + background-color: transparent; +} + +/******************************* + Variations +*******************************/ + +/* A modal that cannot fit on the page */ + +.ui.modal.scrolling { + position: absolute; + margin-top: 10px; +} + +/******************************* + States +*******************************/ + +.ui.active.modal { + display: block; +} + +/*-------------- + Size +---------------*/ + +/* Small */ + +.ui.small.modal > .header { + font-size: 1.3em; +} + +@media only screen and (min-width: 998px) { + .ui.small.modal { + width: 58%; + margin-left: -29%; + } +} + +@media only screen and (min-width: 1500px) { + .ui.small.modal { + width: 40%; + margin-left: -20%; + } +} + +@media only screen and (min-width: 1750px) { + .ui.small.modal { + width: 26%; + margin-left: -13%; + } +} + +@media only screen and (min-width: 2000px) { + .ui.small.modal { + width: 20%; + margin-left: -10%; + } +} + +/* Large */ + +@media only screen and (min-width: 998px) { + .ui.large.modal { + width: 74%; + margin-left: -37%; + } +} + +@media only screen and (min-width: 1500px) { + .ui.large.modal { + width: 64%; + margin-left: -32%; + } +} + +@media only screen and (min-width: 1750px) { + .ui.large.modal { + width: 54%; + margin-left: -27%; + } +} + +@media only screen and (min-width: 2000px) { + .ui.large.modal { + width: 44%; + margin-left: -22%; + } +} +/* + * # 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); + 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); + border-radius: 0px 0px 5px 5px; + -webkit-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; + 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 { + 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 { + 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 rgba(0, 0, 0, 0.1); + 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); + border-radius: 0.2em; + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); +} + +.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); + -ms-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 rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); +} + +.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 rgba(0, 0, 0, 0.2); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); +} + +.ui.bottom.left.popup { + margin-right: -2em; +} + +.ui.bottom.left.popup:before { + top: -0.4em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); +} + +.ui.bottom.right.popup { + margin-left: -2em; +} + +.ui.bottom.right.popup:before { + top: -0.4em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); +} + +/*--- Above ---*/ + +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.4em; + left: 50%; + margin-left: -0.4em; +} + +.ui.top.left.popup { + margin-right: -2em; +} + +.ui.top.left.popup:before { + bottom: -0.4em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} + +.ui.top.right.popup { + margin-left: -2em; +} + +.ui.top.right.popup:before { + bottom: -0.4em; + left: 1em; + top: auto; + right: auto; + margin-left: 0em; +} + +/*--- Left Center ---*/ + +.ui.left.center.popup:before { + top: 50%; + right: -0.35em; + bottom: auto; + left: auto; + margin-top: -0.4em; + -webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); +} + +/*--- Right Center ---*/ + +.ui.right.center.popup:before { + top: 50%; + left: -0.35em; + bottom: auto; + right: auto; + margin-top: -0.4em; + -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); +} + +/******************************* + States +*******************************/ + +.ui.loading.popup { + display: block; + visibility: hidden; +} + +.ui.visible.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; + 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; + 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; + font-size: 0em; + vertical-align: baseline; + margin: 0em 0.5rem 0em 0em; +} + +.ui.rating:last-child { + margin-right: 0em; +} + +.ui.rating:before { + display: block; + content: ''; + visibility: hidden; + clear: both; + height: 0; +} + +/* Icon */ + +.ui.rating .icon { + cursor: default; + margin: 0em; + width: 1em; + height: auto; + padding: 0em; + color: rgba(0, 0, 0, 0.15); + font-weight: normal; + font-style: normal; +} + +.ui.rating .icon:before { + content: "\2605"; + -webkit-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: 1.2em; +} + +/* Star */ + +.ui.star.rating .icon:before { + content: '\f006'; + font-family: 'Icons'; +} + +/* Active Star */ + +.ui.star.rating .active.icon:before { + content: '\f005'; + font-family: 'Icons'; +} + +/*------------------- + Heart +--------------------*/ + +.ui.heart.rating .icon { + width: 1.2em; +} + +.ui.heart.rating .icon:before { + content: '\f08a'; + font-family: 'Icons'; +} + +/* Active */ + +.ui.heart.rating .active.icon:before { + content: '\f004'; + font-family: 'Icons'; +} + +.ui.heart.rating .active.icon { + color: #EF404A !important; +} + +/* Hovered */ + +.ui.heart.rating .hover.icon, +.ui.heart.rating .active.hover.icon { + color: #FF2733 !important; +} + +/******************************* + States +*******************************/ + +/*------------------- + Active +--------------------*/ + +/* active rating */ + +.ui.active.rating .icon { + cursor: pointer; +} + +/* active icons */ + +.ui.rating .active.icon { + color: #FFCB08 !important; +} + +/*------------------- + Hover +--------------------*/ + +/* rating */ + +.ui.rating.hover .active.icon { + opacity: 0.5; +} + +/* icon */ + +.ui.rating .icon.hover, +.ui.rating .icon.hover.active { + opacity: 1; + color: #FFB70A !important; +} + +/******************************* + Variations +*******************************/ + +.ui.small.rating .icon { + font-size: 0.75rem; +} + +.ui.rating .icon { + font-size: 1rem; +} + +.ui.large.rating .icon { + font-size: 1.5rem; + vertical-align: middle; +} + +.ui.huge.rating .icon { + font-size: 2rem; + vertical-align: middle; +} +/* + * # 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 { + border-radius: 500rem; +} + +/*-------------- + Button +---------------*/ + +.ui.search > .button { + position: relative; + z-index: 2; + float: right; + margin: 0px 0px 0px -15px; + padding: 6px 15px 7px; + border-radius: 0px 15px 15px 0px; + -webkit-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; + 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; + 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; + 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; + 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(../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 { + display: inline-block; + position: relative; + -webkit-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.ui.shape .sides { + -webkit-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.ui.shape .side { + opacity: 1; + width: 100%; + margin: 0em !important; + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.ui.shape .side { + display: none; +} + +/******************************* + Types +*******************************/ + +.ui.cube.shape .side { + min-width: 15em; + height: 15em; + padding: 2em; + background-color: #E6E6E6; + color: rgba(0, 0, 0, 0.6); + -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); +} + +.ui.cube.shape .side > .content { + width: 100%; + height: 100%; + display: table; + text-align: center; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +.ui.cube.shape .side > .content > div { + display: table-cell; + vertical-align: middle; + font-size: 2em; +} + +/******************************* + Variations +*******************************/ + +.ui.text.shape.animating .sides { + position: static; +} + +.ui.text.shape .side { + white-space: nowrap; +} + +.ui.text.shape .side > * { + white-space: normal; +} + +/******************************* + States +*******************************/ + +/*-------------- + Loading +---------------*/ + +.ui.loading.shape { + position: absolute; + top: -9999px; + left: -9999px; +} + +/*-------------- + Animating +---------------*/ + +.ui.shape .animating.side { + position: absolute; + top: 0px; + left: 0px; + z-index: 100; +} + +.ui.shape .hidden.side { + opacity: 0.4; +} + +/*-------------- + CSS +---------------*/ + +.ui.shape.animating { + -webkit-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} + +.ui.shape.animating .sides { + position: absolute; +} + +.ui.shape.animating .sides { + -webkit-transition: all 0.6s ease-in-out; + transition: all 0.6s ease-in-out; +} + +.ui.shape.animating .side { + -webkit-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; + transition: margin 0.3s ease, + transform 0.3s ease; +} + +.ui.sidebar { + position: fixed; + margin: 0 !important; + height: 100% !important; + border-radius: 0px !important; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -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; + transition: margin-left 0.3s ease, margin-top 0.3s ease; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Direction +--------------------*/ + +.ui.right.sidebar { + left: 100%; + margin: 0px !important; +} + +.ui.top.sidebar { + width: 100% !important; +} + +.ui.bottom.sidebar { + width: 100% !important; + top: 100%; + margin: 0px !important; +} + +/******************************* + States +*******************************/ + +.ui.active.sidebar { + margin-left: 0px !important; +} + +.ui.active.top.sidebar, +.ui.active.bottom.sidebar { + margin-top: 0px !important; +} + +/******************************* + Variations +*******************************/ + +/*------------------- + Formatted +--------------------*/ + +.ui.styled.sidebar { + padding: 1em 1.5em; + background-color: #FFFFFF; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); +} + +.ui.styled.very.thin.sidebar { + padding: 0.5em; +} + +.ui.styled.thin.sidebar { + padding: 1em; +} + +/*------------------- + Floating +--------------------*/ + +.ui.floating.sidebar { + -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); + box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); +} + +.ui.right.floating.sidebar { + -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); + box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); +} + +.ui.top.floating.sidebar { + -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); +} + +.ui.bottom.floating.sidebar { + -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); +} + +/*------------------- + Width +--------------------*/ + +/* Very Thin */ + +.ui.very.thin.sidebar { + width: 60px !important; + margin-left: -60px !important; +} + +.ui.active.very.thin.sidebar { + margin-left: 0px !important; +} + +.ui.active.right.very.thin.sidebar { + margin-left: -60px !important; +} + +/* Thin */ + +.ui.thin.sidebar { + width: 200px !important; + margin-left: -200px !important; +} + +.ui.active.thin.sidebar { + margin-left: 0px !important; +} + +.ui.active.right.thin.sidebar { + margin-left: -200px !important; +} + +/* Standard */ + +.ui.sidebar { + width: 275px !important; + margin-left: -275px !important; +} + +.ui.active.sidebar { + margin-left: 0px !important; +} + +.ui.active.right.sidebar { + margin-left: -275px !important; +} + +/* Wide */ + +.ui.wide.sidebar { + width: 350px !important; + margin-left: -350px !important; +} + +.ui.active.wide.sidebar { + margin-left: 0px !important; +} + +.ui.active.right.wide.sidebar { + margin-left: -350px !important; +} + +/* Very Wide */ + +.ui.very.wide.sidebar { + width: 475px !important; + margin-left: -475px !important; +} + +.ui.active.very.wide.sidebar { + margin-left: 0px !important; +} + +.ui.active.right.very.wide.sidebar { + margin-left: -475px !important; +} + +/*------------------- + Height +--------------------*/ + +/* Standard */ + +.ui.top.sidebar { + margin: -40px 0px 0px 0px !important; +} + +.ui.top.sidebar, +.ui.bottom.sidebar { + height: 40px !important; +} + +.ui.active.bottom.sidebar { + margin-top: -40px !important; +} +/* + * # 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(../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-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +/******************************* + States +*******************************/ + +.ui.animating.transition { + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} + +/* Loading */ + +.ui.loading.transition { + position: absolute; + top: -999999px; + left: -99999px; +} + +/* Hidden */ + +.ui.hidden.transition { + display: none; +} + +/* Visible */ + +.ui.visible.transition { + display: block; + visibility: visible; +} + +/* Disabled */ + +.ui.disabled.transition { + -webkit-animation-play-state: paused; + animation-play-state: paused; +} + +/******************************* + Variations +*******************************/ + +.ui.looping.transition { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Emphasis +---------------*/ + +.ui.flash.transition { + -webkit-animation-name: flash; + animation-name: flash; +} + +.ui.shake.transition { + -webkit-animation-name: shake; + animation-name: shake; +} + +.ui.bounce.transition { + -webkit-animation-name: bounce; + animation-name: bounce; +} + +.ui.tada.transition { + -webkit-animation-name: tada; + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +.ui.pulse.transition { + -webkit-animation-name: pulse; + animation-name: pulse; +} + +/*-------------- + Flips +---------------*/ + +.ui.flip.transition.in, +.ui.flip.transition.out { + -webkit-perspective: 2000px; + -ms-perspective: 2000px; + perspective: 2000px; +} + +.ui.horizontal.flip.transition.in, +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlip; + animation-name: horizontalFlip; +} + +.ui.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlipOut; + animation-name: horizontalFlipOut; +} + +.ui.vertical.flip.transition.in, +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlip; + animation-name: verticalFlip; +} + +.ui.vertical.flip.transition.out { + -webkit-animation-name: verticalFlipOut; + animation-name: verticalFlipOut; +} + +/*-------------- + Fades +---------------*/ + +.ui.fade.transition.in { + -webkit-animation-name: fade; + animation-name: fade; +} + +.ui.fade.transition.out { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +.ui.fade.up.transition.in { + -webkit-animation-name: fadeUp; + animation-name: fadeUp; +} + +.ui.fade.up.transition.out { + -webkit-animation-name: fadeUpOut; + animation-name: fadeUpOut; +} + +.ui.fade.down.transition.in { + -webkit-animation-name: fadeDown; + animation-name: fadeDown; +} + +.ui.fade.down.transition.out { + -webkit-animation-name: fadeDownOut; + animation-name: fadeDownOut; +} + +/*-------------- + Scale +---------------*/ + +.ui.scale.transition.in { + -webkit-animation-name: scale; + animation-name: scale; +} + +.ui.scale.transition.out { + -webkit-animation-name: scaleOut; + animation-name: scaleOut; +} + +/*-------------- + Slide +---------------*/ + +.ui.slide.down.transition.in { + -webkit-animation-name: slide; + animation-name: slide; + -webkit-transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} + +.ui.slide.down.transition.out { + -webkit-animation-name: slideOut; + animation-name: slideOut; + -webkit-transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} + +.ui.slide.up.transition.in { + -webkit-animation-name: slide; + animation-name: slide; + -webkit-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} + +.ui.slide.up.transition.out { + -webkit-animation-name: slideOut; + animation-name: slideOut; + -webkit-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; +} + +@-webkit-keyframes slide { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} + +@keyframes slide { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + -ms-transform: scaleY(0); + transform: scaleY(0); + } + + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + } +} + +@-webkit-keyframes slideOut { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} + +@keyframes slideOut { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + } + + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + -ms-transform: scaleY(0); + transform: scaleY(0); + } +} + +/******************************* + Animations +*******************************/ + +/*-------------- + Emphasis +---------------*/ + +/* Flash */ + +@-webkit-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); + transform: translateX(0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +@keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-10px); + -ms-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(10px); + -ms-transform: translateX(10px); + transform: translateX(10px); + } +} + +/* Bounce */ + +@-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + -ms-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + -ms-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +/* Tada */ + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 10%, 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +@keyframes tada { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + + 10%, 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + -ms-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale(1.1) rotate(3deg); + -ms-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + -ms-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + -ms-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +/* Pulse */ + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 50% { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +/*-------------- + Flips +---------------*/ + +/* Horizontal */ + +@-webkit-keyframes horizontalFlip { + 0% { + -webkit-transform: rotateY(-90deg); + transform: rotateY(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } +} + +@keyframes horizontalFlip { + 0% { + -webkit-transform: rotateY(-90deg); + -ms-transform: rotateY(-90deg); + transform: rotateY(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: rotateY(0deg); + -ms-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 1; + } +} + +/* Horizontal */ + +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 0; + } + + 100% { + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + opacity: 1; + } +} + +@keyframes horizontalFlipOut { + 0% { + -webkit-transform: rotateY(0deg); + -ms-transform: rotateY(0deg); + transform: rotateY(0deg); + opacity: 0; + } + + 100% { + -webkit-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + opacity: 1; + } +} + +/* Vertical */ + +@-webkit-keyframes verticalFlip { + 0% { + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } +} + +@keyframes verticalFlip { + 0% { + -webkit-transform: rotateX(-90deg); + -ms-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: rotateX(0deg); + -ms-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } +} + +@-webkit-keyframes verticalFlipOut { + 0% { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } +} + +@keyframes verticalFlipOut { + 0% { + -webkit-transform: rotateX(0deg); + -ms-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: rotateX(-90deg); + -ms-transform: rotateX(-90deg); + transform: rotateX(-90deg); + opacity: 0; + } +} + +/*-------------- + Fades +---------------*/ + +/* Fade */ + +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fade { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +/* Fade Up */ + +@-webkit-keyframes fadeUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +@-webkit-keyframes fadeUpOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} + +@keyframes fadeUpOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} + +/* Fade Down */ + +@-webkit-keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +@-webkit-keyframes fadeDownOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +@keyframes fadeDownOut { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +/*-------------- + Scale +---------------*/ + +/* Scale */ + +@-webkit-keyframes scale { + 0% { + opacity: 0; + -webkit-transform: scale(0.7); + transform: scale(0.7); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes scale { + 0% { + opacity: 0; + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +@-webkit-keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + transform: scale(0.7); + } +} + +@keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +/* + * # 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; + 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); + 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; + transition: opacity 0.1s ease-out; + -webkit-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; + -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); + border-radius: 0.33em; + -webkit-transition: -webkit-box-shadow 0.2s ease; + transition: box-shadow 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; + border-radius: 0.2em; +} + +.ui.items .item > .image > img { + display: block; + width: 100%; +} + +/*-------------- + 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; + 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; + -webkit-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.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 { + 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; +} + +.ui.list .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Sub-List */ + +.ui.list .list { + clear: both; +} + +/* Icon */ + +.ui.list .item > .icon { + display: block; + float: left; + margin: 0em 1em 0em 0em; + padding: 0.1em 0em 0em 0em; +} + +.ui.list .item > .icon:only-child { + display: inline-block; +} + +.ui.horizontal.list .item > .icon { + margin: 0em; + padding: 0em 0.25em 0em 0em; +} + +.ui.horizontal.list .item > .icon, +.ui.horizontal.list .item > .icon + .content { + float: none; + display: inline-block; +} + +/* Image */ + +.ui.list .item > img { + display: block; + float: left; + margin-right: 1em; + vertical-align: middle; +} + +/* Content */ + +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2; +} + +.ui.list .item > .icon + .content { + display: table-cell; + vertical-align: top; +} + +/* Link */ + +.ui.list a { + cursor: pointer; +} + +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + -webkit-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 { + margin-right: 1em; + float: left; +} + +.ui.list .item > .right.floated { + margin-left: 1em; + 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; +} + +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} + +/******************************* + States +*******************************/ + +/*------------------- + Hover +--------------------*/ + +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list a .icon { + color: rgba(255, 255, 255, 0.6); +} + +.ui.inverted.list .description { + color: rgba(255, 255, 255, 0.8); +} + +.ui.inverted.link.list .item { + color: rgba(255, 255, 255, 0.4); +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item { + color: rgba(0, 0, 0, 0.3); +} + +.ui.link.list a.item, +.ui.link.list .item a { + color: rgba(0, 0, 0, 0.5); +} + +.ui.link.list a.item:hover, +.ui.link.list .item a:hover { + color: rgba(0, 0, 0, 0.8); +} + +.ui.link.list a.item:active, +.ui.link.list .item a:active { + color: rgba(0, 0, 0, 0.8); +} + +.ui.link.list a.active.item, +.ui.link.list .active.item a { + color: rgba(0, 0, 0, 0.8); +} + +/* Inverted */ + +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a { + color: rgba(255, 255, 255, 0.6); +} + +.ui.inverted.link.list a.item:hover, +.ui.inverted.link.list .item a:hover { + color: rgba(255, 255, 255, 0.8); +} + +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:active { + color: rgba(255, 255, 255, 0.9); +} + +.ui.inverted.link.list a.active.item, +.ui.inverted.link.list .active.item a { + color: rgba(255, 255, 255, 0.8); +} + +/*------------------- + 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; + 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 .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); +} + +.ui.animated.list .item { + -webkit-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.animated.list:not(.horizontal) .item:hover { + padding-left: 1em; +} + +.ui.animated.list:not(.horizontal) .item:hover .item:hover { + padding-left: 0.5em; +} + +/* Inverted */ + +.ui.inverted.selection.list .item { + color: rgba(255, 255, 255, 0.6); +} + +.ui.inverted.selection.list .item:hover { + background-color: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.8); +} + +.ui.inverted.selection.list .item:active { + background-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.7); +} + +.ui.inverted.selection.list .item.active { + background-color: rgba(255, 255, 255, 0.08); + color: #FFFFFF; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: 1.5em; +} + +ul.ui.list li, +.ui.bulleted.list .item { + position: relative; +} + +ul.ui.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + left: -1.5em; + content: '•'; + line-height: 1.2rem; + vertical-align: top; +} + +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: 1.5em; +} + +/* 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: 2.5em; +} + +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:not(.horizontal) > .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:not(.horizontal) .list { + margin-left: -0.5em; + margin-right: -0.5em; +} + +.ui.divided.list:not(.horizontal) .list .item { + padding-left: 1em; + padding-right: 1em; +} + +.ui.divided.list:not(.horizontal) .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; +} + +/* Inverted */ + +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list { + border-color: rgba(255, 255, 255, 0.2); +} + +.ui.divided.inverted.horizontal.list .item { + border-color: rgba(255, 255, 255, 0.2); +} + +/*------------------- + 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); +} + +/* Inverted */ + +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: rgba(255, 255, 255, 0.2); +} + +.ui.celled.inverted.horizontal.list .item { + border-color: rgba(255, 255, 255, 0.2); +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) .item { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +.ui.relaxed.list .header { + margin-bottom: 0.25em; +} + +.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.very.relaxed.list .header { + margin-bottom: 0.5em; +} + +.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/public/resource/css/jquery.tagsinput.css b/public/resource/css/jquery.tagsinput.css new file mode 100644 index 0000000..b9af4f8 --- /dev/null +++ b/public/resource/css/jquery.tagsinput.css @@ -0,0 +1,22 @@ +div.tagsinput { border: 1px solid rgba(0, 0, 0, 0.15); background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto; border-radius: 0.3125em;-webkit-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;} +div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;} +div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; } +div.tagsinput input { width:120px !important; margin:0px;font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; +-webkit-transition: background-color 0.3s ease-out, -webkit-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; +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); +} +div.tagsinput input:focus { + color: rgba(0, 0, 0, 0.85) !important; + 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; + box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset; +} +div.tagsinput div { display:block; float: left; } +.tags_clear { clear: both; width: 100%; height: 0px; } +.not_valid {background: #FBD8DB !important; color: #90111A !important;} diff --git a/public/resource/css/main.css b/public/resource/css/main.css new file mode 100644 index 0000000..e026be4 --- /dev/null +++ b/public/resource/css/main.css @@ -0,0 +1,418 @@ +/*framework edit*/ +html{ + height:100%; + font-size:100%; +} +body { + font: 14px 'Helvetica Neue','Microsoft YaHei','Hiragino Sans GB','WenQuanYi Micro Hei',Helvetica,Arial,Sans-serif; + line-height: 1.428571429; + color: #444; + margin:0px; + padding:0px; + height:100%; +} +ul,li{ + list-style:none; + margin:0; + padding:0; +} +a { + text-decoration:none; + color:#666; +} +.ui.dropdown > .text { + min-width:150px; +} +.ui.notif.menu { + box-shadow:none; +} +.ui.notif.menu .item { + padding:0 10px 0 0; + margin-right:16px +} +.ui.notif.menu .item:before{ + display:none; +} +.ui.notif.menu .item:hover{ + color:#666; +} +/*the style begin*/ +.page{ + min-height:100%; + width:100%; + min-width:1200px; + background: #fff; + box-shadow: 0px 4px 15px #181818; + padding-bottom:16px; + padding-bottom:1rem; +} +span.ui.checkbox { + padding-right:16px; +} +.ui.radio.checkbox{ + margin:16px 16px 8px 0 !important; +} +.ui.warning.message a{ + color:#96904D; +} +.ui.warning.message a:hover, .ui.warning.message a:focus { + text-decoration:underline; +} +.ui.feed a{ + color: #009FDA; +} +.ui.feed a:hover,.ui.feed a:focus{ + color:#00BAFF; + text-decoration:underline; +} +.ui.table { + font-size:14px; +} +/*select*/ +select { + text-transform: none; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +.form-control { + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.428571429; + vertical-align: middle; + color: rgba(0,0,0,.8); + background-color: #ffffff; + background-image: none; + border: 1px solid #cccccc; + border-radius: 4px; + cursor:pointer; +} +.form-control:focus { + outline: 0; +} +.form-control:-moz-placeholder { + color: #999999; +} +.form-control::-moz-placeholder { + color: #999999; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #999999; +} +.form-control::-webkit-input-placeholder { + color: #999999; +} +/*segment*/ +.ui.segment .right{ + float:right; +} +/*header*/ +header{ + position:relative; + height:72px; +} +#logo{ + float:left; + width:250px; + height:72px; + padding-top:15px; + font-size:30px; +} +#logo a{ + display:block; + width:180px; + height:72px; + text-indent: -999em; +} +header .user{ + display:inline; + float:right; + margin-top:22px; +} +/*main content*/ +.pageHeader, .verticalMenu{ + padding:16px 0; + padding:1rem 0; +} +/*show api key*/ +#showApiKey .segment{ + background:none; + box-shadow:none; + -webkit-box-shadow:none; +} +#showApiKey .segment label{ + font-size:16px; +} +#deviceQuickButton { + float:right; +} +/*index list*/ +#indexList{ + padding-top:2rem; +} +#indexList .segment{ + padding:0; +} +#indexList a.content{ + position:relative; + padding:1rem; + display:block; + min-height:13em; + z-index:100; +} +#indexList a.content:hover, #indexList a.content:focus{ + background-color:#b4ddf5 !important; +} +#indexList h4{ + margin:0; + color:#333; +} +#indexList p.deviceId{ + margin-top:0; +} +#indexList p.deviceDescription{ + height:84px; + overflow:auto; + margin:2rem 0; +} +#indexList h4.newDevice{ + padding:4.7em 0; + text-align:center; + top:50%; +} +#indexList h4.newDevice i.icon{ + display:initial; +} +#indexList p{ + margin:0; + font-size:14px; + font-size:0.875rem; +} +/*the device list*/ +.ui.device.segment{ + clear: both !important; +} +.ui.device.segment p{ + color:#666; + font-size:14px; + font-size:0.875rem; + margin:4px 0; + margin:0.25rem 0; +} +.ui.device.segment span.stress{ + font-size:16px; + font-size:1rem; + color:#333; +} +.ui.device.segment .verborder{ + border-left: 3px solid #007ad5; +} +.ui.device.segment p.sensorStatus{ + font-size:14px; + font-size:0.875rem; +} +.ui.device.segment .sub.header{ + line-height:1.4; +} +/*new device*/ +.locmap { + height: 180px; + background-color: #CCC; + text-align: center; + width: 100% !important; + border: #CCC 1px solid;z +} +#location label{ + margin: 0em 0em 0.3em; + display: block; + color: #555555; + font-size:14px; + font-size:0.875rem; +} +#location input{ + padding:0!important; + border: 1px solid transparent!important; + box-shadow:none!important; + -webkit-box-shadow:none!important; +} +/*the device manage page*/ +.ui.small.header{ + font-weight:normal; +} +.ui.grid.segment.sensor.segment{ + padding:32px 0 16px; + padding:2rem 0 1rem; + border-bottom:1px solid rgba(0,0,0,.1); +} +.ui.device.segment a.externalUrl { + color:#007ad5; +} +.ui.device.segment .sensorAction{ + margin-top:8px; + margin-top:0.5rem; +} +.ui.device.segment a.sensorEdit{ + margin-right:14px; + margin-right:0.875rem; +} +.ui.device.segment a.sensorEdit:hover, .ui.basic.attached.accordion .content a:hover,.ui.device.segment a.sensorEdit:focus, .ui.basic.attached.accordion .content a:focus{ + color:#333; +} +.ui.device.segment a:hover, .ui.device.segment a:focus{ + cursor:pointer; +} +.ui.device.segment a.externalUrl:hover, .ui.device.segment a.externalUrl:focus{ + text-decoration:underline; +} +.ui.vertical.center.segment{ + text-align:center; +} +.ui.data.segment{ + background: transparent; + box-shadow: none; + -webkit-box-shadow: none; + line-height:1.2; + text-align:center; + margin-top:22px !important; +} +.ui.data.segment p.data{ + font-size:48px; + font-size:3rem; +} +.ui.data.segment p.gps{ + font-size:32px; + font-size:2rem; +} +.ui.data.segment p.unit{ + font-size:12px; + font-size:0.75rem; + margin:0; +} +.ui.info.segment{ + padding-bottom:8px; + padding-bottom:0.5rem; +} +/* ui header*/ +h5.ui.header.sprite-icon { + padding-left:22px; + background:url(../images/icon-sprite.png) no-repeat top left; +} +h5.ui.header.sprite-icon.data{ background-position: 0 -68px;} +h5.ui.header.sprite-icon.bird{ background-position: 0 0;} +h5.ui.header.sprite-icon.gps{ background-position: 0 -136px;} +h5.ui.header.sprite-icon.key{ background-position: 0 -204px; } +h5.ui.header.sprite-icon.pic{ background-position: 0 -268px;} +h5.ui.header.sprite-icon.switchicon{ background-position: 0 -336px;} +/*label*/ +.ui.attached.label.show{ + z-index:99; + background: transparent; + color:#333; + right:14px !important; + top:8px; + padding-bottom: 2px; + border-radius: 0!important; +} +.ui.attached.label.show.active{ + background:#fff; + color: #333; + border-style:solid; + border-color:#ccc; + border-width:1px 1px 0px; + z-index:9999; +} +.ui.type.label{ + background-color:#47a447; + border-color:#47a447; + color:#fff;` + font-size:12px; + font-size:0.75rem; + padding:0 7px!important; + border-radius:.325em; + text-transform: uppercase; +} +.ui.label.error{ + border-color:#D24B4C; + color:#fff; +} +/*accordion*/ +.ui.basic.attached.accordion{ + width:inherit; + padding:0 28px 14px; +} +.ui.basic.attached.accordion.showChart .title{ + font-size:12px; + font-size:0.75rem; + position:absolute; + right:32px; + z-index:999; +} +.ui.basic.attached.accordion.action .title{ + margin:0; + padding-top:0; +} +.ui.basic.attached.accordion.action .content{ + margin-top:8px; +/* border-top:1px solid rgba(204, 204, 204, 0.3);*/ +} +/*chart*/ +.chartShow{ + position: absolute; + top: 38px; + right: 14px; + width: 96%; + height: 100%; + display: none; +} +.active.chartShow{ + display:block; +} +/*image box*/ +.field.devimage{ + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} +.dev_img_inner { + width:7777px; + overflow: hidden; +} +/*footer start*/ +footer { + width:100%; + height:150px; + min-width:1200px; + background:#323232; + position:absolute; + z-index: -20; +} +#copyrights { + margin:0 auto; + height:140px; + position:fixed; + left:0px; + right:0px; + bottom:0px; + z-index: -15; +} +#copyrights .inset { + margin:0 auto; + padding:20px 50px 0; + position:relative; +} +#copyrights .logo { + width:164px; + height:40px; + background:url(../images/logo_footer.png); + text-indent:-999em; +} +#copyrights p { + font-size:12px; + color:#a0a0a0; + line-height:24px; +} +#copyrights .fl { + float:left; +} diff --git a/public/resource/css/switch.css b/public/resource/css/switch.css new file mode 100644 index 0000000..05cd4b3 --- /dev/null +++ b/public/resource/css/switch.css @@ -0,0 +1,65 @@ +label.switch { + margin: 1.5em auto; +} +input#switch { + position: absolute; + left: -9999px; +} +.switch { + position: relative; + display: block; + width: 5.5em; + height: 3em; + cursor: pointer; + border-radius: 1.5em; + -webkit-transition: 350ms; + transition: 350ms; + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0))), #dddddd; + background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd; + background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd; + -webkit-box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7); + box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7); +} +.switch::after { + position: absolute; + content: ''; + width: 2em; + height: 2em; + top: 0.5em; + left: 0.5em; + border-radius: 50%; + -webkit-transition: 250ms ease-in-out; + transition: 250ms ease-in-out; + background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); + background: -webkit-linear-gradient(#f5f5f5 10%, #eeeeee); + background: linear-gradient(#f5f5f5 10%, #eeeeee); + -webkit-box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5); + box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5); +} +.switch::before { + position: absolute; + content: ''; + width: 4em; + height: 1.5em; + top: 0.75em; + left: 0.75em; + border-radius: 0.75em; + -webkit-transition: 250ms ease-in-out; + transition: 250ms ease-in-out; + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #d0d0d0; + background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0; + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #ec2727; + background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ec2727; + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #D95C5C; + background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #D95C5C; + background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #D95C5C; + -webkit-box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset; + box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset; +} +input:checked + .switch::before { + -webkit-box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset; + box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset; +} +input:checked + .switch::after { + left: 3em; +} diff --git a/public/resource/fonts/basic.icons.eot b/public/resource/fonts/basic.icons.eot new file mode 100644 index 0000000..25066de Binary files /dev/null and b/public/resource/fonts/basic.icons.eot differ diff --git a/public/resource/fonts/basic.icons.svg b/public/resource/fonts/basic.icons.svg new file mode 100644 index 0000000..b9c54d0 --- /dev/null +++ b/public/resource/fonts/basic.icons.svg @@ -0,0 +1,450 @@ + + + diff --git a/public/resource/fonts/basic.icons.ttf b/public/resource/fonts/basic.icons.ttf new file mode 100644 index 0000000..318a264 Binary files /dev/null and b/public/resource/fonts/basic.icons.ttf differ diff --git a/public/resource/fonts/basic.icons.woff b/public/resource/fonts/basic.icons.woff new file mode 100644 index 0000000..baba1b5 Binary files /dev/null and b/public/resource/fonts/basic.icons.woff differ diff --git a/public/resource/fonts/icons.eot b/public/resource/fonts/icons.eot new file mode 100644 index 0000000..0662cb9 Binary files /dev/null and b/public/resource/fonts/icons.eot differ diff --git a/public/resource/fonts/icons.otf b/public/resource/fonts/icons.otf new file mode 100644 index 0000000..7012545 Binary files /dev/null and b/public/resource/fonts/icons.otf differ diff --git a/public/resource/fonts/icons.svg b/public/resource/fonts/icons.svg new file mode 100644 index 0000000..2edb4ec --- /dev/null +++ b/public/resource/fonts/icons.svg @@ -0,0 +1,399 @@ + + + \ No newline at end of file diff --git a/public/resource/fonts/icons.ttf b/public/resource/fonts/icons.ttf new file mode 100644 index 0000000..d365924 Binary files /dev/null and b/public/resource/fonts/icons.ttf differ diff --git a/public/resource/fonts/icons.woff b/public/resource/fonts/icons.woff new file mode 100644 index 0000000..b9bd17e Binary files /dev/null and b/public/resource/fonts/icons.woff differ diff --git a/public/resource/images/arrow-white-l2r.png b/public/resource/images/arrow-white-l2r.png new file mode 100644 index 0000000..a51d919 Binary files /dev/null and b/public/resource/images/arrow-white-l2r.png differ diff --git a/public/resource/images/avatar-default.gif b/public/resource/images/avatar-default.gif new file mode 100644 index 0000000..1130c84 Binary files /dev/null and b/public/resource/images/avatar-default.gif differ diff --git a/public/resource/images/bg-uniform.png b/public/resource/images/bg-uniform.png new file mode 100644 index 0000000..4c28b63 Binary files /dev/null and b/public/resource/images/bg-uniform.png differ diff --git a/public/resource/images/devicedomo01.jpg b/public/resource/images/devicedomo01.jpg new file mode 100644 index 0000000..db10199 Binary files /dev/null and b/public/resource/images/devicedomo01.jpg differ diff --git a/public/resource/images/gopher-avatar.png b/public/resource/images/gopher-avatar.png new file mode 100644 index 0000000..3d03c8b Binary files /dev/null and b/public/resource/images/gopher-avatar.png differ diff --git a/public/resource/images/icon-sprite.png b/public/resource/images/icon-sprite.png new file mode 100644 index 0000000..cd8713e Binary files /dev/null and b/public/resource/images/icon-sprite.png differ diff --git a/public/resource/images/icon_search.png b/public/resource/images/icon_search.png new file mode 100644 index 0000000..282bd78 Binary files /dev/null and b/public/resource/images/icon_search.png differ diff --git a/public/resource/images/icon_weibo.png b/public/resource/images/icon_weibo.png new file mode 100644 index 0000000..b3f365e Binary files /dev/null and b/public/resource/images/icon_weibo.png differ diff --git a/public/resource/images/loader-large-inverted.gif b/public/resource/images/loader-large-inverted.gif new file mode 100644 index 0000000..ee5283f Binary files /dev/null and b/public/resource/images/loader-large-inverted.gif differ diff --git a/public/resource/images/loader-large.gif b/public/resource/images/loader-large.gif new file mode 100644 index 0000000..519621c Binary files /dev/null and b/public/resource/images/loader-large.gif differ diff --git a/public/resource/images/loader-medium-inverted.gif b/public/resource/images/loader-medium-inverted.gif new file mode 100644 index 0000000..caa3110 Binary files /dev/null and b/public/resource/images/loader-medium-inverted.gif differ diff --git a/public/resource/images/loader-medium.gif b/public/resource/images/loader-medium.gif new file mode 100644 index 0000000..386eb5a Binary files /dev/null and b/public/resource/images/loader-medium.gif differ diff --git a/public/resource/images/loader-mini-inverted.gif b/public/resource/images/loader-mini-inverted.gif new file mode 100644 index 0000000..c7c95b9 Binary files /dev/null and b/public/resource/images/loader-mini-inverted.gif differ diff --git a/public/resource/images/loader-mini.gif b/public/resource/images/loader-mini.gif new file mode 100644 index 0000000..7f3e27c Binary files /dev/null and b/public/resource/images/loader-mini.gif differ diff --git a/public/resource/images/loader-small-inverted.gif b/public/resource/images/loader-small-inverted.gif new file mode 100644 index 0000000..bbb0a67 Binary files /dev/null and b/public/resource/images/loader-small-inverted.gif differ diff --git a/public/resource/images/loader-small.gif b/public/resource/images/loader-small.gif new file mode 100644 index 0000000..8c9f60e Binary files /dev/null and b/public/resource/images/loader-small.gif differ diff --git a/public/resource/images/logo.png b/public/resource/images/logo.png new file mode 100644 index 0000000..1822ad4 Binary files /dev/null and b/public/resource/images/logo.png differ diff --git a/public/resource/images/logo_footer.png b/public/resource/images/logo_footer.png new file mode 100644 index 0000000..96ded19 Binary files /dev/null and b/public/resource/images/logo_footer.png differ diff --git a/public/resource/images/navbar_bg.png b/public/resource/images/navbar_bg.png new file mode 100644 index 0000000..ed91401 Binary files /dev/null and b/public/resource/images/navbar_bg.png differ diff --git a/public/resource/images/photo.jpg b/public/resource/images/photo.jpg new file mode 100644 index 0000000..e2e81dc Binary files /dev/null and b/public/resource/images/photo.jpg differ diff --git a/public/resource/images/yeelink-avatar.jpg b/public/resource/images/yeelink-avatar.jpg new file mode 100644 index 0000000..fd2cec8 Binary files /dev/null and b/public/resource/images/yeelink-avatar.jpg differ diff --git a/public/resource/javascript/ZeroClipboard.swf b/public/resource/javascript/ZeroClipboard.swf new file mode 100644 index 0000000..13bf8e3 Binary files /dev/null and b/public/resource/javascript/ZeroClipboard.swf differ diff --git a/public/resource/javascript/alert.js b/public/resource/javascript/alert.js new file mode 100644 index 0000000..0076a69 --- /dev/null +++ b/public/resource/javascript/alert.js @@ -0,0 +1,78 @@ ++function ($) { "use strict"; + + // ALERT CLASS DEFINITION + // ====================== + + var dismiss = '[data-dismiss="alert"]' + var Alert = function (el) { + $(el).on('click', dismiss, this.close) + } + + Alert.prototype.close = function (e) { + var $this = $(this) + var selector = $this.attr('data-target') + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 + } + + var $parent = $(selector) + + if (e) e.preventDefault() + + if (!$parent.length) { + $parent = $this.hasClass('alert') ? $this : $this.parent() + } + + $parent.trigger(e = $.Event('close.bs.alert')) + + if (e.isDefaultPrevented()) return + + $parent.removeClass('in') + + function removeElement() { + $parent.trigger('closed.bs.alert').remove() + } + + $.support.transition && $parent.hasClass('fade') ? + $parent + .one($.support.transition.end, removeElement) + .emulateTransitionEnd(150) : + removeElement() + } + + + // ALERT PLUGIN DEFINITION + // ======================= + + var old = $.fn.alert + + $.fn.alert = function (option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.alert') + + if (!data) $this.data('bs.alert', (data = new Alert(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.alert.Constructor = Alert + + + // ALERT NO CONFLICT + // ================= + + $.fn.alert.noConflict = function () { + $.fn.alert = old + return this + } + + + // ALERT DATA-API + // ============== + + $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close) + +}(jQuery); diff --git a/public/resource/javascript/framework.js b/public/resource/javascript/framework.js new file mode 100644 index 0000000..c59d007 --- /dev/null +++ b/public/resource/javascript/framework.js @@ -0,0 +1,11647 @@ +/* + * # Semantic - Accordion + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +$.fn.accordion = function(parameters) { + var + $allModules = $(this), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.accordion.settings, parameters) + : $.extend({}, $.fn.accordion.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + $module = $(this), + $title = $module.find(selector.title), + $content = $module.find(selector.content), + + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + initialize: function() { + module.debug('Initializing accordion with bound events', $module); + // initializing + $title + .on('click' + eventNamespace, module.event.click) + ; + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying previous accordion for', $module); + $module + .removeData(moduleNamespace) + ; + $title + .off(eventNamespace) + ; + }, + + event: { + click: function() { + module.verbose('Title clicked', this); + var + $activeTitle = $(this), + index = $title.index($activeTitle) + ; + module.toggle(index); + }, + resetStyle: function() { + module.verbose('Resetting styles on element', this); + $(this) + .attr('style', '') + .removeAttr('style') + .children() + .attr('style', '') + .removeAttr('style') + ; + } + }, + + toggle: function(index) { + module.debug('Toggling content content at index', index); + var + $activeTitle = $title.eq(index), + $activeContent = $activeTitle.next($content), + contentIsOpen = $activeContent.is(':visible') + ; + if(contentIsOpen) { + if(settings.collapsible) { + module.close(index); + } + else { + module.debug('Cannot close accordion content collapsing is disabled'); + } + } + else { + module.open(index); + } + }, + + open: function(index) { + var + $activeTitle = $title.eq(index), + $activeContent = $activeTitle.next($content), + $previousTitle = $activeTitle.siblings(selector.title).filter('.' + className.active), + $previousContent = $previousTitle.next($title), + contentIsOpen = ($previousTitle.size() > 0) + ; + if( !$activeContent.is(':animated') ) { + module.debug('Opening accordion content', $activeTitle); + if(settings.exclusive && contentIsOpen) { + $previousTitle + .removeClass(className.active) + ; + $previousContent + .stop() + .children() + .animate({ + opacity: 0 + }, settings.duration, module.event.resetStyle) + .end() + .slideUp(settings.duration , settings.easing, function() { + $previousContent + .removeClass(className.active) + .attr('style', '') + .removeAttr('style') + .children() + .attr('style', '') + .removeAttr('style') + ; + }) + ; + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop() + .children() + .attr('style', '') + .removeAttr('style') + .end() + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .addClass(className.active) + .attr('style', '') + .removeAttr('style') + ; + $.proxy(settings.onOpen, $activeContent)(); + $.proxy(settings.onChange, $activeContent)(); + }) + ; + } + }, + + close: function(index) { + var + $activeTitle = $title.eq(index), + $activeContent = $activeTitle.next($content) + ; + module.debug('Closing accordion content', $activeContent); + $activeTitle + .removeClass(className.active) + ; + $activeContent + .removeClass(className.active) + .show() + .stop() + .children() + .animate({ + opacity: 0 + }, settings.duration, module.event.resetStyle) + .end() + .slideUp(settings.duration, settings.easing, function(){ + $activeContent + .attr('style', '') + .removeAttr('style') + ; + $.proxy(settings.onClose, $activeContent)(); + $.proxy(settings.onChange, $activeContent)(); + }) + ; + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + module.debug('Changing internal', name, value); + if(value !== undefined) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else { + module[name] = value; + } + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 100); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && instance !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { + instance = instance[camelCaseValue]; + } + else if( instance[camelCaseValue] !== undefined ) { + found = instance[camelCaseValue]; + return false; + } + else if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { + instance = instance[value]; + } + else if( instance[value] !== undefined ) { + found = instance[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.accordion.settings = { + name : 'Accordion', + namespace : 'accordion', + + debug : true, + verbose : true, + performance : true, + + exclusive : true, + collapsible : true, + + duration : 400, + easing : 'easeInOutQuint', + + onOpen : function(){}, + onClose : function(){}, + onChange : function(){}, + + error: { + method : 'The method you called is not defined' + }, + + className : { + active : 'active' + }, + + selector : { + title : '.title', + content : '.content' + } + + +}; + +// Adds easing +$.extend( $.easing, { + easeInOutQuint: function (x, t, b, c, d) { + if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; + return c/2*((t-=2)*t*t*t*t + 2) + b; + } +}); + +})( jQuery, window , document ); + + +/* + * # Semantic - API + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + + $.api = $.fn.api = function(parameters) { + + var + settings = $.extend(true, {}, $.api.settings, parameters), + + // if this keyword isn't a jQuery object, create one + context = (typeof this != 'function') + ? this + : $('
'), + // context defines the element used for loading/error state + $context = (settings.stateContext) + ? $(settings.stateContext) + : $(context), + // module is the thing that initiates the api action, can be independent of context + $module = typeof this == 'object' + ? $(context) + : $context, + + element = this, + time = new Date().getTime(), + performance = [], + + moduleSelector = $module.selector || '', + moduleNamespace = settings.namespace + '-module', + + className = settings.className, + metadata = settings.metadata, + error = settings.error, + + instance = $module.data(moduleNamespace), + + query = arguments[0], + methodInvoked = (instance !== undefined && typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + module, + returnedValue + ; + + module = { + initialize: function() { + var + runSettings, + + loadingTimer = new Date().getTime(), + loadingDelay, + + promise, + url, + + formData = {}, + data, + + ajaxSettings = {}, + xhr + ; + + // serialize parent form if requested! + if(settings.serializeForm && $(this).toJSON() !== undefined) { + formData = module.get.formData(); + module.debug('Adding form data to API Request', formData); + $.extend(true, settings.data, formData); + } + + // let beforeSend change settings object + runSettings = $.proxy(settings.beforeSend, $module)(settings); + + // check for exit conditions + if(runSettings !== undefined && !runSettings) { + module.error(error.beforeSend); + module.reset(); + return; + } + + // get real url from template + url = module.get.url( module.get.templateURL() ); + + // exit conditions reached from missing url parameters + if( !url ) { + module.error(error.missingURL); + module.reset(); + return; + } + + // promise handles notification on api request, so loading min. delay can occur for all notifications + promise = + $.Deferred() + .always(function() { + if(settings.stateContext) { + $context + .removeClass(className.loading) + ; + } + $.proxy(settings.complete, $module)(); + }) + .done(function(response) { + module.debug('API request successful'); + // take a stab at finding success state if json + if(settings.dataType == 'json') { + if (response.error !== undefined) { + $.proxy(settings.failure, $context)(response.error, settings, $module); + } + else if ($.isArray(response.errors)) { + $.proxy(settings.failure, $context)(response.errors[0], settings, $module); + } + else { + $.proxy(settings.success, $context)(response, settings, $module); + } + } + // otherwise + else { + $.proxy(settings.success, $context)(response, settings, $module); + } + }) + .fail(function(xhr, status, httpMessage) { + var + errorMessage = (settings.error[status] !== undefined) + ? settings.error[status] + : httpMessage, + response + ; + // let em know unless request aborted + if(xhr !== undefined) { + // readyState 4 = done, anything less is not really sent + if(xhr.readyState !== undefined && xhr.readyState == 4) { + + // if http status code returned and json returned error, look for it + if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') { + module.error(error.statusMessage + httpMessage); + } + else { + if(status == 'error' && settings.dataType == 'json') { + try { + response = $.parseJSON(xhr.responseText); + if(response && response.error !== undefined) { + errorMessage = response.error; + } + } + catch(error) { + module.error(error.JSONParse); + } + } + } + $context + .removeClass(className.loading) + .addClass(className.error) + ; + // show error state only for duration specified in settings + if(settings.errorLength > 0) { + setTimeout(function(){ + $context + .removeClass(className.error) + ; + }, settings.errorLength); + } + module.debug('API Request error:', errorMessage); + $.proxy(settings.failure, $context)(errorMessage, settings, this); + } + else { + module.debug('Request Aborted (Most likely caused by page change)'); + } + } + }) + ; + + // look for params in data + $.extend(true, ajaxSettings, settings, { + success : function(){}, + failure : function(){}, + complete : function(){}, + type : settings.method || settings.type, + data : data, + url : url, + beforeSend : settings.beforeXHR + }); + + if(settings.stateContext) { + $context + .addClass(className.loading) + ; + } + + if(settings.progress) { + module.verbose('Adding progress events'); + $.extend(true, ajaxSettings, { + xhr: function() { + var + xhr = new window.XMLHttpRequest() + ; + xhr.upload.addEventListener('progress', function(event) { + var + percentComplete + ; + if (event.lengthComputable) { + percentComplete = Math.round(event.loaded / event.total * 10000) / 100 + '%'; + $.proxy(settings.progress, $context)(percentComplete, event); + } + }, false); + xhr.addEventListener('progress', function(event) { + var + percentComplete + ; + if (event.lengthComputable) { + percentComplete = Math.round(event.loaded / event.total * 10000) / 100 + '%'; + $.proxy(settings.progress, $context)(percentComplete, event); + } + }, false); + return xhr; + } + }); + } + + module.verbose('Creating AJAX request with settings: ', ajaxSettings); + xhr = + $.ajax(ajaxSettings) + .always(function() { + // calculate if loading time was below minimum threshold + loadingDelay = ( settings.loadingLength - (new Date().getTime() - loadingTimer) ); + settings.loadingDelay = loadingDelay < 0 + ? 0 + : loadingDelay + ; + }) + .done(function(response) { + var + context = this + ; + setTimeout(function(){ + promise.resolveWith(context, [response]); + }, settings.loadingDelay); + }) + .fail(function(xhr, status, httpMessage) { + var + context = this + ; + // page triggers abort on navigation, dont show error + if(status != 'abort') { + setTimeout(function(){ + promise.rejectWith(context, [xhr, status, httpMessage]); + }, settings.loadingDelay); + } + else { + $context + .removeClass(className.error) + .removeClass(className.loading) + ; + } + }) + ; + if(settings.stateContext) { + $module + .data(metadata.promise, promise) + .data(metadata.xhr, xhr) + ; + } + }, + + get: { + formData: function() { + return $module + .closest('form') + .toJSON() + ; + }, + templateURL: function() { + var + action = $module.data(settings.metadata.action) || settings.action || false, + url + ; + if(action) { + module.debug('Creating url for: ', action); + if(settings.api[action] !== undefined) { + url = settings.api[action]; + } + else { + module.error(error.missingAction); + } + } + // override with url if specified + if(settings.url) { + url = settings.url; + module.debug('Getting url', url); + } + return url; + }, + url: function(url, urlData) { + var + urlVariables + ; + if(url) { + urlVariables = url.match(settings.regExpTemplate); + urlData = urlData || settings.urlData; + + if(urlVariables) { + module.debug('Looking for URL variables', urlVariables); + $.each(urlVariables, function(index, templateValue){ + var + term = templateValue.substr( 2, templateValue.length - 3), + termValue = ($.isPlainObject(urlData) && urlData[term] !== undefined) + ? urlData[term] + : ($module.data(term) !== undefined) + ? $module.data(term) + : urlData[term] + ; + module.verbose('Looking for variable', term, $module, $module.data(term), urlData[term]); + // remove optional value + if(termValue === false) { + module.debug('Removing variable from URL', urlVariables); + url = url.replace('/' + templateValue, ''); + } + // undefined condition + else if(termValue === undefined || !termValue) { + module.error(error.missingParameter + term); + url = false; + return false; + } + else { + url = url.replace(templateValue, termValue); + } + }); + } + } + return url; + } + }, + + // reset api request + reset: function() { + $module + .data(metadata.promise, false) + .data(metadata.xhr, false) + ; + $context + .removeClass(className.error) + .removeClass(className.loading) + ; + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 100); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && instance !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { + instance = instance[value]; + } + else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { + instance = instance[camelCaseValue]; + } + else if( instance[value] !== undefined ) { + found = instance[value]; + return false; + } + else if( instance[camelCaseValue] !== undefined ) { + found = instance[camelCaseValue]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + + return (returnedValue !== undefined) + ? returnedValue + : this + ; + }; + + // handle DOM attachment to API functionality + $.fn.apiButton = function(parameters) { + $(this) + .each(function(){ + var + // if only function passed it is success callback + $module = $(this), + selector = $(this).selector || '', + + settings = ( $.isFunction(parameters) ) + ? $.extend(true, {}, $.api.settings, $.fn.apiButton.settings, { stateContext: this, success: parameters }) + : $.extend(true, {}, $.api.settings, $.fn.apiButton.settings, { stateContext: this}, parameters), + module + ; + module = { + initialize: function() { + if(settings.context && selector !== '') { + $(settings.context) + .on(selector, 'click.' + settings.namespace, module.click) + ; + } + else { + $module + .on('click.' + settings.namespace, module.click) + ; + } + }, + click: function() { + if(!settings.filter || $(this).filter(settings.filter).size() === 0) { + $.proxy( $.api, this )(settings); + } + } + }; + module.initialize(); + }) + ; + return this; + }; + + $.api.settings = { + + name : 'API', + namespace : 'api', + + debug : true, + verbose : true, + performance : true, + + api : {}, + + beforeSend : function(settings) { + return settings; + }, + beforeXHR : function(xhr) {}, + success : function(response) {}, + complete : function(response) {}, + failure : function(errorCode) {}, + progress : false, + + error : { + missingAction : 'API action used but no url was defined', + missingURL : 'URL not specified for the API action', + missingParameter : 'Missing an essential URL parameter: ', + + timeout : 'Your request timed out', + error : 'There was an error with your request', + parseError : 'There was an error parsing your request', + JSONParse : 'JSON could not be parsed during error handling', + statusMessage : 'Server gave an error: ', + beforeSend : 'The before send function has aborted the request', + exitConditions : 'API Request Aborted. Exit conditions met' + }, + + className: { + loading : 'loading', + error : 'error' + }, + + metadata: { + action : 'action', + promise : 'promise', + xhr : 'xhr' + }, + + regExpTemplate: /\{\$([A-z]+)\}/g, + + action : false, + url : false, + urlData : false, + serializeForm : false, + + stateContext : false, + + method : 'get', + data : {}, + dataType : 'json', + cache : true, + + loadingLength : 200, + errorLength : 2000 + + }; + + $.fn.apiButton.settings = { + filter : '.disabled, .loading', + context : false, + stateContext : false + }; + +})( jQuery, window , document ); +/* + * # Semantic - Colorize + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + + $.fn.colorize = function(parameters) { + var + settings = $.extend(true, {}, $.fn.colorize.settings, parameters), + // hoist arguments + moduleArguments = arguments || false + ; + $(this) + .each(function(instanceIndex) { + + var + $module = $(this), + + mainCanvas = $('')[0], + imageCanvas = $('')[0], + overlayCanvas = $('')[0], + + backgroundImage = new Image(), + + // defs + mainContext, + imageContext, + overlayContext, + + image, + imageName, + + width, + height, + + // shortucts + colors = settings.colors, + paths = settings.paths, + namespace = settings.namespace, + error = settings.error, + + // boilerplate + instance = $module.data('module-' + namespace), + module + ; + + module = { + + checkPreconditions: function() { + module.debug('Checking pre-conditions'); + + if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) { + module.error(error.undefinedColors); + return false; + } + return true; + }, + + async: function(callback) { + if(settings.async) { + setTimeout(callback, 0); + } + else { + callback(); + } + }, + + getMetadata: function() { + module.debug('Grabbing metadata'); + image = $module.data('image') || settings.image || undefined; + imageName = $module.data('name') || settings.name || instanceIndex; + width = settings.width || $module.width(); + height = settings.height || $module.height(); + if(width === 0 || height === 0) { + module.error(error.undefinedSize); + } + }, + + initialize: function() { + module.debug('Initializing with colors', colors); + if( module.checkPreconditions() ) { + + module.async(function() { + module.getMetadata(); + module.canvas.create(); + + module.draw.image(function() { + module.draw.colors(); + module.canvas.merge(); + }); + $module + .data('module-' + namespace, module) + ; + }); + } + }, + + redraw: function() { + module.debug('Redrawing image'); + module.async(function() { + module.canvas.clear(); + module.draw.colors(); + module.canvas.merge(); + }); + }, + + change: { + color: function(colorName, color) { + module.debug('Changing color', colorName); + if(colors[colorName] === undefined) { + module.error(error.missingColor); + return false; + } + colors[colorName] = color; + module.redraw(); + } + }, + + canvas: { + create: function() { + module.debug('Creating canvases'); + + mainCanvas.width = width; + mainCanvas.height = height; + imageCanvas.width = width; + imageCanvas.height = height; + overlayCanvas.width = width; + overlayCanvas.height = height; + + mainContext = mainCanvas.getContext('2d'); + imageContext = imageCanvas.getContext('2d'); + overlayContext = overlayCanvas.getContext('2d'); + + $module + .append( mainCanvas ) + ; + mainContext = $module.children('canvas')[0].getContext('2d'); + }, + clear: function(context) { + module.debug('Clearing canvas'); + overlayContext.fillStyle = '#FFFFFF'; + overlayContext.fillRect(0, 0, width, height); + }, + merge: function() { + if( !$.isFunction(mainContext.blendOnto) ) { + module.error(error.missingPlugin); + return; + } + mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0); + overlayContext.blendOnto(mainContext, 'multiply'); + } + }, + + draw: { + + image: function(callback) { + module.debug('Drawing image'); + callback = callback || function(){}; + if(image) { + backgroundImage.src = image; + backgroundImage.onload = function() { + imageContext.drawImage(backgroundImage, 0, 0); + callback(); + }; + } + else { + module.error(error.noImage); + callback(); + } + }, + + colors: function() { + module.debug('Drawing color overlays', colors); + $.each(colors, function(colorName, color) { + settings.onDraw(overlayContext, imageName, colorName, color); + }); + } + + }, + + debug: function(message, variableName) { + if(settings.debug) { + if(variableName !== undefined) { + console.info(settings.name + ': ' + message, variableName); + } + else { + console.info(settings.name + ': ' + message); + } + } + }, + error: function(errorMessage) { + console.warn(settings.name + ': ' + errorMessage); + }, + invoke: function(methodName, context, methodArguments) { + var + method + ; + methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 ); + + if(typeof methodName == 'string' && instance !== undefined) { + methodName = methodName.split('.'); + $.each(methodName, function(index, name) { + if( $.isPlainObject( instance[name] ) ) { + instance = instance[name]; + return true; + } + else if( $.isFunction( instance[name] ) ) { + method = instance[name]; + return true; + } + module.error(settings.error.method); + return false; + }); + } + return ( $.isFunction( method ) ) + ? method.apply(context, methodArguments) + : false + ; + } + + }; + if(instance !== undefined && moduleArguments) { + // simpler than invoke realizing to invoke itself (and losing scope due prototype.call() + if(moduleArguments[0] == 'invoke') { + moduleArguments = Array.prototype.slice.call( moduleArguments, 1 ); + } + return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) ); + } + // initializing + module.initialize(); + }) + ; + return this; + }; + + $.fn.colorize.settings = { + name : 'Image Colorizer', + debug : true, + namespace : 'colorize', + + onDraw : function(overlayContext, imageName, colorName, color) {}, + + // whether to block execution while updating canvas + async : true, + // object containing names and default values of color regions + colors : {}, + + metadata: { + image : 'image', + name : 'name' + }, + + error: { + noImage : 'No tracing image specified', + undefinedColors : 'No default colors specified.', + missingColor : 'Attempted to change color that does not exist', + missingPlugin : 'Blend onto plug-in must be included', + undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.' + } + + }; + +})( jQuery, window , document ); + +/* + * # Semantic - Form Validation + * http://github.com/jlukic/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +$.fn.form = function(fields, parameters) { + var + $allModules = $(this), + + settings = $.extend(true, {}, $.fn.form.settings, parameters), + validation = $.extend({}, $.fn.form.settings.defaults, fields), + + namespace = settings.namespace, + metadata = settings.metadata, + selector = settings.selector, + className = settings.className, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + $module = $(this), + $field = $(this).find(selector.field), + $group = $(this).find(selector.group), + $message = $(this).find(selector.message), + $prompt = $(this).find(selector.prompt), + $submit = $(this).find(selector.submit), + + formErrors = [], + + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing form validation', $module, validation, settings); + if(settings.keyboardShortcuts) { + $field + .on('keydown' + eventNamespace, module.event.field.keydown) + ; + } + $module + .on('submit' + eventNamespace, module.validate.form) + ; + $field + .on('blur' + eventNamespace, module.event.field.blur) + ; + $submit + .on('click' + eventNamespace, module.submit) + ; + $field + .on(module.get.changeEvent() + eventNamespace, module.event.field.change) + ; + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module', instance); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $field = $module.find(selector.field); + }, + + submit: function() { + module.verbose('Submitting form', $module); + $module + .submit() + ; + }, + + event: { + field: { + keydown: function(event) { + var + $field = $(this), + key = event.which, + keyCode = { + enter : 13, + escape : 27 + } + ; + if( key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $field + .blur() + ; + } + if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) ) { + module.debug('Enter key pressed, submitting form'); + $submit + .addClass(className.down) + ; + $field + .one('keyup' + eventNamespace, module.event.field.keyup) + ; + event.preventDefault(); + return false; + } + }, + keyup: function() { + module.verbose('Doing keyboard shortcut form submit'); + $submit.removeClass(className.down); + module.submit(); + }, + blur: function() { + var + $field = $(this), + $fieldGroup = $field.closest($group) + ; + if( $fieldGroup.hasClass(className.error) ) { + module.debug('Revalidating field', $field, module.get.validation($field)); + module.validate.field( module.get.validation($field) ); + } + else if(settings.on == 'blur' || settings.on == 'change') { + module.validate.field( module.get.validation($field) ); + } + }, + change: function() { + var + $field = $(this), + $fieldGroup = $field.closest($group) + ; + if( $fieldGroup.hasClass(className.error) ) { + module.debug('Revalidating field', $field, module.get.validation($field)); + module.validate.field( module.get.validation($field) ); + } + else if(settings.on == 'change') { + module.validate.field( module.get.validation($field) ); + } + } + } + + }, + + get: { + changeEvent: function() { + return (document.createElement('input').oninput !== undefined) + ? 'input' + : (document.createElement('input').onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + }, + field: function(identifier) { + module.verbose('Finding field with identifier', identifier); + if( $field.filter('#' + identifier).size() > 0 ) { + return $field.filter('#' + identifier); + } + else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { + return $field.filter('[name="' + identifier +'"]'); + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { + return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); + } + return $(''); + }, + validation: function($field) { + var + rules + ; + $.each(validation, function(fieldName, field) { + if( module.get.field(field.identifier).get(0) == $field.get(0) ) { + rules = field; + } + }); + return rules || false; + } + }, + + has: { + + field: function(identifier) { + module.verbose('Checking for existence of a field with identifier', identifier); + if( $field.filter('#' + identifier).size() > 0 ) { + return true; + } + else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { + return true; + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { + return true; + } + return false; + } + + }, + + add: { + prompt: function(field, errors) { + var + $field = module.get.field(field.identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + promptExists = ($prompt.size() !== 0) + ; + module.verbose('Adding inline error', field); + $fieldGroup + .addClass(className.error) + ; + if(settings.inline) { + if(!promptExists) { + $prompt = settings.templates.prompt(errors); + $prompt + .appendTo($fieldGroup) + ; + } + $prompt + .html(errors[0]) + ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } + } + } + }, + errors: function(errors) { + module.debug('Adding form error messages', errors); + $message + .html( settings.templates.error(errors) ) + ; + } + }, + + remove: { + prompt: function(field) { + var + $field = module.get.field(field.identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt) + ; + $fieldGroup + .removeClass(className.error) + ; + if(settings.inline && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', field); + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } + } + } + }, + + validate: { + + form: function(event) { + var + allValid = true + ; + // reset errors + formErrors = []; + $.each(validation, function(fieldName, field) { + if( !( module.validate.field(field) ) ) { + allValid = false; + } + }); + if(allValid) { + module.debug('Form has no validation errors, submitting'); + $module + .removeClass(className.error) + .addClass(className.success) + ; + $.proxy(settings.onSuccess, this)(event); + } + else { + module.debug('Form has errors'); + $module.addClass(className.error); + if(!settings.inline) { + module.add.errors(formErrors); + } + return $.proxy(settings.onFailure, this)(formErrors); + } + }, + + // takes a validation object and returns whether field passes validation + field: function(field) { + var + $field = module.get.field(field.identifier), + fieldValid = true, + fieldErrors = [] + ; + if(field.rules !== undefined) { + $.each(field.rules, function(index, rule) { + if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) { + module.debug('Field is invalid', field.identifier, rule.type); + fieldErrors.push(rule.prompt); + fieldValid = false; + } + }); + } + if(fieldValid) { + module.remove.prompt(field, fieldErrors); + $.proxy(settings.onValid, $field)(); + } + else { + formErrors = formErrors.concat(fieldErrors); + module.add.prompt(field, fieldErrors); + $.proxy(settings.onInvalid, $field)(fieldErrors); + return false; + } + return true; + }, + + // takes validation rule and returns whether field passes rule + rule: function(field, validation) { + var + $field = module.get.field(field.identifier), + type = validation.type, + value = $field.val() + '', + + bracketRegExp = /\[(.*?)\]/i, + bracket = bracketRegExp.exec(type), + isValid = true, + ancillary, + functionType + ; + // if bracket notation is used, pass in extra parameters + if(bracket !== undefined && bracket !== null) { + ancillary = '' + bracket[1]; + functionType = type.replace(bracket[0], ''); + isValid = $.proxy(settings.rules[functionType], $module)(value, ancillary); + } + // normal notation + else { + isValid = $.proxy(settings.rules[type], $field)(value); + } + return isValid; + } + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 100); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.size() > 1) { + title += ' ' + '(' + $allModules.size() + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && instance !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { + instance = instance[camelCaseValue]; + } + else if( instance[camelCaseValue] !== undefined ) { + found = instance[camelCaseValue]; + return false; + } + else if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { + instance = instance[value]; + } + else if( instance[value] !== undefined ) { + found = instance[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.form.settings = { + + name : 'Form', + namespace : 'form', + + debug : true, + verbose : true, + performance : true, + + + keyboardShortcuts : true, + on : 'submit', + inline : false, + + transition : 'scale', + duration : 150, + + + onValid : function() {}, + onInvalid : function() {}, + onSuccess : function() { return true; }, + onFailure : function() { return false; }, + + metadata : { + validate: 'validate' + }, + + selector : { + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' + }, + + className : { + error : 'error', + success : 'success', + down : 'down', + label : 'ui label prompt' + }, + + // errors + error: { + method : 'The method you called is not defined.' + }, + + + + templates: { + error: function(errors) { + var + html = '