/*****************************************************************
MP030608: Ylläpidon tyylit. Käytössä admin-popupeissa.
Poppareissa tarvitaan myäs emoikkunan tyyli (styles_embed).
Ainakin yläpalkin tyyliluokat ovat yhteisiä.
MP101008: styles_updateform -> uuden input-titlen tyylit.
Niitä tarvitaan toisinaan myös emoikkunassa (inserter-lomakkeet),
mutta tätä koko styles_adminia ei voi liittää sinne. Tein siis
oman tyylitiedoston, joka importataan myös styles_embed-tiedostossa.
******************************************************************/

@import url(/common_ui/embed_ui/styles_embed.css);
@import url(/common_ui/embed_ui/styles_updateform.css);


html {
 height:100%;
}

body { 
 margin:0; 
 padding:0;
 color:black;
 background-color:white;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 80%;
}


/* MP061108: Box-luokkia käytetään emossa ja adminissa. Emossa on määritelty fontti ja koko,
ettei projektin tyyli vaikuttaisi siihen. Tällä puolella täytyy palauttaa koot ja
linkkivärit admin-mallin mukaisiksi. */

.box-tr, .box-info, .box-att {
 font-size:100%;
}

a,a:visited {  
  color:#0257a4; 
  text-decoration:none;
}

.box-tr a, .box-info a, .box-att a,
.box-tr a:visited, .box-info a:visited, .box-att a:visited {  
  color:#0257a4 !important; 
  text-decoration:none !important;
  font-size:100% !important;
}

a:hover {  
  text-decoration:underline;
}

/*cui/info_pages/access_denied*/

body.infopage {
 margin:20px;
}

input, textarea, select, option {
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 9pt;
}

textarea {
 overflow:auto;
}

h1 { 
 font-size: 110%; 
}

h2 { 
 font-size: 105%;
}

h3 { 
 font-size: 100%;
}

.box-info > h2 {
 margin-top:0;
}



/* MP271008: Admin-popupin kehyslaatikko -> admin/head */

td#box-admin-wrapper-container {
 padding:20px 36px;
}

.box-admin-wrapper {
 padding:15px;
 border:1px solid #808080;
 background-color:#f9f9f9;
}

/* MP271008: Jatke kehyslaatikolle, jos laatikko katkaistaan ja jatkeraan uudelleen.
Kts. eui/inc_admin/macros -> admin_wrapper_joint */

.box-admin-wrapper.extension {
 margin-top:20px;
}

.box-admin-wrapper > h1,h2 {
 margin-top:0;
} 



img {
 border:0;
}

img.block {
 display:block;
}


hr {
 height:1px;
 color: #808080;
 background: #808080;
 border: 0px;
 margin-top:1em;
 margin-bottom:1em;
}


.virhe,.error {
 color: #EC3520;
}


small { 
  font-size:85%; 
}


a.otsikko-linkki,
a:visited.otsikko-linkki {
 color:white;
}

td.te-data-wrapper a, td.te-data-wrapper-selected a,
div.adminnavLinkCont a {
 color:black;
}

/* MP071108: fieldset-luokka esim. input-ryhmien muodostamiseen tallennuslomakkeella. 
Padding ja margin kompensoivat input-wrapperien marginaalia (styles_updateform.css > input-wrap.
Jos tarvitaan analogiaa box-luokan kanssa, niin lisää .fs-att ja fs-info */

fieldset {
 border:1px solid #808080;
 color:black;
 margin-top:1.2em;
 padding:1.2em;
 padding-top:0;
}

fieldset legend {
 color:black;
 font-size:85%; 
}


/* MP161008: Updateformin kenttäkohtainen ohjenappi + div.
Käytössä updateform_macros.inc ja wizard|wizard_te.inc 
Kopsasin tyyliluokat myös common_templates/styles_common:iin -> 
jos esim. julkisessa rekkautumislomakkeissa käytetään 
updateform-inputteja, niin saa ohjeen toimimaan sielläkin.
*/

img.help-button {
 height:14px;
 width:14px;
 margin-bottom:-2px;
}

div.help {
 position:absolute;
 top:0;
 left:0;
 border:1px solid #888888;
 background-color:#ffffe1;
 padding:5px;
 z-index:100;
 max-width:350px;
 min-width:250px;
 font-weight:normal;
}


div.divpopup-wrapper {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 z-index:10;
 padding-top:90px;
 text-align:center;
}


div.divpopup-container {
 width:360px;
 border-style:solid;
 border:1px solid #888888;
 background-color:#ffffe1;
 padding:15px;
 margin-right:auto;
 margin-left:auto;
 text-align:left;
}


/* MP271008: Käänsin listauluokat enkuksi. 
Jätin vielä suomenkielisenkin luokan, koska eui-valintalistat käyttävät vielä
samaa sarakelajittelua vanhojen projektien kanssa. Otan kuitenkin
jo kopteri2008:sta alkaen käyttöön uudet enkkunimet templaateilla. 
Kun sarakelajittelu uusitaan, suomiluokat voi tiputtaa pois.
*/

table.datalist,table.dataemo {
 border:1px solid #808080;
 border-collapse: collapse;
 width:100%;
}


td.data-header, td.data-otsikko, td.otsikko {
 font-weight:bold;
 background-color:#1062B1;
 color:white;
 border:1px solid #808080;
 white-space:nowrap;
}

td.data-header-selected, td.otsikko-valittu {
 font-weight:bold;
 background-color:#70A1D0;
 color:white;
 border:1px solid #808080;
 white-space:nowrap;
}

.data {
 border:1px solid #808080;
 background-color:white;
}

.data.alituote {
 background-color:#f7f7f7;
}

.data.alituote.nimi {
 padding-left: 20px;
}

tr.alituotteet {
 display: none;
}

/* hlr = HighLight Row > Rivin korostus tr-tagissa > esim. cui-form/updatelist */

.data.highlight, .data-hlr {
 background-color:#eff6fd;
}

.data-hlr .data {
 background-color:transparent;
}

.data.pass {
 filter:alpha(opacity=60);
 -moz-opacity:.60;
 opacity:.60;
}



.button, .nappi { 
 background:#f1f1f1; 
 border:1px solid #808080; 
 cursor:pointer;
 color:black;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 90%;
}

.button.att { 
 background:#ffffcc; 
}

.button.pass { 
 color:#777777;
}

.button:hover {
 text-decoration:none;
}


/*****************************************************************
MP211008: Ruudun maskaus + loader-kuvake
Kts. cuI/eui/inc_admin/macros -> screenmask
******************************************************************/

div#screenmask {
 display:none;
}

div.screenmask-cont {
 background-color:white;
 width:100%;
 height:100%;
 z-index:200;
 top:0;
 left:0;
 position:absolute;
 filter:alpha(opacity=90);
 -moz-opacity:.90;
 opacity:.90;
 color:black;
}

div.loader {
 width:100%;
 height:100%;
 z-index:210;
 top:0;
 left:0;
 position:absolute;
 background-image: url(/common_ui/embed_ui/img/icons/loader.gif);
 background-position: center 35%; 
 background-repeat: no-repeat;
}




/*****************************************************************
MP030608: Wizard-asetuslomakkeen tyylit 
wiz* = sovellusasetuslomake (cui/eui/inc_admin/settings_updateform.inc)
kts. cui/eui/inc_admin/wizard.inc
******************************************************************/

div.wiz-field-title {
 float:left;
 padding-right:10px;
 width:150px;
 margin-bottom:14px;
}

div.wiz-field-title-wrap {
 padding-right:10px;
 width:150px;
 margin-bottom:2px;
}

div.wiz-field-input {
 float:left;
 margin-bottom:14px;
}

div.wiz-field-input-wrap {
 margin-bottom:14px;
}


div.wiz-field-separator {
 clear:both;
 border-bottom:1px dotted #808080;
 margin-bottom:14px;
 height:1px;
}

div.wiz-submit-top-cont {
 margin-bottom:14px;
}

div.wiz-submit-bottom-cont {
 margin-top:14px;
}


/*****************************************************************
Tabbien tyylit -> rt#168
******************************************************************/

.ui-tabs-nav {
  list-style: none;
  margin: 0;
  padding:0;
}

.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
  display: block;
  clear: both;
  content: " ";
}

.ui-tabs-nav li {
  float: left;
  /*min-width: 84px;  be nice to Opera */
}

.ui-tabs-nav a {
  float: left;
  padding: 5px 8px;
  margin-right: 4px;
  border: 1px solid #a9a9a9;
  border-bottom: none;
  background-color: white;
  text-decoration: none;
  color: black;
  white-space: nowrap; /* required in IE 6 */    
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.ui-tabs-nav .ui-tabs-selected a {
  position: relative;
  top: 1px;
  background-color: #f5f5f5;
  border: 1px solid #808080;
  border-bottom:none !important;
  padding: 5px 8px;
  color: black;
}


/*

.ui-tabs-nav a span {
  width: 64px; ** IE 6 treats width as min-width **
  min-width: 64px;
  height: 18px; ** IE 6 treats height as min-height **
  padding-top: 6px;
  padding-right: 0;
}


*>.ui-tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}

.ui-tabs-nav .ui-tabs-selected a span {
    padding-bottom: 1px;
}

.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
    background-position: 100% -150px;
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
    background-position: 100% -100px;
}

.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
    background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
    background-position: 0 0;
}

.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}

*/

.ui-tabs-disabled {
  opacity: 0;
  filter: alpha(opacity=0);
}

.ui-tabs-panel {
  background-color:#f5f5f5;
  padding: 15px;
  border: 1px solid #808080;
}

/*MP180509: rt173*/
.ui-tabs-hide {
 position:absolute;
 top:-10000px;
 left:0px;
 padding:0 56px;
}



/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}

*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}








#tabs {
 list-style: none;
 margin:0;
 padding:0;
}

#tabs li {
 float: left;
}

#tabs a {
 float: left;
 padding: 5px 8px;
 margin-right: 4px;
 border: 1px solid #a9a9a9;
 border-bottom:none;
 background-color: white;
 text-decoration: none;
 color: #a9a9a9;
}

#tabs a.active-tab {
 background-color: #f5f5f5;
 border: 1px solid #808080;
 border-bottom:none;
 padding: 5px 8px;
 color: black;
}

/*MP110908: Xinhaa ei voi ladata display:none-divissä, joten
passiivisen paneelin piilotus täytyy hoitaa position:absolute:lla.
Divi pakottaa popuppiin vaakascrollin ilman width-määrettä.
Ilman xinhaa tähän riittäisi display:none/block -tyylit.
*/

.tabs-panel {
 clear: both;
 position:absolute;
 top:-10000px;
 left:0px;
 width:80%;
}

/*MP211108: IE7:ssa paneelin ylä-padding tuplaantui.
Liittyy virheellisen float/clear-käsittelyyn.
Bugi korjaantui lisäämällä sinänsä tarpeeton "display:inline-block;".
MP121208: FF3:nen kaipasi leveysmäärittelyn tähän. Paddingin vuoksi ei
voi pistää 100 prosenttia.
*/

.tabs-panel-active {
 clear: both;
 background-color:#f5f5f5;
 padding: 15px;
 border: 1px solid #808080;
 display:inline-block;
 width:97%;
}











/*****************************************************************
MP100908: Teemaeditorin wizard-asetuslomakkeen tyylit 
kts. cui/eapps/theme ja cui/eui/inc_admin/wizard_te.inc
******************************************************************/

table.wizte-data-wrapper {
 width:100%;
} 

tr.wizte-data-row {
 background-color:#f1f1f1;
}

tr.wizte-data-row:hover {
 background-color:#e4e4e4;
}

td.wizte-data {
 border-bottom:1px dashed #808080;
 width:50%;
 vertical-align:top;
 font-size:85%;
}

td.wizte-data.input {
 white-space:nowrap;
}

div.wizte-file-upload-bg {
 background:transparent top left no-repeat url(/common_ui/embed_ui/img/wizard/file_upload.gif);
}

.wizte-file-upload {
 filter:alpha(opacity=0);
 -moz-opacity:.0;
 opacity:.0;
 cursor:pointer;
 margin-bottom:4px;
 width:100px;
}

input.wizte-colorDisplay {
 width:48px;
 border:1px solid #808080;
 cursor:pointer;
 margin:1px 0;
 background-color:transparent;
}

img.wizte-colorSwatch {
 width:12px;
 height:12px;
 margin-right:4px;
 cursor:pointer;
 margin-bottom:-1px;
}


/*****************************************************************
MP250608: Teemaeditori = theme editor = te
Teemaeditorin asemointi -> style_embed.css (themebar*)
Teemaeditorin kentissä käytetään ylläolevia wizte-data* -tyyliluokkia.
******************************************************************/

td.toolbarData.teLeft {
 padding-left:8px;
 padding-top: 2px;
 padding-bottom: 2px;
 text-align:left;
 font-size: 10px;
 text-transform: uppercase;
}

td.toolbarData.teRight {
 padding-right:8px;
 text-align:right;
 font-size: 10px;
 text-transform: uppercase;
}

td#te-submit-container {
 border:1px solid #808080;
 border-right:0;
 background-color:#f1f1f1;
 padding:7px;
 text-align:center;
}

table#teWrapper {
 width:100%;
 border-collapse: collapse;
} 

td.te-data-wrapper {
 border:1px solid #808080;
 border-right:0;
}

td.te-data-wrapper-selected, td.te-data-wrapper:hover {
 background-color:#f1f1f1;
 border:1px solid #808080;
 border-right:0;
}

div.te-title-container {
 padding:4px;
 font-size:85%;
}

div.te-title-container:hover {
}

div.te-title-container-selected {
 padding:4px;
 background-color:#e4e4e4;
 border-bottom:1px dashed #808080;
 font-weight:bold;
 font-size:85%;
}


div.te-preview-container {
 padding:5px;
 background-color:#f1f1f1;
 text-align:right;
}

div.te-preview-container:hover {
 background-color:#e4e4e4;
}





/*****************************************************************
MP271008: Admin-templaattien navigointi. Eli tallennuslomakkeelta
valintalistalle jne.
Pohja kopioitu teemaeditorin sivupaneelista:
- cui/eapps/theme/admin_inc/theme_prewview_header.inc
- cui/eui/styles_embed.css -> themebar*
******************************************************************/

div.adminnavWrapper {
 width:211px;
 position:absolute;
 top:105px;
 left:-190px;
 z-index:100;
}

div.adminnavWrapper.visible {
 left:0px;
}

div#adminnavLinksetWrap {
 width:188px; 
 border:0 solid #808080;
 border-width:0 2px 2px 0;
 float:left;
 background-color:#ffffff;
}

div.adminnavLinkCont {
 border:0 solid #808080; 
 border-top-width:1px;
 padding:8px;
}

div.adminnavLinkCont:hover {
 /*background-color:#ffffee;*/
}

div.adminnavLinkCont.selected {
 background-color:#f9f9f9;
}

div#adminnavButtonWrap {
 width:21px;
 padding-top:5px;
 float:left;
}

div#adminnavButton {
 width:21px;
 height:45px;
 cursor:pointer;
 background:transparent top left no-repeat url(/common_ui/embed_ui/img/toolbar/show_ver.gif);
}

div#adminnavButton.hide {
 background-image:url(/common_ui/embed_ui/img/toolbar/hide_ver.gif);
}





/***************************************************
MP310309: jQuery-uploadify -pluginin mallityylit.
***************************************************/

.fileUploadQueueItem {
	font: 11px Verdana, Geneva, sans-serif;
	background-color: #F5F5F5;
	border: 3px solid #E5E5E5;
	margin-top: 5px;
	padding: 10px;
	width: 300px;
}
.fileUploadQueueItem .cancel {
	float: right;
}
.fileUploadProgress {
	background-color: #FFFFFF;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #C5C5C5;
	border-bottom: 1px solid #C5C5C5;
	margin-top: 10px;
	width: 100%;
}
.fileUploadProgressBar {
	background-color: #0099FF;
}



/*****************************************************************
Tooltipin muotoilut.
******************************************************************/
.toolTip {
    cursor: help; 
    position: relative;
}
 
.toolTipWrapper {
    width: auto;
    min-width: 250px;
    position: absolute;
    top: 10px;
    display: none;
    color: #FFF;
    font-weight: normal;
    border: 1px solid #888888;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    z-index: 9999;
}

.toolTipContent {
    font-size: 12px; 
    margin: 2px;
    padding: 5px 10px;
    background-color: #000000;
    border: 1px solid #000000;
    color: white;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}


/*****************************************************************
jQueryn Tools-tooltipin muotoilut.
******************************************************************/
.jqTipLayout {
    background-color: #ffffff;
    padding: 10px;
    width: auto;
    display: none;
    border: 1px solid #888888;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    background-color: white;
    color: black;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    z-index: 99999;
}


/*****************************************************************
TinyMCE:n ja muiden multikenttien muotoiluja
******************************************************************/
div.tinymce-multi-title,
div.textfield-multi-title,
div.textarea-multi-title {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    float: left;
    padding: 5px;
    margin-top: 3px;
    background: #F0F0EE;
    cursor: pointer;
    font-weight: normal;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4ee', endColorstr='#cccccc');
    background: -webkit-gradient(linear, center center, center bottom, from(#f0f0ee), color-stop(50%,#f0f0ee), to(#cccccc));
    background: -moz-linear-gradient(90deg, #cccccc, #f0f0ee 55%, #f0f0ee);
}

div.textfield-multi-title,
div.textarea-multi-title {
    margin-bottom: -2px;
}

div.tinymce-multi-title a,
div.textfield-multi-title a,
div.textarea-multi-title a {
    text-decoration: none !important;
    color: #4c4c6c;
}

div.tinymce-multi-title.selected a,
div.textfield-multi-title.selected a,
div.textarea-multi-title.selected a {
    color: #000066;
}

div.tinymce-multi-title.right,
div.textfield-multi-title.right,
div.textarea-multi-title.right {
    border-right: 1px solid #cccccc;
}

div.tinymce-multi-title.selected,
div.textfield-multi-title.selected,
div.textarea-multi-title.selected {
    background: #FFFFFF;
    font-weight: bold;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');
    background: -webkit-gradient(linear, center center, center bottom, from(#ffffff), color-stop(50%,#ffffff), to(#dddddd));
    background: -moz-linear-gradient(90deg, #dddddd, #ffffff 55%, #ffffff);
}

div.tab div.textfield-multi-title,
div.tab div.textarea-multi-title {
    border-radius: 5px 5px 0 0;
    margin-right: 1px;
    border-right: 1px solid #cccccc;
}

div.box div.textfield-multi-title,
div.box div.textarea-multi-title {
    margin-bottom: 3px;
    margin-right: 3px;
    border: 1px solid #cccccc;
}