/* ----------------------------------------------------------------
    Copyright (c) Demosphere International Inc.
    No permission is granted for any purpose without prior
    written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

/*
browser testing:
@media only screen and (min-width: 481px) and (max-width: 1024px) {
orientation testing:
and (orientation : landscape)
and (orientation: portrait)
*/

/* tablets [portrait + landscape] */
@media only screen and (min-device-width: 481px) and (max-device-width: 960px) {
  div#design-banner,
  div#design-header,
  div#design-nav,
  div#dii-reg-footer { display:none; height: 0; }
}

/* phones [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
  div#design-banner,
  div#design-header,
  div#design-nav,
  div#dii-reg-footer { display: none; height: 0; }
}

/* hide the userbar when attempting to print the current page 7029 */
@media print { #dii-navbar-load { display: none; } }

/* push design down - make room for admin nav bar
----------------------------------*/
div#dii-navbar-spacer { height: 71px; }

/* TOP ROW - User Information and Tabs
-----------------------------------------------*/
div#dii-navbar { position: fixed; z-index: 998; top: 0; width: 100%; border-width: 0 0 1px; height: 70px; }
div#navbar-top-row { position: relative; margin: 5px auto 0; width: 990px; height: 31px; }
div#navbar-top-row a:hover { text-decoration: none; }

div#navbar-user { float: left; width: 140px; }
div#navbar-user-name { overflow: hidden; margin: 2px 0 0 6px; width: 134px; height: 16px; font-size: 12px; font-weight: bold; white-space: nowrap; }
div#navbar-user-email { overflow: hidden; padding-left: 4px; font-size: 10px; font-weight: normal; white-space: nowrap; cursor: default; }

div#navbar-top-row a.navbar-tab { position: relative; float: left; margin: 2px 2px 0 0; border-bottom: 0px; padding: 0 2px; text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
div#navbar-top-row a.navbar-tab.ui-state-hover { top: 1px; }
div#navbar-top-row a.navbar-tab.navbar-tab-selected { top: 1px; cursor: auto; }
div#navbar-top-row a.navbar-tab span { display: block; }
div#navbar-top-row a.navbar-tab-static { margin-top: 4px; cursor: default; }
div#navbar-top-row a.navbar-tab-one-line span { padding-top: 9px; height: 19px; }
div#navbar-top-row a.navbar-tab-icon { background: no-repeat 0 2px; width: 24px; height: 28px; }
a.navbar-tab span.dii-lib-icon { background-repeat: no-repeat; background-position: 0 2px; padding: 4px 2px 0 28px; height: 24px; font-family: arial; font-size: 10px; font-weight: normal; line-height: 10px; }

/* General Tabs
----------------------------------*/
/* ---                       /* <----- Favorites tab - leave for WebWriter 2.1
div#navbar-tab-fav-dialog { display: none; }
div#navbar-tab-fav-dialog ul { width: 200px; }
div#navbar-tab-fav-dialog ul li { border-bottom: 0; }
div#navbar-tab-fav-dialog ul li.ui-state-default a { display: block; padding: 6px; }
div#navbar-tab-fav { position: relative; width: 100px; }
/*div#navbar-tab-fav div.navbar-tabs-fav-text span.navbar-tabs-fav-carat { position: absolute; right: 2px; top: 5px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu { z-index: 999; position: absolute; left: -2px; display: none; width: 200px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li { border-bottom: 0; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li.ui-state-default a { display: block; padding: 6px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li#navbar-tabs-fav-insert a { display: block; -moz-border-radius: 0; height: 18px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li#navbar-tabs-fav-insert a div { float: left; margin-right: 2px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li#navbar-tabs-fav-insert a span { float: left; padding: 3px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li#navbar-tabs-fav-config a { display: block; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; height: 18px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li#navbar-tabs-fav-config a div { float: left; margin-right: 2px; }
div#navbar-tab-fav ul#navbar-tabs-fav-menu li#navbar-tabs-fav-config a span { float: left; padding: 3px; }*/

a#navbar-tab-public-view span { background-position: 0 -1px; }
a#navbar-tab-report-builder span { background-position: 0 1px; }

/* RosterPro Tabs
----------------------------------*/
a#navbar-tab-household span { background-position: 0 1px; }
a#navbar-tab-registration-settings span { background-position: 0 2px; padding-left: 23px; }

/* GameOn Tabs
----------------------------------*/
a#navbar-tab-scorekeeping span { padding-left: 24px; }

/* WebWriter Tabs
----------------------------------*/
a#navbar-tab-elements span { background-position: 0 -1px; }


/* MIDDLE ROW
----------------------------------*/
div#navbar-middle { margin: 0 auto; border-top: 0; border-bottom: 0; width: 978px; height: 3px; }


/* BOTTOM ROW: NAVBAR "TRAY"
----------------------------------*/
div#navbar-product { position: relative; margin: 0 auto; border-top: 0; padding: 2px 4px 8px; width: 962px; height: 15px; }
div#navbar-product-name { position: absolute; padding: 4px; width: 142px; text-align: center; font-size: 10px; font-weight: bold; }
div#navbar-product-content { margin: 4px 0 0 170px; }
div#navbar-drawers { background-image: url('../images/dii-drawer-bg.png'); background-position: center bottom; background-repeat: repeat-x; }


/* -------------------------- APPLICATION-SPECIFIC TRAY/DRAWER FUNCTIONALITY
--------------------------------------------------------------------------------------------------------*/

/* Form Builder Functionality
----------------------------------*/
div#dii-navbar a.navbar-formbuilder-tab { z-index: 1; border: 1px solid #999; border-bottom: 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background-color: #fff; background-image: none; padding: 2px 4px 5px 18px; color: #666; }

div#navbar-product-content div.dii-action-function-navbar { margin-right: 12px; }
div#navbar-product-content a { z-index: 1; top: -4px; margin-right: 4px; }

a#navbar-formbuilder-templates-btn.navbar-formbuilder-tab div,
a#navbar-formbuilder-item-inspector-btn.navbar-formbuilder-tab div,
a#navbar-formbuilder-items-btn.navbar-formbuilder-tab div { background-image: url('../jquery/images/ui-icons_6da8d5_256x240.png'); background-position: -48px -80px; /*-64px -16px*/ }
a#navbar-formbuilder-templates-btn.navbar-formbuilder-tab span,
a#navbar-formbuilder-item-inspector-btn.navbar-formbuilder-tab span,
a#navbar-formbuilder-items-btn.navbar-formbuilder-tab span { color: #2e6e9e; }

div#navbar-formbuilder-drawers { margin: 0 auto; width: 960px; }
div#navbar-formbuilder-drawers div.navbar-formbuilder-drawer { display: none; clear: both; position: relative; top: -5px; border-top: 0; background-image: none; padding: 0 4px 5px; }
div#navbar-formbuilder-drawers div.navbar-formbuilder-inner { border: 1px solid #999; background-color: #fff; position: relative; overflow: auto; }
div#navbar-formbuilder-drawers div span.dii-function-text { position: relative; display:inline ;line-height: 28px; margin:0 4px 0 4px; padding: 2px 8px; font-weight: normal; cursor: move; }
div.dii-dialog div span.dii-function-text { cursor: move; display: block; line-height: 20px; margin: 2px; padding-left: 6px; position: relative; }


div.prop-element-prop-item fieldset { border: 1px solid #dcdcdc; width: 100%; }
div.prop-element-prop-item legend { padding: 0 0 6px 8px; font-size: 13px; font-weight: bold; color: #cc7100; }
#navbar-formbuilder-item-inspector-dlg >*{padding: 6px 2px;}
#navbar-formbuilder-templates-dlg fieldset{width: 92%; margin: 4px 0; padding: 0 6px;}

div#navbar-formbuilder-templates > div.navbar-formbuilder-inner > div { float: left; }
div#navbar-formbuilder-templates td { padding: 4px 8px; }
div#navbar-formbuilder-templates-system { border: 1px solid #dcdcdc; background-color: #f9f9f9; padding: 2px; }
div#navbar-formbuilder-templates-system span { clear: left; }
td#navbar-formbuilder-templates-edit-group-l { padding: 8px 4px; }
td#navbar-formbuilder-templates-edit-group-l div.dii-action-nav-bar { margin: 0; padding: 0 2px; }
td#navbar-formbuilder-templates-edit-group-l div.dii-function-text { cursor: pointer; margin-top: 4px; padding: 6px; }
td#navbar-formbuilder-templates-edit-group-l div.selected { position: absolute; width: 214px; border-color: #d0d0d0; border-right: 0 none; background-color: #eee; background-image: none; font-weight: bold; color: #da912f; }
td#navbar-formbuilder-templates-edit-group-l div.selected-next { margin-top: 39px; }
td#navbar-formbuilder-templates-edit-group-r { background-image: none; padding: 8px 12px; }
td#navbar-formbuilder-templates-edit-group-r div.dii-action-nav-bar { height: auto; }
td#navbar-formbuilder-templates-edit-group-r table.dii-table-grid { margin-top: 8px; }

.dii-formbuilder-drag-helper { min-width: 70px; max-width: 250px; max-height: 18px; padding: 5px; z-index: 9999; font-weight: bold; list-style-type: none;}
.dii-formbuilder-place-holder { height: 19px; display: block; }

ul.dii-formbuilder-templates-group-list { margin: 0; padding: 0; width: 100%; }
ul.dii-formbuilder-templates-group-list li.dii-formbuilder-template-lib-row { list-style-type: none; margin: 0; padding: 0; }
ul.dii-formbuilder-templates-group-list li.dii-formbuilder-template-lib-row:hover { background-color: #dcdcdc; }

div#navbar-formbuilder-item-inspector { max-height: 300px; }
div#navbar-formbuilder-item-inspector table.dii-table { clear: both; }

div#navbar-formbuilder-item-inspector div.navbar-formbuilder-inner,
div#navbar-formbuilder-templates-edit div.navbar-formbuilder-inner,
div#navbar-formbuilder-items div.navbar-formbuilder-inner { max-height: 210px; overflow: auto; top: -2px; }
div#navbar-formbuilder-templates div.navbar-formbuilder-inner { top: -2px; padding: 2px 4px; }

div.navbar-formbuilder-header { border-bottom: 1px solid #dcdcdc; line-height: 22px; margin-bottom: 8px; padding: 0 0 6px 8px; font-size: 18px; font-weight: bold; color: #5174d3; }
div.navbar-formbuilder-list { padding: 2px; }

/* Admin Progress Bar
-----------------------------------*/
div#navbar-import-progress { padding: 0; position: absolute; font-size: 10px; font-weight: bold; width: 125px; height: 18px; right: 0; top: -30px; }
div#navbar-import-progress >span.percent-text { color: #8C5545; left: 8px; position: absolute; top: 4px; white-space: nowrap; z-index: 1; }
div#navbar-import-progress >span.ui-icon { cursor: pointer; position: absolute; right: 1px; top: 0; z-index: 1; }
div#navbar-import-progress >div { display: block; width: 100%; position: relative; top: -1px; left: -1px; height: 18px; }


/* Admin Home
----------------------------------*/
.navbar-admin-message { float: left; margin: 0 12px; height: 18px; }
.navbar-admin-message-icon { float: left; margin: 0 2px; }
.navbar-admin-message-text { float: left; margin-right: 4px; padding: 2px; }

/* WebWriter product tabs
----------------------------------*/
a#navbar-tab-ww-hp {width: 60px;}
span.navbar-tabs-ww-hp {background-image: url('../icons/24/home_24.png');} /* icon_home_page */
a#navbar-tab-ww-map {width: 52px;}
span.navbar-tabs-ww-map {background-image: url('../icons/24/world_24.png');} /* icon_site_map */
a#navbar-tab-ww-cal {width: 84px;}
span.navbar-tabs-ww-cal {background-image: url('../icons/24/calendar_month_24.png');} /* icon_calendar */

/* NAVBAR */
/*#dii-navbar .btn {  position: relative; display: inline-block;  border-radius: 4px; padding: 5px 10px 5px 22px; color: #fff;}*/
#dii-navbar .btn { border-radius: 4px; color: #fff; display: inline-block; font-size: 12px; line-height: 14px; padding: 4px 8px; }
#dii-navbar .btn-sky { border: 1px solid #008ec7; background-color: #009ddc; }
#dii-navbar .btn-sky:hover { border-color: #006c98; background-color: #0092cc; }
/*#dii-navbar .btn.btn-notifications { float: right; top: -5px; padding: 4px 10px; }*/
#dii-navbar .btn.btn-notifications { float: right; top: -5px; }
/* END TEAMNET UI BRANDING */

#design-editor-edit { float: left; }

/* ADMIN RESPONSIVE NAVBAR */
.admin-mode #navbar-bars { display: none; }

@media only screen and (max-width: 1000px) {
  .admin-mode { background-position: initial !important; }
  .admin-mode #dii-navbar { position: relative; border: 0; height: initial; }
  .admin-mode #navbar-top-row { overflow: hidden; width: 100%;height: initial; min-height: 30px; border: 0; margin: 0; background: rgba(0,0,0,.8); border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
  .admin-mode #navbar-user { float: none; width: 100%; display: block; }
  .admin-mode #navbar-user-name { overflow: initial; width: initial; height: initial; margin: 0; padding: 3px 0 0 6px; }
  .admin-mode #navbar-user-email { overflow: initial; width: initial; height: initial; margin: 0; position: initial; top: initial; left: initial; padding-left: 12px; } 
  .admin-mode #navbar-top-row .navbar-tab { float: none; display: none; margin: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
  .admin-mode #navbar-top-row .navbar-tab.show-items { display: block; }
  .admin-mode #navbar-bars { display: inline-block; position: absolute; top: 10px; right: 10px; font-size: 12px; line-height: 12px; }
  .admin-mode #navbar-middle,
  .admin-mode #navbar-product,
  .admin-mode #dii-navbar-spacer { display: none; }
}