/* CSS Style */

/* Common CSS */
body
{
	font-family:Segoe UI;
	font-size:12px;
	margin:0px;
	overflow:hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
ul, ol, li{list-style:none;padding:0px;margin:0px;}
.txt{padding:3px;margin:0px;outline:none;border:0px;}
.lst{padding:0px;margin:0px;outline:none;}
/*------------*/

/* Scroll Bar */
#cP::-webkit-scrollbar{height:15px;overflow:visible;width:15px;background:#EFEFEF;}
#cP::-webkit-scrollbar-thumb{background:#DDDDDD;min-height:28px;width:15px;}
#cP::-webkit-scrollbar-button{height:0px;width:0px;}
#cP::-webkit-scrollbar-track{}
#cP::-webkit-scrollbar-corner{background:#EFEFEF;}

#rP-cL ul::-webkit-scrollbar{height:15px;overflow:visible;width:15px;background:#CACACA;}
#rP-cL ul::-webkit-scrollbar-thumb{background:#BCBCBC;min-height:28px;width:15px;}
#rP-cL ul::-webkit-scrollbar-button{height:0px;width:0px;}
#rP-cL ul::-webkit-scrollbar-track{}
#rP-cL ul::-webkit-scrollbar-corner{background:transparent;}
/*------------*/

/* Structure */
#oP{}
#tP{height:30px;background:#FFFFFF;z-index:1;}
#cP{float:left;position:relative;min-height:100px;background:#F6F8F8;z-index:0;overflow:scroll;border-top:solid 1px #CFCFCF;border-bottom:solid 1px #F1F1F1;}
#rP{float:right;width:250px;min-height:100px;background:#FFFFFF;z-index:1;overflow:hidden;}
#bP{height:20px;clear:both;background:#FFFFFF;z-index:1;text-align:center;}
/*-----------*/

/* Home Page */
header
{
	padding:5px 15px;
	overflow:hidden;
	background:#ffffff;
	border-bottom:solid 1px #d8d8d8;
	box-shadow:0px 1px 1px #d4d3d3;
}
header .logo{float:left;}
header .logo img{height:60px;}
header .social{float:right;margin-top:15px;}
header .social .icon{display:inline-block;margin:0px 2px;width:30px;height:30px;background:url(images/social-icon-sprite.png) no-repeat;border-radius:2px;-webkit-border-radius:2px;}
header .social a.twitter .icon{background-position:-33px 0px;box-shadow:inset 0px -2px 0px #2887af;-webkit-box-shadow:inset 0px -2px 0px #2887af;}
header .social a.twitter .icon:active{box-shadow:inset 0px 2px 0px #2887af;-webkit-box-shadow:inset 0px 2px 0px #2887af;}
header .social a.facebook .icon{background-position:0px 0px;box-shadow:inset 0px -2px 0px #2d4370;-webkit-box-shadow:inset 0px -2px 0px #2d4370;}
header .social a.facebook .icon:active{box-shadow:inset 0px 2px 0px #2d4370;-webkit-box-shadow:inset 0px 2px 0px #2d4370;}
header .social a.google .icon{background-position:-66px 0px;box-shadow:inset 0px -2px 0px #9c2725;-webkit-box-shadow:inset 0px -2px 0px #ab5d23;}
header .social a.google .icon:active{box-shadow:inset 0px 2px 0px #ab5d23;-webkit-box-shadow:inset 0px 2px 0px #ab5d23;}
header .social a.rss .icon{background-position:-132px 0px;box-shadow:inset 0px -2px 0px #ab5d23;-webkit-box-shadow:inset 0px -2px 0px #ab5d23;}
header .social a.rss .icon:active{box-shadow:inset 0px 2px 0px #ab5d23;-webkit-box-shadow:inset 0px 2px 0px #ab5d23;}
header .socialButtons{float:right;height:20px;padding:20px 0px;width:180px;}

#middle{width:1000px;margin:auto;}
#middle .title-text{text-align:center;padding:20px 0px;}
#middle .title-text h1{margin:0px;font-size:50px;font-family:"Times New Roman", Times, serif;font-weight:normal;}
#middle .title-text p{width:600px;margin:auto;}
#middle .box-section{text-align:center;height:200px;}
#middle .box-section .box{float:left;margin:10px;width:180px;height:180px;display:none;}
#middle .box-section .box.design{background:#edaf57;margin-left:210px;}
#middle .box-section .box.download{background:#8ac9fe;}
#middle .box-section .box.share{background:#97ca96;}
#middle .box-section .box .icon{display:inline-block;width:130px;height:120px;position:relative;top:30px;background:url(images/home-sprite.png) no-repeat;}
#middle .box-section .box .text{position:relative;top:35px;color:#ffffff;}
#middle .box-section .box.design .icon{background-position:20px 0px;}
#middle .box-section .box.download .icon{background-position:-126px 0px;}
#middle .box-section .box.share .icon{background-position:-298px 0px;}
#middle .btn-section{text-align:center;padding:20px 0px;height:37px;}
#middle .btn-section a{display:none;background:#286fff;color:#ffffff;text-decoration:none;padding:10px 20px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
/*-----------*/

/* Top Section */
#tP{position:relative;height:30px;}
#tP>img{height:26px;margin:2px;float:left;display:none;}
#tP>ul{display:inline-block;}
#tP>ul>li{float:left;padding:8px 10px 7px 10px;position:relative;}
#tP>ul>li:hover{background:#E5E5E5;cursor:default;}
#tP>ul>li>ul{position:absolute;left:0px;top:30px;width:110px;display:none;}
#tP>ul>li:hover ul{display:block;background:#E5E5E5;}
#tP>ul>li>ul>li{padding:7px 10px;}
#tP>ul>li>ul>li:hover{background:#D2D2D2;}
/*-------------*/

/* Right Section */
#rP-cT{padding:0px 10px;}
#rP-cT .lst{width:100%;padding:5px;background:#E5E5E5;border:0px;}
#rP-cL{height:400px;padding:5px 10px;}
#rP-cL ul{background:#E5E5E5;height:100%;overflow-y:scroll;}
#rP-cL ul li{padding:7px;cursor:default;}
#rP-cL ul li .ci{display:inline-block;width:30px;height:30px;margin-right:5px;background:url(images/icon-sprite.png) no-repeat;vertical-align:middle;}
#rP-cL ul li:hover{background:#D2D2D2;}

#rP-cL ul li#Button .ci{background-position:0px 0px;}
#rP-cL ul li#Text .ci{background-position:0px -812px;}
#rP-cL ul li#TextBox .ci{background-position:0px -30px;}
#rP-cL ul li#CheckBox .ci{background-position:0px -60px;}
#rP-cL ul li#RadioButton .ci{background-position:0px -90px;}
#rP-cL ul li#ComboBox .ci{background-position:0px -120px;}
#rP-cL ul li#ListBox .ci{background-position:0px -150px;}
#rP-cL ul li#TextArea .ci{background-position:0px -180px;}
#rP-cL ul li#ProgressBar .ci{background-position:0px -210px;}
#rP-cL ul li#HorizontalLine .ci{background-position:0px -240px;}
#rP-cL ul li#VerticalLine .ci{background-position:0px -270px;}
#rP-cL ul li#Image .ci{background-position:0px -300px;}
#rP-cL ul li#Icon .ci{background-position:0px -330px;}
#rP-cL ul li#Map .ci{background-position:0px -360px;}
#rP-cL ul li#Label .ci{background-position:0px -390px;}
#rP-cL ul li#TextEditor .ci{background-position:0px -420px;}
#rP-cL ul li#Banner .ci{background-position:0px -662px;}
#rP-cL ul li#HDivider .ci{background-position:0px -693px;}
#rP-cL ul li#VDivider .ci{background-position:0px -723px;}
#rP-cL ul li#Rectangle .ci{background-position:0px -452px;}
#rP-cL ul li#AreaChart .ci{background-position:0px -482px;}
#rP-cL ul li#BarChart .ci{background-position:0px -512px;}
#rP-cL ul li#ColumnChart .ci{background-position:0px -545px;}
#rP-cL ul li#LineChart .ci{background-position:0px -572px;}
#rP-cL ul li#PieChart .ci{background-position:0px -602px;}
#rP-cL ul li#PlotChart .ci{background-position:0px -632px;}
#rP-cL ul li#HorizontalScrollbar .ci{background-position:0px -752px;}
#rP-cL ul li#VerticalScrollbar .ci{background-position:0px -782px;}

#rP-cP{padding:0px 5px 0px 10px;}
#rP-cP div{overflow:hidden;padding-bottom:5px;}
#rP-cP .txt{width:50px;float:right;margin-right:5px;border:solid 1px #CCCCCC;}
#rP-cP .txt:focus{border:solid 1px #4D90FE;}
/*---------------*/

/* Right Menu */
#rM{position:fixed;border:solid 1px #bababa;width:150px;box-shadow:2px 2px 3px #666666;background:#ffffff;}
#rM ul{margin:2px 0px;padding:0px;list-style:none;}
#rM ul li{padding:3px 20px;cursor:default;}
#rM ul li:hover{background:#4281f4;color:#ffffff;}
#rM ul li.seperator{height:1px;background:#e9e9e9;margin:5px 0px;padding:0px;}
#rM ul li.seperator:hover{background:#e9e9e9;}
/*------------*/

/* Center Section */
#cP div.object{position:absolute;cursor:default;}
#cP .object.active{border:solid 1px #CC9900 !important;}
#cP .object.active .rb{position:absolute;width:5px;height:5px;display:inline-block;border:solid 1px #000;background:#ffcc33;}
#cP .object.active .tl{left:-4px;top:-4px;cursor:nwse-resize;}
#cP .object.active .tr{right:-4px;top:-4px;cursor:nesw-resize;}
#cP .object.active .bl{bottom:-4px;left:-4px;cursor:nesw-resize;}
#cP .object.active .br{bottom:-4px;right:-4px;cursor:nwse-resize;}
#cP-cD
{
	font-family:Segoe UI;
	border:solid 1px #ffcc33;position:absolute;width:250px;height:100px;resize:none;z-index:999;
}
/*----------------*/

/* Button Object */
#cP .object.button{border:solid 1px #000;background:#FFFFFF;display:table}
#cP .object.button .row{display:table-row;height:100%;}
#cP .object.button .row .cell{display:table-cell;vertical-align:middle;text-align:center;}
/*---------------*/

/* Textbox Object */
#cP .object.textbox{border:solid 1px #000;padding:3px 0px;}
#cP .object.textbox .value{left:3px;right:3px;overflow:hidden;white-space:nowrap;position:absolute;}
/*----------------*/

/* Text Object */
#cP .object.text{border:solid 1px transparent;}
#cP .object.text .value{left:3px;right:0px;height:100%;overflow:hidden;word-wrap:break-word;position:absolute;font-family:Arial, Helvetica, sans-serif;margin:0px;}
/*------------*/

/* Textarea Object */
#cP .object.textarea{border:solid 1px #000;}
#cP .object.textarea .value{left:3px;right:0px;height:100%;overflow:auto;word-wrap:break-word;position:absolute;font-family:Arial, Helvetica, sans-serif;margin:0px;}
/*----------------*/

/* Progressbar Object */
#cP .object.progressbar{border:solid 1px #000;background:#FFF;}
#cP .object.progressbar .progress{background:#AAA;width:70px;height:100%;}
/*--------------------*/

/* Horizontalline Object */
#cP .object.horizontalline{height:1px;padding:5px 0px;}
#cP .object.horizontalline .line{background:#000;height:100%;}
/*-----------------------*/

/* Verticalline Object */
#cP .object.verticalline{width:1px;padding:0px 5px;}
#cP .object.verticalline .line{background:#000;height:100%;}
/*---------------------*/

/* Image Object */
#cP .object.image{border:solid 1px #000;}
/*--------------*/

/* Icon Object */
#cP .object.icon{border:solid 1px #000;}
/*-------------*/

/* Text Editor Object */
#cP .object.texteditor{border:solid 1px #000;background:#FFFFFF;}
#cP .object.texteditor .toolbar{height:25px;border-bottom:solid 1px #000;background:#f0f0f0 url(images/control-sprite.png) -15px 7px no-repeat;}
#cP .object.texteditor .value{padding:5px;}
/*--------------------*/

/* Checkbox Object */
#cP .object.checkbox{}
#cP .object.checkbox .icon{display:inline-block;margin-left:1px;vertical-align:middle;width:18px;height:18px;background:url(images/control-sprite.png) 0px -51px no-repeat;}
#cP .object.checkbox .icon.checked{background-position:0px -36px;}
/*-----------------*/

/* Radio Button Object */
#cP .object.radiobutton{border:1px solid transparent;}
#cP .object.radiobutton .icon{display:inline-block;margin-left:1px;vertical-align:middle;width:18px;height:18px;background:url(images/control-sprite.png) 0px -16px no-repeat;}
#cP .object.radiobutton .icon.checked{background-position:0px 1px;}
/*---------------------*/

/* Combobox Object */
#cP .object.combobox{background:#FFF;border:solid 1px #000;}
#cP .object.combobox .icon{background:url(images/control-sprite.png) 0px -66px no-repeat;display:inline-block;height:100%;width:15px;border-left:solid 1px #000;float:right;}
#cP .object.combobox .value{padding:0px 2px;display:inline-block;height:100%;}
/*-----------------*/

/* Listbox Object */
#cP .object.listbox{background:#FFF;border:solid 1px #000;}
#cP .object.listbox ul{overflow-y:auto;height:100%;}
#cP .object.listbox ul li{padding:3px 5px;}
#cP .object.listbox ul li.selected{background:#CCC;}
/*----------------*/

/* Map Object */
#cP .object.map{background:#FFF;border:solid 1px #000;}
#cP .object.map img{width:100%;height:100%;}
/*------------*/

/* AreaChart Object */
#cP .object.areachart{border:solid 1px transparent;}
#cP .object.areachart img{width:100%;height:100%;}
/*------------------*/

/* BarChart Object */
#cP .object.barchart{border:solid 1px transparent;}
#cP .object.barchart img{width:100%;height:100%;}
/*-----------------*/

/* ColumnChart Object */
#cP .object.columnchart{border:solid 1px transparent;}
#cP .object.columnchart img{width:100%;height:100%;}
/*--------------------*/

/* LineChart Object */
#cP .object.linechart{border:solid 1px transparent;}
#cP .object.linechart img{width:100%;height:100%;}
/*------------------*/

/* PieChart Object */
#cP .object.piechart{border:solid 1px transparent;}
#cP .object.piechart img{width:100%;height:100%;}
/*-----------------*/

/* PlotChart Object */
#cP .object.plotchart{border:solid 1px transparent;}
#cP .object.plotchart img{width:100%;height:100%;}
/*------------------*/

/* Label Object */
#cP .object.label{border:solid 1px transparent;}
/*--------------*/

/* Rectangle Object */
#cP .object.rectangle{border:solid 1px #000;}
/*------------------*/

/* Banner Object */
#cP .object.banner{background:#f0f0f0;border:solid 1px #000;}
/*---------------*/

/* HDivider Object */
#cP .object.hdivider{border:solid 1px transparent;}
#cP .object.hdivider .divider{border-left:solid 1px #000;border-right:solid 1px #000;height:100%;background:url(images/hdivider-image.png) center center no-repeat;}
/*-----------------*/

/* VDivider Object */
#cP .object.vdivider{border:solid 1px transparent;}
#cP .object.vdivider .divider{border-top:solid 1px #000;border-bottom:solid 1px #000;height:100%;background:url(images/vdivider-image.png) center center no-repeat;}
/*-----------------*/

/* Horizontal Scrollbar Object */
#cP .object.horizontalscrollbar{border:solid 1px #000;}
#cP .object.horizontalscrollbar .scroll-left-btn{display:inline-block;height:100%;float:left;width:15px;border-right:solid 1px #000;background:url(images/control-sprite.png) 0px -79px no-repeat;}
#cP .object.horizontalscrollbar .scroll-right-btn{display:inline-block;height:100%;float:right;width:15px;border-left:solid 1px #000;background:url(images/control-sprite.png) 0px -94px no-repeat;}
/*-----------------------------*/

/* Vertical Scrollbar Object */
#cP .object.verticalscrollbar{border:solid 1px #000;}
#cP .object.verticalscrollbar .scroll-top-btn{position:absolute;top:0px;display:block;width:100%;height:15px;border-bottom:solid 1px #000;background:url(images/control-sprite.png) 0px -108px no-repeat;}
#cP .object.verticalscrollbar .scroll-bottom-btn{position:absolute;bottom:0px;display:block;width:100%;height:15px;border-top:solid 1px #000;background:url(images/control-sprite.png) 0px -66px no-repeat;}
/*---------------------------*/

/* Alert Box Object */
#cP .object.alertbox{border:solid 1px #000;background:#FFFFFF;}
#cP .object.alertbox .title{height:25px;border-bottom:solid 1px #000;background:#f0f0f0;}
#cP .object.alertbox .value{padding:5px;}
#cP .object.alertbox .buttons{margin-top:10px;text-align:center;}
#cP .object.alertbox .buttons .btn{border:solid 1px #000;padding:2px 8px;margin:0px 5px;}
/*-----------------*/