demos: fixed consistency issue with index navigation menus

1 files changed, 22 insertions, 1035 deletions

diff --git a/demos/demos.css b/demos/demos.css
index 556c4bef8..18b0d2a9c 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -1,321 +1,15 @@
-body { font-size: 62.5%; }

-.nav {

-	font-family: Verdana,Arial,sans-serif;

-	width: 200px;

-}

-.nav dt {

-	color: #E87B10;

-	font-size: 1.7em;

-	font-weight: bold;

-	margin-top: 1em;

-	margin-bottom: 0.5em;

-}

-.nav dd {

-	margin-left: 0.5em;

-}

-.nav dd a {

-	border-bottom:1px solid #F4F4F4;

-	color:#000000;

-	display:block;

-	font-size: 1.4em;

-	font-weight: bold;

-	height:1.4em;

-	padding:7px 3px 3px 12px;

-	text-decoration:none;

-}

-.nav dd a:hover {

-	background: #eaeaea;

-	border-bottom: 1px solid #bbb;

+body {

+	font-size: 62.5%;

 }

 

 

-

 /* Site

    -------------------------------- */

 

 body {

-	margin: 0;

-	padding: 0 0 20px;

-	min-height: 100%;

-	/* font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; */

 	font-family: "Arial", "Helvetica", "Verdana", "sans-serif";

-	font-size: 10px;

-}

-

-#wrapper {

-	margin: 0 auto;

-	width: 956px;

-	position: relative;

-	/* 

-	background: url('/images/body_footer_bg.jpg') no-repeat center bottom;

-	padding-bottom: 365px;

-	 */

-}

-

-#banner {

-	height: 125px;

-}

-

-#content .bg {

-	opacity: 0;

-	-moz-opacity: 0;

-	filter: alpha(opacity=0);

-}

-

-table.layout-grid a.disabled, table.layout-grid a.disabled:hover {

-	color: #aaa;

-	cursor: default;

-	text-decoration: line-through;

-}

-

-div.notice {

-	background: #FFF1AF;

-	padding: 3px;

-	margin-bottom: 5px;

-	font-size: 12px;

-	border: 1px solid #EFD500;

-}

-

-

-/* Logo

-   -------------------------------- */

-

-h1.logo {

-	position: absolute;

-	top: 55px;

-	left: 28px;

-	margin: 0;

 }

 

-h1.logo,

-h1.logo a {

-	width: 235px;

-	height: 55px;

-}

-

-h1.logo a {

-	display: block;

-	background: url('/images/logo.gif') no-repeat;

-}

-

-h1.logo a span {

-	display: none;

-}

-

-

-/* Dock

-   -------------------------------- */

-

-#dock {

-	height: 25px;

-	float: left;

-	position: absolute;

-	top: 0;

-	right: 2px;

-}

-

-#dock .left {

-	float: left;

-	width: 3px;

-	height: 25px;

-	background: url('/images/dock.png') no-repeat left top;

-}

-

-#dock .right {

-	float: left;

-	width: 3px;

-	height: 25px;

-	background: url('/images/dock.png') no-repeat right top;

-}

-

-#dock ul,

-#dock ul li {

-	float: left;

-	list-style-type: none;

-	margin: 0;

-	padding: 0;

-}

-

-#dock ul {

-	padding: 0 6px;

-	height: 25px;

-	background-color: #000;

-}

-

-#dock ul li {

-	padding: 0 6px;

-	position: relative;

-}

-

-#dock ul li a {

-	float: left;

-	display: block;

-	padding: 0 5px;

-	color: #ccc;

-	text-decoration: none;

-	font-size: 12px;

-	line-height: 22px;

-}

-

-#dock ul li a:hover,

-#dock ul li.selected a {

-	color: #fff;

-	border-bottom: 2px solid #ff9c08;

-}

-

-#dock ul li.selected a {

-	font-weight: bold;

-}

-

-

-/* Navigation

-   -------------------------------- */

-

-#navigation {

-	height: 41px;

-	float: left;

-	position: absolute;

-	top: 62px;

-	right: 0px;

-}

-

-#navigation .left {

-	float: left;

-	width: 5px;

-	height: 41px;

-	/* background: url('/images/navigation.png') no-repeat left top; */

-	background: url('/images/navigation_l.png') no-repeat left top;

-}

-

-#ie6 #navigation .left {

-	background: transparent none;

-	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/navigation_l.png', sizingMethod='scale');

-	zoom: 1;

-}

-

-#navigation .right {

-	float: left;

-	width: 3px;

-	height: 41px;

-	background: url('/images/navigation.png') no-repeat right top;

-}

-

-#navigation ul,

-#navigation ul li {

-	float: left;

-	list-style-type: none;

-	margin: 0;

-	padding: 0;

-	font-size: 13px;

-	line-height: 38px;

-}

-

-#navigation ul {

-	height: 41px;

-	background: url('/images/navigation.png') repeat-x 0 -41px;

-}

-

-#navigation ul li a {

-	float: left;

-	display: block;

-	height: 41px;

-	padding: 0 18px;

-	color: #ccc;

-	text-decoration: none;

-	background: url('/images/navigation_s.png') no-repeat right top;

-}

-

-#navigation ul li.selected a {

-	color: #fff;

-}

-

-#navigation ul li.last a{

-	background-image: none;

-}

-

-#navigation ul li a:hover {

-	color: #fff;

-}

-

-

-/* Content

-   -------------------------------- */

-

-#content-wrapper {

-	background: #FFF url('/images/content_bg.png') repeat-y 0 0;

-}

-

-#content {

-	background: url('/images/content_body_bg.png') no-repeat 0 13px;

-	zoom: 1;

-}

-

-.content-top {

-	font-size: 1px;

-	height: 13px;

-	background: url('/images/content_top_bg.png');

-}

-

-.content {

-	padding: 0 3px 0 3px;

-	overflow: hidden;

-}

-

-#content .content {

-	min-height: 380px;

-	background: url('/images/dot.png') repeat-y 203px 0;

-}

-

-#home #content .content,

-#download #content .content,

-#demos #content .content {

-	background: none;

-}

-

-#ie6 #content .content {

-	height: 380px;

-	overflow-y: visible;

-}

-

-/* Layout */

-

-.content-head {

-	height: 74px;

-	border-bottom: 1px solid #ccc;

-	background-color: #fff;

-}

-

-.content-head h2 {

-	float: left;

-	margin: 0;

-	padding: 20px 0 20px 24px;

-	color: #ff9c08;

-	font: normal 29px/30px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";

-	letter-spacing: .5px;

-}

-

-.content-head h2 span {

-	padding-right: 16px;

-	border-right: 1px solid #ccc;

-}

-

-.content-head p {

-	margin: 0;

-	padding: 28px 0 0 12px;

-	float: left;

-	font: bold 15px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";

-	letter-spacing: .5px;

-}

-

-

-/* Layout

-   -------------------------------- */

-

-.themes {

-	background: url('/images/themes_bg.png') repeat-x scroll 0 -1px;

-}

-

-

 /* Layout

    -------------------------------- */

 

@@ -327,12 +21,6 @@ h1.logo a span {
 	vertical-align: top;

 }

 

-.layout-grid td.home {

-	background: url('/images/home_bg.jpg') no-repeat scroll right top;

-	height: 412px;

-	padding: 0 600px 0 24px;

-}

-

 .layout-grid td.left-nav {

 	width: 200px;

 }

@@ -349,109 +37,6 @@ h1.logo a span {
 	overflow: hidden;

 }

 

-.layout-grid td.download {

-	background: url('/images/demos_bg.jpg') no-repeat;

-	height: 337px;

-}

-

-

-/* Home

-   -------------------------------- */

-

-.home h3 {

-	margin: 0;

-	padding: 17px 0 11px 0;

-	color: #ff9c08;

-	font: normal 30px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";

-	letter-spacing: .5px;

-}

-

-.home p.large {

-	padding-bottom: 15px;

-	color: #000;

-	font: bold 13px/19px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";

-	letter-spacing: .2px;

-	line-height: 16px;

-}

-

-.home p {

-	margin: 0;

-	padding-bottom: 14px;

-	color: #333;

-	font: normal 11px/14px 'Trebuchet MS', 'Arial', 'Helvetica', sans-serif;

-}

-

-.teaserbox {

-	position: absolute;

-	top: 265px;

-	left: 452px;

-	width: 450px;

-}

-

-.teaserbox ul {

-	list-style-type: square;	

-}

-

-.teaserbox p {

-	margin: 5px;

-	padding: 0px;

-}

-

-.teaserbox h4 {

-	margin-bottom: 0px;

-	position: relative;

-	left: 1px;

-	top: 1px;

-	color: #fff;

-}

-

-.teaserbox h4 span {

-	position: absolute;

-	top: -1px;

-	left: -1px;

-	color: #000;

-}

-

-

-/* Side Menu

-   -------------------------------- */

-

-.section {

-	padding: 24px 23px 8px 22px;

-	border-bottom: 1px dashed #ccc;

-}

-

-

-

-ul.side-menu,

-ul.side-menu li,

-p.side-menu-title {

-	list-style-type: none;

-	margin: 0;

-	padding: 0;

-	letter-spacing: 0.75pt;

-}

-

-ul.side-menu li a {

-	font: normal 11px 'Arial', 'Helvetica', sans-serif;

-	text-decoration: none;

-	color: #000;

-}

-

-ul.side-menu li a:hover {

-	color: #e87b10;

-}

-

-p.side-menu-title {

-	font: bold 15px 'Arial', 'Helvetica', sans-serif;

-	color: #e87b10;

-}

-

-ul.side-menu {

-	padding: 5px 2px 0;

-}

-

-

 /* Normal

    -------------------------------- */

 

@@ -463,497 +48,48 @@ ul.side-menu {
 

 .normal h3 {

 	padding: 0 0 9px;

+	font-size: 1.8em;

 }

 

 .normal h4 {

 	padding-bottom: 21px;

 	border-bottom: 1px dashed #999;

-	font-size: 12px;

+	font-size: 1.2em;

 	font-weight: bold;

 }

 

-.normal .pull-quote {

-	padding: 6px 0;

-	line-height: 20px;

-	text-transform: uppercase;

-	font-size: 12px;

-}

-

 .normal p {

-	font-size: 12px;

-}

-

-

-/* Download

-   -------------------------------- */

-

-td.download {

-	/*height: 650px !important;*/

-}

-

-.download .click-to-download {

-	position: relative;

-	margin: 61px 3px 0;

-	padding: 0 19px;

-	background: url('/images/download-top.gif') no-repeat left top;

-	width: 270px;

-	height: 226px;

-	float: left;

-	font-family:  "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";

-}

-

-.download .click-to-download .bg-footer,

-.download .click-to-download .bg {

-	position: absolute;

-	bottom: 0;

-	left: 0;

-	width: 308px;

-	height: 102px;

-	background: url('/images/download-bottom.png') no-repeat left top;

+	font-size: 1.2em;

 }

 

-.download .click-to-download .bg {

-	background-position: left bottom;

-}

+/* Demos */

 

-.download .click-to-download h3 {

+.demos-nav, .demos-nav dt, .demos-nav dd {

 	margin: 0;

-	padding: 14px 0 10px;

-	font-weight: normal;

-	font-size: 21px;

-}

-

-.download .click-to-download h3 span {

-	font-size: 10px;

-}

-

-.download .click-to-download p {

-	margin: 0;

-	padding: 12px 0 0;

-	font-size: 12px;

-}

-

-.download .click-to-download a.download {

-	display: block;

-	position: absolute;

-	left: 65px;

-	top: 136px;

-	height: 38px !important;

-	width: 240px;

-	font-size: 16px;

-	font-weight: bold;

+	padding: 0

 }

 

-.download .click-to-download a.download:link {

-	color: #333;

-	text-decoration: none;

-}

-

-.download .click-to-download a.download:visited {

-	color: #333;

-	text-decoration: none;

-}

-

-.download .builder {

-	position: absolute;

-	top: 475px;

-	right: 16px;

-	width: 612px;

-	font-family:  "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";

-	font-size: 12px;

-	opacity: 0;

-	filter: alpha(opacity=0);

-}

-

-.download .builder h3 {

-	margin: 0;

-	padding: 5px 10px 10px;

-	font-weight: normal;

-	font-size: 21px;

-}

-

-.download .builder p {

-	margin: 0;

-	padding: 0 0 0 12px;

-	font-size: 12px;

-}

-

-.download .builder .top {

-	height: 8px;

-	background-image: url('/images/builder_top.png');

-}

-

-.download .builder .bottom {

-	height: 8px;

-	background-image: url('/images/builder_bottom.png');

-}

-

-.download .builder .content {

-	background-image: url('/images/builder_bg.png');

-}

-

-.download .p {

-	padding: 5px 10px 10px;

-}

-

-.components-list {

-	font-size: 12px;

-}

-

-.components-list table {

-	width: 100%;

-}

-

-.components-list th,

-.components-list td {

-	text-align: left;

-	vertical-align: middle !important;

-	padding: 3px;

-}

-

-.components-list th {

-	line-height: 22px;

-	padding: 0 0 4px 2px;

-	cursor: default;

-}

-

-.components-list label {

-	padding-left: 5px;

-}

-

-.list-section {

-	border-bottom: 1px dashed #bbb;

-	background: #EAEAEA;

-	padding: 10px 10px 10px 10px;

-	width: 715px;

-	line-height: 18px;

-}

-

-.list-padding {

-	padding: 5px;

-	line-height: 18px;

-}

-

-.list-component {

-	background-color: #F4F4F4;

-}

-

-.list-component-selected {

-	font-weight: bold;

-}

-

-.text-bg-up,

-.text-bg-down {

-	background:#FFFFFF url(/images/text-bg-up.gif) repeat-x scroll 0pt;

-	background-position:0px 0px;

-}

-

-.text-bg-down { background:#FFFFFF url(/images/text-bg-down.gif) repeat-x scroll 0pt !important; }

-

-.ui-transparent {

-	opacity:0;

-	filter:Alpha(Opacity=0);

-}

-.text-align-right {

-	text-align: right !important;

-}

-.text-align-left {

-	text-align: left !important;

-}

-.text-align-center {

-	text-align: center !important;

-}

-.label-files {

-	background: url(/images/group.png) no-repeat;

-	padding-left: 20px;

-	line-height: 20px;

-	margin-left: 10px;

-	cursor: pointer;

-}

-

-.download #total-size {

-	width: 160px;

-	margin-left: 90px;

-	text-align: right;

-}

-

-.big {

-	font-size: 13px;

-	font-weight: bold;

-}

-

-.title-big {

-	font-size: 14px;

-	font-weight: bold;

-	letter-spacing: .3px;

-}

-

-

-/* Launch Pad

-   -------------------------------- */

-

-#launch-pad {

-	height: 127px;

-	overflow: hidden;

-	background: url('/images/launch-pad_bg.png') repeat-y center top;

-	padding: 11px 0px 11px 16px;

-}

-

-#launch-pad .launch-pad-button {

+.demos-nav {

 	float: left;

-	width: 255px;

-	height: 106px;

-	background: url('/images/launch-pad_button.png') no-repeat;

-	padding: 21px 22px 0 23px;

-	margin: 0 6px;

-	cursor: pointer;

-	cursor: hand;

-	position: relative;

-}

-

-#ie6 #launch-pad .launch-pad-button {

-	height: 106px;

-}

-

-#launch-pad .launch-pad-button .bg {

-	position: absolute;

-	top: 0;

-	left: 0;

-	width: 310px;

-	height: 127px;

-	background: url('/images/launch-pad_button.png') no-repeat left bottom;

-}

-

-#launch-pad .launch-pad-button h3,

-#launch-pad .launch-pad-button p {

-	position: relative;

-}

-

-#launch-pad .launch-pad-button.left {

-	margin-left: 0;

-}

-

-#launch-pad .launch-pad-button.right {

-	margin-right: 0;

+	width: 155px;

+	font-size: 1.3em;

 }

 

-#launch-pad .launch-pad-button h3 {

+.demos-nav dt {

 	margin: 0;

-	padding: 0 0 4px;

-	color: #ff9c08;

-	font: normal 18px 'Arial', 'Helvetica', sans-serif;

-	letter-spacing: .8px

-}

-

-#launch-pad .launch-pad-button h3 a,

-#launch-pad .launch-pad-button h3 a:hover {

-	color: #ff9c08;

-	text-decoration: none;

-}

-

-#launch-pad .launch-pad-button p {

-	margin: 0;

-	padding: 0 2px;

-	color: #cbcbcb;

-	font: normal 11px/15px 'Arial', 'Helvetica', sans-serif;

-	letter-spacing: .2px;

-}

-

-

-/* Footer

-   -------------------------------- */

-

-#footer {

-	height: 45px;

-	padding: 10px 0;

-	position: relative;

-}

-

-#footer .inner {

-	position: relative;

-	z-index: 2;

-}

-

-#ie6 #footer .inner {

-	zoom: 1;

-}

-

-#footer .bg {

-	background: url('/images/footer_bg.png') no-repeat left top;

-	width: 100%;

-	height: 65px;

-	position: absolute;

-	top: 0;

-	left: 0;

-	z-index: 1;

-}

-

-#ie6 #footer .bg {

-	background: transparent none;

-	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/footer_bg.png', sizingMethod='scale');

-	zoom: 1;

-}

-

-#footer p {

-	margin: 0;

-	padding: 0;

-	color: #5e5e5e;

-	font: normal 9px 'Arial', 'Helvetica', sans-serif;

-	text-transform: uppercase;

-}

-

-#footer p a {

-	color: #bbb;

-}

-

-#footer span.first {

-	display: block;

-	float: left;

-	padding: 6px 0 0 16px;

-}

-

-#footer .block {

-	display: block;

-	float: left;

-}

-

-#footer .block span,

-#footer span.empty {

-	display: none;

-}

-

-#footer .liferay {

-	margin: 3px 10px 0px 10px;

-	background: url('/images/icon_liferay.gif');

-	width: 98px;

-	height: 22px;

-	border: 0;

-}

-#footer .filamentgroup {

-background:  url('/images/icon_filamentgroup.gif');

-width: 180px;

-height: 28px;

-border: 0;

-margin: 3px 22px 0px 3px;

-}

-

-#footer .adobe {

-	margin: 2px 0 0 0;

-	background: url('/images/icon_adobe.png');

-	width: 28px;

-	height: 28px;

-}

-

-/* Demoflow

-   -------------------------------- */

-

-div.demoflow-button-left {

-	position: absolute;

-	left: -3px;

-	top: 371px;

-	background: url('/images/demos_arrows.png') no-repeat left top;

-	width: 52px;

-	height: 45px;

-	cursor: pointer; cursor: hand;

-	z-index: 999;

-}

-

-div.demoflow-button-left .bg {

-	background: url('/images/demos_arrows.png') no-repeat left bottom;

-	width: 52px;

-	height: 45px;

-	position: absolute;

-	top: 0;

-	left: 0;

-}

-

-div.demoflow-button-right {

-	position: absolute;

-	right: -4px;

-	top: 371px;

-	background: url('/images/demos_arrows.png') no-repeat right top;

-	width: 52px;

-	height: 45px;

-	cursor: pointer; cursor: hand;

-	z-index: 999;

-}

-

-div.demoflow-button-right .bg {

-	position: absolute;

-	left: 0;

-	top: 0;

-	background: url('/images/demos_arrows.png') no-repeat right bottom;

-	width: 52px;

-	height: 45px;

-}

-

-.demoflow {

-	position: relative;

-	top: 22px;

-	left: 0;

-	width: 950px;

-	height: 337px;

-}

-

-.demoflow div {

-	float: left;

-	height: 100px;

-	width: 75px;

-	cursor: pointer; cursor: hand;

-}

-

-.ie .demoflow div {

-	zoom: 1;

-}

-

-.demoflow div {

-	border: 1px solid #666;

-}

-

-

-.demoflow div:hover {

-	border: 1px solid #666;

-	/*opacity: 1 !important;*/

-}

-

-.demoflow div img {

-	height: 100%;

-	width: 100%;

-}

-

-.demoflow div.shadow {

-	height: 100%;

-	width: 100%;

-	position: absolute;

-	top: 0px;

-	left: 0px;

-	background-color: black;

-}

-

-.ie .demoflow div.shadow {

-	display: none;

-}

-

-/* Functional Demos */

-

-#links {

-	float:left;

-	width:155px;

-	font-size: 13px;

-}

-

-#functional ul {

-	list-style: none;

 	padding: 0;

-	margin: 0;

+	letter-spacing: 0.75pt;

+	font: bold 1.2em 'Arial', 'Helvetica', sans-serif;

+	color: #e87b10;

 }

 

-#functional #links ul {

-  margin-top:10px;

-  line-height:1.2em;

+.demos-nav dt {

+	margin-top: 1.5em;

+	margin-bottom: 0.7em;

+	line-height: 1.2em;

 }

 

-#functional #links ul li a{

+.demos-nav dd a {

 	border-bottom: 1px solid #F4F4F4;

 	display:block;

 	padding: 3px 3px 3px 12px;

@@ -963,157 +99,8 @@ div.demoflow-button-right .bg {
 	height: 15px;

 }

 

-#functional #links ul li a:hover,

-#functional #links ul li a:focus {

+.demos-nav dd a:hover,

+.demos-nav dd a:focus {

 	background: #EAEAEA;

 	border-color: #BBBBBB;

 }

-

-/* About */

-

-div.about ul {

-	list-style-type: square;

-	margin-bottom: 50px;

-}

-

-div.about ul li h5 {

-	font-size: 16px;

-	margin-bottom: 10px;

-}

-

-div.about ul li a:link, div.about ul li a:visited {

-	text-decoration: none;

-	color: #666;

-}

-

-div.about ul li a:hover {

-	color: #000;

-}

-

-div.about ul li p {

-	padding-right: 40px;

-	padding-left: 20px;

-}

-

-

-

-/* Specific code from former individual files */

-

-.jquery-safari-checkbox       {display: inline;}

-.jquery-safari-checkbox-box   {display: inline; font-size: 16px; line-height: 16px; cursor: pointer; cursor: hand;}

-.jquery-safari-checkbox .mark {display: inline;}

-

-.jquery-safari-checkbox img {vertical-align: middle; width: 16px; height: 16px;}

-.jquery-safari-checkbox img{background: transparent url(/images/safari-checkbox.png) no-repeat;}

-

-.jquery-safari-checkbox img{

-	background-position: 0px 0px;

-}

-.jquery-safari-checkbox-hover img{

-	background-position: -16px 0px;

-}

-.jquery-safari-checkbox-checked .jquery-safari-checkbox img{

-	background-position: 0px -16px;

-}

-.jquery-safari-checkbox-checked .jquery-safari-checkbox-hover img {

-	background-position: -16px -16px;

-}

-

-.jquery-safari-checkbox-disabled img{

-	background-position: 0px -32px;

-}

-.jquery-safari-checkbox-checked .jquery-safari-checkbox-disabled img{

-	background-position: 0px -48px;

-}

-

-

-.jquery-checkbox-box   {display: inline; font-size: 20px; line-height: 20px; cursor: pointer; cursor: hand;}

-.jquery-checkbox       {display: inline;}

-.jquery-checkbox .mark {display: inline;}

-

-.jquery-checkbox img {vertical-align: middle; width: 60px; height: 20px;}

-.jquery-checkbox img{background: transparent url(/images/checkbox.png) no-repeat;}

-

-.jquery-checkbox img{

-	background-position: 0px 0px;

-}

-.jquery-checkbox-hover img{

-	background-position: 0px 0px;

-}

-.jquery-checkbox-checked .jquery-checkbox img{

-	background-position: 0px -40px;

-}

-.jquery-checkbox-checked .jquery-checkbox-hover img {

-	background-position: 0px -40px;

-}

-

-.jquery-checkbox-disabled img{

-	background-position: 0px -80px;

-}

-.jquery-checkbox-checked .jquery-checkbox-disabled img{

-	background-position: 0px -100px;

-}

-

-

-div.selectbox-wrapper {

-  position:absolute;

-  width:158px;

-  background-color: #fff;

-  border:1px solid #6c6c6c;

-  margin:0px;

-  margin-top: -1px;

-  padding:0px;

-  font-size:0.8em;

-  text-align:left;

-  max-height:200px;

-  overflow:auto;

-}

-div.selectbox-wrapper ul {

-  list-style-type:none;

-  margin:0px;

-  padding:0px;

-}

-div.selectbox-wrapper ul li.selected { 

-   /*background-color: #D2D2D2;*/

-}

-div.selectbox-wrapper ul li.current { 

-  background-color: #CFCFCF;

-}

-div.selectbox-wrapper ul li {

-  list-style-type:none;

-  display:block;

-  margin:0;

-  padding:2px;

-  cursor:pointer;

-}

-

-.selectbox /* look&fell of  select box*/

-{

-  padding: 4px 0 0 4px;

-	_padding: 0 0 0 4px;

-  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;

-  font-size:12px;

-  width : 150px; 

-  display : block;

-  text-align:left; 

-  background: url('/images/select-bg.png') right no-repeat;

-  height:22px;

-  cursor: pointer;

-  border:0px solid #6c6c6c;

-  color:#CECECE;

-}

-

-/* ie7 */

-html>body .selectbox {

-	*padding: 0 0 0 4px;

-}

-

-/* opera9, webkit */

-@media all and (min-width:0px) {

-    head~body .selectbox { padding: 0 0 0 3px; }

-}

-

-input.selectbox {

-	line-height: 21px;

-	vertical-align: middle !important;

-}