/* These are the default styles for CEMS. This is the first css include, so everything can be overridden
   by the skin. These defaults are basically the AnyCellco skin. Please respect the sections defined below.*/

/* Begin html element defaults */
body {
    margin: 0;
    padding: 20px 15px;
    background-color: white;
    font-family:  Trebuchet MS, Arial, Verdana, sans-serif;
    font-size: 11px;
	color: #333333;
	position:relative;

}

img {
    border: none;
    text-decoration: none; /*behavior: url('/cems/css/iepngfix.htc');  IE hack for png transparency */
}

h1 {font-size: 24px; margin:0; padding:0}
h2 {font-size: 16px; margin:0; padding:0}
h3 {font-size: 11px; margin:0; padding:0}
h4 {font-size: 11px; margin:0; padding:0}
h5 {font-size: 11px; margin:0; padding:0}
h6 {font-size: 11px; margin:0; padding:0}

h2 a {font-size: 11px}

button {cursor: pointer;}

a {
	white-space: normal;
	color: #148AB2;
}
a:hover {
	color:#666666;
	text-decoration:underline;
}

p {
    line-height: 1.5;
    padding: 0;
    margin: 5px 0;
}

/* End html element defaults */

/* Begin General classes */
.info {color: green;}
.error {color: red;}
.fatal {color: blue;}
.editable {cursor: pointer;}
.hide {display: none}
.clear {clear: both}

p.seamTextPara {
	margin:0;
	padding:0;
}
/* End General classes */

/* Begin: float clearing hacks */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* The Holly hack. Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* End hide from IE-mac */
/* End: float clearing hacks */

#contentWrapper {
	padding:1px; /* 	if 0  IE 6 breaks layout */
	margin:0px;
	position:relative;
	width:auto;
}

#headerPane {
	left:0;
	top:0;
	width: 600px;
}

#actionPane {
	margin:0;
	padding:0;
	width:400px;
	float:left;
	display:inline;
	min-height:100px;
	z-index:2;
}

#phonePane {
	overflow: hidden; /*fix for IE italics bug */
	margin:0;
	padding:0;
	position:absolute;
	left:410px;
	z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	width: auto;
}
#tutorialPlayer {
	width:375px;
}
ul#relatedTutorials {
	list-style:none;
	margin:0;
	padding:0;
}
ul#relatedTutorials li {
	margin:3px;
	padding:0;
	list-style:none;
}
div#endpointPopup {
	width: 250px;
	border:solid 1px DarkGray;
	padding: 8px;
	background-color:white;
}

#divPoweredBy {
	margin: 0 auto;
	z-index:50000;
}
h2 a,
h3 a {
	font-weight:normal;
}

/* Begin Device styles.  These are used in various Phone fragments (SoftPhone, SoftPhone360...) */
#tutorialPage div.phone {
	margin: 0;
}
div.buttons a.touch {
	z-index:5000;
}
div.buttons.show a.touch, div.buttons a.touch:hover {
	background-color:#FFFF00;
}
.phone div.buttons a.btn, .phone_C div.buttons a.btn {
	display:none;
}
.phone div.buttons a.btn.enable, .phone_C div.buttons a.btn.enable {
	display:block;
}


.phone_C .buttons a.drag,
.phone .buttons a.drag {z-index:1000;}

.phone_C .buttons a.north,
.phone .buttons a.north   {
	background: url( '../images/animation/DragLinkN.gif' ) no-repeat;
	width:40px;
	height:180px;
}

.phone_C .buttons a.south,
.phone .buttons a.south {
	background: url( '../images/animation/DragLinkS.gif' ) no-repeat;
	width:40px;
	height:180px;
}

.phone_C .buttons a.east,
.phone .buttons a.east    {
	background: url( '../images/animation/DragLinkE.gif' ) no-repeat;
	width:180px;
	height:40px;
}

.phone_C .buttons a.west,
.phone .buttons a.west {
	background: url( '../images/animation/DragLinkW.gif' ) no-repeat;
	width:180px;
	height:40px;
}

/* End Device styles. */

/* Module and popup styles */
.popup {
    margin: 0;
    padding: 0;
	border: solid 1px DarkGray;
	background-color:white;

}

.popup .modulePage {
    clear: both;
    margin: 0;
    padding: 10px;
    text-align: left;
}
.popup .modulePage input {
	width:99%;
}
.popup h1 {
	cursor: move;
	background-color:DarkGray;
	background-repeat:repeat-x;
    color: white;
    display: block;
    font-size: 110%;
    font-weight: bold;
    margin: 1px;
    padding: 3px;
    text-align: center;
}

.popup h1 {
}

.module a.closeButton {
    display: none;
}

.popup a.closeButton {
    background: url( '../images/closebtn2.gif' ) no-repeat;
    display: block;
    float: right;
    margin: 0 5px 0;
    width: 15px;
    height: 15px;
}

.popup a.closeButton:hover {
    background: url( '../images/closebtn2_over.gif' ) no-repeat;
}

/* tutorial categories */
#divInfoBalloon {
	width:213px;
	height:128px;
	display:block;
	position:absolute;
	z-index:5000;
}

.infoBalloon {
	background: url('../images/info_balloon.gif') no-repeat;
}
.infoBalloonTouch {
	background: url('../images/info_balloon_touch.gif') no-repeat;
}

div.tutorialRow {
	margin: 10px 0 0 0;

}
div.tutorialCol {
	width:auto;
	display:inline;
	float:left;
	width:180px;
	overflow:hidden;
}
div.tutorialCol ul {
	list-style:none;
	margin:2px 0 0 0;
	padding:0;
}
div.tutorialCol h3 {
	margin:0;
}
div.tutorialCol ul li {
	margin:2px 0 0 0;
	padding-right:2px;
	/*padding-left:16px;  Leave enough space to the left to display the background popular star */
}

div.tutorialCol ul li.popular {
	background: url('../images/star.gif') no-repeat;
}

/* topButtons is to be used with commandButtons to add a separator across the bottom */
div.topButtons {
    border-bottom: solid 1px DarkGray;
    padding-bottom: 5px;

}

div.commandMenu {
    float: right;
    width: 100px;
	text-align:right;
}

div.sectionBottom {
    border-top: solid 1px DarkGray;
    margin-top: 10px;
    padding-top: 5px;
}
div.bottomButtons {
    clear: both;
}

div.bottomButtons div.commandButtons {
    border-top: solid 1px DarkGray;
    margin-top: 7px;
    padding: 5px 0;
}

div.commandButtons {
    padding-top: 5px;
    text-align: center;
}
div.listButtons div.commandButtons {
	text-align:left;
	margin: 5px;
}
/* Begin imageLinks with icons to the left. Contains img tag*/
a.imageLink {
    padding: 0;
    margin: 0;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    color: #5F5F5F;
}

a.imageLink span {
    height: 14px;
}

a.imageLink:hover span {
    color: SteelBlue;
    text-decoration: underline;
}
a.imageLink img {
    margin: 0 2px -3px 5px;
}
/* End imageLinks*/

/* Begin btnLink, with icons to the left. Image is on the background of the A*/
a.btnLink {
	width:120px;
	height:20px;
	display:block;
	line-height:20px;

}
a.btnLink span {
	margin-left:30px;
}
a.btnLink:hover {
/*	background-position: 0 -20px; */
}
/* End imageLinks*/

div.commandButtons {
    text-align: center;
}
div.commandButtons a {
	margin: 5px;
}
/* End: Button and link styles */

/* Begin tutorial Player styles */

h3#tutorialTitle {
	border:solid 1px DarkGray;
	border-bottom: none;
	margin:0;
	padding:5px 3px;
	font-weight:bold;
}
div#tutorialPlayer h4 {
	padding: 0 3px 3px 3px;
	border:1px solid DarkGray;
	border-top:none;
	font-weight:normal;
}
div#tutorialPlayer h4 p {
	margin:0;
}
div#tutorialButtons {
    border: solid 1px DarkGray;
	margin-top: 0;
    padding: 3px;
}
h2#tutorialCategory {
	padding:5px 3px;
}
h3#tutorialsInCat {
	margin-top:8px;
}
#tutorial {
	margin:0;
	padding:0;
	background-color:white;
}

* html #tutorialSteps { 
   height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}

#tutorialSteps {
	border: solid 1px DarkGray;
	border-bottom: none;
	margin:0;
	padding:0;
	overflow-y:auto;
	overflow-x:hidden;
	width:auto;
	max-height:500px;
}

#tutorialSteps div.tutorialStep {
	clear:both;
	color:#333333;
	font-weight:normal;
	padding:3px;
	width:auto;
}
div.disclaimer {
 	color: #666;
	padding: 0;
    border-top: dotted 1px DarkGray;
    border-left: solid 1px DarkGray;
    border-right: solid 1px DarkGray;
}

div.disclaimer div {
	margin: 0 4px;
	padding: 5px 0;
	overflow:visible;
}

#tutorialSteps div.hover,
#tutorialSteps div.select {
	background: url('../images/tutorial_step_sel_bg.gif') no-repeat;
	cursor:pointer;
	color:white;
}
#tutorialSteps div.hover a,
#tutorialSteps div.select a {
	color:white;
}
#tutorial div.commandButtons {
    margin-top: 4px;
    padding: 5px 0;
}

div.stepNum {
	width: 20px;
	text-align:right;
	float:left;
	margin:0;
	display:inline;

}
div.stepInst {
	width: auto;
	margin:0;
	padding-left:30px;
	padding-right:2px;
	overflow:visible;
}
div.stepInst div {
	overflow:visible;
}

div.stepInst ul,
div.stepInst li {
	margin:0;
	padding:0;
}
div.stepInst p {
	margin-top:0;
	padding-top: 0;
}

#btnNext,
#btnDone {
	float:right;
}
#btnPrev {
	float:left;
}
/* End Tutorial styles */

div.deviceSelectItem {
    width: 100px;
    height: 120px;
    float: left;
    margin: 0px;
    text-align: center;
}

div.deviceSelectItem a {
    text-decoration: none;
    color: #666666;
}

div.deviceSelectItem a:hover div {
    text-decoration: underline;
}

fieldset {
	padding:0;
	margin: 0;
	border:none;
/*	border-top: 1px solid #ccc; */
}

legend {
	margin: 5px 0;
	padding: 0 3px;
	color: #036;
	background: transparent;
	font-size: 110%;
	font-weight: bold;
}

fieldset div {
	margin-bottom: 7px;
	padding: 0;
	vertical-align:bottom;
	white-space: nowrap;
}
fieldset div p {
	white-space: normal;
}

fieldset div input, fieldset div textarea {
	padding: 1px;
	color: #333;
}
fieldset div label {
	float: left;
	width: 150px;
	padding: 2px 3px 0 0;
	text-align: right;
	white-space:nowrap;
}

fieldset div.overunder label {
	float: none;
	padding: 0;
	text-align: left;
	width:auto;
}
fieldset div.overunder {
	margin-top:15px;
}

fieldset div.static label {
	padding: 0 3px 0 0;

}
fieldset div.static span {
	padding: 1px;
	font-weight:bold;
}
fieldset div select {
	margin:0;
}

fieldset div.checkbox input {
	display:block;
	float:left;
	width:30px;
}

fieldset div.checkbox label {
	display:block;
	float:left;
	width:370px;
	white-space:normal;
	height:auto;
	text-align:left;
}

fieldset .required, .required {
	font-weight: bold;
}

fieldset div.required label:before, div.required label:before {/* does not work in IE */
	content: " * ";
}
fieldset div.requiredMsg,  div.requiredMsg {
	padding-left:113px;
	font-style:italic;
	font-size: 80%;
	font-weight:bold;
}
fieldset div.error {
	color:red;
	font-style:italic;
	font-size: 85%;
}

/* Begin PhoneToolbar styles */

ul.btnCount_4 {width:160px;}
ul.btnCount_5 {width:160px;}

ul.phoneToolbar {
	height:48px;
	margin:0;
	padding:0
}

ul.phoneToolbar li {
	cursor: pointer;
	display: inline; /*hack for the IE double margin bug */
	float: left;
	height: 48px;
	width: 35px;
	margin: 0 2px;
	padding:0;
	background:url('../images/nav_bar_btn_bg.gif') no-repeat;
}
ul.phoneToolbar li.btnEndCap {
	margin:0;
	width: 9px;
	height: 48px;
	cursor:auto;
}

ul.phoneToolbar li.btnLeft			{background-position: -130px 0;}
ul.phoneToolbar li.btnRight			{background-position: -139px 0;}

ul.phoneToolbar li.btnPrev			{background-position: 0 0;}
ul.phoneToolbar li.btnPrev:hover,
ul.phoneToolbar li.btnPrevHover		{background-position: 0 -48px;}
ul.phoneToolbar li.btnPrevDisabled	{background-position: 0 -96px; cursor:auto}

ul.phoneToolbar li.btnNext			{background-position: -35px 0;}
ul.phoneToolbar li.btnNext:hover,
ul.phoneToolbar li.btnNextHover		{background-position: -35px -48px;}
ul.phoneToolbar li.btnNextDisabled	{background-position: -35px -96px; cursor:auto}

ul.phoneToolbar li.btnHome			{background-position: -70px 0;}
ul.phoneToolbar li.btnHome:hover,
ul.phoneToolbar li.btnHomeHover		{background-position: -70px -48px;}
ul.phoneToolbar li.btnHomeDisabled	{background-position: -70px -96px; cursor:auto}

ul.phoneToolbar li.btnShow			{background-position: -105px 0;}
ul.phoneToolbar li.btnShow:hover,
ul.phoneToolbar li.btnShowHover		{background-position: -105px -48px;}
ul.phoneToolbar li.btnShowDisabled	{background-position: -105px -96px; cursor:auto}

ul.phoneToolbar li.disabled			{cursor:auto};

/* End PhoneToolbar styles */