/* TODO: separate into a store & editor stylesheets: the editor html page will reference both*/

/*body,td,a,div,.p{font-family:arial,sans-serif; font-size:11pt;}*/
body {font-family:arial,sans-serif; font-size:11pt;background-color:#FFF}
div,td{color:#000000}
a:link,.w,.w a:link{color:#0000cc}
a:visited{color:#551a8b}
a:active{color:#ff0000}

.bold{font-weight:bold;}

/* TODO: this doesn't seem to be used anywhere */
.footer{font-size:x-small;}

/* Default selector for drop targets.  Can be overridden */
/*.drop-target-on {border:solid;}*/

.gallery {border: 8px solid #C3D9FF; width: 100%;}
.gallery .heading-panel {background-color: #C3D9FF; border-bottom-color:darkgray;border-bottom-width:1px;border-bottom-style:solid;}
.gallery .heading-panel .heading-text {font-weight:bold; color:#597bb3;}
.gallery .heading-panel .sorting-controls {font-size:smaller;}
.gallery-item {width:120px;padding-left:5px;padding-right:5px;border-left:hidden;}
.offscreen-image {visibility: hidden;}
/*.offscreen-image {top: 500;}*/
/*.gallery-item .img-on {width:110px;height:110px;max-height:110px;max-width:110px;cursor:pointer;}*/
/*.gallery-item .img-off {width:100px;height:100px;}*/
.gallery .drop-target-on {border-left:solid; }

.item .title {padding:5px;font-size:large;font-weight:bold;}
.item .price-prompt {padding:5px;}
.item .price {padding:5px;}
.item .image {padding:5px;}
.item .addquantity-prompt {padding:5px;}
.item .attributes {padding: 5px 0 0 0;}
.item .attributes .attribute {padding: 0 5px 0 0;}

/* editor styles */
.item .settings {background-color: #eee;}
.item .settings .header {font-weight:bold;background-color:#ccc;}

/*.item .settings .cat-list .section-title {font-weight:bold;}*/
.item .settings .cat-list .cat-list-entry {}
.item .section-title {font-weight:bold;}


/*.editor-control-link {padding-left:5px;}*/
.inline-editor .prompt {padding-right:10px}
.inline-editor .error {color:red;}
.inline-editor .display-element {border:solid 2px transparent; _border-color:#fff;
/*_border-color:#123456; _filter:chroma(color=#123456); The IE border chroma filter won't work unless the size is explicitly specified */
}
.inline-editor .display-element-on {border-color:#555}

.cart {background-color:#9eb3d6;width:100%;}
.cart .contents {background-color:#aec3e6;width:100%;}
.cart.drop-target-on {border:solid;}
.cart .trash {width:64px;height:64px; border: solid; border-width:5px; border-color:transparent;
  _border-color:#123456; _filter:chroma(color=#123456);/* Fix for IE to make border color transparent -*/}
.cart .trash.drop-target-on {border: solid; border-width:5px; border-color: #000000;}

/* Without display:inline, IE renders forms with a "huge unneccessary gap" at the bottom */
.google-checkout-form {display:inline;}

.hint-text {font-style:italic;font-size:small;}


.dragged {/*width:inherit;height:inherit; /* height/width, or display:block or inline-block, must be set in IE to use filers - i.e. the element must have layout (http://msdn2.microsoft.com/en-us/library/ms533776.aspx) */
  display:block; /* display:inline-block; doesn't work here because it makes the item have an offset width spanning the entire cart while dragging */
  opacity: .5;  /* FF-compatible */
  filter: alpha(opacity=50); /* IE-compatible */
}

.categories {/* background-color: #FFFFFF; removed to make transparent */}
.categories .gwt-Tree .gwt-TreeItem {}
.categories .gwt-Tree .gwt-TreeItem-selected {background-color:#C3D9FF;}
.categories .drop-target-on {border-top:solid}
.categories .item-drop-target-on {border:solid}
.categories .categoryEditor {width: 200px;}

img {display:block;}

.accountMenuBar {margin-bottom: 10px;}
.accountMenuBar .username {font-weight:bold;}
.editor-menu-bar {background-color: #EEEEEE; margin-bottom:10px;}

.theme-editor {background-color: #EEE; margin-bottom: 10px;}
.theme-editor .heading {font-weight: bold;}
.theme-editor .left-column {background-color: #DDD;}
.theme-editor .unspecified {font-style:italic;}

.about {font-size:85%; width: 100%; text-align:center; margin-top:20px;background-color: #EEEEEE;}

/* These styles were causing IE6 to crash */
/*.ImageButton {display:block; cursor: pointer; border: solid; border-width:1px; border-color:transparent;*/
/*_border-color:#123456; _filter:chroma(color=#123456);/* Fix for IE to make border color transparent -*/}*/
/*.ImageButton-on {cursor: pointer; border: solid; border-width:1px; border-color: #000000;}*/

.ImageButton {cursor:pointer;}
/* Unable to control the opacity on IE6 when using ImageBundle  (browser crashes) */
.ImageButton-on {cursor:pointer; opacity:.5; /*filter:alpha(opacity=50);*/}

.gwl-ImageButton-On {cursor:pointer;}
.gwl-ImageButton-Off {cursor:pointer;}
/*.tk-GlassPanel {background: black; opacity: 0.2; filter: alpha(opacity=20);}*/
/*.body-GlassPanelShowing  {opacity: 0.2; filter: alpha(opacity=20);}*/

.tk-ModalDialog {border:solid; border-color:#DDDDDD; border-width:3px; position:absolute; }
.tk-ModalDialog .Caption {background-color:blue;color:white;font-weight:bold;cursor:move;}
.tk-ModalDialog-glassPanel {background: black; opacity: 0.2; filter: alpha(opacity=20);}
.tk-ModalDialog-content {background: white; opacity: 1.0; filter: alpha(opacity=100);border:solid, 1px;}
.tk-ModalDialog-dragging {}

.popupDialog-caption-text {color:white;font-weight:bold;} /** supports using a widget as a ModalDialog caption */
.popupDialog {border:solid; border-color:#DDDDDD; border-width:3px; position:absolute; }
.popupDialog-caption {background-color:blue;color:white;font-weight:bold;cursor:move;}
.popupDialog-glassPanel {background: black; opacity: 0.7; filter: alpha(opacity=70);}
.popupDialog-content {background: white; opacity: 1.0; filter: alpha(opacity=100);border:solid, 1px;}

.settings-editor .left-column {background-color:#EEEEEE;margin-right:10px;font-weight:bold;}

.previewMessage {background-color:#ffcc66;width:100%;text-align:center;}

/* General utility styles */
.padded-top-bottom { padding-top: 5px; padding-bottom: 5px; }

.bordered-panel {border:solid; border-color:#333333; border-spacing:2px; border-width:1px;}


/* Editor styles (todo: start moving them to this section) */
 .gwt-TabBar { cursor:pointer; }
 .gwt-TabBar .gwt-TabBarFirst {  }
 .gwt-TabBar .gwt-TabBarRest {  }
 .gwt-TabBar .gwt-TabBarItem { border:solid; border-color:black; border-width:1px; padding:5px; background-color:#6666ff;}
 .gwt-TabBar .gwt-TabBarItem-selected { border:solid; border-color:black; border-width:2px; padding:5px; background-color:#9999ff; font-weight:bold;}
 .gwt-TabPanel {  }
 .gwt-TabPanelBottom { border:solid; border-color:black; border-width:1px; }

.gwt-RichTextArea {
  border: 1px solid black;
  background-color: white;
}

.gwt-RichTextToolbar {
  background-color: #C3D9FF;
  padding: 2px;
}

.gwt-RichTextToolbar .gwt-PushButton-up {
  margin-right: 2px;
  border: 1px solid #C3D9FF;
}

.gwt-RichTextToolbar .gwt-PushButton-up-hovering {
  margin-right: 2px;
  border: 1px solid #C3D9FF;
  border-color: #E8F1FF rgb(157, 174, 205) rgb(157, 174, 205) rgb(232, 241, 255);
}

.gwt-RichTextToolbar .gwt-PushButton-down {
  margin-right: 2px;
  border: 1px solid #C3D9FF;
  border-color: #9DAECD rgb(232, 241, 255) rgb(232, 241, 255) rgb(157, 174, 205);
}

.gwt-RichTextToolbar .gwt-PushButton-down-hovering {
  margin-right: 2px;
  border: 1px solid #C3D9FF;
  border-color: #9DAECD rgb(232, 241, 255) rgb(232, 241, 255) rgb(157, 174, 205);
}

.gwt-RichTextToolbar .gwt-ToggleButton-up {
  margin-right: 2px;
  border: 1px solid #C3D9FF;
}

.gwt-RichTextToolbar .gwt-ToggleButton-up-hovering {
  margin-right: 2px;
  border: 1px solid #C3D9FF;
  border-color: #E8F1FF rgb(157, 174, 205) rgb(157, 174, 205) rgb(232, 241, 255);
}

.gwt-RichTextToolbar .gwt-ToggleButton-down {
  margin-right: 2px;
  background-color: #E8F1FF;
  border: 1px solid #C3D9FF;
  border-color: #9DAECD rgb(232, 241, 255) rgb(232, 241, 255) rgb(157, 174, 205);
}

.gwt-RichTextToolbar .gwt-ToggleButton-down-hovering {
  margin-right: 2px;
  background-color: #E8F1FF;
  border: 1px solid #C3D9FF;
  border-color: #9DAECD rgb(232, 241, 255) rgb(232, 241, 255) rgb(157, 174, 205);
}

.loading-message {font-style:italic; color:#666666; text-align:center;}

.tooltip,.tooltip *{display:block} /*added by javascript*/

.tooltip {width: 200px; color:#000;
  font:lighter 11px/1.3 Arial,sans-serif;
  text-decoration:none;
  text-align:center;}

.tooltip .keyword {display:inline;font-weight:bold;}
.tooltip .reference {display:inline;font-weight:bold;font-style:italic;}

/**/
/*.tooltip span.top{padding: 30px 8px 0;*/
    /*background: url(icons/bubble.gif) no-repeat top}*/
/**/
/*.tooltip b.bottom{padding:3px 8px 15px;color: #548912;*/
    /*background: url(icons/bubble.gif) no-repeat bottom}*/