/******************************************************************************
   PAGE STYLES
   This is for content styles, global styles that apply to the rendered
   web pages and content inside the spreadsheet
******************************************************************************/

html, body {
    margin  : 0px;
    padding : 0px;
    font    : 12px/1.7 Verdana,Tahoma,sans-serif;
}

body {
    height:100%;
}

table {
    width  : 100%;
    height : 100%;
}

h1 { font-size: 220%; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 100%; }
h6 { font-size: 90%; }

h1,h2,h3,h4,h5,h6 {
    font-weight:normal;
    margin : 0px 0px 8px 0px;
}

p {
    margin: 0 0 1.5em 0;
}
ol, ul {
    margin:0 0 1.5em 0;
}
li {
    margin-left:1em;
}
a img {
    border: 0px;
}
a {
    color: inherit;
}

a:link, a:visited { text-decoration: none; border-bottom: 1px dashed;}
a:hover { color: #3f3f3f;}

a img:hover { opacity: 0.6;}

#editloggedin a:link, #editloggedin a:visited {
    color: darkorange;
}
#editloggedin a:hover, a:hover  { color: #3f3f3f;}


td {
    vertical-align:top;
}
hr {
    margin-top:0px;
}
body {
    overflow:auto;
    position:relative;
}

.hn_em {
         font-weight: bold;
         color: black;
}

.hntext, iframe {
    height:100%;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.hninput, .hn-webcontrol, .hn-maprows, .hn-mapsheet, .hn-mapcustom, .hn-loadtemplate, .hnfixedval {
    font-size:inherit;
    width:100%;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.ctrlbox {
    background:#EEE;
    background: -webkit-gradient(linear, 0 40%, 0 70%, from(#F9F9F9),
                                 to(#E3E3E3));
    background: -moz-linear-gradient(center top , #F9F9F9,
                                     #E3E3E3) repeat scroll 0 0 transparent;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius:0px 0px 4px 4px;
    border:1px solid #AAA;
    z-index: 10000001;
}

#showhidecols {
    color: darkorange;
    cursor: pointer;
}

#hn_passwordform
{
  display: none;
  }

#hn_passwordform p, #hn_passwordform .button, #hn_passwordform div
{
  font: 9px/1.2 Verdana,Tahoma,sans-serif;
  color: #777;
 }

#hn_passwordform p
{
  margin: 0;
  }

#hn_reset_pwd
{
  cursor: pointer;
  border-bottom: 1px dashed;
  }

#editspreadsheet {
    position:fixed;
    font-size:10px;
    top:0px;
    right:10px;
    margin-right:20px;
    display:none;
    text-align:center;
    border-top-width:0px;
    opacity:0.8;
}

#editspreadsheet a {
    color:darkorange;
}

#editspreadsheet.active {
    opacity:1;
}

#editspreadsheet ul {
    padding-left:15px;
    margin:0px 0px 0px 0px;
}

#editmenu {
    text-align:left;
    display:none;
    padding:6px;
    position:absolute;
    left:-214px;
    top:0px;
    width:200px;
    border-width:0px 1px 1px 1px;
}

#email, #pass {
    width: 147pt;
}

#editanon {
            color:#999;
}

#editanon, #editloggedin {
                           display:none;
}

.formrow {
    margin:5px 0px;
}

#submit {
  width: 70px;
}

#loginfeedback { color:red; }

div#outer {
    position:relative;
    margin: 0px auto;
}
div.hn_inner {
    position: relative;
}
div.hn_inner > div {
    position: absolute;
    overflow: hidden;
}

input[type=submit].hninput .button, input[type=submit].hn-webcontrol .button {
    background:#EEE;
    -webkit-border-radius:3px 3px 3px 3px;
    -moz-border-radius:3px 3px 3px 3px;
    background: -webkit-gradient(linear, 0 40%, 0 70%, from(#F9F9F9),
                                 to(#E3E3E3));
    background: -moz-linear-gradient(center top , #F9F9F9,
                                     #E3E3E3) repeat scroll 0 0 transparent;
    border:1px solid #BBBBBB;
    margin:0 0px 0 0;
    outline:medium none;
    padding:3px 6px;
    text-align:center;
    /* vertical-align:middle; */
    white-space:nowrap;
}

input[type=submit].hninput:hover {
    cursor:pointer;
    border:1px solid #939393 !important;
}

#cover, #cover2 {
    position   : fixed;
    background : #000;
    opacity    : 0.75;
    top        : 0px;
    left       : 0px;
    width      : 100%;
    height     : 100%;
    z-index    : 10000000;
}

/* for light cover drop the opacity */
#lightcover {
    position   : fixed;
    background : #000;
    opacity    : 0.1;
    filter: alpha (opacity=10);
    top        : 0px;
    left       : 0px;
    width      : 100%;
    height     : 100%;
    z-index    : 10000000;
}

#dialog {
    position    : fixed;
    left        : 50%;
    width       : 200px;
    margin-left : -113px;
    top         : 100px;
    background  : white;
    border      : 5px solid #666;
    z-index     : 10000002;
    padding     : 8px;
}

#closedialog {
    font-weight:bold;
    margin-top:10px;
}

#editlogin {
    background:url(/img/layout_edit.png) no-repeat;
    text-indent:-99999px;
    width:20px;
    height:20px;
    outline:none;
    float:right;
    display:block;
    color:blue;
    margin:8px 3px;
}

.radio {
         clear: both;
}

.radio label {
               float: left;
               }

.radio input {
               vertical-align:middle;
               float: right;
}

#columnsconfig {
  padding: 0px 5px 5px 5px;
}


.configrow {
   text-align: right;
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

.colhider {
   top: 6px;
}

label {
}

.configrow input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    overflow: hidden;
}

#forgotten_pwd {
    margin-left: 5px;
}

.hn_overflow {
               min-height: 100%;
               overflow: auto;
               clear: both;
 }

.inlineform {
    background: url(/hypernumbers/sprite.png) -64px -1px;
    z-index:    9999;
    position:   absolute;
    left:       0px;
    top:        0px;
    height:     5px;
    width:      5px;
}

.hn-overflow {
    background: url(/hypernumbers/sprite.png) -84px -1px;
    z-index:    999999;
    position:   absolute;
    float:      right;
    bottom:     0px;
    right:      0px;
    height:     8px;
    width:      5px;
}

#expandbackground, #ctrlpanel {
   background: #EEE;
   background: -webkit-gradient(linear, 0 40%, 0 70%, from(#F9F9F9),
                                 to(#E3E3E3));
   background: -moz-linear-gradient(center top , #F9F9F9,
                                     #E3E3E3) repeat scroll 0 0 transparent;
}

#expandbackground {
   padding:       9px 2px 0px 2px;
   border-bottom: 1px solid #999999;
    -moz-border-radius:8px 0px 0px 0px;
    -webkit-border-radius:8px 0px 0px 0px;
}

#addnewgroupbutton {
   left:    40px;
}

#newgroupfeedback, #newuserfeedback {
   text-align: center;
}

#permstable {
   display: none;
}

#permstablelayout {
   margin: 0px 5px 3px 5px
}

#permstablelayout p {
   margin: 0px;
}


#invitecolleague {
   width: 115px;
}

.warning {
   font-size:  90%;
   text-align: center;
   font-style: italic
}

#emailforgroup {
   margin: 0px 0px 4px 0px;
}

#administrator {
   width:    10px;
   position: relative;
   top:      3px;
}

#advusers {
  padding: 0px 3px 0px 10px;
  display: none;
  width:   300px;
}

#invitecolleague {
    width: 200px
}

#addcolleaguebutton {
    background: orange;
    background: -webkit-gradient(linear, 0 40%, 0 70%, from(gold),
                                 to(orange));
    background: -moz-linear-gradient(center top , gold,
                                     orange) repeat scroll 0 0 transparent;
    margin:    5px 0px 0px 25px;
    width:      150px;
}

#newcolleaguefeedback {
   margin: 0px;
}

#advusers input {
   width:     288px;
}

#advusers p {
   margin-top:    5px;
   margin-bottom: 0px;
}

#advusers span {
   padding: 10px 0px 0px 0px;
}

#advperms {
   padding: 0px 5px 0px 10px;
   display: none;
   width:   190px;
}

#advperms tr, #advperms td {
   height: auto;
}

#advperms td > p {
   text-align: right;
   margin:     0px;
}

#advperms input {
   position: relative;
   top:      -3px;
}

#advusers textarea {
   height:   60px;
   overflow: auto;
   margin:   0px 3px 0px 5px;
}

#advperms, #advusers, #permstable p {
    color:#666;
}

#templateslist, #hn_uf_select {
  background-color: #ffffff;
  color:            #555555;
  width:            98px;
}

#newusermsg {
  width: 170px;
}

#groups {
  background-color: #fff;
  float:            right;
  width:            110px;
  padding:          0px 10px 0px 0px;
  overflow:         auto;
  scrollbar-base-color: #ddd;
  scrollbar-arrow-color: #666;
}

#groups option {
   font-size: 80%;
   color:     #777777;
}

#addnewuserbutton {
   position: relative;
   top:      10px;
   left:     95px;
   width:    auto !important;
   margin:   0px 0px 5px 0px;
}

#addgroupmenu {
    position:        fixed;
    padding:         2px 0px 2px 0px;
    text-align:      right;
    background:      #ffffff;
    border-left:     1px solid #aaaaaa;
    border-top:      1px solid #999999;
    border-right:    1px solid #666666;
    border-bottom:   1px solid #666666;
    -moz-box-shadow: 2px 2px 4px #AAA;
    -webkit-box-shadow: 2px 2px 4px #AAA;
    display:         none;
    z-index:         10000006;
}

#addgroupmenu div {
    padding:       0px 5px 0px 5px;
    border-bottom: 1px solid #eee;
}

#addgroup {
            width: 63px;
            }

#addgrouptext {
    font-size: 80%;
    color:     #666666;
    position: relative;
    top:      -3px;
 }

#addgroup span {
    position:  relative;
    margin:    0px 2px 0px 0px;
}

#addgroupicon {
    background: url(/hypernumbers/sprite.png) -72px -1px;
    height:     9px;
    width:      5px;
    padding:    0px 5px;
}

#addgroups h3 {
   color: #666;
   padding: 5px 0px 0px 0px;
}

#newgroup {
            width: 180px
            }

#showadvperms, #showbasicgroups, #showadvusers {
   font-size:   80%;
   font-weight: bold;
   color:       darkorange;
   float:       left;
   padding:     0px 2px 0px 2px;
   border       : 1px solid #dddddd;
   border-top   : 0px;
   background   : #eeeeee;
    -moz-border-radius-bottomleft:2px;
    -moz-border-radius-bottomright:2px;
    -webkit-border-radius-bottomleft:2px;
    -webkit-border-radius-bottomright:2px;
   margin: 0px 0px 4px 4px;
}

.hn_padded, #clinput {
             padding: 1px 1px 1px 1px;
             }

.inline {
   -moz-border-radius: 2px 2px 2px 2px;
   -webkit-border-radius: 2px 2px 2px 2px;
   /*margin: 1px;*/
   border: 1px solid #ddd;
   /*padding: 0px 1px 0px 1px;*/
}

#clinput div {
   position: static;
   padding: 0px 1px 0px 1px;
   background-color: white;
   -moz-box-sizing: content-box;
   border: 1px solid orange;
   outline: none;
}

.floatleft {
   float: left;
}

.floatright {
   float: right;
}

.clear {
   clear: both;
}

.hn_demopage
{
  background  : #fff;
  font        : 14px Verdana,Tahoma,sans-serif;
  font-style  : italic;
  }

.hn_demopage iframe
{
  background: #fff;
  }

.hn_demopadding
{
  padding: 0px 7px 0px 7px;
  }

.hn_demointro
{
  padding: 5px 10px 0px 10px;
 }

.hn_demointro, .hn_demoblurb {
  color: #666;
 }

#hn_demobreakout {
                   font-size: 120%;
                   font-weight: bold;
                   color: #f88017;
 }

#hn_spreadsheet, #hn_wikipage, #hn_webpage, .hn_preview
{
  border: 4px solid #666;
  margin: 2px;
  }

.hn_html_preview
 {
  font-size:        60%;
  font-weight:      bold;
  background-color: #EEE;
  color:            #777;
  margin:           2px;
  padding:          1px 1px 1px 4px;
  -moz-border-radius:    4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border:           1px solid #E99;
  }

#hn_newpageform, #hn_saveastemplateform, #hn_douploadform, #hn_deletepageform
{
  padding: 3px 3px 5px 3px;
  float:left;
  height: 70px;
  -moz-border-radius:    4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border:  1px solid #aaa;
  background-color: #efefef;
  margin:  0px 2px 5px 0px;
}

#hn_buttonpanel {
                  padding: 2px 0px 0px 2px;
                  }

.hn_pagesbuttonbox {
                     padding: 0px 2px 0px 2px;
                     width: 99px;
                     float: left;
                }

#hn_pagesheader {
    padding: 0px 0px 0px 12px;
    font-weight: bold;
    text-align:  left;
}

.hn_debug_z {
              -moz-border-radius: 4px 4px 4px 4px;
              -webkit-border-radius: 4px 4px 4px 4px;
              border : 3px solid #ddf;
              background-color  : #fff6f6;
              margin: 1px;
              padding: 4px;
              overflow: auto;
              height: 202px;
              color: #666;
              }

.hn_debug_z div, .hn_debug_z table tr td {
                 font: 12px/1.7 Courier, monospace;
                 font-weight: bold;
                 }

.hn_debug_z table {
                       height  : auto !important;
                       display : block;
                       }

.hn_debug_hd {
               font-weight: bold;
               }

.hn_debug_top {
                font-size : 14pt;
                color: #444;
                text-decoration: underline;
               }

.hn_inlineselect {
                   width: 100%;
                   height: 20px;
                   font-size: 95%;
                   }

#ctrlpanel a:link, #ctrlpanel a:visited { border-bottom: none }

.hn_spark {
            padding: 2px 0px 0px 0px
            }