/* CSS Document */

* {
	padding: 0;
	margin: 0;
}

html, body { 
	height: 100% 
}

body {
	background-repeat:repeat-x; 
	background-color: #6e0000;
	font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
    font-size: 80%;
	color: white;
	overflow: hidden;
}

#demo-top {
	background-color: #6e0000;
	max-height: 125px;
	min-width: 1024px;
	max-width: 1024px;
}

/* iframe */
/* http://stackoverflow.com/questions/2486548/jquery-or-css-autoresize-iframe-to-the-bottom */
#demo-frame  { /* necessary because it for some reason doesn't work with the iframe */
    position: absolute;
    top: 125px;
    bottom: 0;
    left: 0;
    right: 0;
	background-color: #ccc;
}

#demo-frame iframe {
	width: 100%;
    height: 100%;
    border: 0;
}


.small{ 
	font-size : 10px; 
	font-weight: normal;
}

a:link,a:active,a:visited { color : #FFFFFF; }
a:hover		{ color :white; }
a img {	border: 0px; }

input,textarea, select { font: normal 11px border-color : #000000; background-color : #FAFAFA; }
input.post, textarea.post, select { background-color : #FFFFFF; }
input { text-indent : 2px; }
input.button { background-color : #FAFAFA; }
input.mainoption { background-color : #FAFAFA; font-weight : bold; }
input.warning { background-color: #FAFAFA; font-weight : bold; color:#FF0000;}
input.liteoption { background-color : #FAFAFA; font-weight : normal; }



#demo-top #list, #demo-top #select {
	width: 309px;
	text-align: center;
	margin-top: 8px;
}

#demo-top #list button {
	margin-top: 3px;
}
#demo-top #select {
	margin: 3px 0;
	margin-left: 20px;
	margin-right: 10px;
}

.rtl #demo-top #select {
	text-align: right;
}

#demo-top #left {
	float: left;
	width: 309px;
	
	background-image: url('./images/demo/logo.png');
	background-repeat: no-repeat;
	display: block;
	height: 80px;
	margin-top: 10px;
}
.rtl #demo-top  #left {
	float: right;
}

#demo-top #center {
	/*background-image: url(./images/wave/bg.png);*/
	display: block;
	margin-left: 309px;
	margin-right: 240px;
	height: 125px;
	background-color: #282828;
	min-width: 475px;
}

.rtl #demo-top #center {
	margin-left: 235px;
	margin-right: 309px;
}

#demo-top #right {
	float: right;
	width: 235px;
	text-align: right;
}
.rtl #demo-top #right {
	float: left;
}

dl.details {
padding: 0 0 0 0px;
margin: 0 0 0 0px;
 vertical-align: middle; height:120px; display: table-cell;
}

dl.details dt {
float: left;
clear: left;
width: 40%;
text-align: right;
color: #D8D8D8;
display: block;
}

dl.details dd {
margin-left: 0pt;
padding-left: 5px;
color: #fff;
float: left;
width: 55%;
}


/* General classes for placing floating blocks */
.left-box {
	float: left;
	text-align: left;
}

.right-box {
	float: right;
	text-align: right;
}

/* Select boxes */
#demo-top .languages select {
	color: #D8D8D8;
	font-size: 0.8em;
	background-color: #6E0000;
	border: none;	
}

#demo-top .styles {
	border: none;
}



/* Buttons */
#demo-top button {
	text-align: left;
	border: 0;
	margin: 5px;
	padding: 0 5px;
	border-radius: 5px;
	overflow: visible;
	cursor: pointer;	
	background-color: #6e0000;
	border-color: #D8D8D8;
	color: #D8D8D8;
	border-style: solid;
	border-width: thin;
}

.rtl #demo-top button {
	text-align: right;
}

#demo-top button:hover {
	background-color: #282828;
	border-color: #fff;
	color: #fff;
}

#demo-top button.download, #demo-top button.colorizeit{
	min-width:175px;
	height: 35px;
	padding: 0;
	margin-top: 3px;
	background-color:green;
	border: none;
}

#demo-top button.download {
	height: 45px;
}

#demo-top button.download.warning {
	background-color: #c29e08;
}

#demo-top button.colorizeit {
	background-color: #6e0000;
}

#demo-top button.download span.subline {
	margin-top: 2px; 
	font-size: 0.7em;
	display: block;
	font-weight: normal;
}

#demo-top button span.title {
	font-size: 1.1em; 
	font-weight: bold;
	margin-left: 4px;
	display: inline-block;
	color: #fff;
	
	padding-right: 5px; 
}

#demo-top button.download span.title {
	height: 45px;
	margin-top: 3px;
	
	padding-top: 2px;
	padding-left: 38px; 
	background: url('./images/buttons/download-icon-small.png') no-repeat left 1px;
}

#demo-top button.download.warning span.title {
	margin-left: 0px;
	background: url('./images/buttons/downloadwarning-icon-small.png') no-repeat left 1px;
	color: #8e0808;
}

#demo-top button.colorizeit span.title {
	height: 30px;
	margin-top: 1px;
	padding-top: 8px;
	padding-left: 36px; 
	background: url('./images/buttons/colorizeit-icon.png') no-repeat left 1px;
}

.rtl #demo-top button span.title {
	background-position: right 1px;
	padding-right: 36px;
	margin-right: 4px;
}


/* Resonsive layout*/
@media only screen and (min-width: 1220px) {
	.extra-details-block  {
		display: block !important;
	}
	
	#demo-top {
		max-width: 1220px !important;
	}

}
/* Will be triggered by resonsive layout*/
.extra-details-block  {
	display:none;
}

/* Default block */ 
.default-details-block  dl.details {
	min-width: 280px; 
	max-width: 280px;
}

/* Extra Details block, will show when there's enough width available */
.extra-details-block dl.details {
	width: 170px; 
	padding-left:10px;
	padding-right:10px;

}

/* Flip percentages for extra details (only showing amount, so shorter text span) */
.extra-details-block dl.details dt{
	width: 60%;
}

.extra-details-block dl.details dd{
	width: 35%;
}