@CHARSET "ISO-8859-1";

* {
	margin: 0; 
	padding: 0;
}

/********** Layout **********/
div#layoutHeader {
	height: 3em;
}

div#layoutControl {
	margin-top: 2px;
	float: left; 
	width: 22%;
}

div#layoutComponents {
	float: left; 
	width: 78%;
	height: 100%;
}

div.clear{
	clear:both;
}

/********* Header **********/
div#header {
	font-size: 1.5em;
	vertical-align: center;
	height: 2.2em;
	position: relative;
}

div#header div#title{
	line-height: 2em;
	margin-left: 1em;
}

div#header div#credits{
	font-size: .7em;
	position: absolute;
	top: .9em;
	right: 1em; 
}

/********** Control **********/
div#themeswitcher  {
	float: left;	
	width: 120px;
}



/********** Components **********/
div#components {
	margin: .5em;
	padding: .5em .5em 0 .5em;
	height: 100%;
}

/********** Sample Pages **********/
div.sample {
	margin-bottom: .5em;
}

div.sample .description {
  padding: .5em;
  color: #999;
}

div.sample div.demo {
	margin: .5em;
	float: left;
	width: 40%;
}

div.sample div.code {
	
	border: solid 1px;
	margin: .5em;
	float: left;
	width: 53%;
	background-color: #fff;	
	color: #3a3a3a;
	font-size: .75em;
	font-family: Courier;
	padding: .5em;
}

div.sample div.code .source {

	margin: .5em 0;
	padding: .3em;
}

/********** Global **********/
h2, p {
	margin-bottom: 1em;	
}

div.panel {
	margin: .5em;	
}

div.body {
	padding: .5em;	
}

div.row {
	margin: .5em 0;	
}

label {
	width: 7em;
	display: block;
	float: left;
}

span.title {
	font-weight: bold;
	font-size: 1.1em;
	color: #333;
}

.indicator {
  display: none;
  background-image: url("../images/processing.gif");
  width: 24px;
  height: 24px;
}

.codeHilight {
  color: green;	
}

/********** Anchor Samples **********/
div#anchor div.remoteDiv {
	width: 45%;
	float: left;
	margin-right: 1em;	
	font-size: .85em;
	height: 120px;
	
}

div#anchor a#greetingLink {
	display: block;
	float: left;	
	margin: .5em 1em .5em 0;
}

div#anchor  .indicator {
	float: left;	
	margin: .5em 1em .5em 0;
}

/********** Datepicker Samples **********/
div#datepicker #datepickerStatus {	
	color: orange;	
}

div#datepicker img {
	vertical-align: bottom;	
}

.ui-datepicker-trigger {
	cursor: pointer;	
}

/********** Dialog Samples **********/
div#dialog div.color{
	width: 200px;
	height: 200px;
	margin: 1em 0;		
}
	

/********** Div Samples **********/

div#div .remote {
 	height: 210px; 
 	width: 150px;
 	float: left;
 	margin-left: 10px;
}

div#div .ui-resizable {
 	border-style: dashed;
 	border-width: 2px;
 	height: 75px; 
 	width: 75px;
 	line-height: 75px;
 	vertical-align: middle;
 	text-align: center;
 	float: left;
}

div#div .ui-draggable {
 	cursor: move;
 	border-width: 2px;	
 	height:75px; 
 	width: 75px;
 	line-height: 75px;
 	vertical-align: middle;
 	text-align: center;
 	float: left;
 	margin-left: 10px;
}

div#div .ui-droppable {
 	border-style: double;
 	border-width: 2px;
 	height: 150px; 
 	width: 150px;
 	line-height: 150px;
 	vertical-align: middle;
 	text-align: center;
 	float: left;
 	margin-left: 20px;
}

div#div .ui-sortable {
	padding: .5em;
	margin: .5em;
}

div#div .ui-sortable div {
	padding: .4em .4em .5em 2em;
}

div#div .ui-sortable div span {
	margin-left: -1.5em;
	margin-top: .2em;
	position:absolute;	
}

/********** Select Samples **********/
div#select label{
	width: 8em;
}

/********** Submit Samples **********/
form#submitForm div {
	margin: .3em 0;
}

div#submit div#resultsDiv {
	width: 200px;
	height: 100
}

/********** Textarea Samples **********/
div#textarea textarea{
	width: 100%;
	height: 100px;
	font-size: .85em;
}

/********** Custom Widget Samples **********/
div#custom {
}
div#multilistResultDiv {
	margin-top: 1em;
	height: 147px;
}