.net server control is almost feature complete and functional. All .net examples...
[infodrom/rico3] / ricoClient / css / rico.css
index 66c93a7..97a7443 100644 (file)
@@ -4,7 +4,7 @@
 \r
 /* LiveGrid & SimpleGrid */\r
  \r
-div.ricoLG_outerDiv {\r
+.ricoLG_outerDiv {\r
   position:relative;\r
 }\r
 \r
@@ -12,8 +12,7 @@ div.ricoLG_innerDiv, div.ricoLG_frozenTabsDiv {
   overflow:hidden;\r
   margin:0px;\r
   padding:0px;\r
-  position:absolute;\r
-  top:0px;\r
+  position:relative;\r
 }\r
 \r
 div.ricoLG_scrollDiv {\r
@@ -21,9 +20,15 @@ div.ricoLG_scrollDiv {
   position:relative;\r
 }\r
 \r
-div.ricoLG_scrollTabsDiv {\r
+div.ricoLG_scrollContainerDiv {\r
+  position:relative;\r
+}\r
+\r
+div.ricoLG_scrollTabDiv {\r
   position:absolute;\r
+  left:0px;\r
   top:0px;\r
+  overflow:hidden;\r
 }\r
 \r
 div.ricoLG_resizeDiv {\r
@@ -39,23 +44,21 @@ div.ricoLG_highlightDiv {
   border: 2px solid black;\r
 }\r
 \r
-.ricoLG_table, table.ricoLiveGrid {\r
+.ricoLG_table, .ricoLG_scrollTab, table.ricoLiveGrid {\r
   margin: 0px;\r
   padding: 0px;\r
   border-right: 1px solid silver;\r
-  border-top: 1px solid silver;\r
   border-left-width: 0px;  /* for dojo */\r
 }\r
 \r
 .ricoLG_FilterRow  div.ricoLG_cell {\r
   height:1.6em;\r
   line-height: 1.6em;\r
+  white-space: nowrap;\r
 }\r
-\r
-.ricoLG_FilterRow  div.ricoLG_cell {\r
-  vertical-align: middle;\r
+.ricoLG_FilterRow  div.ricoLG_cell * {\r
+  vertical-align: top;\r
 }\r
-\r
 .ricoLG_FilterRow select {\r
   width:100%; \r
 }\r
@@ -82,7 +85,7 @@ tr.ricoLG_mFilter_oddrow {
   background-color: #EEE;\r
 }\r
 \r
-table.ricoLG_bottom, table.ricoLiveGrid td, table.ricoLiveGrid th {\r
+table.ricoLG_bottom {\r
   border-top-style: none;\r
 }\r
 \r
@@ -93,11 +96,11 @@ div.ricoLG_col {
   width:100px;\r
 }\r
 \r
-.ricoLG_top div.ricoLG_col {\r
+thead.ricoLG_top div.ricoLG_col {\r
   position:relative;\r
 }\r
 \r
-.ricoLG_top div.ricoLG_Resize {\r
+thead.ricoLG_top div.ricoLG_Resize {\r
   position:absolute;\r
   width:5px;\r
   height:100%;\r
@@ -105,48 +108,26 @@ div.ricoLG_col {
   cursor:e-resize;\r
 }\r
 \r
-.ricoLG_HdrIcon {\r
-  padding-left:2px;\r
-  padding-right:2px;\r
-}\r
-\r
-.ricoLG_sortAsc {\r
-  background: url(../images/sort_asc.gif) no-repeat center center;\r
-  width: 11px;\r
-  height: 11px;\r
-}\r
-\r
-.ricoLG_sortDesc {\r
-  background: url(../images/sort_desc.gif) no-repeat center center;\r
-  width: 11px;\r
-  height: 11px;\r
-}\r
-\r
-.ricoClearNative {\r
-  background: url(../images/delete.gif) no-repeat center center;\r
-  width: 17px;\r
-  height: 17px;\r
-  margin-top: -8px;\r
-}\r
-\r
-.ricoClear {\r
-  display:-moz-inline-box;\r
-  display:inline-block;\r
-  cursor: pointer;\r
-}\r
-\r
 .ricoLG_bottom div.ricoLG_cell {\r
   border-style: solid;\r
   border-color: silver;\r
   border-width: 0px 0px 1px 0px;\r
 }\r
 \r
-.ricoLG_top th, .ricoLG_top td, table.ricoLiveGrid td, table.ricoLiveGrid th {\r
+table.ricoLG_table, table.ricoLiveGrid  {\r
+  border-top: 1px solid silver;\r
+}\r
+\r
+thead.ricoLG_top th, thead.ricoLG_top td, table.ricoLiveGrid td, table.ricoLiveGrid th {\r
   border-style: solid;\r
   border-color: silver;\r
   border-width: 0px 0px 1px 1px;\r
 }\r
 \r
+* html thead.ricoLG_top th, * html thead.ricoLG_top td, * html table.ricoLiveGrid td, * html table.ricoLiveGrid th {\r
+  position: relative; /* IE6  only */\r
+}\r
+\r
 .ricoLG_bottom th, .ricoLG_bottom td {\r
   border-style: solid;\r
   border-color: silver;\r
@@ -163,11 +144,12 @@ div.ricoLG_cell, table.ricoLiveGrid td, table.ricoLiveGrid th {
        padding-bottom:3px;\r
 }\r
 \r
-div.ricoLG_messageDiv {\r
+.ricoLG_messageDiv {\r
   font-weight:bold;\r
   font-size:larger;\r
   text-align:center;\r
   padding:1em;\r
+  background-color: #EEE;\r
   opacity:0.8;\r
 }\r
 \r
@@ -186,31 +168,15 @@ span.ricoCaption {
   font-weight: bold;\r
 }\r
 \r
-div.alignleft {\r
-  text-align: left;\r
-}\r
-\r
-div.aligncenter {\r
-  text-align: center;\r
-}\r
-\r
-div.alignright {\r
-  text-align: right;\r
-}\r
-\r
 span.ricoSessionTimer {\r
   background-color:black;\r
   color:white;\r
 }\r
 \r
-.ricoLG_top input {\r
+thead.ricoLG_top option, thead.ricoLG_top select, thead.ricoLG_top input {\r
   font-weight: normal;\r
   font-size: 8pt !important;\r
-}\r
-\r
-.ricoLG_top option, .ricoLG_top select {\r
-  font-weight: normal;\r
-  font-size: 9pt !important;\r
+  padding: 1px;\r
 }\r
 \r
 /* grid column chooser */\r
@@ -309,6 +275,17 @@ form .ricoEditLabel {
 }\r
 \r
 \r
+/* shadows */\r
+.ricoShadow {\r
+  -moz-box-shadow: 3px 3px 4px #888;\r
+  -webkit-box-shadow: 3px 3px 4px #888;\r
+  box-shadow: 3px 3px 4px #888;\r
+  /* For IE 8 */\r
+  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";\r
+  /* For IE 5.5 - 7 */\r
+  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');\r
+}\r
+\r
 \r
 /* ricoMenu */\r
 \r
@@ -425,27 +402,6 @@ a.RicoButton {
   width: auto !important;\r
 }\r
 \r
-.RicoCloseAnchor {\r
-  cursor: pointer;\r
-  position: absolute;\r
-  top: 1px;\r
-  right: 2px;\r
-}\r
-\r
-span.RicoCloseW {\r
-  display: block;\r
-  height: 15px;\r
-  width: 16px;\r
-  background: url(../images/close_w.gif) no-repeat top right;\r
-}\r
-\r
-span.RicoCloseB, span.RicoClose {\r
-  display: block;\r
-  height: 15px;\r
-  width: 16px;\r
-  background: url(../images/close_b.gif) no-repeat top right;\r
-}\r
-\r
 a.RicoButtonAnchor {\r
   padding: 1px 0;\r
   margin: 1px;\r
@@ -469,20 +425,6 @@ a.RicoButtonAnchorNative:hover {
   background-color: #CCC;\r
 }\r
 \r
-span.RicoCheckmark {\r
-  display: block;\r
-  height: 17px;\r
-  width: 17px;\r
-  background: url(../images/checkmark.gif) no-repeat top right;\r
-}\r
-\r
-span.RicoCancel {\r
-  display: block;\r
-  height: 17px;\r
-  width: 17px;\r
-  background: url(../images/delete.gif) no-repeat top right;\r
-}\r
-\r
 * html .ui-dialog-titlebar .ui-dialog-titlebar-close {\r
   top: 16px;   /* required by IE6 */\r
 }\r
@@ -546,138 +488,136 @@ span.RicoCancel {
 \r
 /* ricoCalendar */\r
 \r
-table.ricoCalTab, table.ricoCalTab *, .ricoCalYearPrompt *, div.ricoTreeContainer * {\r
+table.ricoCalTab, table.ricoCalTab *, .ricoCalYearPrompt * {\r
   font-size:8pt !important;\r
 }\r
 \r
+.RicoCalHeading {\r
+  font-size:8pt !important;\r
+  font-weight: bold;\r
+  text-align:center;\r
+}\r
+\r
+.RicoCalHeading a {\r
+  text-decoration: none;\r
+}\r
+\r
+.ui-datepicker .RicoCalHeadingInner {\r
+  height: 1.8em;\r
+  position: relative;\r
+  width: 16em;\r
+}\r
+\r
+.ricoCalContainer  .RicoCalHeadingInner {\r
+  height: 1.3em;\r
+  position: relative;\r
+  width: 16em;\r
+  padding: 2px;\r
+}\r
+\r
+.RicoCalHeading  > .RicoCalHeadingInner {\r
+  margin: auto;\r
+}\r
+\r
 table.ricoCalTab {\r
   width: auto !important;\r
 }\r
 \r
-div.ricoCalContainer table.ricoCalTab, div.ricoCalContainer td.ricoCalEmpty, div.ricoCalContainer tr.ricoCalDayNames td  {\r
+.ricoCalContainer table.ricoCalTab, .ricoCalContainer td.ricoCalEmpty, .ricoCalContainer tr.ricoCalDayNames td  {\r
   background-color:#eee;\r
 }\r
 \r
-div.ricoCalContainer  .ricoCalToday {\r
+.ricoCalContainer  .ricoCalToday {\r
   font-weight:bold;\r
   background-color: #33FFFF !important;\r
 }\r
 \r
-div.ricoCalContainer .ricoSelectedDay {\r
+.ricoCalContainer .ricoSelectedDay {\r
   font-weight:bold;\r
   background-color: #FFFF66 !important;\r
 }\r
 \r
-div.ricoCalContainer tbody td.hover {\r
+.ricoCalContainer tbody td.hover {\r
   background-color: #FDD;\r
 }\r
 \r
-table.ricoCalTab thead a {\r
-  text-decoration: none;\r
-}\r
-\r
 span.RicoCalMonthHeading {\r
-  position:relative;\r
-  margin: 0px 1.6em;\r
-  display: block;\r
+  position:absolute;\r
+  left: 0px;\r
+  font-weight:bold;\r
+  margin: 0px 1em !important;\r
   padding: 0px;\r
-  width: 6em;\r
+  display: block;\r
+  width: 6.5em;\r
   text-align: center;\r
-  float: left;\r
 }\r
 \r
 span.RicoCalYearHeading {\r
-  position:relative;\r
+  position:absolute;\r
+  right: 0px;\r
+  font-weight:bold;\r
+  margin: 0px 1em !important;\r
+  padding: 0px;\r
   display: block;\r
   width: 7em;\r
   text-align: center;\r
-  float: left;\r
 }\r
 \r
 span.Rico_leftArrow {\r
-  background: url(../images/left_b.gif) no-repeat bottom right;\r
-  position: absolute;\r
-  top: 4px;\r
-  left: 0px;\r
-  width: 11px;\r
+  background-position: -10px -1046px;\r
+  display: inline-block;\r
+  width: 10px;\r
   height: 11px;\r
 }\r
 \r
 a.Rico_leftArrow {\r
-  position: absolute;\r
-  top: -3px !important;\r
-  left: 0px !important;\r
-  width: 12px;\r
-  height: 1.6em;\r
+  display: inline-block;\r
+  width: 15px;\r
+  height: 1.1em;\r
 }\r
 \r
 span.Rico_rightArrow {\r
-  background: url(../images/right_b.gif) no-repeat bottom left;\r
-  position: absolute;\r
-  top: 4px;\r
-  right: 0px;\r
-  width: 11px;\r
+  background-position: -10px -1108px;\r
+  display: inline-block;\r
+  width: 10px;\r
   height: 11px;\r
 }\r
 \r
 a.Rico_rightArrow {\r
-  position: absolute;\r
-  top: -3px !important;\r
-  right: 0px !important;\r
-  width: 12px;\r
-  height: 1.6em;\r
-}\r
-\r
-table.ricoCalTab thead img {\r
-  border:none;\r
-/*  padding-left: 0.3em;\r
-  padding-right: 0.3em;*/\r
+  display: inline-block;\r
+  width: 15px;\r
+  height: 1.1em;\r
 }\r
 \r
 table.ricoCalTab thead a.hover {\r
   cursor:pointer;\r
 }\r
 \r
-.ricoCalYearPrompt td {\r
-  white-space: nowrap;\r
-}\r
-\r
 div.ricoCalYearPrompt {\r
   margin: 0px;\r
   padding: 3px;\r
-}\r
-\r
-div.ricoCalContainer  div.ricoCalYearPrompt {\r
+  display: block;\r
   border:1px solid #666666;\r
   background-color: #FEE;\r
 }\r
 \r
-div.ricoCalContainer  .ricoCalYearPrompt img {\r
+.ricoCalYearPrompt td {\r
+  white-space: nowrap;\r
+}\r
+\r
+.ricoCalYearPrompt img {\r
   border: 1px solid black;\r
   margin-left: 3px;\r
   vertical-align: middle;\r
 }\r
 \r
-div.ricoCalContainer table.ricoCalTab thead th {\r
-  background-color: #D4D0C8;\r
-  font-weight: bold;\r
-  text-align:center;\r
-  padding: 2px;\r
-}\r
-\r
-.RicoCalHeading {\r
-  position: relative;\r
-  padding: 1px 0px;\r
-  height: 1%;\r
-}\r
-\r
 table.ricoCalTab tfoot td {\r
   text-align:center;\r
   padding: 2px;\r
   cursor:pointer;\r
 }\r
 \r
-div.ricoCalContainer  tfoot td {\r
+.ricoCalContainer  tfoot td {\r
   color:#FFF;\r
   background-color: #666666;\r
 }\r
@@ -687,7 +627,7 @@ table.ricoCalTab tfoot span {
   cursor:pointer;\r
 }\r
 \r
-div.ricoCalContainer table.ricoCalTab tbody {\r
+.ricoCalContainer table.ricoCalTab tbody {\r
   background-color: white;\r
 }\r
 \r
@@ -714,13 +654,13 @@ td.ricoCal0, td.ricoCal1, td.ricoCal2, td.ricoCal3, td.ricoCal4, td.ricoCal5, td
 }\r
 \r
 /* Monday-Friday */\r
-div.ricoCalContainer td.ricoCal1, div.ricoCalContainer td.ricoCal2, div.ricoCalContainer td.ricoCal3, div.ricoCalContainer td.ricoCal4, div.ricoCalContainer td.ricoCal5 {\r
+.ricoCalContainer td.ricoCal1, .ricoCalContainer td.ricoCal2, .ricoCalContainer td.ricoCal3, .ricoCalContainer td.ricoCal4, .ricoCalContainer td.ricoCal5 {\r
   color:black;\r
   background-color:#fff;\r
 }\r
 \r
 /* Sunday, Saturday */\r
-div.ricoCalContainer td.ricoCal0, div.ricoCalContainer td.ricoCal6 {\r
+.ricoCalContainer td.ricoCal0, .ricoCalContainer td.ricoCal6 {\r
   color:#999;\r
   background-color:#fff;\r
 }\r
@@ -739,14 +679,12 @@ td.ricoCalWeekNum {
 \r
 .ricoCalMenu {\r
   width:12em !important;\r
-}\r
-div.ricoCalContainer .ricoCalMenu {\r
   background-color: #FEE;\r
   border-bottom:1px solid #666666;\r
   border-right:1px solid #666666;\r
 }\r
 \r
-div.ricoCalContainer .ricoCalMenu td {\r
+.ricoCalMenu td {\r
   border-top:1px solid #666666;\r
   border-left:1px solid #666666;\r
 }\r
@@ -757,13 +695,10 @@ div.ricoCalContainer .ricoCalMenu td {
   cursor:pointer;\r
   font-size:8pt;\r
   text-align: center !important;\r
-}\r
-\r
-div.ricoCalContainer .ricoCalMenu a {\r
   color:black;\r
 }\r
 \r
-div.ricoCalContainer .ricoCalMenu a:hover {\r
+.ricoCalMenu a:hover {\r
   background-color: #FCC;\r
 }\r
 \r
@@ -830,3 +765,221 @@ div.ricoCorner div {
   height: 1%;\r
   position: relative;\r
 }\r
+\r
+.rico-calarrow {\r
+  width: 37px;\r
+  height: 18px;\r
+  display: inline-block;\r
+  background-position: -10px -10px;\r
+}\r
+.rico-calendaricon {\r
+  width: 17px;\r
+  height: 17px;\r
+  display: inline-block;\r
+  background-position: -10px -48px;\r
+}\r
+.rico-close-b {\r
+  background-position: -10px -122px;\r
+}\r
+.rico-close-w {\r
+  background-position: -10px -155px;\r
+}\r
+.rico-delete-b {\r
+  background-position: -10px -188px;\r
+}\r
+.rico-delete-w {\r
+  background-position: -10px -225px;\r
+}\r
+.rico-doc {\r
+  background-position: -10px -262px;\r
+}\r
+.rico-dotbutton {\r
+  width: 17px;\r
+  height: 17px;\r
+  display: inline-block;\r
+  background-position: -10px -304px;\r
+}\r
+.rico-drop {\r
+  background-position: -10px -341px;\r
+}\r
+.rico-folderclosed {\r
+  width: 24px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -403px;\r
+}\r
+.rico-folderopen {\r
+  width: 24px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -445px;\r
+}\r
+.rico-info {\r
+  width: 15px;\r
+  height: 15px;\r
+  display: inline-block;\r
+  background-position: -10px -487px;\r
+}\r
+.rico-link {\r
+  background-position: -10px -522px;\r
+}\r
+.rico-tree-m {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -564px;\r
+}\r
+.rico-tree-node {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -606px;\r
+}\r
+.rico-tree-nodelast {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -648px;\r
+}\r
+.rico-tree-nodeline {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -690px;\r
+}\r
+.rico-tree-nodem {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -732px;\r
+}\r
+.rico-tree-nodemlast {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -774px;\r
+}\r
+.rico-tree-nodep {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -816px;\r
+}\r
+.rico-tree-nodeplast {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -858px;\r
+}\r
+.rico-tree-p {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background-position: -10px -900px;\r
+}\r
+.rico-tree-nodeblank {\r
+  width: 16px;\r
+  height: 22px;\r
+  display: block;\r
+  background: none !important;\r
+}\r
+.rico-removeFilter {\r
+  background-position: -10px -942px;\r
+}\r
+.rico-FilterCollapse {\r
+  background-position: -10px -974px;\r
+}\r
+.rico-FilterExpand {\r
+  background-position: -10px -1010px;\r
+}\r
+.rico-left-b {\r
+  background-position: -10px -1046px;\r
+  width: 10px;\r
+  height: 11px;\r
+}\r
+.rico-left-w {\r
+  background-position: -10px -1077px;\r
+  width: 10px;\r
+  height: 11px;\r
+}\r
+.rico-right-b {\r
+  background-position: -10px -1108px;\r
+  width: 10px;\r
+  height: 11px;\r
+}\r
+.rico-right-w {\r
+  background-position: -10px -1139px;\r
+  width: 10px;\r
+  height: 11px;\r
+}\r
+\r
+.ricoLG_filterCol {\r
+  margin: 0px 2px;\r
+  width: 13px;\r
+  height: 12px;\r
+  background-position: -10px -371px;\r
+}\r
+.ricoLG_sortAsc {\r
+  margin: 0px 2px;\r
+  width: 11px;\r
+  height: 11px;\r
+  background-position: -10px -1168px;\r
+}\r
+.ricoLG_sortDesc {\r
+  margin: 0px 2px;\r
+  width: 11px;\r
+  height: 11px;\r
+  background-position: -10px -1198px;\r
+}\r
+\r
+.ricoClearNative {\r
+  width: 17px;\r
+  height: 17px;\r
+  background-position: -10px -186px;\r
+}\r
+span.ricoClear {\r
+  display:-moz-inline-box;\r
+  display:inline-block;\r
+  cursor: pointer;\r
+}\r
+\r
+span.RicoCheckmark {\r
+  display: block;\r
+  height: 17px;\r
+  width: 17px;\r
+  background-position: -10px -85px;\r
+}\r
+\r
+span.RicoCancel {\r
+  display: block;\r
+  height: 17px;\r
+  width: 17px;\r
+  background-position: -10px -188px;\r
+}\r
+\r
+\r
+.RicoCloseAnchor {\r
+  cursor: pointer;\r
+  position: absolute;\r
+  display: block;\r
+  top: 2px;\r
+  right: 2px;\r
+  border: 0px none !important;\r
+}\r
+span.RicoClose {\r
+  display: block;\r
+  height: 15px;\r
+  width: 16px;\r
+  background-position: -10px -122px;\r
+}\r
+\r
+/* ie6 only */\r
+* html iframe.RicoShim {\r
+  position: absolute;\r
+  display:block;\r
+  top: 0px;\r
+  left: 0px;\r
+  width: expression( this.previousSibling.offsetWidth+'px' );\r
+  height: expression( this.previousSibling.offsetHeight+'px' );\r
+  z-index: 1;\r
+}\r