/* @group resets and elements */
* { margin: 0; padding: 0; }

html { height: 101%; font-family: ÒHelvetica NeueÓ, Arial, Helvetica, sans-serif; background: #fff; }
body { font-family: Helvetica, Arial, sans-serif; }

img { border: 0;}

a { color: #3c86b7; text-decoration: none; }
a:hover { cursor: pointer; }

ul { line-height: 120%; }

p { font-size: 1.2em; line-height: 1.4em; font-family: Arial, sans-serif; color: #333; margin-bottom: 15px; }
h1 { font-family: Helvetica, Arial, Verdana, sans-serif; color: #757575; font-weight: bold; font-size: 1.7em; line-height: 2.0em; }
h2 { font-family: Georgia, Tahoma, sans-serif;font-size: 1.4em; letter-spacing: -0.04em; line-height: 1.8em; }
h3 { color: #115a9f; font-weight: normal; font-size: 1.3em; line-height: 1.6em;  }
h4 { color: #727272; font-family: Arial, Tahoma, sans-serif; font-size: 1.1em; line-height: 1.3em; margin-bottom: 0px; }

/* @group core */
.wrapper { width: 850px; overflow: hidden; margin: 0 auto; background: none; }

#content { display: block; width: 820px; margin: 0 auto; padding: 10px; }

#right { display: block; width: 560px; float: left; overflow: hidden; margin-left: 5px; }
#left { display: block; width: 240px; float: left; overflow: hidden; }

/* @group navigation */
nav { width: auto; background: #eee; height: 60px; border-bottom: 1px solid #dadada; margin-bottom: 30px; }

ul#n { width: 850px; margin: 0 auto; display: block; list-style: none; }
ul#n li:first-child {float: left;}
ul#n li { float: right;}
/* ul#n li a { display: block; padding: 0 11px; color: #969696; font-size: 15px; font-weight: bold; text-shadow: 0px 1px 1px #fff; } */

#userStats, #notifications { display: block; width: auto; background-color: #f9f9f9; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 12px; behavior: url(PIE.php);}
#userStats {margin-bottom: 5px;}
#notifications { height:20px; }

#userStats .pic { height: 160px; widows: 160px; float: left; display: block; margin-right: 20px; text-align: center;}
#userStats .pic img { padding: 7px; background: #fff; border: 1px solid #ccc; margin-bottom: 5px; }
#livecall { font-size: 1.2em; font-weight: bold; text-transform: uppercase;}
.on { color: green;}
.off { color: #808080;}
.dead { color: red;}

#userStats .data { float: left; display: block; position:  relative; width: 600px; /*height: 166px;*/ padding: 4px; padding-left: 15px; background: #e6e6e6; overflow:  hidden; box-sizing: border-box; -moz-box-sizing: border-box; behavior: url(PIE.php);}
#userStats .data h1 { color: #474747; line-height: 1.6em; text-shadow: 0px 1px 1px #fff; behavior: url(PIE.php);}
#userStats .data h3 { color: #666; line-height: 0.9em; margin-bottom: 5px; }
#userStats .data h4 { font-size: 1.2em; line-height: 1.3em; }

#userStats .data .actionLinks { position: absolute; right: 6px; top: 8px; }
#userStats .data .actionLinks a img { margin-right: 5px; }

#userStats .data .sep { clear: both; margin-top: 0px; width: 590px; height: 1px; border-bottom: 1px solid #ccc; margin-bottom: 0; }
#userStats .data ul.numbers { list-style: none; width: 590px; padding-top: 7px; margin-top: 0; border-top: 1px solid #fff; color: #474747; }
#userStats .data ul.numbers li { width: 135px; float: left; display: block; padding-left: 8px; height: 50px; border-right: 1px dotted #909090; text-transform: uppercase; }
#userStats .data ul.numbers li strong { color: #7b7b7b; display: block; font-size: 1.4em; line-height: .9em; font-weight: bold; }

#notifications { margin-top: 10px; }

/* @group left */
#left .gcontent { display: block; margin-bottom: 10px; }
#left .gcontent .head { background: #589fc6; border: 1px solid #3e82a7; padding-left: 8px; }
#left .gcontent .head h1 { color: #fafcfd; font-weight: bold; font-size: 1.4em; }

#left .gcontent .boxy { overflow: hidden; border-radius: 0px 0px 5px 5px; border: 1px solid #ccc; border-top: 0px; padding: 10px 8px; background: #f9f9f9; behavior: url(PIE.php);}
#left .gcontent .boxy span.action { font-size: 1.0em; float: left; padding-bottom: 10px; width: 200px;} /**may need to set width to fix for IE to avoid wrapping text**/
#left .gcontent .boxy span a img { vertical-align: middle;}
#left .gcontent .boxy span a span { padding-left: 5px;}
#left .gcontent .boxy span a { text-decoration: none;}

#left .gcontent .boxy .friendslist { display: block; margin-bottom: 15px; }
#left .gcontent .boxy .friend { border-top: 1px solid #ccc; float: left; height: 40px; padding: 5px 5px 5px 4px; width: 100px; }
#left .gcontent .boxy .friend img { border: 1px solid #ccc; float: left; padding: 2px; background: #fff; margin-right: 4px; }
#left .gcontent .boxy .friend .friendly { position: relative; top: 16px; font-size: 1.2em; }

#right span.action { border: 1px solid #ccc; border-radius: 5px; display: inline-block; font-size: 1.0em; float: left; padding: 15px; height: 79px; width: 109px;
margin: 10px; text-align: center; overflow: hidden; behavior: url(PIE.php);} /** height here causes mute button to be hidden **/

#right span.action img {  }
#right span.notice { float: left; display: inline-block; padding: 15px; }

.promptBox {position:absolute;top:1px;width:825px;height:980px;overflow: scroll; border-radius: 5px 5px 5px 5px; border: 1px solid #ccc; padding: 10px 8px; background: #f9f9f9; behavior: url(PIE.php);}
.promptBox .centerTable { margin-top: 35%; margin-left: 35%; }
    
/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.nobrdr { border: 0px !important; }

#x_logo{height: 64px;}
#DiaLControl, #LogOffControl
{
    height: 50px;
    /*width: 115px;*/
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

#LogOffControl
{
    margin-left: 1px\9;
}

#DiaLControl a, #LogOffControl a{
    float: left;
    height: 50px;
    width:  60px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

#DiaLControl a img, #LogOffControl a img{
    height:  58px;
    margin-bottom: -15px;
    
}

#DiaLControl a span, #LogOffControl a span{
    /* all rules below are specific to ie9 and below */
    position: absolute\9;
    margin-left: -55px\9; 
    margin-top: 45px\9;
}

#ParkCounterSpan
{
    margin-left: 50px;
    color: red;
}
#ParkCounterSpan2
{
    color: red;
}
#MainStatuSSpan
{
    float: left;
}
#MainPanelCustInfo input, #MainPanelCustInfo select, .input
{
    background: #f1f1f1;
    padding: 2px 2px 2px 5px;
    margin: 0 0 5px 0;
    width: 170px;
    border: 1px solid #ccc;
    font-size: 12pt;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    behavior: url(PIE.php);
}

#ScriptContents
{
    width: 540px;
}

/*---------------------------
 BEGIN styles for login box
 --------------------------*/
.barStyle
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    -webkit-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,  
          0 7px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),  
          1px 1px   0 rgba(0,   0,   0,   .1),
          3px 3px   0 rgba(255, 255, 255, 1),
          4px 4px   0 rgba(0,   0,   0,   .1),
          6px 6px   0 rgba(255, 255, 255, 1),  
          7px 7px   0 rgba(0,   0,   0,   .1);
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),  
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,  
          0 7px 0 rgba(0, 0, 0, .2);
    behavior: url(PIE.php);
}

#loginBox
{
    height: 375px;
    width: 400px;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 35%;
    left: 50%;
    z-index: 0;
}

#loginBox:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
    behavior: url(PIE.php);
}

/*--------------------*/

#loginBox h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
    behavior: url(PIE.php);
}

#loginBox h1:after, #loginBox h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

#loginBox h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
    behavior: url(PIE.php);
}

#loginBox h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
    behavior: url(PIE.php);
}

/*--------------------*/

#loginBox #instructions
{
    color: red;
}
#loginBox fieldset, #TransferMain
{
    border: 0;
    padding: 0;
    margin: 0;
}

/*--------------------*/

#loginBox #inputs input, #loginBox #inputs #LogiNCamPaigns select, #TransferMain input, #TransferMain select
{
    background: #f1f1f1 url(http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png) no-repeat;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 330px;
    border: 1px solid #ccc;
    font-size: 12pt;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    behavior: url(PIE.php);
}

#loginBox #VD_login
{
    background-position: 5px -2px !important;
}

#loginBox #VD_pass
{
    background-position: 5px -52px !important;
}

#loginBox #phone_login
{
    background-position: 5px -52px !important;
}

#loginBox #inputs #LogiNReseT
{
    float:right;
    cursor: pointer;
    margin-right: 15px;
}
#loginBox #inputs #LogiNCamPaigns select
{
    background-position: 5px -302px !important;
    height: 30px;
    width: 333px;
    margin-left: 10px;
    margin-right: 0px;
    padding: 4px;
    float: left;
}
#loginBox #inputs #LogiNReseT select
{
    float: right;
}
#loginBox #inputs input:focus, #TransferMain input:focus
{
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
    box-shadow: 0 0 0 1px #e8c291 inset;
    behavior: url(PIE.php);
}

/*--------------------*/
#loginBox #actions
{
    margin: 5px 0 0 0px;
}

#loginBox #submit
{       
    float: left;
    height: 35px;
    padding: 0;
    width: 120px;
    cursor: pointer;
    margin-left: 11px;
    /*font: bold 15px Arial, Helvetica;
    color: #8f5a0a;*/
}

#loginBox #submit:focus
{       
    text-decoration: none;
}   

#loginBox #submit::-moz-focus-inner
{
  border: none;
}

#loginBox #footer
{
    margin-top: 40px;
}
/*---------------------------
 END styles for login box
 --------------------------*/


/*---------------------------
 BEGIN generic button styles
 --------------------------*/
.button
{
    text-decoration: none;
    font: bold 1.2em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;

    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            

    moz-border-radius: .3em;
    border-radius: .3em;

    text-shadow: 0 1px 0 rgba(0,0,0,0.4);

    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    behavior: url(PIE.php);
}
.button:hover
{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    behavior: url(PIE.php);
}
.button:active
{
    position: relative;
    top: 1px;
}
.blue {
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
    behavior: url(PIE.php);
}
.blue:hover {
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
    behavior: url(PIE.php);
}
.blueinactive {
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
    opacity: .25;
    filter: alpha(opacity = 25);

    behavior: url(PIE.php);
}
/*---------------------------
 END generic button styles
 --------------------------*/

/*------------------------------------------------------------------------------------
 BEGIN styles for transfer conference options (some settings inherited from #loginBox)
 -------------------------------------------------------------------------------------*/

#TransferMain #x-transfer-options,
#TransferMain #x-transfer-inactive,
#TransferMain #x-transfer-active,
#TransferMain #x-transfer-local
{
    display: inline-block;
    text-align: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid;
    padding: 5px;
    margin-bottom: 5px;
    /*behavior: url(PIE.php);*/
}

/* override PIE for transfer number field  for Ie9 & below */
#TransferMain input, #TransferMain input:focus, #loginBox #inputs #LogiNCamPaigns select
{
    behavior: none\9 !important;
}
#TransferMain #x-transfer-options span,
#TransferMain #x-transfer-inactive span,
#TransferMain #x-transfer-active span,
#TransferMain #x-transfer-local span
{
    float:left;
    margin: 5px 25px 5px 36px;
    width: 180px;
    font: bold 1.0em !important;
    padding: 5px;
    vertical-align: top;
}

#TransferMain #x-transfer-options span a,
#TransferMain #x-transfer-inactive span a,
#TransferMain #x-transfer-active span a,
#TransferMain #x-transfer-local span a
{
    width: auto;
    height: 20px !important;
    color: #eee;
    padding: 0px;
}

#TransferMain #x-transfer-local #agentdirectlink
{
    color: #666;
}

#TransferMain #dialoverride_checkbox
{
    height: 13px;    
}

#TransferMain input, #TransferMain select
{
    background: none;
    padding: 5px 5px 5px 5px;
    margin: 0 0 0 36px;
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
    font-size: 13pt;
}

#TransferMain select, #TransferMain #XfeRGrouPLisT
{
    margin: 0 0 0 6px !important;
    padding: 5px;
    width: 200px;
}

#TransferMain input[type="checkbox"]
{
    margin: 0px;
    width: 20px;
    text-align: left;
}

#TransferMain select
{
    width: 285px;
    height: 30px;
}

#TransferMain img
{
    margin-bottom: 0px !important;
    height: 15px !important;
}

/*------------------------------------------------------------------------------------
 END styles for transfer conference options (some settings inherited from #loginBox)
 -------------------------------------------------------------------------------------*/

#LoadingBox
{
    display: none;
}

.log_text {
    font-size: 14pt;
}

.log_text_sm
{
    font-size: 10pt;
}

.log_title
{
    font-size: 12pt;
}

.disabled_img {
    /* filter: url(filters.svg#grayscale);  Firefox 3.5+ */
    filter: gray; /* IE5+ */
    /* -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */
}