body, html {
 margin:0;
 padding:0;
 text-align:center;
 height: 100%;
 background: url("apple_fon.png") repeat left top;
 color: white;
 font:16px Lucida Sans Unicode;
 text-rendering: optimizeLegibility;
}

#header-left{
 background: url("ih_header_top.png") repeat-x left top;
 color: white;
 top:0;
 left:0;
/* width: 230px; */
 width: 280px;
 height: 65px;
 position: fixed;
 z-index: 1;
 text-align: left;
 padding-left: 20px;
 padding-top: 10px;
}


#header-left-bottom{
 background: url("ih_header_bottom.png") repeat-x left top;
 color: #BBBBBB;
 top:75px;
 left:0;
/* width: 230px;*/
 width: 280px;
 height: 35px;
 position: fixed;
 z-index: 1;
 text-align: left;
 padding-left: 20px;
 padding-top: 10px;
 border-bottom: 2px solid #BBBBBB;
}


#header, #header-0{
 background: url("ih_header_top.png") repeat-x left top;
 color: white;
 font-size: 60px;
/* left: 250px;*/
 left: 300px;
 top: 0;
 height:75px;
 width: 100%;
 position: fixed;
 z-index: 1;
 text-align: left;
 padding-left: 260px;
 padding-top: 0;
 font:Verdana,sans-serif;
 font-weight: bold;
 text-shadow: 2px 2px 7px #000000;
 /* for foto  opacity: 0.9;*/
}

#header-bottom{
 background: url("ih_header_bottom.png") repeat-x left top;
 color: white;
 font-size: 30px;
/* left: 250px;*/
 left: 300px;
 top: 75px;
 height:45px;
 width: 100%;
 position: fixed;
 z-index: 1;
 text-align: left;
 padding-left: 260px;
 padding-top: 0px;
 border-bottom: 2px solid #BBBBBB;
}

::-webkit-scrollbar { /* chrome based */
    width: 0px;  /* ширина scrollbar'a */
    background: transparent;  /* опционально */
}

#nexus{
 color: black;
 top: 123px;
// top: 0;
// margin-top: 123px;
 left:0;
 width: 210px;
 height: calc(100% - 160px);
// min-height: 200px;
 position: fixed;
 z-index: 1;
 overflow-y: scroll;
 -ms-overflow-style: none;
 scrollbar-width: none; /* Firefox */
//direction: rtl;
 text-align: right;
 padding-right: 20px;
 padding-left: 20px;
 padding-top: 30px;
 opacity: 0.6;
/* font-weight: bold; */
/* border: 1px solid #000000;*/
/* background: #92ccde;  */ 
/* background: #FFE6D7; */ /* Old browsers */
/* background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(218,227,234,1) 100%); *//* FF3.6+ */
/* background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(218,227,234,1)));*/
/* background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(218,227,234,1) 100%);*/ /* Chrome10+,Safari5.1+ */
/*  background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(218,227,234,1) 100%); *//* Opera 11.10+ */
/*  background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(218,227,234,1) 100%);*/ /* IE10+ */
/*  background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(218,227,234,1) 100%); *//* W3C */
/*  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dae3ea',GradientType=1 ); */
}



#content{
 background: #F9FFFF;
 /*background: white url("post_fon.png") repeat left top;*/
 color: black;
 /*font:18px Monospace;*/
 font: 18px Helvetica Neue;
 margin-left: 270px;
 margin-top: 123px;
 margin-bottom:20px;
 margin-right: 270px;
 min-width: 830px;
 text-align: justify;
 padding: 5px 30px 20px 30px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,1);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,1);
 box-shadow: 0 0 10px rgba(0,0,0,1);
}

#rv{
 margin-left: 270px;
 margin-top: 0;
 margin-bottom:20px;
 margin-right: 270px;
 min-width: 830px;
 text-align: left;
}


#rv a:link, #rv a:visited {
 color: grey;
 text-decoration: none;
}

#rv a:hover {
 color: white;
 background-color: #BBBBBB;
 text-decoration: underline;
 opacity: 0.6;
}


#replica{
 background: lightgrey;
 color: black;
 font: 14px Helvetica Neue;
 text-align: justify;
 margin-top: 20px;
 padding: 10px 10px 10px 10px;
 border: 1px solid grey;
}


#rv textarea{
 margin-left: 100px;
 margin-top: 0;
 margin-bottom:20px;
 background: lightgrey;
 color: black;
 font: 14px Helvetica Neue;
 text-align: justify;
}

#rv input[type='text'][name='nik']{
 margin-left: 100px;
}


#rv input[type='button']{
 margin-left: 380px;
 margin-top: 20px;
 margin-bottom:20px;
 background-color: lightgrey;
 border: 1px solid grey;
 font-size: 14px;
 opacity: 0.5;
 transition: 0.3s;
}

#rv input[type='button']:hover{
 opacity: 1;
}



/*
#aux{
 color: black;
 top: 123px;
 right: 0;
 margin-right: 170px;
 width: 210px;
 height: calc(100% - 160px);
 position: fixed;
 z-index: 1;
 overflow-y: scroll;
 -ms-overflow-style: none;
 scrollbar-width: none; 
 text-align: right;
 padding-right: 20px;
 padding-left: 20px;
 padding-top: 30px;
 opacity: 0.6;
}

*/


a:link, a:visited {
  color: black;
  text-decoration: none;
}

a:hover{
  color: white;
  text-decoration: underline;
}

#header a:link, #header a:visited {
  color: #92CCDE; 
}

#header-0 a:link, #header-0 a:visited{
  color: grey;
}


#header a:hover, #header-0 a:hover {
 color: white;
}


#content a:link, #content a:visited {
  color: grey;
/*  background-color: lightgrey;*/ 
  padding-left:0px;
  padding-right:0px;
}

#content a:hover{
  color: white;
  background-color: lightgrey; 
  text-decoration: underline;
}

/*
#content a[href*=http]:link, #content a[href*=http]:visited, #content a[href*="JPG"]:hover, #content a[href*=http]:active{
*/
/*
#content a[href$=jpeg]:link, #content a[href$=jpeg]:hover,
#content a[href$=JPEG]:link, #content a[href$=JPEG]:hover, 
#content a[href$=jpg]:link, #content a[href$=jpg]:hover, 
#content a[href$=JPG]:link, #content a[href$=JPG]:hover, 
#content a[href$=png]:link, #content a[href$=png]:hover, 
#content a[href$=PNG]:link, #content a[href$=PNG]:hover{
*/


#content a[href*="png"]:hover, #content a[href*="PNG"]:hover, 
#content a[href*="jpg"]:hover, #content a[href*="JPG"]:hover,
#content a[href*="jpeg"]:hover, #content a[href*="JPEG"]:hover{
  background-color: white;
  padding-left:0px;
  padding-right:0px;
}

#content #foto {
  /*background: url("apple_fon.png") repeat left top;*/
  background: black;
  padding-top:5px;
  padding-left:3px;
  padding-bottom:2px;
  padding-right:2px;

}

#content #foto a:link, #content #foto a:hover{
/*  background: url("apple_fon.png") repeat left top;*/
  background: black;
  padding-left:2px;
  padding-right:2px;
}


.all{
   /* border: 2px outset grey; */
   }

.me{
    border: 2px dotted grey;
   }

.friends{
    border: 2px dashed grey;
   }

#content h4 a:link, #content h4 a:visited{
  color: grey;
  background-color: none; 
}

#content h4 a:hover{
  color: white;
  background-color: lightgrey;
  text-decoration: underline;
}

#login-form{
 /*background: white url("post_fon.png") repeat left top;*/
 background-color: black;
 opacity: 0.7;
 font:18px Monospace;
 position: fixed;
 width: 420px;
 left: 50%;
 margin-left: -230px;
 top: 50%;
 margin-top: -150px;
 padding: 20px 20px 20px 20px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,1);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,1);
 box-shadow: 0 0 10px rgba(0,0,0,1);
}

#login-form #login-citata{
   text-align: left;
}


/*========= ROLL-LINK=======*/

.roll-link, .roll-link-1 {
    display: inline-block;
    overflow: hidden;

        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        -ms-perspective: 600px;
        -o-perspective: 600px;
    perspective: 600px;

        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
	-o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    vertical-align: top;

}

.roll-link:hover, .roll-link-1:hover{
  text-decoration: none;
}



.roll-link span:hover, .roll-link-1 span:hover {
    background: none repeat scroll 0 0 #BBBBBB;
/*        background: none repeat scroll 0 0 #e93a30; */
        -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
        -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
        -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
        -o-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
        transform: translate3d(0px, 0px, -30px) rotateX(90deg);

}


.roll-link span:after, .roll-link-1 span:after  {
    background: none repeat scroll 0 0 #BBBBBB;
    color: #fff;
    content: attr(data-title);
    display: block;
    left: 0;
    padding: 0 2px;
    position: absolute;
    top: 0;
	-webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
        -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
        -o-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
        transform: translate3d(0px, 105%, 0px) rotateX(-90deg);


        -webkit-transform-origin: 50% 0 0;
        -moz-transform-origin: 50% 0 0;
        -ms-transform-origin: 50% 0 0;
    -o-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;

    text-decoration: underline;

}


.roll-link span{
    display: block;
    padding: 0 2px;
    position: relative;
        -webkit-transform-origin: 50% 0 0;
    -moz-transform-origin: 50% 0 0;
        -ms-transform-origin: 50% 0 0;
        -o-transform-origin: 50% 0 0;
        transform-origin: 50% 0 0;
	
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -webkit-transition: all 400ms ease 0s;
        -moz-transition: all 400ms ease 0s;
        -ms-transition: all 400ms ease 0s;
        -o-transition: all 400ms ease 0s;
        transition: all 400ms ease 0s;
}


.roll-link-1 span{
    display: block;
    padding: 0 2px;
    position: relative;
        -webkit-transform-origin: 50% 0 0;
    -moz-transform-origin: 50% 0 0;
        -ms-transform-origin: 50% 0 0;
        -o-transform-origin: 50% 0 0;
        transform-origin: 50% 0 0;

        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;

        -webkit-transition: all 400ms ease 0s;
        -moz-transition: all 400ms ease 0s;
        -ms-transition: all 400ms ease 0s;
        -o-transition: all 400ms ease 0s;
        transition: all 400ms ease 0s;

    text-decoration: none;
    background: none repeat scroll 0 0 #DDDDDD;
    color: black;

}


/*====== GALLERIA =========*/
/*:-webkit-full-sc...#foto.galleria{width: px}*/

#code {
 background-color: #EEEEEE;
 border: 1px solid lightgrey;
 font:16px Lucida Sans Unicode;
/* font: 16px Times New Roman;*/
 padding: 5px;
 border-radius: 3px;
}