/*******************************************************************************
*
* INSTANTCHAT WEBSITE CSS
*
*
*           by Rico Pfaus | (c) 2009 - 2011 Programmfabrik GmbH
*
*
*******************************************************************************/

/* import fonts */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:regular,bold");
@import url("http://fonts.googleapis.com/css?family=Cabin:600,600italic,bold,bolditalic");
@import url("http://fonts.googleapis.com/css?family=Just+Another+Hand");
@import url("http://fonts.googleapis.com/css?family=Droid+Sans+Mono");



/*******************************************************************************
* GENERAL HTML
*******************************************************************************/

body {
    margin: 0px;
    color: #000000;
    font-size: 16px;
	overflow: hidden; /* disabled by default, enabled only for top-level bodies */
}
* {
    font-family: "Open Sans", Arial, Sans-Serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;    /* Safari needs this per element */
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}
a, a:active, a:visited {
    color: #009EC3;
    text-decoration:none;
}
a:hover {
    cursor: pointer;
    text-decoration: underline;
}
pre {
    width: 558px;   /* - (2*5 padding + 2*1 border) */
	padding: 5px;
	margin-bottom: 15px;
    color: #000000;
	background-color: #e9e9e9;
	font-size: 12px;
    border: dashed 1px #cccccc;
    overflow: auto;
}
pre,code {
    font-family: "Droid Sans Mono";
    letter-spacing: 1px;
}
img {
    border: none;
}
strong {
	font-weight: bold;
}

/* IE uses strange chars in password inputs, which our fonts do not provide */
input[type=password] {
    font-family: sans-serif;
}

/* always enable scrollbars in toplevel pages */
body.toplevel {
    overflow: auto;
}

body.popup {
	overflow-y: auto;
	overflow-x: hidden;
}

input,
textarea,
select {
	background: #ffffff; /* Fix for Firefox's behaviour of adding gray bg to inputs */
    -webkit-border-radius: 0px; /* (iPad) remove rounded corners */
    -webkit-appearance: none; /* (iPad) remove shadow in input */
}

/* we have our own selects, so we hide the orginal ones */
select {
	visibility: hidden;
}

/* hide resize handle in webkit */
textarea {
	resize: none;
}



/*******************************************************************************
 * HEADER BAR (Logo/Usermenu)
 *******************************************************************************/

/* header styling */
#header-bar {
    height: 75px;
    padding-top: 10px;
}

/* logo bar */
#logo {
	position: relative;
    width: 800px;
    margin: 0px auto;
    padding-left: 32px; /* align with menu text */
}

/* logo image */
#logo a.logo-gfx {
    display:block;
    width: 260px;
    height: 60px;
    background: url(img/logo.png) no-repeat;
    outline: none;
    border: none;
}

/* usermenu */
#usermenu {
	position: absolute;
    top: 5px;
    right: 20px;
}
#usermenu a.login-name {
	text-decoration: none;
	font-weight:bold;
}
#usermenu a.login-name:hover {
	text-decoration: underline;
}

/* usermenu button/popup */
#usermenu-button {
    padding-left: 20px;
    background: url(img/ico-agent.png) no-repeat left center;
}
#usermenu-popup {
    position: absolute;
    width: 183px;
    z-index: 1000;
}
#usermenu-popup div.header {
    height: 25px;
    background: url(img/usermenu-top.png) no-repeat;
}
#usermenu-popup div.content {
    background: url(img/usermenu-bg.png);
    padding: 0px 13px 0px 7px;
}
#usermenu-popup div.content a {
	display: block;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    text-align: right;
    padding-bottom: 4px;
}
#usermenu-popup div.content a:hover {
    text-decoration: underline;
}
#usermenu-popup div.footer {
    height: 21px;
    background: url(img/usermenu-bottom.png) no-repeat;
}

/* loginbox */
#loginbox {
    position: absolute;
	top: 0px;
	right: 0px;
}
#loginbox table {
    position: absolute;
	top: 0px;
	right: 0px;
    border-spacing: 0px;
}
#loginbox table td {
    padding: 0px;
}
#loginbox input {
	margin: 0px 10px 0px 0px;
	width: 100px;
	height: 16px;
	padding: 1px;
    border: solid 1px #999999;
}
#loginbox .input-default {
	color: #a0a0a0;
}
#loginbox span.wrong-password {
    color: #ff0000;
}

/* login overlay */
#loginOverlayDiv {
	display: none;
	width: 380px;
  	height: 230px;
	font-size: 16px;
}
#loginOverlayDiv.login-errors {
  	height:285px;
}
#loginOverlayDiv table.formTable {
	width:380px;
}



/*******************************************************************************
 * MAINMENU BAR (Mainmenu/Chatwithus)
 *******************************************************************************/

/* header styling */
#mainmenu-bar {
    height: 60px;
    background: #eeeeee;
    min-width: 800px;
}

/* mainmenu styling */
#mainmenu {
    margin: 0px auto;
	width: 800px;
    line-height: 60px;
    position: relative; /* for chatwithus button */
    padding-left: 30px; /* align with menu text */
}
#mainmenu ul {
    display:block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#mainmenu ul li {
    height: 60px;
    display: block;
    float:left;
}
#mainmenu ul li.active {
    background: url(img/mainmenu-marker.png) no-repeat center 47px;
}
#mainmenu ul li a {
    font-size: 16px;
    font-weight: bold;
    line-height:60px;
    border-right: solid 2px #bbbbbb;
    text-decoration: none;
    text-transform:uppercase;
    padding: 5px 25px 5px 25px;
}
#mainmenu ul li.firstelement {
    margin-left: -25px;
}
#mainmenu ul li.active a {
    color: #000000;
}
#mainmenu ul li a:hover {
    text-decoration: underline;
}
#mainmenu ul li a.lastelement,
#mainmenu ul li a.myaccount {
    border-right: none;
}



/*******************************************************************************
 * TEASER BAR (Frontpage gfx)
 *******************************************************************************/

/* teaser bar */
#teaser-bar {
	padding-top: 10px;
    background: #e0e0e0;
    min-width: 800px;
}
#teaser-bar #teaser {
	width: 800px;
    margin: 0px auto;
    overflow:hidden;
    position: relative;
}
#teaser a.button {
    margin-top: 20px;
}

/* slideshow in teaser */
#slideshowDiv {
    height: 270px;
    position: relative;
}
#slideshowDiv div.slide {
    position: absolute;
    width: 800px;
    top: 0px;
    left: 15px;
    color: #333333;
}
#slideshowDiv div.slide div.inner  {
    position: relative;
    height: 270px;
}

/* texts within slide */
#slideshowDiv div.slide div.text {
    width: 600px;
    position: absolute;
    top: 0px;
    left: 0px;
}
#slideshowDiv div.slide div.text h2 {
	font-family: 'Just Another Hand', Arial, Sans-serif;
	font-size: 52px;
	line-height: 34px;
    margin-bottom: 15px;
    margin-top: 21px;
	font-weight: normal;
}
#slideshowDiv div.slide div.text ul {
    list-style-image: url(img/list-symbol-teaser.png);
}
#slideshowDiv div.slide div.text ul li,
#slideshowDiv div.slide div.text ol li{
    line-height: 28px;
    font-size: 20px;
	font-family: 'Cabin', Arial, Sans-serif;

}

/* button in slide */
#slideshowDiv div.slide a.button {
    position: absolute;
    left: 0px;
    bottom: 20px;
}

/* background images in slides */
#slideshowDiv div#slide-0 {
    background: url(img/slideshow-bg-1.png);
}
#slideshowDiv div#slide-1 {
    background: url(img/slideshow-bg-2.png);
}
#slideshowDiv div#slide-2 {
    background: url(img/slideshow-bg-3.png);
}
#slideshowDiv div#slide-3 {
    background: url(img/slideshow-bg-4.png);
}

/* slideshow menu*/
#slideshowMenu div.slideshow-menu {
    position: absolute;
    right: 0px;
    top: 10px;
    z-index: 10;
    height: 15px;
}
#slideshowMenu div.slideshow-menu-handle {
    float: left;
    width: 15px;
    height: 15px;
    background: url(img/slideshow-menu-handle.png) no-repeat;
    cursor: pointer;
    margin-right: 10px;
}
#slideshowMenu div.slideshow-menu-handle:hover {
    background-position: -15px 0px;
}
#slideshowMenu div.slideshow-menu-handle.current,
#slideshowMenu div.slideshow-menu-handle.current:hover {
    background-position: -30px 0px;
    cursor: default;
}



/*******************************************************************************
 * CONTENT BLOCKS
 *******************************************************************************/

/* content container */
#content {
    margin-top: 35px;
}

/* the actual content area */
#contentsection {
	position:relative;
	background-color: #ffffff;
	border-spacing: 0px;
	width: 800px;
    margin: 0px auto;
}
#contentsection td.content-right,
#contentsection td.menu-left {
	padding: 0px;
	vertical-align: top;
}
#contentsection td.menu-left {
	width: 200px;
}

/* the 3-(/4)-column views within the content area */
#columnsection {
    width: 800px;
    margin: 0px auto;
    margin-top: 0px;
    padding-left: 30px;
}
#columnsection table {
    border-spacing: 0px;
}
#columnsection table td {
    width: 245px;
    vertical-align: top;
    text-decoration: none;
    font-weight: normal;
}
#columnsection table td.first {
    padding-right: 28px;
}
#columnsection table td.last {
    padding-left: 28px;
}
#columnsection table td div.title {
    background: url(img/submenu-marker.png) no-repeat 0px 5px;
    color: #2c5c7b;
	padding-left: 15px;
    margin-bottom: 10px;
}
#columnsection table td div.title a {
	text-decoration: none;
	font-family: "Cabin",Arial,Sans-Serif;
    font-size: 20px;
}
#columnsection table td div.title a:hover {
    text-decoration: underline;
}
#columnsection table.start-links {
	width: 800px;
}



/*******************************************************************************
* SIDEBAR / SUBMENU
*******************************************************************************/

/* left/right column in content area */
#sidebarcolumn {
    width:165px;
	position: relative;
	top:0px;
	left: 0px;
    margin-right:17px;
}
#contentcolumn {
    width: 570px;
	min-height: 400px;
	padding-left: 30px;
	padding-bottom: 5px;
	padding-top: 0;
}

/* sidebarmenu (submenu level 1+) */
#sidebarmenu {
	padding-top: 5px;
}

#sidebarmenu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
#sidebarmenu li a {
    display: inline-block;
    margin-bottom: 8px;
    /*color: #666666;*/
    text-decoration: none;
	white-space: nowrap;
}
#sidebarmenu li a:hover {
    text-decoration: underline;
}
#sidebarmenu li a.active {
    font-weight:bold;
    color: #000000;
}
#sidebarmenu ul.level1 li a {
    padding-left: 15px;
}
#sidebarmenu ul.level1 li a.actual{
    background: url(img/submenu-marker.png) no-repeat 0px 3px;
}

/* sidebarmenu level2+ */
#sidebarmenu ul.level2 li a {
    margin-left: 15px;
    padding-left: 15px;
}
#sidebarmenu ul.level2 li a.actual{
    background: url(img/submenu-marker.png) no-repeat 0px 2px;
}



/*******************************************************************************
* CONTENT STYLING
*******************************************************************************/

/* headlines in content */
#contentsection h1 {
    font-size: 22px;
    margin: 0px 0px 15px 0px;
    font-weight: bolder;
}
#contentsection h2,
#contentsection h3 {
	margin: 0px;
    padding: 5px 0px 8px 0px;
    font-weight: bold;
    font-size: 18px;
}
#contentsection h2 {
    margin-top: 8px;
    padding-top: 5px;
}

/* paragraphs in content */
#contentsection p {
    margin: 0px;
	padding: 0px;
	padding-bottom: 8px;
}

/* hints in content */
#contentsection p.hint {
    padding: 5px;
    background-image: url(img/icon-hint.png);
    background-repeat: no-repeat;
    background-position: 12px 55%;
	background-color: #FFFDCC;
    color: #333333;
    padding-left: 60px;
    min-height: 40px;
	margin-bottom: 8px;
}

/* lists in content */
#contentcolumn ul {
    list-style-image: url(img/list-symbol.png);
	padding-bottom: 15px;
}
#sidebarmenu ul {
    list-style: none;
}
ul.list,
ol.list {
    padding-left: 19px;
}

/* rows with informational text (below headlines) */
div.info {
	margin-bottom: 20px;
}

/* icons in feature overview */
/*
div.feature {
    background: no-repeat left 10px;
    padding-left: 120px;
}
div.feature.agent-interface {
    background-image: url(img/symbol-agent-interface.png);
}
div.feature.crm-interface {
    background-image: url(img/symbol-crm-interface.png);
}
div.feature.dynamic-buttons {
    background-image: url(img/symbol-dynamic-buttons.png);
}
div.feature.dynamic-designs {
    background-image: url(img/symbol-dynamic-designs.png);
}
div.feature.forms {
    background-image: url(img/symbol-forms.png);
}
div.feature.multi-language {
    background-image: url(img/symbol-multi-language.png);
}
div.feature.protocols {
    background-image: url(img/symbol-protocols.png);
}
div.feature.quick-install {
    background-image: url(img/symbol-quick-install.png);
}
div.feature.secure-connection {
    background-image: url(img/symbol-secure-connection.png);
}
div.feature.textblocks {
    background-image: url(img/symbol-textblocks.png);
}
div.feature.wiredminds {
    background-image: url(img/symbol-wiredminds.png);
}
*/



/*******************************************************************************
* BUTTONS
*******************************************************************************/

/* buttons */
.button,
.button:active,
.button:visited {
	display: inline-block;
    height: 19px;
    line-height: 18px;
    margin: 0px 0px 0px 0px;
    font-size: 15px;
    font-weight: bold;
    padding: 4px 8px 4px 8px;
    white-space: nowrap;
    text-decoration: none;
    color: #ffffff;
    background: #009EC3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
    cursor: pointer;
	user-select: none;
}
.button:hover,
.button:hover,
.button:hover {
	text-decoration: none;
    cursor: pointer;
	background: #00677F;
}

/* our custom instantchat button(s) */
#ic-button {
    position:absolute;
    right: 20px;
    top: 10px;
    width: 150px;
    height: 40px;
    cursor: pointer;
    background: url("img/ic-custom-start-chat.png");
    z-index: 2;
}
#ic-button:hover {
    background-position: -150px;
}



/*******************************************************************************
 * FORMS
 *******************************************************************************/

/* form table */
.formTable {
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}
.formTable td, .formTable th {
    padding: 6px 0px;
    text-align: left;
    vertical-align: top;
    border-bottom: solid 1px #ddd;

}
.formTable td.td-0, th.th-0 {
	width: 90%; /* force the first column to use available space (ugly hack!) */
}
.formTable input,
.formTable select,
.formTable textarea {
    border: solid 1px #999999;
    font-size: 16px;
    padding: 4px;
    color: #000000; /* FIXME: white on black is sooo nineties :-P */
}

.formTable .default-text {
	color: #ff0000;
}

span.default-text {
	color: #ff0000;
}

.formTable input.focused,
.formTable select.focused,
.formTable textarea.focused,
.formTable span.checkbox.focused {
    border: solid 1px #009EC3;
    outline: none;
}
.formTable tr.last td  {
    border-bottom: 0;
}
.formTable tr.tr-n-1 td  {
    border-bottom: 0;
}
.formTable td.first,
.formTable th.first {
	padding-left: 0;
}
.formTable td.last,
.formTable th.last {
	padding-right: 0;
}
.formTable td.label {
    text-align: left;
}
.formTable td.value {
}
.formTable td.value table td {  /* Fix for tables in value */
    padding-top: 0px;
    padding-bottom: 0px;
}
.formTable th {
    color: #009EC3;
    font-weight:bold;
}
.formTable td input[type="checkbox"] {
    width: 16px;
    border:none;
}
.formTable td.desc {
	width: 30%;
    color: #666666;
    padding-left: 15px;
}

/* td for right-aligned buttons */
.formTable td.right {
	text-align: right;
}
.formTable td.right .button {
	margin-left: 10px;
}

/* set input widths in forms */
table.formTable {
	width: 570px;
}

/* in popups we have 550px as width */
body.popup table.formTable {
	width: 550px;
}
table.formTable input {
	width: 380px;
}
table.formTable div.select {
	width: 380px;
}
table.formTable select {
	width: 386px;
}

/* checkbox container */
table.formTable table.checkbox-container {
    border-spacing: 0px;
}
table.formTable table.checkbox-container td {
    padding: 0px;
    vertical-align: top;
}
table.formTable table.checkbox-container td.td-0 {
    width: 25px;
	padding-top: 2px;
}

/* fuer bemerkungen unterhalb formTable */
span.pflicht {
	font-size: 12px;
	line-height: 14px;
	display: inline-block;
	/* this is for texts which start with "*" in button editor
       this does not work in IE6+7 */
	text-indent: -10px;
	padding-left: 10px;
}

/* fuer keine berater angelegt */
span.no-entries {
	display:block;
	padding: 15px 0px 5px 0px;
    font-style: italic;
}

/* misc */
.feedback.error {
	color: #DF4337;
	font-weight: bold;
	background-color: inherit;
	padding: inherit;
	text-align: inherit;
	margin-bottom: 20px;
}



/*******************************************************************************
* FIXES FOR INDIVIDUAL FORMS
*******************************************************************************/

/* login form */
#loginOverlayDiv table.formTable input {
    width: 250px;
}

/* language editor */
body.mask-self-edit-ChatCompanyEditLanguage table.formTable textarea {
	width: 350px;
}

/* language editor */
body.mask-self-edit-ChatCompanyEditLanguageNew table.formTable {
	width: 350px;
	margin-bottom: 50px; /* we need this, so the pulldown has space to open itself */
}
body.mask-self-edit-ChatCompanyEditLanguageNew table.formTable div.select {
	width: 250px;
}


/* register form / account editor */
/*body.mask-self-edit-ChatCompanyNew #contentcolumn {
    width: 570px;
}*/
body.mask-self-edit-ChatCompanyNew #contentcolumn {
    padding-left: 14px;
}

/* generische class, um texte ein- / auszublenden */
div.ic-chat-available {
	display:none;
}

body.instantchat-status-start-chat div.ic-chat-available,
body.instantchat-status-loading div.ic-chat-available,
body.instantchat-status-chat-is-open div.ic-chat-available {
	display:block;
}

body.mask-self-edit-ChatCompanyEditAccount table.formTable {
	margin-bottom: 20px;
}
body.mask-self-edit-ChatCompanyNew table.formTable input.street,
body.mask-self-edit-ChatCompanyEditAccount table.formTable input.street {
	width: 309px;
}
body.mask-self-edit-ChatCompanyNew table.formTable input.street_no,
body.mask-self-edit-ChatCompanyEditAccount table.formTable input.street_no {
	width: 50px;
}
body.mask-self-edit-ChatCompanyNew table.formTable input.zipcode,
body.mask-self-edit-ChatCompanyEditAccount table.formTable input.zipcode {
	width: 65px;
}
body.mask-self-edit-ChatCompanyNew table.formTable input.city,
body.mask-self-edit-ChatCompanyEditAccount table.formTable input.city {
	width: 293px;
}

/* general settings editor */
body.mask-self-edit-ChatCompanyEditSettingsGeneral table.formTable input,
body.mask-self-edit-ChatCompanyEditSettingsGeneral table.formTable select {
    width: 380px;
}
body.mask-self-edit-ChatCompanyEditSettingsGeneral table.formTable div.select {
    width: 360px;
    padding-right: 20px;    /* FIXME: ugly fix for too long texts in custom pulldown. But unless we have a span in there this is all I can do */
}

/* design editor */
body.mask-self-edit-ChatCompanyEditSettingsDesign table.formTable div.select,
body.mask-self-edit-ChatCompanyEditSettingsDesign table.formTable select,
body.mask-self-edit-ChatCompanyEditSettingsDesign table.formTable textarea {
    width: 360px;
}
body.mask-self-edit-ChatCompanyEditSettingsDesign table.formTable textarea {
    height: 44px;
}
body.mask-self-edit-ChatCompanyEditSettingsDesign div.chat-preview {
    position: relative;
    width: 570px;
    height: 390px;
}
body.mask-self-edit-ChatCompanyEditSettingsDesign div.chat-preview div.user-logo {
    position: absolute;
    z-index: 5;
    top: 6px;
    left: 9px;
}
body.mask-self-edit-ChatCompanyEditSettingsDesign div.chat-preview div.user-logo span {
    line-height: 26px;
    color: #ffffff;
    background: #ff0000;
    padding: 2px 4px;
	font-weight: bold;
    font-size: 16px;
}
body.mask-self-edit-ChatCompanyEditSettingsDesign div.chat-preview img.preview_url {
	width: 104px;
	height: 26px;
}

/* pw recovery popup */
body.mask-self-index-ChatCompanyRecoverPassword table.formTable,
body.mask-self-index-ChatCompanyRecoverPasswordSuccess table.formTable,
body.mask-self-index-GeneralKontaktSuccess table.formTable {
	width: 450px;
}
body.mask-self-index-ChatCompanyRecoverPassword table.formTable input {
	width: 280px;
}

/* buttons editor */
body.mask-self-edit-ChatCompanyEditSettingsButtons table.formTable div.select,
body.mask-self-edit-ChatCompanyEditSettingsButtons table.formTable select {
    width: 300px;
}
body.mask-self-edit-ChatCompanyEditSettingsButtons table.formTable td.variant div.select-popup div.option span {
    padding: 2px 0px;
    color: #000000;
    font-size: 14px;
}
body.mask-self-edit-ChatCompanyEditSettingsButtons table.formTable td.variant div.select-popup div.option.hover span {
    color: #000000;
}

/* other settings */
body.mask-self-edit-ChatCompanyEditSettingsOther table.formTable input {
    width: 300px;
}

/* contact form */
body.mask-self-edit-GeneralKontakt table.formTable input,
body.mask-self-edit-GeneralKontakt table.formTable textarea {
    width: 350px;
}

/* agent editors */
body.mask-self-edit-ChatCompanyEditAgent table.formTable,
body.mask-self-edit-ChatCompanyEditSuperuser table.formTable {
    width: 550px;
}



/*******************************************************************************
* POPUP HINT
*******************************************************************************/

/* popup hint bubble */
#hint-popup {
    position: absolute;
    width: 390px;
}
#hint-popup.down .hint-top {
    width: 390px;
    height: 34px;
    background: url(img/hint-bubble-down-top.png) no-repeat;
}
#hint-popup.up .hint-top {
    width: 390px;
    height: 12px;
    background: url(img/hint-bubble-up-top.png) no-repeat;
}
#hint-popup .hint-content {
    width: 365px;
    background: url(img/hint-bubble-bg.png) repeat-y;
    padding: 0px 15px 0px 10px;
    font-size: 14px;
    color: #ffffff;
}
#hint-popup.down .hint-bottom {
    width: 390px;
    height: 14px;
    background: url(img/hint-bubble-down-bottom.png);
}
#hint-popup.up .hint-bottom {
    width: 390px;
    height: 38px;
    background: url(img/hint-bubble-up-bottom.png);
}



/*******************************************************************************
* EDITORS
*******************************************************************************/

/* editor table (agent/language/domain editors) */
table.editorTable {
    width: 570px;
    border-spacing: 0px;
    border-collapse: collapse; /* IE wants this */
	border: 0px;
}
table.editorTable td,
table.editorTable th {
    padding: 10px 6px 10px 0px;
    vertical-align: top;
    text-align: left;
    border-bottom: solid 1px #ddd;
}
table.editorTable th {
    /* color: #999999; */
    font-weight:bold;
    white-space: nowrap;
}
table.editorTable td.last {
    text-align: right;
    padding-right: 0px;
}
table.editorTable tr.last td  {
    border-bottom: 0;
}

/* fixes for agent / superuser editors */
body.mask-self-edit-ChatCompanyListAgents table.editorTable {
    table-layout: fixed;
	padding-bottom: 20px;
}
body.mask-self-edit-ChatCompanyListAgents table.editorTable td.image,
body.mask-self-edit-ChatCompanyListAgents table.editorTable th.image {
    width: 60px;
}
body.mask-self-edit-ChatCompanyListAgents table.editorTable td.status,
body.mask-self-edit-ChatCompanyListAgents table.editorTable th.status {
    width: 110px;
}
body.mask-self-edit-ChatCompanyListAgents table.editorTable td.login,
body.mask-self-edit-ChatCompanyListAgents table.editorTable th.login {
    width: 250px;
    word-wrap: break-word;
}
body.mask-self-edit-ChatCompanyListAgents table.editorTable td.edit {
    width: 100px;
}

/* buttons div */
div.editor-buttons {
    margin-top: 20px;
}

/* rights icons (form/textblock/locked) */
div.ico-textblock,
div.ico-form,
div.ico-locked {
    /*width: 16px;
    height: 20px;*/
    background: url(img/ico-textblock.png) no-repeat 0px 2px;
    margin-right: 5px;
    padding-left: 20px;
    font-size: 14px;
}
div.ico-form {
    background-image: url(img/ico-form.png);
}
div.ico-locked {
    background-image: url(img/ico-locked.png);
}



/*******************************************************************************
* FOOTER
*******************************************************************************/

#footer {
    width: 800px;
    margin: 0px auto;
    padding-top: 50px;
    padding-bottom: 20px;
	font-size: 14px;
}

/* footer menu */
#footer ul.menu {
    padding-left: 15px;
}
#footer ul.menu li {
    margin-right: 5px;
}
#footer ul.menu li a {
    text-decoration:none;
    border-right: solid 1px #999999;
    padding-right: 10px;
}
#footer ul.menu li a:hover {
    text-decoration:underline;
}
#footer ul.menu li a.last {
    border-right: none;
}



/*******************************************************************************
* PRICELIST
*******************************************************************************/

/* prices table */
table#pricelist {
    width: 570px;
    border: none;
    border-spacing: 0px;
    border-collapse: collapse;
	margin-bottom: 10px;
}
table#pricelist td {
	border: 0;
    height: 25px;
    text-align: left;
    font-size: 16px;
    padding: 5px;
    font-style: italic;
    border-right: solid 1px #eeeeee;
}
table#pricelist tr.tr-0 td {
    width: 150px;
    font-weight: bold;
    background: #eeeeee;
    font-style: normal;
}
table#pricelist td.td-0 {
    background: #eeeeee;
    font-style: normal;
}
table#pricelist tr {
    border-bottom: solid 1px #eeeeee;
}

/* footnotes */
ol.pricenotes {
    margin-top: 20px;
}
ol.pricenotes li {
    font-size: 12px;
}



/*******************************************************************************
* SCREENSHOTS
*******************************************************************************/

/* screenshot thumbnails */
#screenshots div.screenshot a.image {
    float:left;
    width:320px;
    height:250px;
    margin: 0px 25px 25px 0px;
    border: solid 1px #cccccc;
    cursor: pointer;
}
#screenshots div.screenshot br {
    clear:both;
}

/* fullscreen background */
div.fullscreen-image-overlay {
    background-color: #2C5C7B;
}
img.fullscreen-image {
    border: solid 10px #e0e0e0;
}



/*******************************************************************************
* EXAMPLES
*******************************************************************************/

/* background of usage examples preview */
div#examplebg {
    position: relative;
    width: 730px;
    height: 430px;
    background:url(img2/example-bg.png) no-repeat;
}

/* code view in examples */
div#codebg {
    height: 410px;
    overflow:auto;
    font-family: monospace;
    border: dashed 1px #CCCCCC;
    background: #ffffff;
    color: #333333;
    padding: 5px;
    white-space:nowrap;
}
div#codebg span.code {
    display:block;
    border:none;
    background: none;
    margin-left: 15px;
    color: #333333;
}

/* "Start chat" button for example preview */
div#examplebg #myChatButton {
    position: absolute;
    right: 60px;
    bottom: 100px;
    /* this should also go into code view in example */
    display: block;
    width: 120px;
    height: 20px;
    line-height: 20px;
    background: #ff0000;
    color: #ffffff;
    text-align:center;
    cursor:pointer;
}



/*******************************************************************************
* OVERLAYS
*******************************************************************************/

/* OverlayDialog overrides */
.overlayDialog .title {
	position: absolute;
}

.overlayDialog .title .buttons {
	position: absolute;
	right: 0px;
	top: 0px;
}
.overlayDialog .title .buttons button.close:hover {
    text-decoration: none;
    cursor: pointer;
    background: #40b6d2;
}
.overlayDialog .title .buttons button.close {
    width: 24px;
    height:24px;
    line-height:24px;
    padding: 0px 0px 0px 0px;
    font-weight: bold;
	color: #ffffff;
    background: #009ec3;
    font-size: 15px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.overlayDialog .body {
    background: #ffffff;
    border: 10px solid #e0e0e0;
}
.overlayDialog .overlay {
    background: #2c5c7b;
}

/* scrollbars in overlay */
#dialogContentText {
	overflow: hidden;
}
#dialogContentButtons {
    display:none;
}
#iframelayer #dialogContentText {
	overflow-y: auto;
	overflow-x: hidden;
}

/* titlebar in editor popup */
#popuptitle {
    margin-bottom: 15px;
}
#popuptitle h2 {
    text-transform: uppercase;
    margin-top: 0px;
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
}

/* language/agent popup*/
#layeriframe {
    border:none;
	overflow: auto;
}

/* popup overlay loading icon */
#iframelayer {
    background-image: url(img/processing-icon.gif);
    background-position: center center;
    background-repeat: no-repeat;

}

/* hide scrollbars in all popup iframes (enable only in language editor) */
body.popup {
    background: #ffffff;
}

/* login form fix */
body.mask-self-edit-ChatCompanyNew td.menu-left {
    display: none;
}



/*******************************************************************************
* MISC
*******************************************************************************/

/* "changed" color for marking changed values */
input.changed,
select.changed,
textarea.changed {
    background: #ffffff; /* change marking disabled */
}

/* error/status feedback */
div.error,
div.feedback {
    color: #00aa66;
    font-weight: bold;
}
div.error {
    color: #ff0000;
}
div.edit-output-status,
.feedback.status {
    margin-bottom: 20px;
    background-color: #eeeeee;
    color: #333333;
}
#contentcolumn div.edit-output-error ul {
    list-style-image: none;
    list-style-type: disc;
    padding-left: 20px;
}

/* hide success messages in overlay popup editors */
body.popup div.edit-output-status {
    display: none;
}

/* clearance div */
div.clearance {
    clear: both;
    height: 0px;
}

/* force "normal" checkboxes to be 16px wide (fixes rendering bugs) */
.formTable input.checkbox {
    display: inline;
    width: 16px;
}


/*******************************************************************************
* API DOCUMENTATION (included)
*******************************************************************************/

/* code snippets */
div.code {
    overflow: auto;
	width: 450px;
    border: 1px dashed #CCCCCC;
    background-color: #ffffff;
    margin: 0;
    padding: 5px;
}
body.width-800 div.code {
	width: 560px;
}
div.code table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}
div.code table td {
    white-space:pre;
    margin: 0;
    padding: 0px 0px 0px 0px;
    vertical-align: top;
}
div.code table td div,
div.code table td span {
    font-family: monospace;
}
div.code td span.line {
    display:block;
}
div.code td span.line,
div.code td div.line {
    height: 18px;
    line-height: 18px;
    font-size: 16px;
}

/* syntax highlighting in code snippets */
span.s {
    font-family: monospace;
    border-bottom: 1px dotted #1C1D1F;
}
span.i {
    background-color: #CAFFAF;
}
span.d {
    background-color: #AFFFEE;
}
span.t {
	display: block;
	color: #aaaaaa;
}

span.w {
	font-weight: bold;
}
span.b {
    font-weight: bold;
}
span.var {
    font-weight: bold;
}
span.comment {
    color: #ff0000;
}
span.normal {
    color: #000;
}
span.html_tag {
    color: #666;
    font-weight: bold;
}
span.html_attribute {
    color: red;
}
span.quoted {
    color: #FF7200;
}
span.tag {
    color: #800080;
    font-weight: bold;
}
span.attr {
    color: #000000;
    font-weight: bold;
}
span.attr_value {
    color: #0000ee;
}
span.comment {
    color: #008000;
    font-style: italic;
}

/* parameter description tables */
#contentsection table.p {
    width: 570px;
    border: 1px solid #cccccc;
    border-collapse: collapse;
    border-spacing: 0;
    clear: right;
    margin: 12px 0 0 1px;
    line-height: 125%;
}
#contentsection table.p th {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    font-weight: bold;
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
    color: #000000;
}
table.p th em {
	font-weight: bold;
}


#contentsection table.p td {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
	font-size: 15px;
}

/* general
 * FIXME: general stuff does NOT belong here! */
ul, ol {
    padding: 0;
    padding-left: 19px;
    margin: 0;
}
ul {
    list-style-type: square;
}
ul br, ol br {
    display: none;
}
em {
    font-style: normal;
}



/*******************************************************************************
* CUSTOM PULLDOWNS
*******************************************************************************/

/* input */
div.select {
	display: inline-block;
	padding: 4px;
    /*padding-right: 20px; */ /* FIXME: this breaks the width calculation :-/ ... */
	line-height: 20px;
    background: url(img/pulldown-arrow.png) no-repeat right 5px;
	-webkit-user-select:none;
	-moz-user-select:none;
	outline:none;
    font-size: 16px;
    font-weight: normal;
    border: 1px solid #999999;
	color: #000000;
	text-align: left;
    cursor: default;
}
div.select.error {
	background-color: #FCD6D6;
}
div.select.focused {
    border: 1px solid #009ec3;
}
div.select-opening {
    background-image: url(img/pulldown-arrow-hover.png);
}

/* popup */
div.select-popup {
	position: absolute;
	border: 1px solid #999999;
	background-color: #ffffff;
    -moz-box-shadow: 2px 2px 10px #555555;
    -webkit-box-shadow: 2px 2px 10px #555555;
	-webkit-user-select:none;
	-moz-user-select:none;
    font-family: sans-serif;
    font-size: 16px;
	text-align: left;
	z-index: 999;
}
div.select-popup div.option {
    color: #000000;
    padding: 3px 6px;
    cursor: default;
    border-bottom: solid 1px #dddddd;
}
div.select-popup div.disabled {
	color: #a0a0a0;
}
div.select-popup div.hover {
	background-color: #eeeeee;  /* requires a color that is not among the button colors! */
    color: #000000;
}



/*******************************************************************************
* BUTTON EDITOR
*******************************************************************************/

/* button preview */
div.button-preview {
    margin-top: 20px;
}

/* language selection */
div.button-preview div.preview-language-selection {
    margin-top: 10px;
}

/* previews */
table#button-previews {
    width: 570px;
    margin-top: 20px;
    margin-bottom: 30px;
}
table#button-previews th {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    padding: 5px;
    background: #e0e0e0;
}
table#button-previews td {
    padding-top: 5px;
    text-align: center;
}

#agb {
	padding: 10px 30px 10px 10px;
	margin-top: 30px;
}

#agb-printbar {
	margin-top: 20px;
}

#agb-printbar a.button {
	margin-right: 10px;
}

#agb h1,
#agb h2 {
	text-align: center;
	margin-bottom: 5px;
}

#agb h2 {
	margin-top: 20px;
}

#agb ol {
	text-align: justify;
}
#agb ol li {
	margin-bottom: 10px;
}