/*---------------------------------------------------------------------------
 * @Project: Alto CMS
 * @Project URI: http: //altocms.com
 * @Description: Advanced Community Engine
 * @Version: 1.0
 * @Copyright: Alto CMS Team
 * @License: GNU GPL v2 & MIT
 *----------------------------------------------------------------------------
 */


*                                       { outline: none!important }
body                                    { overflow-y: scroll; font-size: 12px; }
html,
body                                    { height: 100% }
.container                              { position: relative; min-height: 100%; width: 100%!important; max-width: 1300px!important; margin: 0; padding: 0; background-color: #F5F5F5; overflow: hidden; }
.container:before                       { content: ""; display: block; width: 280px; position: absolute; left: 0; height: 100%; }
#content                                { padding: 50px 10px 30px; position: relative; min-height: 778px; width: auto; margin-left: 280px; }
#content:after                          { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
.navbar                                 { max-width: 1020px }
.b-page-stats                           { position: relative; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #CCC; }
.b-page-stats table                     { margin: auto }
.b-page-stats td                        { vertical-align: top; padding: 0 12px; }
.b-page-stats-head                      { font-size: 14px; font-weight: bold; }
a:hover,
a:focus                                 { text-decoration: none }
ul,
ol                                      { list-style: none outside none }
a.icon                                  { color: #333 }
a.icon:hover                            { color: #999 }

/* -------------------------------------------------------------------
    INTERFACE
------------------------------------------------------------------- */
.i-cursor-x                             { cursor: move; }

/* -------------------------------------------------------------------
    SIDEBAR
------------------------------------------------------------------- */

#sidebar                                { display: block; float: left; position: relative; width: 280px; }
.b-sidebar-top                          { color: #fff; text-align: center; }
.logo span                              { display: block; width: 280px; height: 121px; }
.site-search                            { position: relative }
.site-search input                      { border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; padding: 10px 5px; background: rgba(0, 0, 0, 0.1); }
.site-search button                     { background: none; position: absolute; border: none; top: 7px; right: 5px; color: #eee; font-size: 15px; }
.menu-left                              { margin: 0; padding: 0; display: block!important; }
.menu-left ul                           { margin: 0; padding: 0; }
.menu-left ul li a                      { padding-left: 35px }
.menu-left li                           { border-top: 1px solid rgba(0, 0, 0, 0.1); position: relative; }
.menu-left li.active:before             { display: block; content: ""; position: absolute; top: 13px; right: 0; width: 0; height: 0; border-width: 6px; border-color: rgba(0, 0, 0, 0) #F5F5F5 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; z-index: 10; }
.menu-left li:last-child                { border-bottom: 0; box-shadow: none; }
.menu-left li a                         { display: block; color: #fff; -o-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out; font-size: 12px; padding: 10px 0 10px 10px; }
.menu-left li .active,
.menu-left li a:hover                   { color: #fff }
.menu-left .menu-header                 { overflow: hidden }
.menu-left li i                         { margin-right: 10px; position: relative; top: 2px; }
.menu-left .menu-header a[data-toggle=collapse]:before
                                        { position: relative; content: "\e080"; display: inline-block; font-family: 'Icons Halflings'; color: #FFF; float: right; font-size: 6px; margin-right: 13px; top: 6px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
.menu-left .menu-header a:hover:before
                                        { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }


/* -------------------------------------------------------------------
    BOOTSTRAP RESET
------------------------------------------------------------------- */

.navbar-inverse                         { margin-left: 280px; border: none; }
.navbar-inverse .navbar-nav li a,
.dropdown-menu li a,
.navbar-inverse li   a:hover,
.dropdown-menu li a,
.navbar-inverse li   a:hover            { color: #fff!important; }
.navbar-brand img                       { width: 25px; height: 25px; }
.navbar.navbar-inner                    { background-color: #F9F9F9; padding: 10px; border: 1px solid #ddd; }
.b-content                              { background: #F5F5F5 }
.btn,
.dropdown-menu                          { font-size: 12px }
.modal-content,
.btn:active,
.btn-group.open .dropdown-toggle,
.btn.active,
.well                                   { box-shadow: none }
.modal-content                          {border-radius: 0;}
#content .navbar:before,
#content .navbar:after                  { content: none }
#content .navbar.navbar-inner           { overflow: hidden }
.btn-default.active,
.open .dropdown-toggle.btn-default      { border-color: #CCC }
label                                   { display: block }
.input-group-btn .btn                   { padding-top: 7px; padding-bottom: 8px; }
.modal-content                          { margin: 10px; border-color: #ddd; }
.table                                  { margin-bottom: 0px }
.btn.active:hover                       { cursor: default }

/*    USERS    */
.span9                                  { width: 70%; padding-right: 20px; float: left; }
.span3                                  { width: 30%; float: left; margin-top: 16px; }
.accordion-body                         { margin-bottom: 20px }
.accordion-body .control-group          { margin-bottom: 20px }
.accordion-body .input-group            { width: auto!important }
.accordion-body textarea                { width: 100% }

/*    SKINS    */
.span6                                  { width: 50%; float: left; display: block; min-height: 30px; }
.span6:nth-child(odd)                   { padding-right: 20px }
.span12                                 { width: 100%; overflow: hidden; }
.span12.form-horizontal                 { clear: both }

/*    SETTINGS-SITE / WIDGETS    */
.input-group-inline                     { display: inline-block; vertical-align: middle; }
.input-group-inline .input-group        { width: 150px!important; display: inline-block; }
.input-group-inline .input-group-addon,
.input-group-inline .input-group-btn    { width: auto!important; height: 100%!important; display: inline-block; top: 0; position: absolute; right: 0; border-left: 1px solid #ddd; }
.input-text.i-inline                    { width: auto!important; display: inline-block; }


/* -------------------------------------------------------------------
    SETTINGS
------------------------------------------------------------------- */

.nopadding                              { padding: 0!important }
.form-horizontal .control-label         { float: left; width: 220px; text-align: right; padding-top: 0px; }
.form-horizontal .controls              { margin-left: 230px; margin-bottom: 10px; }
.form-horizontal .controls input,
.form-horizontal .controls textarea,
.form-horizontal .controls select       { width: 80% }
.markItUpContainer                      { width: 80%!important }
.markItUpEditor                         { width: 100%!important }
.markItUpHeader ul                      { padding: 0 }
.form-horizontal .control-group         { padding-left: 10px; padding-top: 15px; min-height: 65px; border-bottom: 1px solid #eee; }
.help-block,
.help-inline                            { color: #999; padding-left: 5px; }
.input-group                            { width: 300px }
.input-group input                      { width: 100%!important }
.input-group-addon                      { font-size: 12px; border-radius: 0; border-color: #ddd; }
.form-horizontal .form-actions          { margin-top: 0; margin-bottom: 0; padding-left: 210px; }
.form-actions                           { padding: 19px 20px 20px; margin-top: 20px; margin-bottom: 20px; background-color: #F5F5F5; border-top: 1px solid #E5E5E5; }
.b-wbox                                 { background: #F9F9F9; border-top: 1px solid #DDD; border-left: 1px solid #DDD; border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; margin-top: 16px; margin-bottom: 16px; }
.b-wbox-content                         { padding: 12px 15px }
.b-wbox-header label.checkbox           { padding: 9px 15px; border-left: 1px solid #eee; display: block; float: right; white-space: nowrap; }
.b-wbox-header                          { height: 36px }
.b-wbox-header span.icon                { border-right: 1px solid #DDD; float: left; opacity: .7; padding: 11px; }
.b-wbox-header .close                   { float: right; margin: 8px 10px 0 0; }
.b-content-header-title                 { color: #555; font-size: 28px; margin-bottom: 30px; }
.b-wbox-header-title                    { color: #fff; float: left; font-size: 14px; font-weight: bold; padding: 10px; margin: 0; height: 36px; }
.b-wbox-header .buttons                 { float: right }
.btn-mini                               { padding: 3px 6px; margin: 6px; }
.b-skin-screenshot                      { width: 240px; height: 180px; border: 1px solid #F9F9F9; float: left; margin-right: 10px; }

/*    WIDGETS    ON/OFF    */
.b-switch                               { margin: 3px auto; width: 40px; height: 20px; position: relative; cursor: pointer; }
.b-switch label                         { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #e8a096; box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); cursor: pointer; }
.b-switch label:before                  { content: ""; nowhitespace: afterproperty; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; box-shadow: 0 1px 0 rgba(255,255,255,0.5); -webkit-filter: blur(1px); /* Smooth trick */ filter: blur(1px); /* Future-proof */ ; }
.b-switch label i                       { display: block; nowhitespace: afterproperty; height: 100%; width: 18px; position: absolute; left: 0; top: 0; z-index: 2; background-color: #e0e0e0; /* Fallback */ /*background: linear-gradient(#f0f0f0, #e0e0e0); */ background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#f7f7f7), to(#e0e0e0)); background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #e0e0e0 100%); background-image: -moz-linear-gradient(top, #f7f7f7 0%, #e0e0e0 100%); background-image: -ms-linear-gradient(top, #f7f7f7 0%, #e0e0e0 100%); background-image: -o-linear-gradient(top, #f7f7f7 0%, #e0e0e0 100%); background-image: linear-gradient(top, #f7f7f7 0%, #e0e0e0 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e0e0e0',GradientType=0 ); box-shadow: inset 0 1px 0 white, 0 0 3px rgba(64,64,64,0.3), 0 2px 2px rgba(64,64,64,0.2); ; }
.b-switch label i:before                { content: "off"; position: absolute; top: 50%; right: -21px; margin-top: -8px; color: #a8301e; font-style: normal; font-weight: bold; font-family: Helvetica, Arial, sans-serif; font-size: 11px; text-transform: uppercase; text-shadow: 0 1px 1px rgba(250, 250, 250, 0.7); }
.b-switch .checked ~ label              { background: #9add82 }
.b-switch .checked ~ label i            { left: auto; right: -1%; }
.b-switch .checked ~ label i:before     { /* On/off */ content: "on"; right: 115%; color: #40602a; text-shadow: 0 1px 1px rgba(250, 250, 250, 0.7);  }
.b-switch input                         { filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0); zoom: 1; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }


/* -------------------------------------------------------------------
    BREADCRUMB
------------------------------------------------------------------- */

#breadcrumb                             { border: 1px solid #ddd; margin-bottom: 20px; }
#breadcrumb a                           { display: inline-block; background-image: url(../img/breadcrumb.png); background-position: center right; background-repeat: no-repeat; font-size: 11px; color: #666; padding: 8px 20px 8px 10px; }
#breadcrumb a:hover                     { color: #333 }
#breadcrumb a:last-child                { background-image: none }
#breadcrumb a.current                   { font-weight: bold; color: #444; }
#breadcrumb a i                         { margin-right: 5px; opacity: .6; }
#breadcrumb a:hover i                   { margin-right: 5px; opacity: .8; }


/* -------------------------------------------------------------------
    RESPONSIVE
------------------------------------------------------------------- */

@media (max-width: 600px)                             { 
    #sidebar                         { width: 100%!important; margin: 0!important; float: none; }
    #content                         { width: 100%!important; margin-left: 0!important; padding-top: 10px; }
    .container:before                { width: 100%; }
    .navbar-collapse                 { padding-left: 0 }
    .navbar-inverse .navbar-toggle,
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form     { border-color: transparent }
    .navbar-nav                      { margin: 0; margin-left: -5px; }
    .navbar-inverse                  { margin: 0!important }
    .navbar-inverse .dropdown,
    .logo span                       { display: none }
    .logo                            { margin-top: 50px; display: block; }
    .span3,
    .span9,
    .span12,
    .span6                           { width: 100%; padding-right: 0px!important; }
}


/* -------------------------------------------------------------------
    NEW
------------------------------------------------------------------- */

.dropdown-menu li a, .menu-left li a, .navbar-inverse
                                        { font-size: 14px }
.btn-danger, .btn-primary               { border: 0; font-weight: bold; font-size: 13px; -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.btn:hover                              { opacity: 0.8 }
.navbar-fixed-top { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmIAAAA8CAYAAADFTdZIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkdJREFUeNrs3VtuglAYhVGpIKgIXuY/Vnv+yBi2DV0rOemzuw98UcTu/X4fAPhfuq7b+0uc21n8p/nrfkwAwM5cRRhCDADyzu2sZkCIAUDW1M7DDAgxAMgaRRhCDADyTu082+lMgRADgJxBhCHEACCvb+flWoYQAwARBkIMgN07Hj4fRx5NgRADgOx1q94J602BEAMAEQZCDIBdq29F1seRgykQYgCQj7CTKRBiAJBVT8wfzYAQA4B8hE1mQIgBQNbaztkMCDEAyFrauZoBIQYAWbd2ZjMgxAAg67qFGAgxAAi6HD73hYEQA4Cguin/bgaEGABkjSIMIQYAefW0/HpqfmcKhBgAiDAQYgDs2rBFmOsQQgwAgnoRBkIMgLxjO6/tLwgxEwAQvOaIMBBiAHwpwnpTgBADIKe+FVn3hA2mACEGQD7CTqYAIQZANsIeh8+T8wEhBkBQ/WzRZAYQYgDkI+xsBhBiAGQt7VzMAEIMgKxbO7MZQIgBkDVvIQYIMQCC6qPIxQwgxADIqpvy72YAIQZA1iTCQIgBkFcPaq0HtnamACEGQE79ZNFThIEQAyBrEGEgxADI69t5uX6AEAMg6yjCQIgB8J3rxWuLMUCIARCOsN4UIMQAyF4n6sb8wRQgxADIqW9F1nPCTqYAIQZAPsJGU4AQAyCrfrZoMgMIMQDyEXY2AwgxALLWdi5mACEGQNatnasZQIgBkDVvIQYIMQCC6l2wxQwgxADIqpvyVzOAEAMgqx5P8TADCDEAskYRBt/3K8AA5BwJPDQM+ioAAAAASUVORK5CYII=); background-position: right; background-repeat: no-repeat; }
.navbar-inverse .navbar-collapse        { position: relative; }
.navbar-inverse:after                   { content: ""; width: 100%; position: absolute; bottom: 0; border-bottom: 4px solid rgba(0, 0, 0, 0.2); z-index: 1; }
.b-wbox                                 { position: relative }
.form-actions .btn.pull-right           { margin-right: 20px; position: relative; top: -15px; }
.b-wbox:after                           { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: -1px; right: -1px; background: #FFF; background: -webkit-linear-gradient(135deg, #F5F5F5 45%, #ddd 50%, #ddd 56%, #ddd 80%); background: linear-gradient(315deg, #F5F5F5 45%, #ddd 50%, #ddd 56%, #ddd 80%); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; -webkit-transition-delay: 2s; transition-delay: 2s; width: 25px; height: 25px; }
.b-wbox:before                          { position: absolute; content: ''; bottom: -1px; right: 24px; background: #FFF; background: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 45%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 80%); background: linear-gradient(315deg, rgba(0, 0, 0, 0.04) 45%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 80%); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; -webkit-transition-delay: 2s; transition-delay: 2s; width: 20px; height: 20px; z-index: 2; }
.nav.navbar-nav.navbar-right .icon      { font-size: 15px; position: relative; margin-right: 4px; }
.nav.navbar-nav.navbar-right .dropdown-menu .icon
                                        { font-size: 13px }
.btn-danger, .b-wbox-header .close, .b-wbox-header-title, .btn-primary, .nav, .menu-left li a, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
                                        { font-family: "Cuprum"!important }
body, div                               { font-family: "Ubuntu"!important }
div.dataTables_wrapper .ui-widget-header, .b-wbox-header, .modal-header, .table th
                                        { border-bottom: 1px solid #eee }
.b-wbox-header .close, .b-wbox-header-title
                                        { color: #333 }
#breadcrumb                             { background-color: #f9f9f9 }
.btn, .b-page-stats, .b-content-header-title
                                        { font-weight: 300 }
.input-group-btn .btn                   { padding-bottom: 7px }
.menu-left li                           { border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.menu-left ul                           { position: relative }
.menu-left li ul li:first-child:after, .menu-left li:first-child:after
                                        { content: ""; display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); top: 0; position: absolute; width: 100%; }

.input-group-addon:last-child { border-left: 1px solid #DDD; left: -3px; position: relative; }

.input-group-addon:first-child { border-right: 1px solid #DDD; right: -3px; position: relative; }

textarea.input-wide,
input.input-wide { width: 100%; }