Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <head>
	<!-- Basic Page Needs-->
	<meta charset="utf-8">
	<title>SelectDown Menu</title>
	<meta name="description" content="SelectDown, responsive, header, footer, Layout, Dropdown, Select, Box">
	<meta name="author" content="Evren Akar">
	
	<!--Mobile Specific Metas-->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	
	<!--[if lt IE 9]>
		<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Google Fonts-->
	<link href='https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

	<!-- Favicons-->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
	<!--Header-->
		<header>
			<!--İnfo Bar-->
			<div class="info">
				<div class="informationBar">
					<div class="warning">
						2 New Announcement!
					</div>
					<div class="logout">
						<a href="#">LOGOUT</a>
					</div>
					<div class="volumeSetting">
						<a class="volume" href="#"></a>
					</div>
				</div>
			</div>
				
			<!--Navigation-->
			<div class="navigation">
				<div class="navContent">
					<div class="logo">
						<a href="#" title="Home">Home</a>
					</div>
					<div class="menu">
						<ul>
							<li><a href="#">Home</a></li>
							<li><a href="#">Message</a> <div><span>3</span></div></li>
							<li><a href="#">Reports</a></li>
							<li><a href="#">Analysis</a></li>
						</ul>
					</div>
				</div>
			</div>

			<!--selectDown Status-->
			<div class="selectDownStatusContainer">
				<div class="dropdownContainer">
					<div class="dd1 selectDownStatusDropdown" tabindex="1">
						<div class="selectDownName">Channel-1</div>
						<span class="selectDownStatus">Close</span>
						<div class="selectDownStatusBorder"></div>
						<ul class="dropdown">
							<li><a class="open" href="#"><i></i>Open</a></li>
							<li><a class="close" href="#"><i></i>Close</a></li>
							<li><a class="intensive" href="#"><i></i>Intensive</a></li>
						</ul>
					</div>
					<div class="dd2 selectDownStatusDropdown" tabindex="1">
						<div class="selectDownName">Channel-2</div>
						<span class="selectDownStatus">Close</span>
						<div class="selectDownStatusBorder"></div>
						<ul class="dropdown">
							<li><a class="open" href="#"><i></i>Open</a></li>
							<li><a class="close" href="#"><i></i>Close</a></li>
							<li><a class="intensive" href="#"><i></i>Intensive</a></li>
						</ul>
					</div>
					<div class="dd3 selectDownStatusDropdown" tabindex="1">
						<div class="selectDownName">Channel-3</div>
						<span class="selectDownStatus">Close</span>
						<div class="selectDownStatusBorder"></div>
						<ul class="dropdown">
							<li><a class="open" href="#"><i></i>Open</a></li>
							<li><a class="close" href="#"><i></i>Close</a></li>
							<li><a class="intensive" href="#"><i></i>Intensive</a></li>
						</ul>
					</div>
					<div class="dd4 selectDownStatusDropdown" tabindex="1">
						<div class="selectDownName">Channel-4</div>
						<span class="selectDownStatus">Close</span>
						<div class="selectDownStatusBorder"></div>
						<ul class="dropdown">
							<li><a class="open" href="#"><i></i>Open</a></li>
							<li><a class="close" href="#"><i></i>Close</a></li>
							<li><a class="intensive" href="#"><i></i>Intensive</a></li>
						</ul>
					</div>
					<div class="selectDownNumber">
						Total of 4 Channels.
					</div>
				</div>
			</div>
		</header>
			
	<!--Container-->
		<div class="container">
			<!--Content-->
			<div class="fifteen columns selectDown">
					<h1>SelectDown Menu - Select Box & Dropdown</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in diam quis lectus molestie consectetur. Integer vitae sodales augue, sed pellentesque tortor. Fusce gravida, tortor eu pharetra iaculis, leo quam aliquam mauris, vitae sodales dui odio sit amet diam. Vestibulum ut urna arcu. Maecenas ipsum elit, bibendum quis euismod eget, consequat lacinia orci. In semper nec libero eget volutpat. Nullam et lectus a mi luctus interdum. Morbi ultricies ligula elit, vestibulum vehicula mauris gravida id. Nulla tempor sem gravida, hendrerit erat a, ultricies diam. In ultricies aliquet mi ac pharetra. Phasellus ut ultrices quam. Duis pretium velit neque, at volutpat lectus blandit ac. Donec commodo dignissim porta. Praesent eu sem suscipit est dignissim molestie. Nulla venenatis semper mattis. Cras eu mattis ligula.</p>
			</div>
			
		</div>

<!--Footer-->
	<footer>
		<div class="footerContainer">
			<div class="menu">
				<ul class="nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Message</a></li>
					<li><a href="#">Reports</a></li>
					<li class="teamViewer"><a href="#">Analysis</a></li>
				</ul>
				<ul class="info">
					<li><a class="help" href="#">Help</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</div>
			<div class="statusColor">
				<p class="statusDesc">Meanings of colors:</p>
				<div class="status">
					<div class="Yellow"></div>
					<p class="statusText">Status-1</p>
				</div>
				<div class="status">
					<div class="Blue"></div>
					<p class="statusText">Status-2</p>
				</div>
				<div class="status">
					<div class="Red"></div>
					<p class="statusText">Status-3</p>
				</div>
				<div class="status">
					<div class="Green"></div>
					<p class="statusText">Status-4</p>
				</div>
			</div>
		</div>
	</footer>
</body>
</html>
              
            
!

CSS

              
                /*
* SelectDown
* Copyright 2013
* Evren Akar
* http://www.evrenakar.com
*/
/* SelectDown CSS
==================================================
	
/*selectDown*/
.selectDown {width:100% !important;font-family:arial;color:#343333;height:100%; margin:0; line-height:30px;}
.selectDown h1 {font-weight:bold;font-size:25px;margin:0 0 10px 0;}
.selectDown p {margin:0;font-size:13px;}
.selectDown p.info {margin-bottom:15px;}
.selectDown p span.bold {font-weight:bold;}
.selectDown p span.mail {color:#ff5a00;font-weight:bold;}


/*
* SelectDown
* Copyright 2013
* Evren Akar
* http://www.evrenakar.com
*/
/* Layout CSS
==================================================
	#Header
	#Footer
*/

/* Table of Contents
==================================================
    #Base %100 responsive design
    #Pc (959px)
    #Tablet (768px)
    #Mobile (Portrait 320px)
    #Mobile (Landscape 480px)
    #Clearing */


/* #Base
================================================== */
    .container                                  { position: relative; width:1256px;margin:10px auto 20px auto; padding:0;}
    .container .column,
    .container .columns                         { float: left; display: inline;}
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 982px; }
    .container .sixteen.columns                 { width: 100%;}
    .container .one-third.column                { width: 242px;}
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }




/*Header*/
	header {width:100%;height:202px;margin:0 auto; padding:0;}
		/*Header - Info Bar*/
		header .info {float:left;width:100%;height:35px;margin:0 auto; padding:0;background: #424242;
		    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzIzMjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		    background: -moz-linear-gradient(top,  #424242 0%, #232323 100%);
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#424242), color-stop(100%,#232323));
		    background: -webkit-linear-gradient(top,  #424242 0%,#232323 100%);
		    background: -o-linear-gradient(top,  #424242 0%,#232323 100%);
		    background: -ms-linear-gradient(top,  #424242 0%,#232323 100%);
		    background: linear-gradient(to bottom,  #424242 0%,#232323 100%);
		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#232323',GradientType=0 );}
		header .info .informationBar {width:1256px;height:35px;margin:0 auto 0 auto;}
		header .info .informationBar .warning {float:left;padding:7px 5px 7px 50px;font-size:12px;font-family:'Roboto', sans-serif;font-weight:bold;color:#ff9600;background: url(http://evrenakar.com/demo/selectDown/images/new/warning2.png) 19px 9px no-repeat;}
		header .info .informationBar .volumeSetting {float:right;width:23px;height:26px;text-align:right;padding:2px 9px 0 0;border-right:solid 1px #3b3b3b;}
		header .info .informationBar a.volume {width:95px;height:26px;background: url(http://evrenakar.com/demo/selectDown/images/new/volume-off.png) 0 8px no-repeat;display:block;}
		header .info .informationBar a.volume.off {background: url(http://evrenakar.com/demo/selectDown/images/new/volume-on.png) 0 8px no-repeat;}
		header .info .informationBar .logout {float:right;width:75px;height:28px;padding:7px 0 0 0;border-left:solid 1px #1d1d1d;}
		header .info .informationBar .logout a {width:75px;height:29px;display:block;text-decoration:none;font-weight:bold;color:#e6302c;font-size:12px;font-family:'Roboto', sans-serif;text-align:right;}

		/*Header - Navigation*/
		header .navigation {float:left;width:100%;height:105px;background: url(http://evrenakar.com/demo/selectDown/images/new/header-bg.jpg) 0 0;}
		header .navigation .navContent {width:1256px;height:105px;background: url(http://evrenakar.com/demo/selectDown/images/new/logo-bg.jpg) 0 0 no-repeat;margin:0 auto 0 auto;}

		/*Logo*/
		header .navigation .navContent .logo {float:left;width:108px;height:96px;padding-top:10px;}
		header .navigation .navContent .logo a {width:108px;height:86px;background: url(http://evrenakar.com/demo/selectDown/images/new/logo4.png) 0 0 no-repeat;text-indent:-9999px;display:block;}
		header .navigation .navContent .logo a:hover {width:108px;height:86px;background: url(http://evrenakar.com/demo/selectDown/images/new/logo4.png) 0 0 no-repeat;}

		/*Menu*/
		header .navigation .navContent .menu {float:right;height:65px;padding-top:40px;}
		header .navigation .navContent .menu ul {float:right;list-style-type:none;padding:0;margin:0;}
		header .navigation .navContent .menu ul li {float:left;display: inline;margin-left:45px;}
		header .navigation .navContent .menu ul li a {float:left;text-decoration:none;font-family:'Roboto', sans-serif;font-weight:bold;color:#ffffff;font-size:15px;text-shadow: 0px -1px #bd6a1e;}
		header .navigation .navContent .menu ul li a:hover {color:#000000;}
		header .navigation .navContent .menu ul li div {float:left;width:22px;height:22px;-moz-border-radius:55px;border-radius:55px;background-color:#2e2e2e;margin-left:5px;text-align:center;}
		header .navigation .navContent .menu ul li div span {font-family:'Roboto', sans-serif;font-weight:bold;color:#ffffff;font-size:12px;}

		/*selectDown Status*/
		header .selectDownStatusContainer {float:left;width:100%;height:52px;background-color:#FFFFFF;-webkit-box-shadow: 0 8px 6px -6px black;-moz-box-shadow: 0 8px 6px -6px black;box-shadow: 0 8px 6px -6px #dddddd;font-family:'Roboto', sans-serif;}
		header .selectDownStatusContainer .dropdownContainer {width:1256px;margin:0 auto 0 auto;}
		header .selectDownStatusContainer .dropdownContainer .selectDownNumber {float:right;font-family:'Roboto', sans-serif;font-size:13px;color:#b7b7b7;padding: 15px 0;}

		/*selectDown Status Dropdown*/
		.selectDownStatusDropdown {float:left;z-index: 9999;position: relative;width:191px;height:42px;padding:10px 14px 0 14px;border-left:solid 1px #e5e5e5;border-right:solid 1px #e5e5e5;font-weight: bold;color: #8AA8BD;cursor: pointer;outline: none;line-height: 18px;border-bottom: solid 1px #e5e5e5;}
		.selectDownStatusDropdown .selectDownName {color:#505050;background: url(http://evrenakar.com/demo/selectDown/images/new/arrow-passive.png) 170px 6px no-repeat;}
		.selectDownStatusDropdown.active .selectDownName {background: url(http://evrenakar.com/demo/selectDown/images/new/arrow-active.png) 170px 6px no-repeat;}
		.selectDownStatusDropdown span {color:#b01319;}
		.selectDownStatusDropdown span.open {color:#468847;}
		.selectDownStatusDropdown span.close {color:#b01319;}
		.selectDownStatusDropdown span.intensive {color:#ff5a00;}
		.selectDownStatusDropdown .selectDownStatusBorder {position: absolute;width: 100%;background:#b01319;left: 0;top: 52px;height: 4px;display:block;}
		.selectDownStatusDropdown .selectDownStatusBorder.open {position: absolute;width: 100%;background:#468847;left: 0;top: 52px;height: 4px;display:block;}
		.selectDownStatusDropdown .selectDownStatusBorder.close {position: absolute;width: 100%;background:#b01319;left: 0;top: 52px;height: 4px;display:block;}
		.selectDownStatusDropdown .selectDownStatusBorder.intensive {position: absolute;width: 100%;background:#ff5a00;left: 0;top: 52px;height: 4px;display:block;}
		.selectDownStatusDropdown.active .selectDownStatusBorder {position: absolute;width: 100%;background:#b01319;left: 0;top:0;height: 4px;display:block;}
		.selectDownStatusDropdown.active .selectDownStatusBorder.open {position: absolute;width: 100%;background:#468847;left: 0;top: 0;height: 4px;display:block;}
		.selectDownStatusDropdown.active .selectDownStatusBorder.close {position: absolute;width: 100%;background:#b01319;left: 0;top: 0;height: 4px;display:block;}
		.selectDownStatusDropdown.active .selectDownStatusBorder.intensive {position: absolute;width: 100%;background:#ff5a00;left: 0;top: 0;height: 4px;display:block;}
		.selectDownStatusDropdown .dropdown {display:none;position: absolute;top: 100%;left: 0;right: 0;background: white;border-radius: inherit;border: 1px solid rgba(0,0,0,0.17);box-shadow: 0 0 5px rgba(0,0,0,0.1);font-weight: normal;-webkit-transition: all 0.5s ease-in;-moz-transition: all 0.5s ease-in;-ms-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;transition: all 0.5s ease-in;list-style: none;opacity: 0;pointer-events: none;z-index:9999;}
		.selectDownStatusDropdown.active .dropdown li {display:block;}
		.selectDownStatusDropdown .dropdown li i {float: right;color: inherit;width:6px;height:15px;background: url(../images/new/option-arrow.png) 0 5px no-repeat;}
		.selectDownStatusDropdown .dropdown li a {font-weight:bold;display: block;padding: 10px;text-decoration: none;color: #8aa8bd;border-bottom: 1px solid #e6e8ea;box-shadow: inset 0 1px 0 rgba(255,255,255,1);-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
		.selectDownStatusDropdown .dropdown li a.open {color:#468847;}
		.selectDownStatusDropdown .dropdown li a.close {color:#b01319;}
		.selectDownStatusDropdown .dropdown li a.intensive {color:#ff5a00;}
		.selectDownStatusDropdown .dropdown li:first-of-type a {border-radius: 7px 7px 0 0;}
		.selectDownStatusDropdown .dropdown li:last-of-type a {border: none;border-radius: 0 0 7px 7px;}
		.selectDownStatusDropdown .dropdown li:hover a {background: #f3f8f8;}
		.selectDownStatusDropdown.active .dropdown {display:block;opacity: 1;pointer-events: auto;}
		.no-opacity .selectDownStatusDropdown .dropdown,.no-pointerevents .selectDownStatusDropdown .dropdown {display: none;opacity: 1;pointer-events: auto;}
		.no-opacity .selectDownStatusDropdown.active .dropdown,.no-pointerevents .selectDownStatusDropdown.active .dropdown {display: block;}



/*Footer*/
	html {position: relative !important;min-height: 100% !important;}
	body {margin: 0 0 128px !important; /* bottom = footer height */}
	footer {position: absolute;height: 128px;width: 100%;background-color:#2d2d2d;left: 0;bottom: 0;background:url(http://evrenakar.com/demo/selectDown/images/diagmonds.png); border-bottom:solid 5px #ff5a00;}
		footer .footerContainer {width:1256px;height:128px;margin: 0 auto 0 auto;}
		footer .footerContainer .menu {height:62px;}
		footer .footerContainer ul {list-style:none;}
		footer .footerContainer ul.nav {float:left;color:#919191;padding:0;font-size:14px;font-weight:bold;font-family:'Roboto', sans-serif;margin:0;}
		footer .footerContainer ul.nav li {float:left;padding:21px 15px 19px 15px;margin:0;border-left:solid 1px #575757;border-right:solid 1px #242424;}
		footer .footerContainer ul.nav li:first-child {padding:21px 15px 19px 0;border-left:none;}
		footer .footerContainer ul.nav li:last-child {border-right:none;}
		footer .footerContainer ul.nav li a {text-decoration:none;color:#919191;}
		footer .footerContainer ul.nav li a:hover {color:#ff5a00;}
		footer .footerContainer ul.info {float:right;padding:0;font-size:14px;font-weight:bold;font-family:'Roboto', sans-serif;margin:0;}
		footer .footerContainer ul.info li {float:left;padding:23px 15px 17px 15px;margin:0;border-right:solid 1px #242424;}
		footer .footerContainer ul.info li:last-child {padding:23px 0 17px 15px;border-right:none;border-left:solid 1px #575757;}
		footer .footerContainer ul.info li a {text-decoration:none;color:#ffffff;}
		footer .footerContainer ul.info li a.help {color:#ff5a00;}
		footer .footerContainer .statusColor {height: 58px;padding:8px 0 0 0;float:left;font-family:'Roboto', sans-serif;font-weight:bold;font-size: 12px;color:#919191;}
		footer .footerContainer .statusColor .status{float:left;padding:0 20px 0 0;}
		footer .footerContainer .statusColor .statusDesc{margin:0 0 7px 0;}
		footer .footerContainer .statusColor .status .statusText{float:left;padding:0 0 0 7px;color:#ffffff; line-height: 17px;}
		footer .footerContainer .statusColor .status .Yellow {float:left;width: 3px;height: 17px;background: #ff8a00;}
		footer .footerContainer .statusColor .status .Blue {float:left;width: 3px;height: 17px;background: #3a87ad;}
		footer .footerContainer .statusColor .status .Red {float:left;width: 3px;height: 17px;background: #bc2d2a;}
		footer .footerContainer .statusColor .status .Green {float:left;width: 3px;height: 17px;background: #49944a;}






/* #Pc*/
/* Note: Design for a width of 959px */

@media only screen and (min-width: 959px) and (max-width: 1285px) {
.container                                  {width:940px; padding: 0;}
.container .column,
.container .columns                         {float: left; display: inline;}
.row                                        {margin-bottom: 20px; }

/* Nested Column Classes */
.column.alpha, .columns.alpha               {margin-left:0;}
.column.omega, .columns.omega               {margin-right:0;}

/* Base Grid */
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 720px; }
.container .sixteen.columns                 { width: 940px; }
.container .one-third.column                { width: 200px; }
.container .two-thirds.column               { width: 620px; }

/* Offsets */
.container .offset-by-one                   { padding-left: 60px;  }
.container .offset-by-two                   { padding-left: 120px; }
.container .offset-by-three                 { padding-left: 180px; }
.container .offset-by-four                  { padding-left: 240px; }
.container .offset-by-five                  { padding-left: 300px; }
.container .offset-by-six                   { padding-left: 360px; }
.container .offset-by-seven                 { padding-left: 420px; }
.container .offset-by-eight                 { padding-left: 480px; }
.container .offset-by-nine                  { padding-left: 540px; }
.container .offset-by-ten                   { padding-left: 600px; }
.container .offset-by-eleven                { padding-left: 660px; }
.container .offset-by-twelve                { padding-left: 720px; }
.container .offset-by-thirteen              { padding-left: 780px; }
.container .offset-by-fourteen              { padding-left: 840px; }
.container .offset-by-fifteen               { padding-left: 900px; }



	header .info .informationBar {width:940px;}
	header .info .informationBar .logout {width:75px;}
	header .navigation .navContent {width:940px;}
	header .navigation .navContent .menu ul {padding:0;}
	header .selectDownStatusContainer .dropdownContainer {width:940px;}
	.selectDownStatusDropdown {width:157px;}
	.selectDownStatusDropdown .selectDownName {background: url(http://evrenakar.com/demo/selectDown/images/new/arrow-passive.png) 130px 6px no-repeat;}
	.selectDownStatusDropdown.active .selectDownName {background: url(http://evrenakar.com/demo/selectDown/images/new/arrow-active.png) 130px 6px no-repeat;}
	.container .banner {margin:25px 0 15px 0;}
	footer .footerContainer {width:940px;}



}




/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container                                  { width: 750px; }
.container .column,
.container .columns                         { }
.column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
.alpha.omega                                { margin-left: 0; margin-right: 0; }

.container .one.column,
.container .one.columns                     { width: 28px; }
.container .two.columns                     { width: 76px; }
.container .three.columns                   { width: 124px; }
.container .four.columns                    { width: 172px; }
.container .five.columns                    { width: 220px; }
.container .six.columns                     { width: 268px; }
.container .seven.columns                   { width: 316px; }
.container .eight.columns                   { width: 364px; }
.container .nine.columns                    { width: 412px; }
.container .ten.columns                     { width: 460px; }
.container .eleven.columns                  { width: 508px; }
.container .twelve.columns                  { width: 556px; }
.container .thirteen.columns                { width: 604px; }
.container .fourteen.columns                { width: 652px; }
.container .fifteen.columns                 { width: 750px; }
.container .sixteen.columns                 { width: 748px; }
.container .one-third.column                { width: 118px;display:none; }
.container .two-thirds.column               { width: 492px; }

/* Offsets */
.container .offset-by-one                   { padding-left: 48px; }
.container .offset-by-two                   { padding-left: 96px; }
.container .offset-by-three                 { padding-left: 144px; }
.container .offset-by-four                  { padding-left: 192px; }
.container .offset-by-five                  { padding-left: 240px; }
.container .offset-by-six                   { padding-left: 288px; }
.container .offset-by-seven                 { padding-left: 336px; }
.container .offset-by-eight                 { padding-left: 384px; }
.container .offset-by-nine                  { padding-left: 432px; }
.container .offset-by-ten                   { padding-left: 480px; }
.container .offset-by-eleven                { padding-left: 528px; }
.container .offset-by-twelve                { padding-left: 576px; }
.container .offset-by-thirteen              { padding-left: 624px; }
.container .offset-by-fourteen              { padding-left: 672px; }
.container .offset-by-fifteen               { padding-left: 720px; }


    header .info .informationBar {width:750px;}
	header .info .informationBar .logout {width:75px;}
	header .navigation .navContent {width:750px;}
	header .navigation .navContent .menu ul {padding:0;}
	header .selectDownStatusContainer .dropdownContainer {width:750px;}
	header .navigation .navContent .menu ul li:last-child {display:none;}
	header .selectDownStatusContainer .dropdownContainer .selectDownNumber {display:none;}
	.selectDownStatusDropdown {width:157px;}
	.selectDownStatusDropdown .selectDownName {background: url(http://evrenakar.com/demo/selectDown/images/new/arrow-passive.png) 130px 6px no-repeat;}
	.selectDownStatusDropdown.active .selectDownName {background: url(http://evrenakar.com/demo/selectDown/images/new/arrow-active.png) 130px 6px no-repeat;}
	.container .banner {margin: 20px 15px 15px 0;}
	footer .footerContainer {width:750px;}



}




/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 479px) {
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }

.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .two-thirds.column  { width: 300px; }

/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
.container .one-third.column {display:none;}


header .info {display:none;}
header .navigation .navContent {width:100%}
header .navigation .navContent .menu {display:none;}
header .selectDownStatusContainer {height:100%;}
header .selectDownStatusContainer .dropdownContainer {width:300px;}
header .selectDownStatusContainer .dropdownContainer .selectDownNumber {display:none;}
#breadcrumb{margin:0 0 5px 0;}

.container h2 {display:none;}
.pagination {display:none;}
.selectDownStatusDropdown {width:270px;height:40px;font-size:12px;padding: 5px 14px 0;}
.selectDownStatusDropdown .selectDownName {background:none;font-size:11px;}
.selectDownStatusDropdown.active .selectDownName {background:none;font-size:11px;}
.selectDownStatusDropdown .dropdown {right:0;top:46%;display: block;opacity: 1;}
.selectDownStatusDropdown.active .dropdown li {display: block;float: left;font-size: 10px;width: 98px;}
.selectDownStatusDropdown .dropdown li {display: block;float: left;font-size:10px;width: 98px;}
.selectDownStatusDropdown .dropdown li a {padding: 2px 5px;border-bottom:none;}
.selectDownStatusDropdown.active .dropdown li a {border-bottom:none;}
.selectDownStatusDropdown .dropdown li i {display:none;}
.selectDownStatusDropdown .selectDownStatusBorder {top: -1px;}
.selectDownStatusDropdown .selectDownStatusBorder.open {top: -1px;}
.selectDownStatusDropdown .selectDownStatusBorder.close {top: -1px;}
.selectDownStatusDropdown .selectDownStatusBorder.intensive {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder.open {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder.close {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder.intensive {top: -1px;}
.selectDownStatusDropdown span {display:none;}
.container .banner {display:none;}

footer {height:65px;}
footer .footerContainer {width:300px;height:65px;}
footer .footerContainer .menu {width:300px;margin:0 auto 0 auto;}
footer .footerContainer ul.nav li:first-child {padding: 10px 15px;}
footer .footerContainer ul.nav li {padding: 10px 10px;border-right:none !important;font-size:11px;}
footer .footerContainer ul.nav li:last-child {padding: 10px 15px;}
footer .footerContainer .statusColor {display:none;}
footer .footerContainer ul.info {display:none;}
footer .footerContainer ul.nav li.teamViewer {display:none;}



}








/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 450px; }
.container .columns,
.container .column { margin: 0; }

.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 450px; }

header .info {display:none;}
header .navigation .navContent {width:100%}
header .navigation .navContent .menu {display:none;}
header .selectDownStatusContainer {height:100%;}
header .selectDownStatusContainer .dropdownContainer {width:450px;}
header .selectDownStatusContainer .dropdownContainer .selectDownNumber {display:none;}
#breadcrumb{margin:0 0 5px 0;}

.container h2 {display:none;}
.pagination {display:none;}
.selectDownStatusDropdown {width:422px;height:40px;font-size:12px;padding: 5px 14px 0;}
.selectDownStatusDropdown .selectDownName {background: url("http://evrenakar.com/demo/selectDown/images/new/arrow-passive.png") no-repeat scroll 390px 6px transparent;}
.selectDownStatusDropdown.active .selectDownName {background: url("http://evrenakar.com/demo/selectDown/images/new/arrow-active.png") no-repeat scroll 390px 8px transparent;}
.selectDownStatusDropdown .dropdown {right:0;top:46%;}
.selectDownStatusDropdown.active .dropdown li {display: block;float: left;font-size: 11px;width:145px;}
.selectDownStatusDropdown.active .dropdown li a {border-bottom:none;}
.selectDownStatusDropdown .dropdown li a {padding: 2px 5px;}
.selectDownStatusDropdown .dropdown li i {display:none;}
.selectDownStatusDropdown .selectDownStatusBorder {top:45px;}
.selectDownStatusDropdown .selectDownStatusBorder.open {top:45px;}
.selectDownStatusDropdown .selectDownStatusBorder.close {top:45px;}
.selectDownStatusDropdown .selectDownStatusBorder.intensive {top:45px;}
.selectDownStatusDropdown.active .selectDownStatusBorder {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder.open {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder.close {top: -1px;}
.selectDownStatusDropdown.active .selectDownStatusBorder.intensive {top: -1px;}

.container .banner {display:none;}

footer {height:65px;}
footer .footerContainer {width:100%;height:65px;}
footer .footerContainer .menu {width:450px;margin:0 auto 0 auto;}
footer .footerContainer ul.nav {width:450px;}
footer .footerContainer ul.nav li:first-child {padding: 10px 5px 10px 0;}
footer .footerContainer ul.nav li {padding: 10px 5px 10px 5px;border-right:none !important;width: 140px;text-align: center;}
footer .footerContainer ul.nav li:last-child {padding:10px 0 10px 0;}
footer .footerContainer .statusColor {display:none;}
footer .footerContainer ul.info {display:none;}
footer .footerContainer ul.nav li.teamViewer {display:none;}
}


/*
* SelectDown
* Copyright 2013
* Evren Akar
* http://www.evrenakar.com
*/


/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Forms
	#Misc */


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
body {
		padding: 0 !important;
		border: 0 !important;}

	body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


/* #Basic Styles
================================================== */
	body {
		background: url(http://evrenakar.com/demo/selectDown/images/selectDown-bg.jpg);
		font: 14px/21px Arial;
		color: #444;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
 }


/* #Typography
================================================== */
	h1, h2, h3, h4, h5, h6 {
		color: #181818;
		font-family: Arial;
		font-weight: normal; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 0 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
	a, a:visited { color: #333; text-decoration: underline; outline: 0; }
	a:hover, a:focus { color: #000; }
	p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li {}
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/* #Images
================================================== */

	img.scale-with-grid {
		max-width: 100%;
		height: auto; }


/* #Buttons
================================================== */

	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #eee; /* Old browsers */
		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  color: #444;
	  display: inline-block;
	  font-size: 11px;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(255, 255, 255, .75);
	  cursor: pointer;
	  margin-bottom: 20px;
	  line-height: normal;
	  padding: 8px 10px;
	  font-family: Arial; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #ddd; /* Old browsers */
		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		border: 1px solid #666;
		background: #ccc; /* Old browsers */
		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}


/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }

/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
              
            
!

JS

              
                $(document).ready(function(){	

//SelectDown
	function DropDown(el) {
		this.dd = el;
		this.placeholder = this.dd.children('span');
		this.opts = this.dd.find('ul.dropdown > li');
		this.val = '';
		this.index = -1;
		this.initEvents();
	}
	DropDown.prototype = {
		initEvents : function() {
			var obj = this;

			obj.dd.on('click', function(event){
				$(this).toggleClass('active');
				return false;
			});

			obj.opts.on('click',function(){
				var opt = $(this);
				obj.val = opt.text();
				obj.index = opt.index();
				obj.placeholder.text(obj.val);
			});
		},
		getValue : function() {
			return this.val;
		},
		getIndex : function() {
			return this.index;
		}
	}
	$(function() {

		var dd = new DropDown( $('.dd1') );
		var dd = new DropDown( $('.dd2') );
		var dd = new DropDown( $('.dd3') );
		var dd = new DropDown( $('.dd4') );
		var dd = new DropDown( $('.dd5') );

		$(document).click(function() {
			$('.selectDownStatusDropdown').removeClass('active');
		});
	});


	//Delete
	$('.selectDownStatusDropdown .dropdown li a').click(function(){
		var item = $(this).parents(".selectDownStatusDropdown");
		item.find(".selectDownStatus").removeClass("close intensive open");
		item.find(".selectDownStatusBorder").removeClass("close intensive open");
    });

	//Add
	$('.selectDownStatusDropdown .dropdown li a.open').click(function(){
		var item = $(this).parents(".selectDownStatusDropdown");
		item.find(".selectDownStatus").addClass("open");
		item.find(".selectDownStatusBorder").addClass("open");
    });

    $('.selectDownStatusDropdown .dropdown li a.close').click(function(){
		var item = $(this).parents(".selectDownStatusDropdown");
		item.find(".selectDownStatus").addClass("close");
		item.find(".selectDownStatusBorder").addClass("close");
    });

    $('.selectDownStatusDropdown .dropdown li a.intensive').click(function(){
		var item = $(this).parents(".selectDownStatusDropdown");
		item.find(".selectDownStatus").addClass("intensive");
		item.find(".selectDownStatusBorder").addClass("intensive");
    });


//Volume Toggle
	   $('.volume').click(function(){
	       $('.volume').toggleClass('off');
	   });
});



// selectDown - jquery.dd.js
// author: Evren Akar
// Date: 10 May, 2013
// Version: 1.0
// web: www.evrenakar.com
/*
// selectDown is free jQuery Plugin
*/
var msBeautify = msBeautify || {};
(function ($) {
msBeautify = {
	version: {selectDown:'1.0'},
	author: "Evren Akar",
	counter: 20,
	debug: function (v) {
		if (v !== false) {
			$(".ddOutOfVision").css({height: 'auto', position: 'relative'});
		} else {
			$(".ddOutOfVision").css({height: '0px', position: 'absolute'});
		}
	},
	oldDiv: '',
	create: function (id, settings, type) {
		type = type || "dropdown";
		var data;
		switch (type.toLowerCase()) {
		case "dropdown":
		case "select":
			data = $(id).selectDown(settings).data("dd");
			break;
		}
		return data;
	}
};

$.selectDown = {};
$.selectDown = {};
$.extend(true, $.selectDown, msBeautify);
$.extend(true, $.selectDown, msBeautify);
// make compatibiliy with old and new jquery
if ($.fn.prop === undefined) {$.fn.prop = $.fn.attr;}
if ($.fn.on === undefined) {$.fn.on = $.fn.bind;$.fn.off = $.fn.unbind;}
if (typeof $.expr.createPseudo === 'function') {
	//jQuery 1.8  or greater
	$.expr[':'].Contains = $.expr.createPseudo(function (arg) {return function (elem) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; });
} else {
	//lower version
	$.expr[':'].Contains = function (a, i, m) {return $(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; };
}
//dropdown class
function dd(element, settings) {
	var _settings = $.extend(true,{byJson: {data: null, selectedIndex: 0, name: null, size: 0, multiple: false, width: 250},
		mainCSS: 'dd',
		height: 120, //not using currently
		visibleRows: 7,
		rowHeight: 0,
		showIcon: true,
		zIndex: 9999,
		useSprite: false,
		animStyle: 'slideDown',
		event:'click',
		openDirection: 'auto', //auto || alwaysUp
		jsonTitle: true,
		style: '',
		disabledOpacity: 0.7,
		disabledOptionEvents: true,
		childWidth:0,
		enableCheckbox:false, //this needs to multiple or it will set element to multiple
		checkboxNameSuffix:'_mscheck',
		append:'',
		prepend:'',
		on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null}
		}, settings);								  
	var _this = this; //this class	 
	var _holderId = {postElementHolder: '_msddHolder', postID: '_msdd', postTitleID: '_title',postTitleTextID: '_titleText', postChildID: '_child'};
	var _styles = {dd:_settings.mainCSS, ddTitle: 'ddTitle', arrow: 'arrow arrowoff', ddChild: 'ddChild', ddTitleText: 'ddTitleText',disabled: 'disabled', enabled: 'enabled', ddOutOfVision: 'ddOutOfVision', borderTop: 'borderTop', noBorderTop: 'noBorderTop', selected: 'selected', divider: 'divider', optgroup: "optgroup", optgroupTitle: "optgroupTitle", description: "description", label: "ddlabel",hover: 'hover',disabledAll: 'disabledAll'};
	var _styles_i = {li: '_msddli_',borderRadiusTp: 'borderRadiusTp',ddChildMore: 'border shadow',fnone: "fnone"};
	var _isList = false, _isMultiple=false,_isDisabled=false, _cacheElement = {}, _element, _orginial, _isOpen=false;
	var DOWN_ARROW = 40, UP_ARROW = 38, LEFT_ARROW=37, RIGHT_ARROW=39, ESCAPE = 27, ENTER = 13, ALPHABETS_START = 47, SHIFT=16 , CONTROL = 17;
	var _shiftHolded=false, _controlHolded=false,_lastTarget=null,_forcedTrigger=false, _oldSelected, _isCreated = false;
	var _doc = document;
	
	var _checkDataSetting = function() {
		_settings.mainCSS = $("#"+_element).data("maincss") || _settings.mainCSS;
		_settings.visibleRows = $("#"+_element).data("visiblerows") || _settings.visibleRows;
		if($("#"+_element).data("showicon")==false) {_settings.showIcon = $("#"+_element).data("showicon");};
		_settings.useSprite = $("#"+_element).data("usesprite") || _settings.useSprite;
		_settings.animStyle = $("#"+_element).data("animstyle") || _settings.animStyle;
		_settings.event = $("#"+_element).data("event") || _settings.event;
		_settings.openDirection = $("#"+_element).data("opendirection") || _settings.openDirection;
		_settings.jsonTitle = $("#"+_element).data("jsontitle") || _settings.jsonTitle;
		_settings.disabledOpacity = $("#"+_element).data("disabledopacity") || _settings.disabledOpacity;
		_settings.childWidth = $("#"+_element).data("childwidth") || _settings.childWidth;
		_settings.enableCheckbox = $("#"+_element).data("enablecheckbox") || _settings.enableCheckbox;
		_settings.checkboxNameSuffix = $("#"+_element).data("checkboxnamesuffix") || _settings.checkboxNameSuffix;
		_settings.append = $("#"+_element).data("append") || _settings.append;
		_settings.prepend = $("#"+_element).data("prepend") || _settings.prepend;		
	};	
	var getElement = function(ele) {
		if (_cacheElement[ele] === undefined) {
			_cacheElement[ele] = _doc.getElementById(ele);
		}
		return _cacheElement[ele];
	}; 	
	var _getIndex = function(opt) {
		var childid = _getPostID("postChildID"); 
		return $("#"+childid + " li."+_styles_i.li).index(opt);
	};
	var _createByJson = function() {
		if (_settings.byJson.data) {
				var validData = ["description","image",  "title"];
				try {
					if (!element.id) {
						element.id = "dropdown"+msBeautify.counter;
					};
					_settings.byJson.data = eval(_settings.byJson.data);
					//change element
					var id = "selectDown"+(msBeautify.counter++);
					var obj = {};
					obj.id = id;
					obj.name = _settings.byJson.name || element.id; //its name
					if (_settings.byJson.size>0) {
						obj.size = _settings.byJson.size;
					};
					obj.multiple = _settings.byJson.multiple;					
					var oSelect = _createElement("select", obj);
					for(var i=0;i<_settings.byJson.data.length;i++) {
						var current = _settings.byJson.data[i];
						var opt = new Option(current.text, current.value);
						for(var p in current) { 
							if (p.toLowerCase() != 'text') { 
								var key = ($.inArray(p.toLowerCase(), validData)!=-1) ? "data-" : "";
								opt.setAttribute(key+p, current[p]);
							};
						};
						oSelect.options[i] = opt;
					};
					getElement(element.id).appendChild(oSelect);
					oSelect.selectedIndex = _settings.byJson.selectedIndex;
					$(oSelect).css({width: _settings.byJson.width+'px'});
					//now change element for access other things
					element = oSelect;
				} catch(e) {
					throw "There is an error in json data.";
				};
		};			
	};
	var _construct = function() {		
		 //set properties
		 _createByJson();
		if (!element.id) {
			element.id = "msdrpdd"+(msBeautify.counter++);
		};						
		_element = element.id;
		_this._element = _element;
		_checkDataSetting();		
		_isDisabled = getElement(_element).disabled;
		var useCheckbox = _settings.enableCheckbox;
		if(Boolean(useCheckbox)===true) {
			getElement(_element).multiple = true;
			_settings.enableCheckbox = true;
		};
		_isList = (getElement(_element).size>1 || getElement(_element).multiple==true) ? true : false;
		//trace("_isList "+_isList);
		if (_isList) {_isMultiple = getElement(_element).multiple;};			
		_mergeAllProp();		
		//create layout
		_createLayout();
		//set ui prop
		_updateProp("uiData", _getDataAndUI());
		_updateProp("selectedOptions", $("#"+_element +" option:selected"));				
	 };	
	 /********************************************************************************************/	
	var _getPostID = function (id) {
		return _element+_holderId[id];
	};
	var _getInternalStyle = function(ele) {		 
		 var s = (ele.style === undefined) ? "" : ele.style.cssText;
		 return s;
	};
	var _parseOption = function(opt) {
		var imagePath = '', title ='', description='', value=-1, text='', className='', imagecss = '';
		if (opt !== undefined) {
			var attrTitle = opt.title || "";
			//data-title
			if (attrTitle!="") {
				var reg = /^\{.*\}$/;
				var isJson = reg.test(attrTitle);
				if (isJson && _settings.jsonTitle) {
					var obj =  eval("["+attrTitle+"]");	
				};				 
				title = (isJson && _settings.jsonTitle) ? obj[0].title : title;
				description = (isJson && _settings.jsonTitle) ? obj[0].description : description;
				imagePath = (isJson && _settings.jsonTitle) ? obj[0].image : attrTitle;
				imagecss = (isJson && _settings.jsonTitle) ? obj[0].imagecss : imagecss;
			};

			text = opt.text || '';
			value = opt.value || '';
			className = opt.className || "";
			//ignore title attribute if playing with data tags			
			title = $(opt).prop("data-title") || $(opt).data("title") || (title || "");
			description = $(opt).prop("data-description") || $(opt).data("description") || (description || "");
			imagePath = $(opt).prop("data-image") || $(opt).data("image") || (imagePath || "");
			imagecss = $(opt).prop("data-imagecss") || $(opt).data("imagecss") || (imagecss || "");
			
		};
		var o = {image: imagePath, title: title, description: description, value: value, text: text, className: className, imagecss:imagecss};
		return o;
	};	 
	var _createElement = function(nm, attr, html) {
		var tag = _doc.createElement(nm);
		if (attr) {
		 for(var i in attr) {
			 switch(i) {
				 case "style":
					tag.style.cssText  = attr[i];
				 break;
				 default:
					tag[i]  = attr[i];
				 break;
			 };	
		 };
		};
		if (html) {
		 tag.innerHTML = html;
		};
		return tag;
	};
	 /********************************************************************************************/
	  /*********************** <layout> *************************************/
	var _hideOriginal = function() {
		var hidid = _getPostID("postElementHolder");
		if ($("#"+hidid).length==0) {			 
			var obj = {style: 'height: 0px;overflow: hidden;position: absolute;',className: _styles.ddOutOfVision};	
			obj.id = hidid;
			var oDiv = _createElement("div", obj);	
			$("#"+_element).after(oDiv);
			$("#"+_element).appendTo($("#"+hidid));
		} else {
			$("#"+hidid).css({height: 0,overflow: 'hidden',position: 'absolute'});
		};
	};
	var _createWrapper = function () {
		var obj = {
			className: _styles.dd + " ddcommon borderRadius"
		};
		var styles = _getInternalStyle(getElement(_element));
		var w = $("#" + _element).outerWidth();
		obj.style = "width: " + w + "px;";
		if (styles.length > 0) {
			obj.style = obj.style + "" + styles;
		};
		obj.id = _getPostID("postID");
		var oDiv = _createElement("div", obj);
		return oDiv;
	};
	var _createTitle = function () {
		var selectedOption;
		if(getElement(_element).selectedIndex>=0) {
			selectedOption = getElement(_element).options[getElement(_element).selectedIndex];
		} else {
			selectedOption = {value:'', text:''};
		}
		var spriteClass = "", selectedClass = "";
		//check sprite
		var useSprite = $("#"+_element).data("usesprite");
		if(useSprite) { _settings.useSprite = useSprite; };
		if (_settings.useSprite != false) {
			spriteClass = " " + _settings.useSprite;
			selectedClass = " " + selectedOption.className;
		};
		var oTitle = _createElement("div", {className: _styles.ddTitle + spriteClass + " " + _styles_i.borderRadiusTp});
		//divider
		var oDivider = _createElement("span", {className: _styles.divider});
		//arrow
		var oArrow = _createElement("span", {className: _styles.arrow});
		//title Text
		var titleid = _getPostID("postTitleID");
		var oTitleText = _createElement("span", {className: _styles.ddTitleText + selectedClass, id: titleid});
	
		var parsed = _parseOption(selectedOption);
		var arrowPath = parsed.image;
		var sText = parsed.text || "";		
		if (arrowPath != "" && _settings.showIcon) {
			var oIcon = _createElement("img");
			oIcon.src = arrowPath;
			if(parsed.imagecss!="") {
				oIcon.className = parsed.imagecss+" ";
			};
		};
		var oTitleText_in = _createElement("span", {className: _styles.label}, sText);
		oTitle.appendChild(oDivider);
		oTitle.appendChild(oArrow);
		if (oIcon) {
			oTitleText.appendChild(oIcon);
		};
		oTitleText.appendChild(oTitleText_in);
		oTitle.appendChild(oTitleText);
		var oDescription = _createElement("span", {className: _styles.description}, parsed.description);
		oTitleText.appendChild(oDescription);
		return oTitle;
	};
	var _createFilterBox = function () {
		var tid = _getPostID("postTitleTextID");
		var sText = _createElement("input", {id: tid, type: 'text', value: '', autocomplete: 'off', className: 'text shadow borderRadius', style: 'display: none'});
		return sText;
	};
	var _createChild = function (opt) {
		var obj = {};
		var styles = _getInternalStyle(opt);
		if (styles.length > 0) {obj.style = styles; };
		var css = (opt.disabled) ? _styles.disabled : _styles.enabled;
		css = (opt.selected) ? (css + " " + _styles.selected) : css;
		css = css + " " + _styles_i.li;
		obj.className = css;
		if (_settings.useSprite != false) {
			obj.className = css + " " + opt.className;
		};
		var li = _createElement("li", obj);
		var parsed = _parseOption(opt);
		if (parsed.title != "") {
			li.title = parsed.title;
		};
		var arrowPath = parsed.image;
		if (arrowPath != "" && _settings.showIcon) {
			var oIcon = _createElement("img");
			oIcon.src = arrowPath;
			if(parsed.imagecss!="") {
				oIcon.className = parsed.imagecss+" ";
			};
		};
		if (parsed.description != "") {
			var oDescription = _createElement("span", {
				className: _styles.description
			}, parsed.description);
		};
		var sText = opt.text || "";
		var oTitleText = _createElement("span", {
			className: _styles.label
		}, sText);
		//checkbox
		if(_settings.enableCheckbox===true) {
			var chkbox = _createElement("input", {
			type: 'checkbox', name:_element+_settings.checkboxNameSuffix+'[]', value:opt.value||""}); //this can be used for future
			li.appendChild(chkbox);
			if(_settings.enableCheckbox===true) {
				chkbox.checked = (opt.selected) ? true : false;
			};
		};
		if (oIcon) {
			li.appendChild(oIcon);
		};
		li.appendChild(oTitleText);
		if (oDescription) {
			li.appendChild(oDescription);
		} else {
			if (oIcon) {
				oIcon.className = oIcon.className+_styles_i.fnone;
			};
		};
		var oClear = _createElement("div", {className: 'clear'});
		li.appendChild(oClear);
		return li;
	};
	var _createChildren = function () {
		var childid = _getPostID("postChildID");
		var obj = {className: _styles.ddChild + " ddchild_ " + _styles_i.ddChildMore, id: childid};
		if (_isList == false) {
			obj.style = "z-index: " + _settings.zIndex;
		} else {
			obj.style = "z-index:1";
		};
		var childWidth = $("#"+_element).data("childwidth") || _settings.childWidth;
		if(childWidth) {
			obj.style =  (obj.style || "") + ";width:"+childWidth;
		};		
		var oDiv = _createElement("div", obj);
		var ul = _createElement("ul");
		if (_settings.useSprite != false) {
			ul.className = _settings.useSprite;
		};
		var allOptions = getElement(_element).children;
		for (var i = 0; i < allOptions.length; i++) {
			var current = allOptions[i];
			var li;
			if (current.nodeName.toLowerCase() == "optgroup") {
				//create ul
				li = _createElement("li", {className: _styles.optgroup});
				var span = _createElement("span", {className: _styles.optgroupTitle}, current.label);
				li.appendChild(span);
				var optChildren = current.children;
				var optul = _createElement("ul");
				for (var j = 0; j < optChildren.length; j++) {
					var opt_li = _createChild(optChildren[j]);
					optul.appendChild(opt_li);
				};
				li.appendChild(optul);
			} else {
				li = _createChild(current);
			};
			ul.appendChild(li);
		};
		oDiv.appendChild(ul);		
		return oDiv;
	};
	var _childHeight = function (val) {
		var childid = _getPostID("postChildID");
		if (val) {
			if (val == -1) { //auto
				$("#"+childid).css({height: "auto", overflow: "auto"});
			} else {				
				$("#"+childid).css("height", val+"px");
			};
			return false;
		};
		//else return height
		var iHeight;
		if (getElement(_element).options.length > _settings.visibleRows) {
			var margin = parseInt($("#" + childid + " li:first").css("padding-bottom")) + parseInt($("#" + childid + " li:first").css("padding-top"));
			if(_settings.rowHeight===0) {
				$("#" + childid).css({visibility:'hidden',display:'block'}); //hack for first child
				_settings.rowHeight = Math.round($("#" + childid + " li:first").height());
				$("#" + childid).css({visibility:'visible'});
				if(!_isList || _settings.enableCheckbox===true) {
					$("#" + childid).css({display:'none'});
				};
			};
			iHeight = ((_settings.rowHeight + margin) * _settings.visibleRows);
		} else if (_isList) {
			iHeight = $("#" + _element).height(); //get height from original element
		};		
		return iHeight;
	};
	var _applyChildEvents = function () {
		var childid = _getPostID("postChildID");
		$("#" + childid).on("click", function (e) {
			if (_isDisabled === true) return false;
			//prevent body click
			e.preventDefault();
			e.stopPropagation();
			if (_isList) {
				_bind_on_events();
			};
		});
		$("#" + childid + " li." + _styles.enabled).on("click", function (e) {
			if(e.target.nodeName.toLowerCase() !== "input") {
				_close(this);
			};
		});
		$("#" + childid + " li." + _styles.enabled).on("mousedown", function (e) {
			if (_isDisabled === true) return false;
			_oldSelected = $("#" + childid + " li." + _styles.selected);
			_lastTarget = this;
			e.preventDefault();
			e.stopPropagation();
			//select current input
			if(_settings.enableCheckbox===true) {
				if(e.target.nodeName.toLowerCase() === "input") {
					_controlHolded = true;
				};	
			};
			if (_isList === true) {
				if (_isMultiple) {					
					if (_shiftHolded === true) {
						$(this).addClass(_styles.selected);
						var selected = $("#" + childid + " li." + _styles.selected);
						var lastIndex = _getIndex(this);
						if (selected.length > 1) {
							var items = $("#" + childid + " li." + _styles_i.li);
							var ind1 = _getIndex(selected[0]);
							var ind2 = _getIndex(selected[1]);
							if (lastIndex > ind2) {
								ind1 = (lastIndex);
								ind2 = ind2 + 1;
							};
							for (var i = Math.min(ind1, ind2); i <= Math.max(ind1, ind2); i++) {
								var current = items[i];
								if ($(current).hasClass(_styles.enabled)) {
									$(current).addClass(_styles.selected);
								};
							};
						};
					} else if (_controlHolded === true) {
						$(this).toggleClass(_styles.selected); //toggle
						if(_settings.enableCheckbox===true) {
							var checkbox = this.childNodes[0];
							checkbox.checked = !checkbox.checked; //toggle
						};
					} else {
						$("#" + childid + " li." + _styles.selected).removeClass(_styles.selected);
						$("#" + childid + " input:checkbox").prop("checked", false);
						$(this).addClass(_styles.selected);
						if(_settings.enableCheckbox===true) {
							this.childNodes[0].checked = true;
						};
					};					
				} else {
					$("#" + childid + " li." + _styles.selected).removeClass(_styles.selected);
					$(this).addClass(_styles.selected);
				};
				//fire event on mouseup
			} else {
				$("#" + childid + " li." + _styles.selected).removeClass(_styles.selected);
				$(this).addClass(_styles.selected);
			};		
		});
		$("#" + childid + " li." + _styles.enabled).on("mouseenter", function (e) {
			if (_isDisabled === true) return false;
			e.preventDefault();
			e.stopPropagation();
			if (_lastTarget != null) {
				if (_isMultiple) {
					$(this).addClass(_styles.selected);
					if(_settings.enableCheckbox===true) {
						this.childNodes[0].checked = true;
					};
				};
			};
		});
	
		$("#" + childid + " li." + _styles.enabled).on("mouseover", function (e) {
			if (_isDisabled === true) return false;
			$(this).addClass(_styles.hover);
		});
		$("#" + childid + " li." + _styles.enabled).on("mouseout", function (e) {
			if (_isDisabled === true) return false;
			$("#" + childid + " li." + _styles.hover).removeClass(_styles.hover);
		});
	
		$("#" + childid + " li." + _styles.enabled).on("mouseup", function (e) {
			if (_isDisabled === true) return false;
			e.preventDefault();
			e.stopPropagation();
			if(_settings.enableCheckbox===true) {
				_controlHolded = false;
			};
			var selected = $("#" + childid + " li." + _styles.selected).length;			
			_forcedTrigger = (_oldSelected.length != selected || selected == 0) ? true : false;	
			_fireAfterItemClicked();
			_unbind_on_events(); //remove old one
			_bind_on_events();
			_lastTarget = null;
		});
	
		/* options events */
		if (_settings.disabledOptionEvents == false) {
			$("#" + childid + " li." + _styles_i.li).on("click", function (e) {
				if (_isDisabled === true) return false;
				fireOptionEventIfExist(this, "click");
			});
			$("#" + childid + " li." + _styles_i.li).on("mouseenter", function (e) {
				if (_isDisabled === true) return false;
				fireOptionEventIfExist(this, "mouseenter");
			});
			$("#" + childid + " li." + _styles_i.li).on("mouseover", function (e) {
				if (_isDisabled === true) return false;
				fireOptionEventIfExist(this, "mouseover");
			});
			$("#" + childid + " li." + _styles_i.li).on("mouseout", function (e) {
				if (_isDisabled === true) return false;
				fireOptionEventIfExist(this, "mouseout");
			});
			$("#" + childid + " li." + _styles_i.li).on("mousedown", function (e) {
				if (_isDisabled === true) return false;
				fireOptionEventIfExist(this, "mousedown");
			});
			$("#" + childid + " li." + _styles_i.li).on("mouseup", function (e) {
				if (_isDisabled === true) return false;
				fireOptionEventIfExist(this, "mouseup");
			});
		};
	};
	var _removeChildEvents = function () {
		var childid = _getPostID("postChildID");
		$("#" + childid).off("click");
		$("#" + childid + " li." + _styles.enabled).off("mouseenter");
		$("#" + childid + " li." + _styles.enabled).off("click");
		$("#" + childid + " li." + _styles.enabled).off("mouseover");
		$("#" + childid + " li." + _styles.enabled).off("mouseout");
		$("#" + childid + " li." + _styles.enabled).off("mousedown");
		$("#" + childid + " li." + _styles.enabled).off("mouseup");
	};
	var _applyEvents = function () {
		var id = _getPostID("postID");
		var childid = _getPostID("postChildID");		
		$("#" + id).on(_settings.event, function (e) {			
			if (_isDisabled === true) return false;
			fireEventIfExist("click");
			//prevent body click
			e.preventDefault();
			e.stopPropagation();
			_open(e);
		});
		_applyChildEvents();		
		$("#" + id).on("dblclick", on_dblclick);
		$("#" + id).on("mousemove", on_mousemove);
		$("#" + id).on("mouseenter", on_mouseover);
		$("#" + id).on("mouseleave", on_mouseout);
		$("#" + id).on("mousedown", on_mousedown);
		$("#" + id).on("mouseup", on_mouseup);
	};
	//after create
	var _fixedForList = function () {
		var id = _getPostID("postID");
		var childid = _getPostID("postChildID");		
		if (_isList === true && _settings.enableCheckbox===false) {
			$("#" + id + " ." + _styles.ddTitle).hide();
			$("#" + childid).css({display: 'block', position: 'relative'});	
			//_open();
		} else {
			if(_settings.enableCheckbox===false) {
				_isMultiple = false; //set multiple off if this is not a list
			};
			$("#" + id + " ." + _styles.ddTitle).show();
			$("#" + childid).css({display: 'none', position: 'absolute'});
			//set value
			var first = $("#" + childid + " li." + _styles.selected)[0];
			$("#" + childid + " li." + _styles.selected).removeClass(_styles.selected);
			var index = _getIndex($(first).addClass(_styles.selected));
			_setValue(index);
		};
		_childHeight(_childHeight()); //get and set height 
	};
	var _fixedForDisabled = function () {
		var id = _getPostID("postID");
		var opc = (_isDisabled == true) ? _settings.disabledOpacity : 1;
		if (_isDisabled === true) {
			$("#" + id).addClass(_styles.disabledAll);
		} else {
			$("#" + id).removeClass(_styles.disabledAll);
		};
	};
	var _fixedSomeUI = function () {
		//auto filter
		var tid = _getPostID("postTitleTextID");
		$("#" + tid).on("keyup", _applyFilters);
		//if is list
		_fixedForList();
		_fixedForDisabled();
	};
	var _createLayout = function () {		
		var oDiv = _createWrapper();
		var oTitle = _createTitle();
		oDiv.appendChild(oTitle);
		//auto filter box
		var oFilterBox = _createFilterBox();
		oDiv.appendChild(oFilterBox);
	
		var oChildren = _createChildren();
		oDiv.appendChild(oChildren);
		$("#" + _element).after(oDiv);
		_hideOriginal(); //hideOriginal
		_fixedSomeUI();
		_applyEvents();
		
		var childid = _getPostID("postChildID");
		//append
		if(_settings.append!='') {
			$("#" + childid).append(_settings.append);
		};
		//prepend
		if(_settings.prepend!='') {
			$("#" + childid).prepend(_settings.prepend);
		};		
		if (typeof _settings.on.create == "function") {
			_settings.on.create.apply(_this, arguments);
		};
	};
	var _selectMutipleOptions = function (bySelected) {
		var childid = _getPostID("postChildID");
		var selected = bySelected || $("#" + childid + " li." + _styles.selected); //bySelected or by argument
		for (var i = 0; i < selected.length; i++) {
			var ind = _getIndex(selected[i]);
			getElement(_element).options[ind].selected = "selected";
		};
		_setValue(selected);
	};
	var _fireAfterItemClicked = function () {
		//console.log("_fireAfterItemClicked")
		var childid = _getPostID("postChildID");
		var selected = $("#" + childid + " li." + _styles.selected);		
		if (_isMultiple && (_shiftHolded || _controlHolded) || _forcedTrigger) {
			getElement(_element).selectedIndex = -1; //reset old
		};
		var index;
		if (selected.length == 0) {
			index = -1;
		} else if (selected.length > 1) {
			//selected multiple
			_selectMutipleOptions(selected);
			//index = $("#" + childid + " li." + _styles.selected);
			
		} else {
			//if one selected
			index = _getIndex($("#" + childid + " li." + _styles.selected));
		};		
		if ((getElement(_element).selectedIndex != index || _forcedTrigger) && selected.length<=1) {			
			_forcedTrigger = false;			
			var evt = has_handler("change");
			getElement(_element).selectedIndex = index;	
			_setValue(index);
			//local
			if (typeof _settings.on.change == "function") {
				var d = _getDataAndUI();
				_settings.on.change(d.data, d.ui);
			};			
			$("#" + _element).trigger("change");			
		};
	};
	var _setValue = function (index, byvalue) {
		if (index !== undefined) {
			var selectedIndex, value, selectedText;
			if (index == -1) {
				selectedIndex = -1;
				value = "";
				selectedText = "";
				_updateTitleUI(-1);
			} else {
				//by index or byvalue
				if (typeof index != "object") {
					var opt = getElement(_element).options[index];
					getElement(_element).selectedIndex = index;
					selectedIndex = index;
					value = _parseOption(opt);
					selectedText = (index >= 0) ? getElement(_element).options[index].text : "";
					_updateTitleUI(undefined, value);
					value = value.value; //for bottom
				} else {
					//this is multiple or by option					
					selectedIndex = (byvalue && byvalue.index) || getElement(_element).selectedIndex;
					value = (byvalue && byvalue.value) || getElement(_element).value;
					selectedText = (byvalue && byvalue.text) || getElement(_element).options[getElement(_element).selectedIndex].text || "";
					_updateTitleUI(selectedIndex);
				};
			};
			_updateProp("selectedIndex", selectedIndex);
			_updateProp("value", value);
			_updateProp("selectedText", selectedText);
			_updateProp("children", getElement(_element).children);
			_updateProp("uiData", _getDataAndUI());
			_updateProp("selectedOptions", $("#" + _element + " option:selected"));
		};
	};
	var has_handler = function (name) {
		//True if a handler has been added in the html.
		var evt = {byElement: false, byJQuery: false, hasEvent: false};
		var obj = $("#" + _element);
		//console.log(name)
		try {
			//console.log(obj.prop("on" + name) + " "+name);
			if (obj.prop("on" + name) !== null) {
				evt.hasEvent = true;
				evt.byElement = true;
			};
		} catch(e) {
			//console.log(e.message);
		}
		// True if a handler has been added using jQuery.
		var evs;
		if (typeof $._data == "function") { //1.8
			evs = $._data(obj[0], "events");
		} else {
			evs = obj.data("events");
		};
		if (evs && evs[name]) {
			evt.hasEvent = true;
			evt.byJQuery = true;
		};
		return evt;
	};
	var _bind_on_events = function () {
		_unbind_on_events();
		$("body").on("click", _close);
		//bind more events		 
		$(document).on("keydown", on_keydown);
		$(document).on("keyup", on_keyup);
		//focus will work on this	 		 
	};
	var _unbind_on_events = function () {
		$("body").off("click", _close);
		//bind more events
		$(document).off("keydown", on_keydown);
		$(document).off("keyup", on_keyup);
	};
	var _applyFilters = function () {
		var childid = _getPostID("postChildID");
		var tid = _getPostID("postTitleTextID");
		var sText = getElement(tid).value;
		if (sText.length == 0) {
			$("#" + childid + " li:hidden").show(); //show if hidden
			_childHeight(_childHeight());
		} else {
			$("#" + childid + " li").hide();
			$("#" + childid + " li:Contains('" + sText + "')").show();	
			if ($("#" + childid + " li:visible").length <= _settings.visibleRows) {
				_childHeight(-1); //set autoheight
			};
		};		
	};
	var _showFilterBox = function () {
		var tid = _getPostID("postTitleTextID");
		if ($("#" + tid + ":hidden").length > 0 && _controlHolded == false) {
			$("#" + tid + ":hidden").show().val("");
			getElement(tid).focus();
		};
	};
	var _hideFilterBox = function () {
		var tid = _getPostID("postTitleTextID");
		if ($("#" + tid + ":visible").length > 0) {
			$("#" + tid + ":visible").hide();
			getElement(tid).blur();
		};
	};
	var on_keydown = function (evt) {
		var tid = _getPostID("postTitleTextID");
		switch (evt.keyCode) {
			case DOWN_ARROW:
			case RIGHT_ARROW:
				evt.preventDefault();
				evt.stopPropagation();
				//_hideFilterBox();
				_next();				
				break;
			case UP_ARROW:
			case LEFT_ARROW:
				evt.preventDefault();
				evt.stopPropagation();
				//_hideFilterBox();
				_previous();
				break;
			case ESCAPE:
			case ENTER:
				evt.preventDefault();
				evt.stopPropagation();
				_close();				
				break;
			case SHIFT:
				_shiftHolded = true;
				break;
			case CONTROL:
				_controlHolded = true;
				break;
			default:
				if (evt.keyCode >= ALPHABETS_START && _isList === false) {
					_showFilterBox();
				};
				break;
		};
		if (_isDisabled === true) return false;
		fireEventIfExist("keydown");
	};
	var on_keyup = function (evt) {
		switch (evt.keyCode) {
			case SHIFT:
				_shiftHolded = false;
				break;
			case CONTROL:
				_controlHolded = false;
				break;
		};
		if (_isDisabled === true) return false;
		fireEventIfExist("keyup");
	};
	var on_dblclick = function (evt) {
		if (_isDisabled === true) return false;
		fireEventIfExist("dblclick");
	};
	var on_mousemove = function (evt) {
		if (_isDisabled === true) return false;
		fireEventIfExist("mousemove");
	};
	
	var on_mouseover = function (evt) {
		if (_isDisabled === true) return false;
		evt.preventDefault();
		fireEventIfExist("mouseover");
	};
	var on_mouseout = function (evt) {
		if (_isDisabled === true) return false;
		evt.preventDefault();
		fireEventIfExist("mouseout");
	};
	var on_mousedown = function (evt) {
		if (_isDisabled === true) return false;
		fireEventIfExist("mousedown");
	};
	var on_mouseup = function (evt) {
		if (_isDisabled === true) return false;
		fireEventIfExist("mouseup");
	};
	var option_has_handler = function (opt, name) {
		//True if a handler has been added in the html.
		var evt = {byElement: false, byJQuery: false, hasEvent: false};
		if ($(opt).prop("on" + name) != undefined) {
			evt.hasEvent = true;
			evt.byElement = true;
		};
		// True if a handler has been added using jQuery.
		var evs = $(opt).data("events");
		if (evs && evs[name]) {
			evt.hasEvent = true;
			evt.byJQuery = true;
		};
		return evt;
	};
	var fireOptionEventIfExist = function (li, evt_n) {
		if (_settings.disabledOptionEvents == false) {
			var opt = getElement(_element).options[_getIndex(li)];
			//check if original has some
			if (option_has_handler(opt, evt_n).hasEvent === true) {
				if (option_has_handler(opt, evt_n).byElement === true) {
					opt["on" + evt_n]();
				};
				if (option_has_handler(opt, evt_n).byJQuery === true) {
					switch (evt_n) {
						case "keydown":
						case "keyup":
							//key down/up will check later
							break;
						default:
							$(opt).trigger(evt_n);
							break;
					};
				};
				return false;
			};
		};
	};
	var fireEventIfExist = function (evt_n) {
		//local
		if (typeof _settings.on[evt_n] == "function") {
			_settings.on[evt_n].apply(this, arguments);
		};
		//check if original has some
		if (has_handler(evt_n).hasEvent === true) {
			if (has_handler(evt_n).byElement === true) {
				getElement(_element)["on" + evt_n]();
			};
			if (has_handler(evt_n).byJQuery === true) {
				switch (evt_n) {
					case "keydown":
					case "keyup":
						//key down/up will check later
						break;
					default:
						$("#" + _element).trigger(evt_n);
						break;
				};
			};
			return false;
		};
	};
	/******************************* navigation **********************************************/
	var _scrollToIfNeeded = function (opt) {
		var childid = _getPostID("postChildID");
		//if scroll is needed
		opt = (opt !== undefined) ? opt : $("#" + childid + " li." + _styles.selected);
		if (opt.length > 0) {
			var pos = parseInt(($(opt).position().top));
			var ch = parseInt($("#" + childid).height());
			if (pos > ch) {
				var top = pos + $("#" + childid).scrollTop() - (ch/2);
				$("#" + childid).animate({scrollTop:top}, 500);
			};
		};
	};
	var _next = function () {
		var childid = _getPostID("postChildID");
		var items = $("#" + childid + " li:visible." + _styles_i.li);
		var selected = $("#" + childid + " li:visible." + _styles.selected);
		selected = (selected.length==0) ? items[0] : selected;
		var index = $("#" + childid + " li:visible." + _styles_i.li).index(selected);
		if ((index < items.length - 1)) {
			index = getNext(index);
			if (index < items.length) { //check again - hack for last disabled 
				if (!_shiftHolded || !_isList || !_isMultiple) {
					$("#" + childid + " ." + _styles.selected).removeClass(_styles.selected);
				};
				$(items[index]).addClass(_styles.selected);
				_updateTitleUI(index);
				if (_isList == true) {
					_fireAfterItemClicked();
				};
				_scrollToIfNeeded($(items[index]));
			};
			if (!_isList) {
				_adjustOpen();
			};
		};	
		function getNext(ind) {
			ind = ind + 1;
			if (ind > items.length) {
				return ind;
			};
			if ($(items[ind]).hasClass(_styles.enabled) === true) {
				return ind;
			};
			return ind = getNext(ind);
		};
	};
	var _previous = function () {
		var childid = _getPostID("postChildID");
		var selected = $("#" + childid + " li:visible." + _styles.selected);
		var items = $("#" + childid + " li:visible." + _styles_i.li);
		var index = $("#" + childid + " li:visible." + _styles_i.li).index(selected[0]);
		if (index >= 0) {
			index = getPrev(index);
			if (index >= 0) { //check again - hack for disabled 
				if (!_shiftHolded || !_isList || !_isMultiple) {
					$("#" + childid + " ." + _styles.selected).removeClass(_styles.selected);
				};
				$(items[index]).addClass(_styles.selected);
				_updateTitleUI(index);
				if (_isList == true) {
					_fireAfterItemClicked();
				};
				if (parseInt(($(items[index]).position().top + $(items[index]).height())) <= 0) {
					var top = ($("#" + childid).scrollTop() - $("#" + childid).height()) - $(items[index]).height();
					$("#" + childid).animate({scrollTop: top}, 500);
				};
			};
			if (!_isList) {
				_adjustOpen();
			};
		};
	
		function getPrev(ind) {
			ind = ind - 1;
			if (ind < 0) {
				return ind;
			};
			if ($(items[ind]).hasClass(_styles.enabled) === true) {
				return ind;
			};
			return ind = getPrev(ind);
		};
	};
	var _adjustOpen = function () {
		var id = _getPostID("postID");
		var childid = _getPostID("postChildID");
		var pos = $("#" + id).offset();
		var mH = $("#" + id).height();
		var wH = $(window).height();
		var st = $(window).scrollTop();
		var cH = $("#" + childid).height();
		var top = $("#" + id).height(); //this close so its title height
		if ((wH + st) < Math.floor(cH + mH + pos.top) || _settings.openDirection.toLowerCase() == 'alwaysup') {
			top = cH;
			$("#" + childid).css({top: "-" + top + "px", display: 'block', zIndex: _settings.zIndex});
			$("#" + id).removeClass("borderRadius borderRadiusTp").addClass("borderRadiusBtm");
			var top = $("#" + childid).offset().top;
			if (top < -10) {
				$("#" + childid).css({top: (parseInt($("#" + childid).css("top")) - top + 20 + st) + "px", zIndex: _settings.zIndex});
				$("#" + id).removeClass("borderRadiusBtm borderRadiusTp").addClass("borderRadius");
			};
		} else {
			$("#" + childid).css({top: top + "px", zIndex: _settings.zIndex});
			$("#" + id).removeClass("borderRadius borderRadiusBtm").addClass("borderRadiusTp");
		};
		//hack for ie zindex
		//i hate ie :D
		if($.browser.msie) {
			if(parseInt($.browser.version)<=7) {
				$('div.ddcommon').css("zIndex", _settings.zIndex-10);
				$("#" + id).css("zIndex", _settings.zIndex+5);
			};
		};		
	};
	var _open = function (e) {
		if (_isDisabled === true) return false;
		var id = _getPostID("postID");
		var childid = _getPostID("postChildID");
		if (!_isOpen) {
			_isOpen = true;
			if (msBeautify.oldDiv != '') {
				$("#" + msBeautify.oldDiv).css({display: "none"}); //hide all 
			};
			msBeautify.oldDiv = childid;
			$("#" + childid + " li:hidden").show(); //show if hidden
			_adjustOpen();
			var animStyle = _settings.animStyle;
			if(animStyle=="" || animStyle=="none") {
				$("#" + childid).css({display:"block"});
				_scrollToIfNeeded();
				if (typeof _settings.on.open == "function") {
					var d = _getDataAndUI();
					_settings.on.open(d.data, d.ui);
				};
			} else {				
				$("#" + childid)[animStyle]("fast", function () {
					_scrollToIfNeeded();
					if (typeof _settings.on.open == "function") {
						var d = _getDataAndUI();
						_settings.on.open(d.data, d.ui);
					};
				});
			};
			_bind_on_events();
		} else {
			if(_settings.event!=='mouseover') {
				_close();
			};
		};
	};
	var _close = function (e) {
		_isOpen = false;
		var id = _getPostID("postID");
		var childid = _getPostID("postChildID");
		if (_isList === false || _settings.enableCheckbox===true) {
			$("#" + childid).css({display: "none"});
			$("#" + id).removeClass("borderRadiusTp borderRadiusBtm").addClass("borderRadius");			
		};
		_unbind_on_events();
		if (typeof _settings.on.close == "function") {
			var d = _getDataAndUI();
			_settings.on.close(d.data, d.ui);
		};
		//rest some old stuff
		_hideFilterBox();
		_childHeight(_childHeight()); //its needed after filter applied
		$("#" + childid).css({zIndex:1})		
	};
	/*********************** </layout> *************************************/	
	var _mergeAllProp = function () {
		_orginial = $.extend(true, {}, getElement(_element));
		for (var i in _orginial) {
			if (typeof _orginial[i] != "function") {
				_this[i] = _orginial[i]; //properties
			};
		};
		_this.selectedText = (_orginial.selectedIndex >= 0) ? _orginial.options[_orginial.selectedIndex].text : "";
		_this.version = msBeautify.version.selectDown;
		_this.author = msBeautify.author;
	};
	var _getDataAndUIByOption = function (opt) {
		if (opt != null && typeof opt != "undefined") {
			var childid = _getPostID("postChildID");
			var data = _parseOption(opt);
			var ui = $("#" + childid + " li." + _styles_i.li + ":eq(" + (opt.index) + ")");
			return {data: data, ui: ui, option: opt, index: opt.index};
		};
		return null;
	};
	var _getDataAndUI = function () {
		var childid = _getPostID("postChildID");
		var ele = getElement(_element);
		var data, ui, option, index;
		if (ele.selectedIndex == -1) {
			data = null;
			ui = null;
			option = null;
			index = -1;
		} else {
			ui = $("#" + childid + " li." + _styles.selected);
			if (ui.length > 1) {
				var d = [], op = [], ind = [];
				for (var i = 0; i < ui.length; i++) {
					var pd = _getIndex(ui[i]);
					d.push(pd);
					op.push(ele.options[pd]);
				};
				data = d;
				option = op;
				index = d;
			} else {
				option = ele.options[ele.selectedIndex];
				data = _parseOption(option);
				index = ele.selectedIndex;
			};
		};
		return {data: data, ui: ui, index: index, option: option};
	};
	var _updateTitleUI = function (index, byvalue) {
		var titleid = _getPostID("postTitleID");
		var value = {};
		if (index == -1) {
			value.text = "&nbsp;";
			value.className = "";
			value.description = "";
			value.image = "";
		} else if (typeof index != "undefined") {
			var opt = getElement(_element).options[index];
			value = _parseOption(opt);
		} else {
			value = byvalue;
		};
		//update title and current
		$("#" + titleid).find("." + _styles.label).html(value.text);
		getElement(titleid).className = _styles.ddTitleText + " " + value.className;
		//update desction		 
		if (value.description != "") {
			$("#" + titleid).find("." + _styles.description).html(value.description).show();
		} else {
			$("#" + titleid).find("." + _styles.description).html("").hide();
		};
		//update icon
		var img = $("#" + titleid).find("img");
		if (img.length > 0) {
			$(img).remove();
		};
		if (value.image != "" && _settings.showIcon) {
			img = _createElement("img", {src: value.image});
			$("#" + titleid).prepend(img);
			if(value.imagecss!="") {
				img.className = value.imagecss+" ";
			};
			if (value.description == "") {
				img.className = img.className+_styles_i.fnone;
			};
		};
	};
	var _updateProp = function (p, v) {
		_this[p] = v;
	};
	var _updateUI = function (a, opt, i) { //action, index, opt
		var childid = _getPostID("postChildID");
		var wasSelected = false;
		switch (a) {
			case "add":
				var li = _createChild(opt || getElement(_element).options[i]);				
				var index;
				if (arguments.length == 3) {
					index = i;
				} else {
					index = $("#" + childid + " li." + _styles_i.li).length - 1;
				};				
				if (index < 0 || !index) {
					$("#" + childid + " ul").append(li);
				} else {
					var at = $("#" + childid + " li." + _styles_i.li)[index];
					$(at).before(li);
				};
				_removeChildEvents();
				_applyChildEvents();
				if (_settings.on.add != null) {
					_settings.on.add.apply(this, arguments);
				};
				break;
			case "remove":
				wasSelected = $($("#" + childid + " li." + _styles_i.li)[i]).hasClass(_styles.selected);
				$("#" + childid + " li." + _styles_i.li + ":eq(" + i + ")").remove();
				var items = $("#" + childid + " li." + _styles.enabled);
				if (wasSelected == true) {
					if (items.length > 0) {
						$(items[0]).addClass(_styles.selected);
						var ind = $("#" + childid + " li." + _styles_i.li).index(items[0]);
						_setValue(ind);
					};
				};
				if (items.length == 0) {
					_setValue(-1);
				};
				if ($("#" + childid + " li." + _styles_i.li).length < _settings.visibleRows && !_isList) {
					_childHeight(-1); //set autoheight
				};
				if (_settings.on.remove != null) {
					_settings.on.remove.apply(this, arguments);
				};
				break;
		};	
	};
	/************************** public methods/events **********************/
	this.act = function () {
		var action = arguments[0];
		Array.prototype.shift.call(arguments);
		switch (action) {
			case "add":
				_this.add.apply(this, arguments);
				break;
			case "remove":
				_this.remove.apply(this, arguments);
				break;
			default:
				try {
					getElement(_element)[action].apply(getElement(_element), arguments);
				} catch (e) {
					//there is some error.
				};
				break;
		};
	};
	
	this.add = function () {
		var text, value, title, image, description;
		var obj = arguments[0];		
		if (typeof obj == "string") {
			text = obj;
			value = text;
			opt = new Option(text, value);
		} else {
			text = obj.text || '';
			value = obj.value || text;
			title = obj.title || '';
			image = obj.image || '';
			description = obj.description || '';
			//image:imagePath, title:title, description:description, value:opt.value, text:opt.text, className:opt.className||""
			opt = new Option(text, value);
			$(opt).data("description", description);
			$(opt).data("image", image);
			$(opt).data("title", title);
		};
		arguments[0] = opt; //this option
		getElement(_element).add.apply(getElement(_element), arguments);
		_updateProp("children", getElement(_element)["children"]);
		_updateProp("length", getElement(_element).length);
		_updateUI("add", opt, arguments[1]);
	};
	this.remove = function (i) {
		getElement(_element).remove(i);
		_updateProp("children", getElement(_element)["children"]);
		_updateProp("length", getElement(_element).length);
		_updateUI("remove", undefined, i);
	};
	this.set = function (prop, val) {
		if (typeof prop == "undefined" || typeof val == "undefined") return false;
		prop = prop.toString();
		try {
			_updateProp(prop, val);
		} catch (e) {/*this is ready only */};
		
		switch (prop) {
			case "size":
				getElement(_element)[prop] = val;
				if (val == 0) {
					getElement(_element).multiple = false; //if size is zero multiple should be false
				};
				_isList = (getElement(_element).size > 1 || getElement(_element).multiple == true) ? true : false;
				_fixedForList();
				break;
			case "multiple":
				getElement(_element)[prop] = val;
				_isList = (getElement(_element).size > 1 || getElement(_element).multiple == true) ? true : false;
				_isMultiple = getElement(_element).multiple;
				_fixedForList();
				_updateProp(prop, val);
				break;
			case "disabled":
				getElement(_element)[prop] = val;
				_isDisabled = val;
				_fixedForDisabled();
				break;
			case "selectedIndex":
			case "value":
				getElement(_element)[prop] = val;
				var childid = _getPostID("postChildID");
				$("#" + childid + " li." + _styles_i.li).removeClass(_styles.selected);
				$($("#" + childid + " li." + _styles_i.li)[getElement(_element).selectedIndex]).addClass(_styles.selected);
				_setValue(getElement(_element).selectedIndex);
				break;
			case "length":
				var childid = _getPostID("postChildID");
				if (val < getElement(_element).length) {
					getElement(_element)[prop] = val;
					if (val == 0) {
						$("#" + childid + " li." + _styles_i.li).remove();
						_setValue(-1);
					} else {
						$("#" + childid + " li." + _styles_i.li + ":gt(" + (val - 1) + ")").remove();
						if ($("#" + childid + " li." + _styles.selected).length == 0) {
							$("#" + childid + " li." + _styles.enabled + ":eq(0)").addClass(_styles.selected);
						};
					};
					_updateProp(prop, val);
					_updateProp("children", getElement(_element)["children"]);
				};
				break;
			case "id":
				//please i need this. so preventing to change it. will work on this later
				break;
			default:
				//check if this is not a readonly properties
				try {
					getElement(_element)[prop] = val;
					_updateProp(prop, val);
				} catch (e) {
					//silent
				};
				break;
		}
	};
	this.get = function (prop) {
		return _this[prop] || getElement(_element)[prop]; //return if local else from original
	};
	this.visible = function (val) {
		var id = _getPostID("postID");		
		if (val === true) {
			$("#" + id).show();
		} else if (val === false) {
			$("#" + id).hide();
		} else {
			return ($("#" + id).css("display")=="none") ? false : true;
		};
	};
	this.debug = function (v) {
		msBeautify.debug(v);
	};
	this.close = function () {
		_close();
	};
	this.open = function () {		
		_open();
	};
	this.showRows = function (r) {
		if (typeof r == "undefined" || r == 0) {
			return false;
		};
		_settings.visibleRows = r;
		_childHeight(_childHeight());
	};
	this.visibleRows = this.showRows;
	this.on = function (type, fn) {
		$("#" + _element).on(type, fn);
	};
	this.off = function (type, fn) {
		$("#" + _element).off(type, fn);
	};
	this.addMyEvent = this.on;
	this.getData = function () {
		return _getDataAndUI()
	};
	this.namedItem = function () {
		var opt = getElement(_element).namedItem.apply(getElement(_element), arguments);
		return _getDataAndUIByOption(opt);
	};
	this.item = function () {
		var opt = getElement(_element).item.apply(getElement(_element), arguments);
		return _getDataAndUIByOption(opt);
	};	
	//v 3.2
	this.setIndexByValue = function(val) {
		this.set("value", val);
	};
	this.destory = function () {
		var hidid = _getPostID("postElementHolder");
		var id = _getPostID("postID");
		$("#" + id + ", #" + id + " *").off();
		$("#" + id).remove();
		$("#" + _element).parent().replaceWith($("#" + _element));		
		$("#" + _element).data("dd", null);
	};
	//Create selectDown		
	_construct();
};
//bind in jquery
$.fn.extend({
			selectDown: function(settings)
			{
				return this.each(function()
				{
					if (!$(this).data('dd')){
						var mydropdown = new dd(this, settings);
						$(this).data('dd', mydropdown);
					};
				});
			}
});
$.fn.selectDown = $.fn.selectDown; //make a copy
})(jQuery);


              
            
!
999px

Console