@font-face { font-family: fear; src: url(NEUROPOX.TTF); }
@font-face { font-family: arial; src: url(arial.ttf); }
@font-face { font-family: 'trebuchet MS bold'; src: url(trebucbd.ttf); }
@font-face { font-family: 'trebuchet MS'; src: url(trebuc.ttf); }
@font-face { font-family: 'Tahoma'; src: url(tahomabd.ttf); }


#googlelogo {
    float:left;
    margin-right: 8px;
    margin-top: 2px;
}

.copyright {
    text-align:center;
    color:#FFF;
    bottom: 10px;
    left: 0;
    width: 100%;
    position: absolute;
    font-size: 16px;
}
.copyright a:link,
.copyright a:visited {color:#99F;}

.pholder {
    display:inline-block;
    /*position:absolute;*/
}
.pholder img {
    padding: 6px;
}

#tsearchresults {
    display: block;
    position: absolute;
    background: #000;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    z-index: 9999;
    display:none;
}

#tsearchresults tr:hover {
    background: #666;
}

/* IE fix */
img {
  border-width: 0;
}

#logoutbtn {
    text-align:right;
    position: absolute;
    right: 10px;
    display:inline-block;
    color: #F00;
}

.toolhr {
     text-decoration:none;
}
.toolhr:link,
.toolhr:visited {color:#fff;}
.toolhr:hover {color:#F00;}



/* PANEL START */

/* ВНЕШНИЙ БЛОК */
.slidepanel {
    position: fixed; /* положение */
    top: 0; /* отступ сверху */
    left: 0; /* отступ слева */
    background: #666; /* цвет фона */
    width: 30px; /* ширина блока */
    height: 100%; /* высота блока */
    font: 26px Arial; /* размер и тип шрифта */
    color: #fff; /* цвет текста */
    text-align: center; /* выравнивание текста по центру */
    padding: 5px; /* отступы от границ внутри блока */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    z-index:9998;
}

.spright {
    left: auto;
    right: 0;
}

.vertialdiv {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    width: 100%;
}

.vertialdiv_right {
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    width: 100%;
}

/* СКРЫТЫЙ БЛОК */
.hidden_panel {
    position: fixed; /* положение */
    top: 0; /* отступ сверху */
    left: -170px; /* отступ слева */
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAABOElEQVQoU42RPbNDUBCGTW5GoYq0Kp0xozbRpUxDgVxBEt9DmNHm59+HPT/gbsE6++y771la13V1XZdlSfLcI8/zpmk4eTweRVFwsizL6/XSIHhlWTZNE4XfPUDpB0rTlM5hGNq23VA5/Xw+PJMkAeXkfr+TVFWFCoxC+QZC6f1+IwxEggFyOGb2fU++qVIQf9KA5DzP4lUCb/RsKGVmjeO4rmsURb7vX69XtCnTzBNvTN5Qvmn9fr+e5+m6ru1hWVYYhkxnNEbVBsT47XYT6HA4HI9HEtd1RQWvShWjTLdtm/LPHtJzPp9REQNY3wwwgibHcdATSGjTNJmLaRi0Fcq1cCaENJBfLhe5MQaUV9k8HoIgOJ1OcIZhwMn1UaWESbWBOI7ZLj+QhPvxPzFHwDEaVO0VK/+JP/sjtVEk8GY6AAAAAElFTkSuQmCC);
    color: #FFF; /* цвет текста */
    width: 150px; /* ширина блока */
    height: 100%; /* высота блока */
    padding: 10px; /* отступы от границ внутри блока */
    text-align: left; /* выравнивание текста */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    overflow: auto;
}

.hidden_panel a {
    word-wrap: nowrap;
    white-space: pre;
}

.hpright {
    left: auto;
    right: -170px;
}

.slidepanel:hover {
    left: 170px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
}
.slidepanel:hover .hidden_panel {
    left: 0; /* отступ слева */
}

.spright:hover {
    left: auto;
    right:170px;
}
.spright:hover .hidden_panel {
    left: auto;
    right:0;
}

/* PANEL END */

button.cupid-green {
    background-color: #7fbf4d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
    background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: linear-gradient(top, #7fbf4d, #63a62f);
    border: 1px solid #63a62f;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
    box-shadow: inset 0 1px 0 0 #96ca6d;
    color: #fff;
    font: bold 16px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    height:40px;
    padding: 7px 0 8px 0;
    text-align: center;
    text-shadow: 0 -1px 0 #4c9021;
    width: 100%;
}
button.cupid-green:hover {
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    cursor: pointer;
}
button.cupid-green:active {
    border: 1px solid #5b992b;
    border-bottom: 1px solid #538c27;
    -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
}
.nicetextbox {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -o-border-radius: 8px;
    width:100%;
    height:30px;
    font-size:20px;
}





body {
    background: #555 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpi/P//PwM6YGLAAuCCmpqacC2MRGsHCDAA+fIHfeQbO8kAAAAASUVORK5CYII=);
    /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAABOElEQVQoU42RPbNDUBCGTW5GoYq0Kp0xozbRpUxDgVxBEt9DmNHm59+HPT/gbsE6++y771la13V1XZdlSfLcI8/zpmk4eTweRVFwsizL6/XSIHhlWTZNE4XfPUDpB0rTlM5hGNq23VA5/Xw+PJMkAeXkfr+TVFWFCoxC+QZC6f1+IwxEggFyOGb2fU++qVIQf9KA5DzP4lUCb/RsKGVmjeO4rmsURb7vX69XtCnTzBNvTN5Qvmn9fr+e5+m6ru1hWVYYhkxnNEbVBsT47XYT6HA4HI9HEtd1RQWvShWjTLdtm/LPHtJzPp9REQNY3wwwgibHcdATSGjTNJmLaRi0Fcq1cCaENJBfLhe5MQaUV9k8HoIgOJ1OcIZhwMn1UaWESbWBOI7ZLj+QhPvxPzFHwDEaVO0VK/+JP/sjtVEk8GY6AAAAAElFTkSuQmCC);*/
    font: 13px 'Lucida sans', Arial, Helvetica;
    color: #eee;
    text-align: center;
}

a {
    color: #ccc;
}

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

.cf:before, .cf:after{
  content:"";
  display:table;
}

.cf:after{
  clear:both;
}

.cf{
  zoom:1;
}

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

.form-wrapper {
    width: 566px;
    padding: 15px;
    margin: 10px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;    
    font: bold 15px 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;      
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'trebuchet MS bold', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
  
.form-wrapper button:hover{		
    background: #e54040;
}	
  
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;    
}

.form-wrapper button:before {
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before{
    border-right-color: #c42f2f;
}    

.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}



#display {
    display: inline-block;
    width: 350px;
    padding: 0;
    margin: 10px 0 0 0;
    vertical-align: top;
}


#clock {
    font-family: fear;
    font-size: 110px;
    color: #88F;
}

#date {
    font-family: arial;
    font-size: 26px;
    color: #0F0;
}


#temperature {
    font-size: 80px;
    font-family: arial;
    color: #FF0;
}

#weather img {
    width: 100px;
    height: 100px;
    margin-right: 15px;
    image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
}

#weatherholder {
    display: inline-block;
}