﻿/* Overlay */
div.dkDropDownPanelOverlay
{
    z-index: 9005;
    position: absolute;
    background-color: transparent;
    width: 100%; height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}



/* 
 * Speechbubble style
 */
div.dkDropDownPanel 
{
    z-index: 9009; position: fixed; top: 0; left: 0;
    background-color: #edebb2;
    opacity:0.95;
    color: #000;
    border: 1px solid #666666;
}

div.dkDropDownPanel  button         { color: #FFFFFF; background-color: #222222; margin: 20px 5px 20px 5px; border: 1px solid #FFFFFF; width: 100px; }
div.dkDropDownPanel  button:hover   { color: #ffc444; border-color: #ffc444; }

div.dkDropDownPanel ul          { list-style-type: none; }
div.dkDropDownPanel ul li       { font-size: 10pt; font-weight: bold; /*color: #FFFFFF;*/ cursor: pointer; height: 1.5em; }
div.dkDropDownPanel li:hover    { color: #ffa336; }




/*
 * FB Style
 */
 
div.dkDropDownPanel_fb
{
     position: relative; top: 0; left: 0;
    background-color: #FFF;
    border: 1px solid #a5acb5;
    color: #555;
    padding: 0; margin: 0;
    z-index: 9007;
}
.dkDropDownPanel_fb.dkdpfbSeamless 
{
    /*background-color: #F00;*/
    /*z-index: 9001;*/
    z-index: 9007;
}
div.dkdfbPanel_Heading         { height: 20px; width: 100%; background-color: #FFF; margin: 10px 0 0 0; padding: 0; }
div.dkdfbPanel_Heading span    { color: #333; font-weight: bold; margin: 15px 3px 5px 3px; }
.dkDropDownPanel_fb.dkdpfbSeamless .dkdfbPanel_Heading { margin: 5px 0 0 0; }
.dkDropDownPanel_fb.dkdpfbSeamless .dkdfbPanel_Heading span { margin: 15px 3px 5px 8px; }

div.dkdfbPanel_Footer          { width: 100%; background-color: #e0e4e9; color: #444; font-weight: bold;  border-top: 1px solid #CCC; padding: 3px 0 3px 0; text-align: center; }
div.dkdfbPanel_Content button  
{
     margin: 3px 0 0 0;
     padding: 4px 5px 4px 5px;

     background-color: #e0e4e9;
     border: 1px solid #a5acb5;

     color: #444;
     font-weight: bold;
     font-size: 11px;
}

div.dkdfbPanel_Content button:hover 
{
    background-color:  #a5acb5;
    color: #fff;
    border-color: #000000;
}
/*div.dkdfbPanel_Footer:hover    { background-color: #e0e4e9; color: #fff;  } */




/* Command (image/button) for fb style */
.dkDropdownCommand_fb              { position: relative; border-color: transparent; border-style: solid; padding: 1px; cursor: pointer;  }
.dkDropdownCommand_fb.dkdcfb_Left  { border-width: 1px 1px 1px 0px; }
.dkDropdownCommand_fb.dkdcfb_Right { border-width: 1px 0 1px 1px;  }
.dkDropdownCommand_fb.dkdcfb_Over  { border-width: 0px 1px 1px 1px; }
.dkDropdownCommand_fb.dkdcfb_Under { border-width: 1px 1px 0 1px; }
.dkDropdownCommand_fb_Active
{
    background-color: #e0e4e9;
    border-color: #a5acb5;
}
.dkDropdownCommand_fb.dkdcfbSeamless 
{
    padding: 3px 3px 2px 3px;
}
.dkDropdownCommand_fb_Active.dkdcfbSeamless 
{
        background-color: #ffffff;
        z-index: 9008;
        /*padding: 1px 4px 3px 1px;*/
        
}
/* Lists in fb dropdown */
div.dkDropDownPanel_fb ul          { list-style-type: none; list-style-position: outside; margin: 0; }
div.dkDropDownPanel_fb ul li       { margin: 0;  padding: 5px 0 5px 0; font-size: 10pt; width: 100%; border-top: 1px solid #DDD; }
div.dkDropDownPanel_fb li:hover    { background-color: #f0f2f6; }
div.dkDropDownPanel_fb ul li span  { font-weight: normal;  margin: 0; }
div.dkDropDownPanel_fb ul li span.dkdfbNotice  { font-size: 11px; color: #666; }
div.dkDropDownPanel_fb ul li span.dkdfbSecondNotice  { font-size: 10px; color: #666; }




/*
 * Speechbubble isoceles triangle
 */
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#666666;

   /* css3 */
   
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   border-radius:3px;
   
}

/* creates triangle */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#666666 transparent transparent;

   
}

.triangle-isosceles.topright:after {
	top:-10px; /* value = - border-top-width - border-bottom-width */
	right:5px; /* controls horizontal position */
	bottom:auto;
	left:auto;
	border-width:0 10px 10px; /* vary these values to change the angle of the vertex */
	border-color: #666666 transparent;
}



.triangle-isosceles.topleft:after {
	top:-10px; /* value = - border-top-width - border-bottom-width */
	right:7px; /* controls horizontal position */
	bottom:auto;
	right:auto;
	border-width:0 10px 10px; /* vary these values to change the angle of the vertex */
	border-color: #666666 transparent;
}

.triangle-isosceles.righttop:after {
	top:7px; /* controls vertical position */
	right:-15px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:10px 0 10px 15px;
	border-color:transparent #666666;
}

.triangle-isosceles.rightmiddle:after {
	top:51%; /* controls vertical position */
	right:-15px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:10px 0 10px 15px;
	border-color:transparent #666666;
}


.triangle-isosceles.underleft:after {
	bottom:-10px; /* controls vertical position */
	left:0px; /* value = - border-left-width - border-right-width */
	top:auto;
    right:auto;
	border-width:10px 10px 0px 10px;
	border-color: #666666 transparent transparent transparent;
}


.triangle-isosceles.underright:after {
	bottom:-10px; /* controls vertical position */
	right:0px; /* value = - border-left-width - border-right-width */
	top:auto;
    left:auto;
	border-width:10px 10px 0px 10px;
	border-color: #666666 transparent transparent transparent;
}

