/*
    ostendis.ch/opw applicationmanager site effect styles
    copyright (c) 2009 ostendis.ch design team
*/




/*
    GENERIC EFFECTS
    dom manipulations for javascript
*/
.elHide { display: none; visibility: hidden; }
.elShow { display: block; visibility: visible; }


/*
    TABLE EFFECTS
    class to change background of tables (tds & trs) by an onmouse-over event
*/
.table_trMChecked { background-color: #FFFFCC; }

/*
    ACCORDION
    style definition for the accordions
*/

#accContainer { width: 730px; background-color: white; }
#accContainer li { font-size: 11px; }
.accContent { display: block; overflow: hidden; visibility: hidden; height: 0px; }
.accContent p { padding: 3px 8px 8px 22px; font-size: 10px; }
.accContent ul { padding-top: 8px; padding-left: 8px; }
.accContent td.left { width: 200px; }
.accContent td { height: 19px; }
.accContent table { font-size: 10px; color: #555; width: 365px; margin: 3px 8px 8px 22px; }
a.menuTitle:hover { text-decoration: none; }
a.menuTitleAdd { background-color: #fff; color: #777; border-bottom-color: #fff; }


.accContentFAQ { display: block; overflow: hidden; visibility: hidden; height: 0px; }
.accContentFAQ p { padding: 0px 10px 10px 35px; }
.accContentFAQ ul { padding-top: 8px; padding-left: 8px; }
.accContentFAQ td.left { width: 200px; }
.accContentFAQ td { height: 19px; }
.accContentFAQ table { font-size: 10px; color: #555; width: 365px; margin: 3px 8px 8px 22px; }
a.menuTitleFAQ { font: bold 12px Arial; }




/*
    TOOLTIP
    style definition for the tooltip js function
*/

.tool-tip { width: 200px; color: #eee; text-align: center; overflow: hidden; }
.tool-tip .tool-title, .tool-text {
    font-size: 11px;
    padding: 10px 10px 0;
    margin: 0;
    background: #222;
  	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
    opacity: 0.7;
}

/*
    COLORWHEEL / CWHEEL
    styles for the colorwheel (as cWheel)
*/

#cWheel .north { background: #111; border-bottom: 1px solid #171717; }
#cWheel .north div { color: #999; float: right; padding: 5px 7px; CURSOR: pointer; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#cWheel .north div:hover { COLOR: #DE83AD; }
#cWheel .south { margin: 32px 0 0 10px; cursor: crosshair; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#cWheel .south img { height: 100%; WIDTH: 100%; position: relative; TOP: -8px; LEFT: -1px; }
#cWheel #mHEX { padding: 5px 0 4px 7px; cursor: text; float: left; }
#cWheel #mHEX:hover { color: #DE83AD }
#cWheel #mSize { float: right; top: -14px; left: 7px; height: 14px; width: 14px; cursor: se-resize }
#cWheel {
	position: relative;
	font: 11px Arial;
	color: #999;
	width: 148px;
	height: 155px;
	background: #000;
	padding-bottom: 8px;
	z-index: 100;
}

.cWheelOverlay {
    position: absolute;
    width: 148px;
    height: 163px;
    margin-top: 5px;
    border: 3px solid #fff;
}



/*
    OSTENDIS LIGHTBOX
    styles for the colorwheel (as cWheel)
*/

.cbBox .cbButtons { z-index: 150; }
.cbOverlayA { background-color: #000; z-index: 54; }
#popinmsg {
    position: fixed;
    font: bold 13px Arial;
    color: #FFF;
	width: 280px;
	top: 50%;
	left: 300px;
    text-align: left;
    z-index: 30;
}

div.popinbg {
  	z-index: 40;
  	padding: 10px;
	filter:alpha(opacity=70);
	-moz-opacity: .70;
  	opacity: .70;
}

.cbContainer {
  position:absolute;
  overflow:hidden;
  padding: 12px;
  background-color: #000;
  background: url(../elements/images/img_gallery.jpg) repeat-x;
  font: 11px Arial;
  color: #555;
  z-index: 100;
  margin-top: 45px;
}

.cbContainerScreenshot {
  overflow:hidden;
  padding: 12px;
  font: 11px Arial;
  color: #555;
  z-index: 100;
  background-color: #FFFFFF;
  border: 1px solid #BBBBBB;
}

#popdialogWarningIco, #popdialogSystemIco { position: relative; float: left; margin: 0px; margin-right: 15px; margin-top: 4px;  }
#popdialogSystemIco { margin-top: 2px; }
#mpContentText{ position: relative; float: left; width: 250px; margin: 0 5px; line-height: 17px; margin-bottom: 15px; }
#mpContentText.noMargin { margin: 0; margin-left: 5px; }

/*
	AJAX POPDIALOG BOX 
	button styles for the popdialog-box
*/

.popDialog { position: relative; height: 20px; float: left; cursor: pointer; margin-right: 5px; padding-bottom: 1px; }

.pdWarning { font-weight: bold; color: #C60000; }


/*
    DATEPICKER
    all styles fot the datepicker / calendar function

*/

a.closeLink { display: block; float: right; margin: 2px 8px; }
a.closeLink:hover { text-decoration: underline; }
#datepicker a.topLinks { font: bold 8px Verdana; color: #AAAAAA; }
#datepicker a, #datepicker a:visited { text-decoration: none; color: #FF8400; }
.dpTable { font: 10px Arial; margin: 3px 5px; }
.dpTitleTD { font: bold 11px Arial; height: 20px; text-align: center; }
.dpButtonTD { text-align: center; }
.dpDayHighlightTD, .dpTDHover { cursor: pointer; background: #EDF0F3; color: #FF8400; }
.dpDayTD { text-align: center; height: 18px; width: 20px; }
.dpTD, .dpDayHighlightTD, .dpTDHover { text-align: center; width: 30px; height: 20px; }
.dpDayHighlightTD, .dpTDHover, { cursor: pointer; background: #EDF0F3; color: #FF8400; }
.calTitle { font: bold 11px Arial; color: #fff; padding: 5px 8px; background: #BAC6D1; }
#datepicker {
	width: 200px;
    font: 10px Arial;
    border: 1px solid #9EADBC;
    background: #fff;
}



/*
	
	CORNERBOXES

*/

.simpleBox { position: relative; margin: 12px 0; border-bottom: 1px solid #FFFFFF; }
.simpleBox h3 { font-size: 11px; padding: 3px 3px 3px 23px; margin-left: 8px; }
.sbSmall { background: url(../elements/images/img_medium_box_background.jpg) #E6EAEE repeat-x; width: 242px; }
.sbMedium { background: url(../elements/images/img_medium_box_background.jpg) #D6DCE2 repeat-x; width: 500px; }
.sbMax{ background: #D6DCE2; width: 100px; }
.sbInactive { background: #E6EAEE; }
.sbTextInactive { color: #999; }

#templateboardRight .sbSmall { width: 337px; }
#appboardRight .sbSmall { width: 337px; }
#appboardLeft .sbMedium { width: 405px; }

#appboardRight .left { width: 130px; }

.simpleBoxInner { position: relative; margin: 2px; background: #fff; padding: 8px; }

.sbTable th { color: #444; }
.sbTable td { height: 18px; line-height: 18px; vertical-align: top; padding: 3px 0;  }
.sbTable td strong { color: #444; }
.sbTable td.left { width: 150px; }
.sbTableBorder { border-bottom: 1px solid #d8d8d8;; }




#appTableTitle { position: relative; height: 30px; }
#appTableTitle span { display: block; height: 30px; float: left; margin-left: 8px; line-height: 30px; font-weight: bold; color: #000000; }
#appTableEntrys { position: relative; border-top: 1px solid #d8d8d8; width: 496px; cursor: pointer; }
#appTableEntrys span { display: block; height: 15px;  margin-left: 8px; line-height: 15px; float: left; }

.sbSpaceCleaner { margin-top: 0; }

.labelLight{ color: #858585; }


/*

	LAP GALLERY

*/


.galleryTitle { display: block; margin-top: 10px; }
.gallerySubtitle { position: relative; display: block; width: 100px; height: 20px; font: bold 12px Arial; margin-top: 15px; }
.gallerySeperator { position: relative; margin: 0; height: 1px; line-height: 1px; min-height: 0px; font-size: 1px; padding: 0; background: url(<!--#echo var="HEAVYWEIGHT_IMAGE_STORAGE" -->images/img_lapgallery_dotted.gif); width: 99%; }
.galleryImg { margin: 5px }

/*
    NIFTY CORNERS
    all styles to make rounded corners in divs

    Nifty Corners Cube CSS by Alessandro Fulciniti
    The following classes are added dinamically by javascript,
    and their use should be avoided in the markup
*/

b.niftycorners,b.niftyfill{ display: block }
b.niftycorners * {
    display:block;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    overflow:hidden;
    border-style: solid;
    border-width: 0 1px
}

/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}

/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}