/* instacalc.css -- (c) 2007 Kalid Azad, instacalc.com */

* { padding: 0px; margin: 0px;}

.tab-selected{
 background: url('../images/tab-selected.gif') no-repeat;
 width: 130px;
 height: 30px;
 text-align: center;
 xpadding-top: 4px;
 xpadding-bottom: 0px;
 vertical-align: bottom;
 border: 1px solid red;
}

.tab-deselected{
  background: url('../images/tab-deselected.gif');
}

/* Structure */
img {
  vertical-align: middle;
  border: 0px;
}

a { 
  text-decoration: none;
  color: #0000CC;;
}

#announcements{
	position: absolute;
	top:0;
	right:0;
	padding: 5px;
	text-align: right;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #454545;
}

#content-table{
  xmargin-left: 10px;
  xmargin-right: 10px;
  background: url('../images/graphpaper3.gif');
  xborder-left: 5px solid #222;
  xborder-right: 5px solid #222;
  xborder-bottom: 3px solid #999;
}

#main-content{
  background: #fff;
}

#readdescription{
  background: #FFFFA3;
  border: 1px solid #ccc;
  padding: 5px;
}

a:visited{
  color: #0000CC;;
}

a:hover{
  text-decoration: underline;
}

.spacer {
  clear: both;
}

body { 
  font-family: verdana, arial, helvetica, sans-serif;
  width: 100%;
  background: #fff;
  xbackground: url('../images/graphpaper3.gif'); 
  xbackground: #ececec;
  min-width: 720px;
  background: #222;
  xbackground: url('../images/background-grey.png');
}

/* headers */
#header{ 
  background: url('../images/background-grey.png'); 
  padding-top: 3px; 
  padding-bottom: 0px; 
  border-bottom: 2px solid #fafafa;
  xtext-align: center;
  
  padding-top: 5px;
}

#headertable{
  xpadding-left: 40px;
}

#logocell{
  padding-bottom: 5px;
}

#header a{
  color: #F9CA69;
  xfont-size: 10px;
}

#textinput{
}

#textoutput{
  font-size: 22px;
  color: red;
}

.inputtextarea{
  font-size: 22px;
  font-family: verdana,arial,helvetica,sans-serif;
  overflow-y: hidden;
}

.tagline{
  color: white;
  font-size: 10px;
}

/* body */

#content{
  background: url('../images/graphpaper3.gif'); 
  padding-left: 10px;
}



.logotext{
  color: #fff;
  font-size: 12px;
}

#logoarea{
  padding-right: 20px;
  padding-left: 30px; 
  padding-top: 30px;
  text-align: middle; 
}

.header{
  color: #FFF;
}

.tagbox{
  padding-left: 10px;
}

.highlight{
  color: #6F9DBE;
}

#header .highlight{
  font-size: 0.7em;
}

.tagnumber {
  font-size: 20px;
  color: #F9CA69;
  color: #6F9DBE;
  
  border-bottom: 1px solid;
  margin-bottom: 5px;
  /*  display: table; */
}

.taglinetext{
  font-size: 12px;
  color: #444;
  color: #ccc;
  padding-left: 5px;
}

/* styles for navigation bar */
#navbar-main {
  background:#fafafa; 
  border-bottom: 1px solid #ccc; 
  xpadding-left: 10px; 
  xpadding-right: 10px; 
  overflow: hidden;
  font-size: 0.8em;
  padding-top: 3px;
  padding-bottom: 3px;
}

#navbar-icons{
  float: left;
  border-right: 1px solid #ccc;
  padding-right: 10px;
  padding-left: 10px;
  xwidth: 200px;
}

#navbar-icons img{
  margin-right: 3px;
}

/* dropdown menu of commands */
#navbar-commands{
  float: left;
  padding-left: 10px;
  xborder-right: 1px solid #ccc;
  padding-right: 10px;
  overflow: hidden;  
}

#command-list{ 
  float: left;
  width: 300px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-right: 1px solid #ccc;
 }

.command-help { 
  padding-left: 3px;
}

.command-item{
  border: 1px solid #ccc;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
  xtext-align: center;
  margin-right: 1px;
  margin-left: 1px;
  background: #fff;
}

.command-item:hover{
  background: #F9CA69;
}


.divider{
  xborder-left: 1px solid #ccc;
  color: #ccc;
  padding-right: 3px;
  padding-left: 3px;
  text-align: left;
  display: inline;
}

.command-title{
  xborder: 1px solid #ccc;
  xpadding: 3px;
}

.command-title:hover{
  background: #F9CA69;
}

/* links to open sidebar panels */
#navbar-sidebarlinks{
  float: right;
}

.sidebarlink a{
  border: 1px solid #ccc;
  margin-top: 30px;
  xpadding: 1px;
  xpadding-top: 1px;
}

#cellrows a, #navbar a:visited {
  color: #0000CC;
}

/* description field */
#description{
  color: #000;
  xborder-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  padding-left: 0px;
  xbackground: #fff;
  font-size: 11px;
}

#descriptiontextarea{
  font: 11px verdana, arial;
}

/* Sidebar */

.sidebar{
  border: 1px solid #ccc;  
  margin: 5px;
  padding: 10px;
  text-align: left;
  display: block;
  visibility: visible;
  background: #fff; 
  position:absolute;
  right:0;
  top:100;
}

.sidebartitle{
  font-size: 18px;
  xcolor: #F9CA69;
  color: #6F9DBE;
  padding-top: 5px;
}

.sidebartext{
  font-size: 12px;
}

.close a{
  float: right;
  font-size: 10px;
  color: red;
  border: 1px solid red;
  padding: 2px;
}

.colorBox{
  width: 20px;
  height: 10px;
  border: 1px solid #333;
  /* display: table; */
  float: left;
  margin-left: 5px;
}

/* Cell Area  */ 

#cellrows{
  /*   margin-right: auto; */
  margin-left: 10px;
  padding-top: 0px;
  overflow: hidden;
}

/* table column widths */
.col0 {
  width:25px; 
  text-align: center;
  height: 30px;
}

.col1 {
  width: 380px;
  height: 30px;

  font-size: 18px;
  font-family: verdana,arial,helvetica,sans-serif;
}
.col2 {
  padding-left: 10px;
  overflow: hidden;}

.number {
  display: block;
  float: left;
  width: 15px;
  font-size: 10px;
  text-align: center;
  padding-right: 5px;
  padding-top: 5px;
  color: #888;
}

/* status areas */
#statusdiv{
  text-align: left;
  padding-left: 30px;
  /*padding-top: 60px; */
  font-size: 12px;
  padding-top: 30px;
  color: #333;
}

.imageexamples{
  /* border: 1px solid #aaa; */
  padding-right: 20px;
  margin: 4px;
  border: 0px;
}

#siderbar img{
  border: 0px;
}

.container{
  width: 100%;
  clear: both;
}

#statusarea{
  padding-left: 25px;
  padding-bottom: 10px;
  padding-top: 0px;
  font-size: 10px;
}

.tableheader {
  border-bottom: 0px solid #aaa;
  text-align: left;
  font-size: 10px;
  padding-left: 5px;
  color: #999;
  font-weight: 100;
}

.tablefooter, .tablefooter a{
  font-size: 10px;
  font-weight: 100;
  text-decoration: none;
}

/* Cells: Inputs, Outputs, Titles and Comments */ 

.inputArea { 
  /*   margin: 2px; */
  float: left;
  border: 1px solid #888;
  width: 100%;
  font-size: 18px;
  font-family: verdana,arial,helvetica,sans-serif;
}

.inputArea:hover, .titleArea:hover {
  background-color:#fff7c0;
}

.inputAreaSelected{
  /*   margin: 2px; */
  font-size: 18px;
  font-family: verdana,arial,helvetica,sans-serif;

  float: left;
  /* border: 1px dotted #3333AA; */
  border: 1px solid #888;
  background: #fff7c0;
  width: 100%;
}

.titleArea{
  font-size: 18px;
  padding-right: 20px;
  text-align: right;
  margin-right: 0px;
  /* border: 1px solid green; */
  width: 100%;
}

.outputArea, .outputArea a {
  font-family: verdana,arial,helvetica,sans-serif;
  font-size: 18px;
  color: red;
  text-decoration: none;
  font-weight: 100;
  display: inline;
  /* border: 1px solid blue; */
  width: 250px;
}

.outputArea { cursor: hand }
.outputArea:hover, .outputComment:hover {background-color:#EEE;}

.outputComment, .outputComment a {
  font-family: verdana,arial,helvetica,sans-serif;
  font-size: 18px;
  color: green;
  text-decoration: none;
  font-weight: 100;
  /*            border: 1px solid red; */
  display: inline;
}

.outputCommentSpacer{
  padding-left: 10px;
}

.selected { 
  background: rgb(221, 238, 255) none repeat scroll 0% 50%;
}

#ads{
  border-bottom: 1px solid #aaa;
  background: #ececec;
}

#status {
  color: #999;
  xborder-bottom: 1px dotted red;
  margin: 2px;
}

/* footers  */
#footer {
  xheight: 30%; 
  xheight: 200px; 
  background: #222; 
  color: white;
  padding-left: 5px;
}

.footertext a, .footertext a:visited{
  color: #f9ca69; /* light orange */
}

#footerlinks{
  padding-top: 5px;
  display: table;
}

.footertext{
  font-size: 11px;
  text-align: center;
  color: #ddd;
}

/* Javascript menu */
.popitmenu{
  position: absolute;
  background-color: white;
  border:1px solid black;
  font: normal 10px Verdana;
  line-height: 18px;
  z-index: 100;
  visibility: hidden;
  text-align: left;
  width: 140px;
}

.popitmenu a, .popitmenu a:visited{
  text-decoration: none;
  color: black;

  padding-left: 6px;
  display: block;
}

.popitmenu a:hover{ /*hover background color*/
  background-color: #F9CA69;
}


.draggable
{
  cursor: move;
  position: absolute;
}

/* reference */
.reference-default {
  font-size: 10px;
}

.reference-result {
  color: red;
}
.reference-comment {
  color: green;
}
.reference-example {
  color: #333333;
}
.reference-topic {
  font-style: italic;
}

.reference-bold {
  font-style: strong;
}

table.reference {
  border-width: thin thin thin thin;
  border-spacing: 5px;
  border-style: none none none none;
  border-color: gray gray gray gray;
  border-collapse: collapse;
  background-color: white;
}
table.reference th {
  border-width: 1px 1px 1px 1px;
  padding: 3px 3px 3px 3px;
  xborder-style: dotted dotted dotted dotted;
  border-style: none none none none;
  border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204);
  background-color: white;
  moz-border-radius: 0px 0px 0px 0px;
}
table.reference td {
  border-width: 1px 1px 1px 1px;
  padding: 3px 3px 3px 3px;
  border-style: dotted dotted dotted dotted;
  border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204);
  background-color: white;
  moz-border-radius: 0px 0px 0px 0px;
}

/* footer content */

/* info panel: tour, etc. */
#info-panel{ 
  background:#222;
  color: white;
  padding-top: 5px;
  xheight: 30%;
  padding-left: 5px;
  font-size: 0.9em;
  xheight: 500px;
  font-size: 0.8em;
}

#info-panel .highlight{
  xfont-size: 1.8em;
}

#examples a, #examples a:visited{
  color: red;
  color: #f9ca69; /* light orange */
}
#savepermalink{
  border: 1px solid #666;
  padding: 5px;
  background: #dadafa;
}

#savepermalink{
  xtext-decoration: underline;
}

.footer-title{
  font-size: 1.8em;
  xbackground: #333;
  xdisplay: inline;
  text-align: center;
  color: #6F9DBE;
  border-bottom: 1px solid #444;
  margin: 5px;
}

#info-panel b{
  xborder: 1px solid red;
  xbackground: #f9ca69;
  xbackground: #fff7c0;
  xborder: 1px solid #fff7c0;
  color: green; 
  color: #6F9DBE; 
  xpadding: 1px;
}

.content{
 padding-left: 5px;
 padding-right: 5px;
 color: #ccc;
}

.content-middle{
  padding-left: 5px;
  padding-right: 5px;
  height: 450px;
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  margin-left: 5px;
  margin-right: 5px;
}

#info-panel a, #info-panel a:visited{
  color: #F9CA69;
}

.content ul{
  padding-left: 20px;
}

#logo{
  padding-left: 15px;
}

#header{
  background: #333;
}

#user-panel{
  background: #fafafa;
  height: 95%;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: left;
  padding-left: 5px;
  font-size: 0.8em;
  width: 200px;
}

.links td{
  font-size: 0.6em;
  text-align: right;
}

.links input{
  font-size: 0.9em;
  font-family: courier new, courier;
}

#user-panel h2{
  font-size: 1.2em;
  font-weight: bold;
  width: 95%;
  border-bottom: 1px solid #ccc;
  display: block;
  background: #333;
  color: #fafafa;
  padding-left: 5px;
}

.panel{
  border-bottom: 1px solid #ccc;
  background: #fafafa;
  padding: 5px;
}