/*******************************************************************************
 *
 * CloudFlare UI Widget Supporting Styles
 *
 ******************************************************************************/

div.cf-ui {
    
    display: block;
    position: relative;
    margin: 0px;
    padding: 0px;
    
}

.cf-ui-corner-all-six { 
    
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px;
    
}

.cf-ui-corner-all-four { 
    
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px;
    
}

/*******************************************************************************
 *
 * CloudFlare UI Loader Supporting Styles
 *
 ******************************************************************************/

div.cf-ui .flashLoader {
    
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 138px;
    height: 62px;
    margin: -31px 0 0 -69px;
    z-index: 99;
}

/*******************************************************************************
 *
 * CloudFlare UI Scale 9 Supporting Styles
 *
 ******************************************************************************/

div.cf-ui div.scale9 {
    
    display: block;
    width: 100%;
    height: 100%;
    
}

div.cf-ui div.scale9 * {
    
    display: block;
    position: absolute;
    z-index: 2;
    
}

div.cf-ui div.scale9 img {
    
    z-index: 1;
    top: 0px;
    left: 0px;
    
}

div.cf-ui div.scale9 > div.top {
    
    width: 100%;
    top: 0px;
    left: 0px;
    
}

div.cf-ui div.scale9 > div.center {
    
    width: 100%;
    
}

div.cf-ui div.scale9 > div.bottom {
    
    width: 100%;
    bottom: 0px;
    left: 0px;
    
}

div.cf-ui div.scale9 div.left {
    
    top: 0px;
    left: 0px;
    height: 100%;
    
}

div.cf-ui div.scale9 div.middle {
    
    position: absolute;
    height: 100%;
    
}

div.cf-ui div.scale9 div.right {
    
    top: 0px;
    right: 0px;
    height: 100%;
    
}

/*******************************************************************************
 *
 * Widget: CloudFlare UI Toggle
 *
 * Structure: 
 *
 *   <div class="cf-ui toggle">
 *                                       
 *       <div> <!-- START OVERLAY -->
 *           <div class="left"> <!-- LEFT OUTER MATTE -->
 *               <div></div> <!-- LEFT OUTER IMAGE -->
 *           </div>
 *           <div class="right"> <!-- RIGHT OUTER -->
 *               <div></div> <!-- RIGHT OUTER IMAGE -->
 *           </div>
 *           <div class="fill"> <!-- START INNER -->
 *               <div class="left"></div> <!-- LEFT MASK -->
 *               <div class="middle">
 *                   <div class="left"></div> <!-- LEFT FILL -->
 *                   <div class="middle"></div> <!-- MIDDLE FILL -->
 *                   <div class="right"></div> <!-- RIGHT FILL -->
 *               </div> <!-- MIDDLE MASK -->
 *               <div class="right"></div> <!-- RIGHT MASK -->
 *           </div> <!-- END INNER -->
 *       </div> <!-- END OVERLAY -->
 *       
 *       <ul> <!-- START CONTENT -->
 *           <li class="left">On</li> <!-- OPTION ONE -->
 *           <li class="right">Off</li> <!-- OPTION TWO -->
 *       </ul> <!-- END CONTENT -->
 *       
 *   </div>
 *
 ******************************************************************************/

.cf-ui.toggle {
    
    height: 42px;
    overflow: hidden;
    cursor: pointer;
    
}

.cf-ui.toggle * {
    
    display: block;
    position: relative;
    margin: 0px;
    padding: 0px;
    
}

.cf-ui.toggle > ul {
    
    width: 100%;
    height: 100%;
    
    z-index: 1;
    
}

.cf-ui.toggle > ul > li {
    
    width: 50%;
    height: 100%;
    float: left;
    
    font-size: 16px;
    font-weight: 400;
    font-family: "Lucida Grande";
    text-align: center;
    text-shadow: 0 1px 0 #578D0A;
    line-height: 40px;
    color: #fff;
    
}

.cf-ui.toggle > ul > li.left {
    
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-color-green.png') repeat-x 0 1px;
    
}

.cf-ui.toggle > ul > li.right {
    
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-color-grey.png') repeat-x 0 1px;
    
}

.cf-ui.toggle > div {
    
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    
}

.cf-ui.toggle > div > div.left {
    
    position: absolute;
    top: 0px;
    left: 0px;
    width: 5px;
    height: 42px;
    background: #fafafa;
    z-index: 2;
    
}

.cf-ui.toggle > div > div.left > div {
    
    width: 100%;
    height: 100%;
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-left.png') no-repeat;
    
}

.cf-ui.toggle > div > div.right {
    
    position: absolute;
    top: 0px;
    right: 0px;
    width: 5px;
    height: 42px;
    background: #fafafa;
    z-index: 2;
    
}

.cf-ui.toggle > div > div.right > div {
    
    width: 100%;
    height: 100%;
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-right.png') no-repeat;
    
}

.cf-ui.toggle > div > div.fill {
    
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0px;
    z-index: 1;
    
}

.cf-ui.toggle > div > div.fill > div.left {
    
    position: absolute;
    top: 0px;
    left: 0px;
    width: 37.5%;
    height: 100%;
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-fill-mask.png') repeat-x;
    
}

.cf-ui.toggle > div > div.fill > div.right {
    
    position: absolute;
    top: 0px;
    right: 0px;
    width: 37.5%;
    height: 100%;
    background: url('/images/ui/toggle/cloudflare-ui-toggle-fill-mask.png') repeat-x;
    
}

.cf-ui.toggle > div > div.fill > div.middle {
    
    position: absolute;
    top: 0px;
    left: 37.5%;
    right: 37.5%;
    height: 100%;
    
}

.cf-ui.toggle > div > div.fill > div.middle > div.left {
    
    position: absolute;
    top: 0px;
    left: 0px;
    width: 3px;
    height: 100%;
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-fill-left.png');
    
}

.cf-ui.toggle > div > div.fill > div.middle > div.middle {
    
    position: absolute;
    top: 0px;
    left: 3px;
    right: 3px;
    height: 100%;
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-fill-middle.png');
    
}

.cf-ui.toggle > div > div.fill > div.middle > div.right {
    
    position: absolute;
    top: 0px;
    right: 0px;
    width: 3px;
    height: 100%;
    background: url('/media/images/ui/toggle/cloudflare-ui-toggle-fill-right.png');
    
}

/*******************************************************************************
 *
 * Widget: CloudFlare UI Dashboard
 *
 ******************************************************************************/

div.cf-ui.dashboard {
    
    display: block;
    position: relative;
    margin: 0;
    padding: 4px;
    
}

div.cf-ui.dashboard > ul {
    
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    
    width: 100%;
    height: 100%;
    
    list-style: none;
    
}

div.cf-ui.dashboard > ul > li {
    
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    clear: none;
}

div.cf-ui.dashboard > ul > li.module {
    
    margin: 4px;
    
}

div.cf-ui.dashboard > ul > li.module.placeholder {
    
}

/*******************************************************************************
 *
 * Widget: CloudFlare UI Generic Dashboard
 *
 ******************************************************************************/

div.cf-ui.dashboard.generic {
    
    background: #f7f7f7;
    
}

div.cf-ui.dashboard.generic > ul > li.module {
    
    border: 1px solid #d9d9d9;
    background: #ffffff;
    
}

div.cf-ui.dashboard.generic > ul > li.placeholder {
    
    border: 1px solid #7ac5fb;
    background: #f2f9ff;
    
}

/*******************************************************************************
 *
 * Widget: CloudFlare UI Dashboard Module
 *
 * Structure: 
 *
 *  <div class="cf-ui dashboard-module">
 *                                    
 *      <div class="head">
 *          <div class="hit"></div> <!-- .hit -->
 *          <div class="title">Hello, Module!</div> <!-- .title -->
 *      </div><!-- .head -->
 *      
 *      <div class="overlay">
 *          <div class="background scale9">
 *              <div class="top">
 *                  <div class="left"></div>
 *                  <div class="middle"></div>
 *                  <div class="right"></div>
 *              </div>
 *              <div class="center">
 *                  <div class="left"></div>
 *                  <div class="middle"></div>
 *                  <div class="right"></div>
 *              </div>
 *              <div class="bottom">
 *                  <div class="left"></div>
 *                  <div class="middle"></div>
 *                  <div class="right"></div>
 *              </div>
 *              <img src="/images/ui/module/module-background-center.png" width="100%" height="100%" />
 *          </div> <!-- .background.scale9 -->
 *          <div id="DashboardModuleLoaderID"></div>
 *      </div> <!-- .overlay -->
 *      
 *      <div class="content">
 *          <div class="background scale9">
 *              <div class="top">
 *                  <div class="left"></div>
 *                  <div class="middle"></div>
 *                  <div class="right"></div>
 *              </div>
 *              <div class="center">
 *                  <div class="left"></div>
 *                  <div class="middle"></div>
 *                  <div class="right"></div>
 *              </div>
 *              <div class="bottom">
 *                  <div class="left"></div>
 *                  <div class="middle"></div>
 *                  <div class="right"></div>
 *              </div>
 *              <img src="/images/ui/module/module-content-background-center.png" width="100%" height="100%" />
 *          </div> <!-- .background.scale9 -->
 *          <div class="body"></div> <!-- .body -->
 *      </div> <!-- .content -->
 *      
 *      <div class="background scale9">
 *          
 *          <div class="top">
 *              <div class="left"></div>
 *              <div class="middle"></div>
 *              <div class="right"></div>
 *          </div>
 *          <div class="center">
 *              <div class="left"></div>
 *              <div class="middle"></div>
 *              <div class="right"></div>
 *          </div>
 *          <div class="bottom">
 *              <div class="left"></div>
 *              <div class="middle"></div>
 *              <div class="right"></div>
 *          </div>
 *          <img src="/images/ui/module/module-background-center.png" width="100%" height="100%" />
 *      </div> <!-- .background.scale9 -->
 *              
 *  </div> <!-- .cf-ui.dashboard-module -->
 *
 ******************************************************************************/

div.cf-ui.dashboard-module {
    
    width: 200px;
    height: 100px;
    
}

div.cf-ui.dashboard-module.small {
    
    width: 404px;
    height: 304px;
    
}


div.cf-ui.dashboard-module > div.overlay {
    
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 4;
    
}

div.cf-ui.dashboard-module.small > div.overlay {
    
}

div.cf-ui.dashboard-module > div.content {
    
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 3;
    
}

div.cf-ui.dashboard-module > div.head {
    
    position: absolute;
    top: 0px;
    left: 0px;
    height: 44px;
    width: 100%;
    z-index: 5;
    cursor: pointer;
}


div.cf-ui.dashboard-module > div.head > div.title {
    
    font-size: 16px;
    font-weight: 400;
    font-family: "Lucida Grande";
    line-height: 40px;
    color: #606060;
    margin: 2px 14px;
    
}

div.cf-ui.dashboard-module.loading > div.head > div.title {
    
    color: #afafaf;
    
}

div.cf-ui.dashboard-module > div.content > div.body {
    
    display: block;
    position: absolute;
    
    top: 44px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    
    overflow: auto;
    
}

div.cf-ui.dashboard-module > div.background.scale9 {
    
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.top {
    
    height: 6px;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.center {
    
    top: 6px;
    bottom: 6px;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.bottom {
    
    height: 6px;
    
}

div.cf-ui.dashboard-module > div.background.scale9 div.left {
    
    width: 6px;
    
}

div.cf-ui.dashboard-module > div.background.scale9 div.middle {
    
    left: 6px;
    right: 6px;
    
}

div.cf-ui.dashboard-module > div.background.scale9 div.right {
    
    width: 6px;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.top > div.left {
    
    background: url('/images/ui/module/module-background-tl-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.top > div.middle {
    
    background: url('/images/ui/module/module-background-top.png') repeat-x;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.top > div.right {
    
    background: url('/images/ui/module/module-background-tr-corner.png') no-repeat;
    
}


div.cf-ui.dashboard-module > div.background.scale9 > div.center > div.left {
    
    background: url('/images/ui/module/module-background-left.png') repeat-y;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.center > div.right {
    
    background: url('/images/ui/module/module-background-right.png') repeat-y;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.bottom > div.left {
    
    background: url('/images/ui/module/module-background-bl-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.bottom > div.middle {
    
    background: url('/images/ui/module/module-background-bottom.png') repeat-x;
    
}

div.cf-ui.dashboard-module > div.background.scale9 > div.bottom > div.right {
    
    background: url('/images/ui/module/module-background-br-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 {
    
    position: absolute;
    width: auto;
    height: auto;
    top: 42px;
    left: 5px;
    right: 5px;
    bottom: 6px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.top {
    
    height: 4px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.center {
    
    top: 4px;
    bottom: 4px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.bottom {
    
    height: 4px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 div.left {
    
    width: 4px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 div.middle {
    
    left: 4px;
    right: 4px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 div.right {
    
    width: 4px;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.top > div.left {
    
    background: url('/images/ui/module/module-content-background-tl-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.top > div.middle {
    
    background: url('/images/ui/module/module-content-background-top.png') repeat-x;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.top > div.right {
    
    background: url('/images/ui/module/module-content-background-tr-corner.png') no-repeat;
    
}


div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.center > div.left {
    
    background: url('/images/ui/module/module-content-background-left.png') repeat-y;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.center > div.right {
    
    background: url('/images/ui/module/module-content-background-right.png') repeat-y;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.bottom > div.left {
    
    background: url('/images/ui/module/module-content-background-bl-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.bottom > div.middle {
    
    background: none;
    
}

div.cf-ui.dashboard-module > div.content > div.background.scale9 > div.bottom > div.right {
    
    background: url('/images/ui/module/module-content-background-br-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 {
    
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.top {
    
    height: 6px;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.center {
    
    top: 6px;
    bottom: 6px;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.bottom {
    
    height: 6px;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 div.left {
    
    width: 6px;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 div.middle {
    
    left: 6px;
    right: 6px;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 div.right {
    
    width: 6px;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.top > div.left {
    
    background: url('/images/ui/module/module-background-tl-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.top > div.middle {
    
    background: url('/images/ui/module/module-background-top.png') repeat-x;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.top > div.right {
    
    background: url('/images/ui/module/module-background-tr-corner.png') no-repeat;
    
}


div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.center > div.left {
    
    background: url('/images/ui/module/module-background-left.png') repeat-y;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.center > div.right {
    
    background: url('/images/ui/module/module-background-right.png') repeat-y;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.bottom > div.left {
    
    background: url('/images/ui/module/module-background-bl-corner.png') no-repeat;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.bottom > div.middle {
    
    background: url('/images/ui/module/module-background-bottom.png') repeat-x;
    
}

div.cf-ui.dashboard-module > div.overlay > div.background.scale9 > div.bottom > div.right {
    
    background: url('/images/ui/module/module-background-br-corner.png') no-repeat;
    
}

/*******************************************************************************
 *
 * Widget: CloudFlare UI List
 *
 * Structure: 
 *
 ******************************************************************************/

div.cf-ui.data-list {
    
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    
}



div.cf-ui.data-list > div.viewport-container {
    
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
}

div.cf-ui.data-list > div.list-container {
    
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
    overflow: auto;
    
}

div.cf-ui.data-list > div.list-container > ul {
    
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    
    overflow: hidden;
    
    list-style: none;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport,
div.cf-ui.data-list > div.list-container > ul > li {
    
    display: block;
    position: relative;
    
    font-size: 16px;
    line-height: 16px;
    
    margin: 0;
    padding: 0;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport {
    
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    
    z-index: 2;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item {
    
    display: block;
    position: relative;
    padding: 14px 17px;
    margin: 4px 2px;
    color: #000000;
    
    background: #eeeeee;
    border: 1px solid #606060;
    
    cursor: pointer;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item {
    
    z-index: 2;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > a.hit,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > a.hit  {
    
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    
    top: 0px;
    left: 0px;
    
    background: url('/images/ui/transparent.gif');
    z-index: 1;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item.active,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item.active {
    
    background: #ffffff;
    border: 1px solid #fff;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.value,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > div.value {
    
    display: block;
    position: relative;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.buttons,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > div.buttons {
    
    display: block;
    position: absolute;
    
    top: 0px;
    right: 0px;
    
    height: 20px;
    margin: 12px;
    
    
    z-index: 2;
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.inner,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > div.inner {
    
    display: none;
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100%;
    z-index: 3;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.inner {
    
    display: block;
    z-index: 3;
    
}


div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.buttons > a,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > div.buttons > a {
    
    height: 100%;
    margin: 0 0 0 6px;
    font-size: 12px;
    line-height: 12px;
    color: #007ED9;
    background: #ffffff;
    
    font-weight: normal;
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.buttons > a:hover,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > div.buttons > a:hover {
    
    color: #e67300;
    background: #fdf5ce;
    border: 1px solid #fbcb09; 
    
}

div.cf-ui.data-list > div.viewport-container > div.viewport > div.list-item > div.buttons > a > span.ui-button-text,
div.cf-ui.data-list > div.list-container > ul > li > div.list-item > div.buttons > a > span.ui-button-text {
    
    padding: 0.2em 1em;
    
}


/*******************************************************************************
 *
 * Widget: CloudFlare UI Looking Glass
 *
 * Structure: 
 *
 ******************************************************************************/


input.cf-ui.looking-glass {
    
    
    
}

ul.cf-ui.looking-glass.menu {
    
    position: absolute;
    margin: 0;
    padding: 0;
    
}