@charset "utf-8";
/* CSS Document */

.demoPanelHeader{
    padding:10px;
    padding-left:20px;
    background-color:#F2F9FC;
    border-bottom: solid 1px #6699CC;
    height:43px;
}

.demoPanelHeader p{
    padding-left:21px;
}

h1{
    display:inline;
    padding-left:5px;
}

#formContent{
    height:170px;
    background-color:white;
    padding: 15px;
}

.rowPanelLearningObject{
    margin:0;
    padding:0;
    width:925px;
}

.rowArrows{
    float: left;
    margin:0;
    padding:0;
    width:295px;
    display:inline-block;
}

.rowDefineLearningObjects{
    margin:0;
    padding:0;
    width:360px;
}

.cols{
    float: left;
    margin: 0 3px 0 0;
    padding: 0;
}

.colsLeftPanel{
    width: 355px;
    height:200px;
}

.colsCenterPanel{
    width: 290px;
    height:200px;
    padding-left:5px;
}

.colsRightPanel{
    width: 250px;
    height:200px;
    padding-left:13px;
}

.textSubtitle
{
    padding-left:25px;
    font-size:12px;
    font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
    color:#000000;
}

.textFont
{
    font-size:11px;
    font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
    color:#333333;
}

.textTitle
{
    height:20px;
    width:31px;
    margin-top:15px;
    padding-left:44px;
}

.textObjectType
{
    height:20px;
    width:70px;
    margin-top:10px;
    padding-left:5px;
}

.textTemplate
{
    height:20px;
    width:52px;
    margin-top:10px;
    padding-left:22px;
}

.titleInput
{
    width:270px;
    margin-top:15px;
}

.comboBox
{
    width:200px;
    height:20px;
    margin-top:10px;
    margin-right:30px
}

.boxCenter{
    width: 240px;
    height:65px;
    margin-left:0px;
    margin-bottom:10px;
    padding-top:15px;
    padding-left:10px;
    padding-right:10px;
    background-color:#FFFFDE;
    border: solid 1px #FFCC00;
}

.arrow{
    width: 30px;
    height:100%;
    margin-top:8%;
    margin-right:0px;
    margin-bottom:10px;
}

.titleYellowBox
{
    font-size:12px;
    font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
    color:#333333;
}

.textYellowBox1
{
    font-style:italic;
    font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
    color:#333333;
}

.textYellowBox2
{
    font-weight: normal;
    font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
    color:#333333;
}

.boxRight{
    width:240px;
    height:158px;
    padding-left:15px;
    padding-right:15px;
    padding-top:15px;
    background-color:#F2F9FC;
    border: solid 1px #6699CC;
}

.titleBlueBox
{
    font-weight: normal;
    font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
    color:#6699CC;
}
.textBlueBox
{
    font-weight: normal;
    font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
    color:#999999;
    text-align:justify;
}

.step1Div{
   
}

#stepsContent{
    height:312px;
    background-color:#F0F7F2;    
    padding:10px 15px 15px 15px;
}

#stepsImages{
    background-color:white;
    padding:15px 15px 15px 25px;
}

.stepsSubtitle{
    font-size:12px;
    padding-bottom: 15px;
}

.stepsText{
    color: #666666;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#stepsImagesTable{
    padding-top:15px;
}
#stepsImagesTable tr td{
    height:211px;
    padding-left:10px;
    background-repeat:no-repeat;
}

#stepsImagesTable tr td p{
  padding-left:8px;
  text-align:justify;
  vertical-align:top;
}

#stepsImagesTable tr{  
  vertical-align:top;
}

.stepsParagraphWidth{
  width: 180px;
}

.stepsTopParagraph{
    padding-top:40px;
}

.stepsBottomParagraph{
    padding-top:10px;
}

#step1Image{
    background-image: url('../images/components/publicPages/demo/panel_1.jpg');
    width:210px;
}

#step2Image{
    background-image: url('../images/components/publicPages/demo/panel_2.jpg');
    width:210px;
}

#step3Image{
    background-image: url('../images/components/publicPages/demo/panel_3.jpg');
    width:210px;
}

#step4Image{
    background-image: url('../images/components/publicPages/demo/panel_4.jpg');
    width:287px;
}

#step4Image p{
    width:240px;
}

#firstStepCancel{
   background: url('../images/components/publicPages/demo/Cancel_.gif') 0 0 no-repeat;
   width:75px;
   height:21px;
   display:block;
   margin-top:10px;
   margin-left:77px
}

#firstStepCancel:hover{
   background: url('../images/components/publicPages/demo/Cancel_.gif') 0 -21px no-repeat;   
}

.demo-next-btn-disable { 
	background: url('../images/components/publicPages/demo/Next_.gif') 0 -42px no-repeat; 
}
.demo-next-btn-enable { 
	background: url('../images/components/publicPages/demo/Next_.gif') 0 0 no-repeat; 
}
#firstStepNext{
   /*background: url('../images/components/publicPages/demo/Next_.gif') 0 0 no-repeat;*/
   width:75px;
   height:21px;
   display:block;
   margin-top:10px;
   margin-left:9px
}
/*
#firstStepNext:hover{
   background: url('../images/components/publicPages/demo/Next_.gif') 0 -21px no-repeat;
}
*/
#secondStepCancel{
   background: url('../images/components/publicPages/demo/Cancel_.gif') 0 0 no-repeat;
   width:75px;
   height:21px;
   display:block;
}

#secondStepCancel:hover{
   background: url('../images/components/publicPages/demo/Cancel_.gif') 0 -21px no-repeat;
}

#secondStepNext{
   background: url('../images/components/publicPages/demo/Next_.gif') 0 0 no-repeat;
   margin-left:80px;
   margin-top:-21px;
   width:75px;
   height:21px;
   display:block;
}

#secondStepNext:hover{
   background: url('../images/components/publicPages/demo/Next_.gif') 0 -21px no-repeat;
}

#step2Content{
    padding:15px 10px 15px 35px;
    background-color:#D3DFE4;
    height:517px;
}

#step2Editor{
    width:743px;
    margin-right:15px;
    background-color:white;
    height:490px;
    float:left;
}

#step2Instructions{
    background-color:#FFFFDE;
    border: solid 1px #FFCC00;
    height:490px;
    width:150px;
    color:#333333;
    font-size:12px;
    padding: 15px 10px;
    line-height:1.2em;
    float:right;
   font-family: Arial, Helvetica, sans-serif;
}

#step2Instructions p{
    margin-bottom:15px;
}


/*****************************************************************************/
/***************************** START DEMO WINDOW CSS ******************************/
/*****************************************************************************/

.demo-window {}


/************************* demo step 3  *************************/
.demo3-comboBox
{
    width:165px;
    height:20px;
    margin-top:0px;
    margin-right:0px
}

/************************* demo step 4 - header panel *************************/

.demo-window .w-header-title .w-title-icon {
	background: transparent url( ../images/icons/CLDemo_icon.png ) no-repeat;
	position: absolute;
	height: 18px;
	width: 18px;
}

.demo-window .w-header-body {
	background: transparent;
	color: #000000;
	font: normal 11px arial,tahoma,verdana,sans-serif;
	padding: 10px 0px 20px 15px;
}

.ds4-hl .w-header-title .w-title-text {
	font: normal 13px arial,tahoma,verdana,sans-serif;
	font-weight: bold;
}

.ds4-hr .w-header-title .w-title-text {
	left: 10px;
}
.ds4-hr .downloadParagraph {
	padding-top: 15px;
}
.ds4-hr .downloadParagraph a {
	color: #6699cc;/*ff9900;*/
}
.ds4-hr .w-header-body {
	padding: 5px 0px 8px 15px;
}

/************************* demo - cancel & next buttons *************************/

.demo-cancel-btn {
	background: url('../images/components/publicPages/demo/Cancel_.gif') 0 0 no-repeat;
	float: left;
	position: relative;
	height: 21px;
	width: 75px;
}
.demo-cancel-btn-over {
	cursor:pointer;
	background: url('../images/components/publicPages/demo/Cancel_.gif') 0 -21px no-repeat;   
}

.demo-next-btn {
	background: url('../images/components/publicPages/demo/Next_.gif') 0 0 no-repeat;
	float: left;
	position: relative;
	height: 21px;
	width: 75px;
	
}
.demo-next-btn-ml {
	margin-left: 10px;
}
.demo-next-btn-over {
	cursor:pointer;
	background: url('../images/components/publicPages/demo/Next_.gif') 0 -21px no-repeat;
}


/************************* demo step 4 - right panel *************************/

.ds4-right-panel{
	color: #333333;
	font: normal 11px arial,tahoma,helvetica,sans-serif;
	padding-right:0;
}
.ds4-title{
	font: bold 12px arial,tahoma,helvetica,sans-serif;
	padding-bottom: 10px;
	border-bottom: 1px solid #CCCCCC;
}
.ds4-title .ds4-title-menu{
	padding-top: 10px;
}
.ds4-title .ds4-title-menu-span,
.ds4-title-menu-span-selected{
	font: 12px arial;
	padding-right: 5px;
}
.ds4-title-menu-span:hover{
	cursor:pointer;
	text-decoration: underline;
}
.ds4-title-menu-span-selected{
	color: #666666;
}

.ds4-title .ds4-title-border{
	border-left: 1px solid #666666;
	padding-right: 5px;
}
.ds4-content{
	overflow-y:scroll;
	height: 455px;
	width: 422px;
}
.ds4-content p{
	color: #666666;
	font: normal 11px arial,tahoma,helvetica,sans-serif;
	padding-top: 15px;
}

/************************* demo step 4 - form footer items *************************/

.ds4-footer-radios{
	color: #333333;
	font: normal 11px arial,tahoma,verdana,sans-serif;
	margin-bottom: 15px;
	text-align: right;
}
.ds4-footer-save-item{
	float: left;
	position: relative;
}
.ds4-footer-save-lb{
	padding: 0px 7px 0px 0;
	width: 150px;
}
.ds4-footer-save-el{
	margin-left: 0px;
}
.ds4-footer-save-el label{
	margin: 0px 15px 0px 7px;
}
.ds4-footer-radios input{
	height: 13px;
	margin: 0px;
	padding: 0px;
	width: 13px;
}
.ds4-form-footer .ds4-footer-top, .ds4-form-footer .signup-footer-middle, .ds4-form-footer .ds4-footer-buttons{
	margin-left: 157px;
}

/*********** demo step 2 - content styles (edit & preview mode) ***********/

.demo-tinymce-panel .defaultSkin table.mceLayout {
	border-width: 0px;
}
.demo-tinymce-panel .defaultSkin table.mceLayout tr.mceFirst td {
	border-top: 0px none;
}

.demo-iframe-panel .x-panel-body-noheader, .x-panel-mc .x-panel-body {
	border:1px solid #c1c1c1;
	border-top: 0px none;
}

/************************* demo step 4 - right panel *************************/

.ds2-right-panel{
	color: #333333;
	font: normal 12px arial,tahoma,helvetica,sans-serif;
}

/******************** demo step 2 - cancel & next buttons ********************/

.ds2-cancel-btn {
	background: transparent url( ../images/components/publicPages/demo/step2/Cancel_.png ) no-repeat;
	float: left;
	position: relative;
	height: 21px;
	width: 61px;
}
.ds2-cancel-btn-over {
	cursor:pointer;
	background: transparent url( ../images/components/publicPages/demo/step2/Cancel_.png ) no-repeat;
}

.ds2-next-btn {
	background: transparent url( ../images/components/publicPages/demo/step2/Next_.png ) no-repeat;
	float: left;
	position: relative;
	height: 21px;
	width: 61px;
	
}
.ds2-next-btn-ml {
	margin-left: 6px;
}
.ds2-next-btn-over {
	cursor:pointer;
	background: transparent url( ../images/components/publicPages/demo/step2/Next_.png ) no-repeat;
}

/******************** demo step 2 & 3 - toolbar - LO title ********************/

.demo-top-toolbar {
	padding-left: 10px;
}
.demo-top-toolbar table {
	height: 100%;
}
.demo-top-toolbar td {
	vertical-align: middle;
}
.demo-top-toolbar .ttbar-title-text {
	text-align: left;
}
.demo-top-toolbar td, .demo-top-toolbar span, .demo-top-toolbar input, 
.demo-top-toolbar div, .demo-top-toolbar select, .demo-top-toolbar label {
	color: #000000;
	font: normal 12px arial,tahoma,helvetica,sans-serif;
}
.demo-top-toolbar .ttbar-title-label {
	font-weight: bold;
	padding-left: 10px;
}
.ttbar-title-sep {
	padding-right: 4px;
}
.demo-top-toolbar .ttbar-title-sep {
	font-weight: bold;
}