mocha.css.svn-base

嵌入式无线路由系统openwrt的web配置工具

/*

CSS for Mocha UI

Copyright:
  Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
  
License:
  MIT-style license.
   
*/   

/* Reset */

ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }

/* Main */

html, body {
  height: 100%;
  overflow: auto;
}    

body {
	margin: 0;
	text-align: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #141414; 
  background: #fff;
}

#desktop {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 750px; /* Helps keep header content from wrapping */    
  height: 100%;
  min-height: 100%;  
  overflow: hidden;
  cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */  
}                

#desktopHeader {
  background: #bebebe; /* Will be the margin color between toolbars */
  padding: 0 0 1px 0;
}

/* Typography */

h2, h3, h4 {
	margin: 0;
	padding: 0 0 5px 0;
}

h2 {
	font-size: 14px;
	font-weight: bold;
}

h4 {
	font-size: 11px;
}

a {
	color: #ce1717;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: none;
}

p {
	margin: 0;
	padding: 0 0 9px 0;
}

ul {
	list-style: outside;
	margin: 0 0 9px 16px;
}

/* Navbar */

#desktopNavbar {
  margin: 0;
  height: 23px;
  background: #eeeeef url(../images/bg-desktopTitlebar.gif) repeat-x;
}

#desktopNavbar ul {  
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 12px;
}

#desktopNavbar li {
  float: left;      
}

#desktopNavbar a {
  display: block;
}  
  
#desktopNavbar ul li a {
  padding: 2px 11px 2px 9px;  
  color: #141414;
}

#desktopNavbar ul li a:hover {
  background-color: #ddd;
}

#desktopNavbar li ul a:hover {
  background-color: #DFF1FF;
}

#desktopNavbar li ul {
  padding: 0;
  border: 1px solid #333;
  background: #fff url(../images/menu.shader.png) repeat-y;
  position: absolute;
  width: 158px;
  left: -999em;
  z-index: 8000;
}

#desktopNavbar li.Checked a {
  background: url(../images/checked.gif) no-repeat 6px 8px;
}

#desktopNavbar li.Checked a:hover {
  background: #DFF1FF url(../images/checked.gif) no-repeat 6px 8px;
}

#desktopNavbar li:hover ul ul,
#desktopNavbar li.ieHover ul ul,
#desktopNavbar li:hover ul ul ul,
#desktopNavbar li.ieHover ul ul ul {
  left: -999em;
}

#desktopNavbar li ul li div.check {
  position: absolute;
  top: 7px;
  left: 6px;
  width: 5px;
  height: 5px;
  background: #00CC33;
  overflow: none;
  line-height: 1px;
  font-size: 1px;
}

#desktopNavbar li ul li a {
  position: relative;
  padding: 2px 3px 2px 25px;
  width: 130px;
  color: #333;
}

#desktopNavbar li:hover ul,
#desktopNavbar li.ieHover ul,
#desktopNavbar li li.ieHover ul,
#desktopNavbar li li li.ieHover ul,
#desktopNavbar li li:hover ul,
#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */
  left: auto;
}

#desktopNavbar li:hover { /* For IE7 */
  position: static;
}

.divider {
  margin-top: 2px;
  padding-top: 3px;
  border-top: 1px solid #ddd;
}  

#pageWrapper {
  background-color: #2C628F;
  position: relative;
  width: auto;
  height: 100%;
  overflow: hidden; /* This can be set to hidden or auto */
}

/* Windows */
  
div.mocha {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  overflow: hidden;  
  cursor: default;  
}

div.mochaOverlay {
  position: absolute;
  top: 0;
  left: 0;  
}
  
div.mocha .mochaTitlebar {
  width: 100%;
  overflow: hidden;
}    
  
div.mocha .mochaTitlebar h3 {
  font-size: 12px;
  line-height: 15px;  
  font-weight: bold;
  margin: 5px 10px 4px 12px;
  padding: 0;
}
  
div.mocha .mochaTitlebar a {
  color: #333;
}

div.mocha .mochaContentBorder {
  border-top: 1px solid #d9d9d9;  
  border-bottom: 1px solid #d9d9d9;
}

div.mochaNotification .mochaContentBorder {
  border: 0;
}

div.mochaNotification .mochaContent {
  text-align: left;
}

div.mochaTmp {
  font-size: 11px;
}

div.mocha .mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
  font-size: 11px;
  overflow: auto;  
}
  
div.mocha .mochaContent {
  padding: 0;
}    

div.mocha .handle {
  position: absolute;
  background: #0f0;
  width: 3px;
  height: 3px;
  z-index: 2;
  opacity: .0;
  filter: alpha(opacity=0);
  -moz-opacity: .0;
  overflow: hidden;
  font-size: 1px; /* For IE6 */   
}

div.mocha .corner { /* Corner resize handles */
  background: #f00;
  width: 10px;
  height: 10px;
}

div.mocha .cornerSE { /* Bottom right resize handle */
  background: #f00;
  width: 20px;
  height: 20px;
}

.mochaCanvasHeader {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: -1;
  display: none;    
  overflow: hidden;      
}

.mochaControls {
  position: absolute;
  width: 52px;
  top: 8px;
  right: 8px;
  height: 14px;
  z-index: 4;
  background: transparent;    
}

.mochaCanvasControls {
  position: absolute;  
  top: 8px;
  right: 8px;  
  z-index: 3;
  background: transparent;    
}

/*
  To use images for these buttons:
  1. Set the useCanvasControls window option to false.
  2. If you use a different button size you may need to reposition the controls.
     Modify the controlsOffset window option.    
  2. Add background images to each button.

*/
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
  float: right;
  width: 14px;
  height: 14px;
  font-size: 1px;  
  cursor: pointer;
  z-index: 4;
  background: #f00;  
  margin-left: 5px;    
}

.mochaMinimizeButton {
  margin-left: 0;    
}

.mochaLoadingIcon {
  position: absolute;
  bottom: 7px;
  left: 6px;  
}

.mochaIframe {
  width: 100%;
}  
  
.clear {
  clear: both;
  height: 0;
}

*html .clear {
  height: 1%;
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
  visibility: hidden;
}
  
/* Window Builder Form Elements */
/* Modal Windows */
#modalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  z-index: 10000;
}

* html #modalOverlay {
  position: absolute;
}  

/* Fix for IE6 select z-index issue */
#modalFix {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  z-index: 9500;
}
  
/* Fix for IE6 select z-index issue */
iframe.zIndexFix {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  filter: mask();
  width: 100px;
  height: 100px;
  border: 1px solid transparent;
}
  
/* Window Minimize Dock */

#dockWrapper {
  display: none;
  background: #052E4F;
  padding: 1px 0 0 0;
  width: 100%;  
}

#dock {
  position: relative;
  padding: 3px 15px 1px 15px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #14466F;
  border: 1px solid #0C3A5F;
  min-height: 22px;
  height: auto;
   _height: 22px; /* IE 6.0 hack, for not supporting min-height */
}

#dockWrapper.top {
  padding: 0 0 1px 0;  
}

.dockTab {
  float: left;
  font-size: 11px;
  position: relative;
  width: 120px;
  height: 20px;
  margin: 0 2px 2px 0;
  overflow: hidden;  
  cursor: pointer;     
}

.dockText {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  text-align: left;
  padding: 1px 0 0 8px;
  width: 115px;
  height: 19px;
  overflow: hidden;
}      

#dockCanvas {
  position: absolute;
  top: 4px;
  left: 2px;
  z-index: 2;
}

/* Window Themes */

div.mocha.transparent .mochaTitlebar h3 {
  color: #fff;
  display: none;  
}

div.mocha.notification .mochaTitlebar {
  opacity: .0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

div.mocha.notification .mochaContentBorder {
  border-width: 0px;
}

div.mocha.notification .mochaContentWrapper {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

/* Shadow drag */

div.mochaShadow {
  border: 1px #DDD dashed;
}

div.mochaShadow * {
  display: none;
}

div.mochaShadow .mochaOverlay, div.mochaShadow  .mochaTitlebar, div.mochaShadow  .mochaTitle  {
  display: block !important;
}

div.mochaShadow h3 {
  margin: 4px 10px 4px 11px !important;
  color: #DDD;
}