Fix up some UI style issues.

Resources/css/index.css

@@ -1,185 +1,55 @@
-/********************************
- * navigation scrollable
- ********************************/
-#module_nav
-{
-	background-color:#fbfbfb;
-	-webkit-border-bottom-left-radius:10px;
-	-webkit-border-bottom-right-radius:10px;
-	border:1px solid #bababa;
-	border-top:1px solid #e8e8e8 !important;
-	border-top:none;
-	padding:10px;
-	width:100%;
-	margin:auto;
-}
-
-div.scrollable
-{
-	position:relative; 
-	overflow:hidden; 
-	height:25px;
-	width:600px; 
-	float:left;
-}
-
-div.scrollable div.items
-{
-	width:20000em;
-	position:absolute;
-}
-
-div.scrollable div.items div
-{
-	float:left; 
-}
-
-.api_scroller
-{
-	height:25px;
-	float:left;
-}
-
-#api_prev
-{
-	float:left;
-}
-
-#module_list div
-{
-	height:21px;
-	float:left;
-	padding-left: 5px;
-	padding-right: 5px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	margin: 0px;
-	background-color:#ffffff;
-	border:1px solid #ccc;
-	cursor:pointer;
-	text-align:center;
-	-moz-border-radius:4px;
-	-webkit-border-radius:4px;
-}
-
-#module_list div.active
-{
-	border:1px solid #000;
-}
-
-/********************************
- * content styles
- ********************************/
 body
 {
-	background-color:#f2f2f2;
-	padding:0px;
-	margin:0px;
-	font-family:'Myriad Pro','Helvetica Neue', 'Arial';
-	color:#000;
-	-webkit-user-select:none;
-	overflow:hidden;
-}
-.note
-{
-	font-size:14px;
-	font-weight:normal;
-	font-style:italic;
-	color:#777;
-}
-#header_border
-{
-	border-top:1px solid #444444;
-	margin-bottom:10px;
-}
-#content
-{
-	background-color:#fff;
-	border:1px solid #d6d6d6;
-	-webkit-border-radius:10px;
-	height:92%;
-	padding-top:10px;
-	padding-bottom:10px;
-	padding-left:5px;
-	padding-right:5px;
-	margin-left:10px;
-	margin-right:10px;
-}
-#content_heading
-{
-	border-bottom:1px solid #eee;
-}
-#api_heading
-{
-	font-size:20px;
-}
-#api_location
-{
-	color:#aaa;
-	font-size:14px;
-	font-weight:normal;
-	margin-left:10px;
-}
-#api_content
-{
+	background-color: #f2f2f2;
 	padding: 0px;
-	padding-left: 20px;
-	padding-right: 20px;
 	margin: 0px;
-	color: #666;
-	font-weight: normal;
-	font-size: 14px;
-	font-family: 'Helvetica';
+	font-family: 'Helvetica', 'Arial';
+	font-size: 12pt;
+	color: #000;
+	-webkit-user-select: none;
+	overflow: hidden;
 }
 
-#api_content code
+#header
 {
-	font-size:14px !important;
-	line-height:15px !important;
+	border-top: 1px solid #444444;
+	margin-bottom: 10px;
 }
-#api_content h3
-{
-	font-size:22px;
-	font-weight:bold;
-}
-#api_list
+
+#content
 {
-	border-right: 1px solid #bababa;
-	margin-top:10px;
-	padding-right: 20px;
+	background-color: #fff;
+	border: 1px solid #d6d6d6;
+	-webkit-border-radius: 10px;
+	height: 92%;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	padding-left: 5px;
+	padding-right: 5px;
+	margin-left: 10px;
+	margin-right: 10px;
 }
 
-.topic_list
+#topic_menu
 {
-	color:#9f9696;
-	font-size:14px;
-	cursor:pointer;
-	height:22px;
-	line-height:24px;
-	margin-bottom:6px;
-	padding-left:7px;
-	width:150px;
+	float: left;
+	height: 100%;
 }
-.topic_list.active
+#topic_menu .section_item
 {
-	background-color:#3581d4;
-	color:#ffffff;
-	-webkit-box-shadow: #999 0px 2px 5px;
+	color: #9f9696;
+	margin-bottom: 5px;
+	cursor: pointer;
 }
 
-.section_item
+.topic_content
 {
-	color:#9f9696;
-	font-size:12px;
-	cursor:pointer;
-	height:20px;
-	line-height:20px;
-	margin-bottom:6px;
-	padding-left:20px;
-	width:150px;
+	padding: 0px 20px;
+	height: 100%;
+	color: #666;
+	overflow-y: scroll;
 }
 
-
 /********************************
  * button styles
  ********************************/
@@ -228,12 +98,9 @@ button:disabled
 	opacity: 0.5;
 }
 
-.scrolling
-{
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
+/********************************
+ * scrollbar styles
+ ********************************/
 ::-webkit-scrollbar 
 {
 	width: 13px;

Resources/css/ui-lightness/jquery-ui-1.8.custom.css → Resources/css/ui-theme/jquery-ui-1.8.custom.css

@@ -41,37 +41,37 @@
 * jQuery UI CSS Framework
 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
-* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ctl=themeroller
 */
 
 
 /* Component containers
 ----------------------------------*/
-.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
+.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
 .ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
-.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
-.ui-widget-content a { color: #333333; }
-.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
-.ui-widget-header a { color: #ffffff; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_75_ffffff_1x400.png) 50% 50% repeat-x; color: #222222; }
+.ui-widget-content a { color: #222222; }
+.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
+.ui-widget-header a { color: #222222; }
 
 /* Interaction states
 ----------------------------------*/
-.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
-.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
-.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
+.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
 .ui-widget :active { outline: none; }
 
 /* Interaction Cues
 ----------------------------------*/
-.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
+.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
 .ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
-.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
-.ui-state-error a, .ui-widget-content .ui-state-error a { color: #ffffff; }
-.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #ffffff; }
+.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_inset-soft_95_fef1ec_1x100.png) 50% bottom repeat-x; color: #cd0a0a; }
+.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
 .ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
 .ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
 .ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
@@ -82,12 +82,12 @@
 /* states and images */
 .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
 .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
-.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
-.ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); }
-.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
-.ui-state-active .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
-.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_228ef1_256x240.png); }
-.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffd27a_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
 
 /* positioning */
 .ui-icon-carat-1-n { background-position: 0 0; }
@@ -282,8 +282,8 @@
 .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
 
 /* Overlays */
-.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
-.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/* Accordion
+.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
+.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/* Accordion
 ----------------------------------*/
 .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
 .ui-accordion .ui-accordion-li-fix { display: inline; }

Resources/index.html

@@ -1,45 +1,19 @@
 <html>
 <head>
 	<link rel="stylesheet" type="text/css" href="css/index.css"/>
-	<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css"/>
+	<link rel="stylesheet" type="text/css" href="css/ui-theme/jquery-ui-1.8.custom.css"/>
 
 	<script src="js/jquery-1.4.2.min.js" type="text/javascript"/>
 	<script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript"/>
 	<script src="js/main.js" type="text/javascript"/>
 </head>
 <body>
 	<!-- HEADER -->
-	<div id="header_border"></div>
+	<div id="header"></div>
 
 	<!-- CONTENT -->
 	<div id="content">
-
-		<!-- MODULE NAVIGATION -->
-		<!--
-		<div id="nav">
-			<button class="api_scroller prevPage" id="api_prev">&#x25C0;</button>
-			<div class="scrollable">
-				<div id="module_list" class="items">
-				</div>
-			</div>
-			<button class="api_scroller nextPage" id="api_prev">&#x25B6</button>
-		</div>
-		-->
-
-		<div style="clear:both;">
-			<table>
-				<tr>
-					<td valign="top">
-						<div id="topic_menu" class="scrolling"></div>
-					</td>
-					<td valign="top">
-						<div id="api_content" class="scrolling"></div>
-					</td>
-				</tr>
-			</table>
-		</div>
+		<div id="topic_menu"></div>
 	</div>
-
-	<!-- BOTTOM NAV -->
 </body>
 </html>