/* scrollbar width */
::-webkit-scrollbar {
width: 16px;
}
/* Scrollbar Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
}
/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
background: #317bc9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0099ff;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
.replyTextareaFocus:focus {
outline: none !important;
border: 2px solid #447ec6;
}
.topBar {
position: fixed;
top: 0px;
width: 100%;
height: 44px;
background-color: #253545;
z-index: 100;
}
#of_txt {
position: relative;
top: 12px;
}
.drag {
z-index: 100;
cursor: pointer;
position: absolute;
/*-webkit-transform: rotate(25deg) skew(-15deg, -15deg) scale(0.8,0.8);*/
}
.noteColorBox {
position: relative;
top: 2px;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ffffff;
}
.myStickyTextarea {
width: 350px;
min-height: 70px;
padding: 15px 15px 15px 20px;
background:#fcf2b0;
color: #000000;
resize: none;
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
font: 15px verdana;
line-height: 21px;
border-radius: 5px;
}
.myStickyTextarea:hover {
border: 1px solid #fcf2b0;
}
#iconDelete {
background: url(v0.82-graphics/icons/trash.png);
width: 15px;
height: 20px;
opacity: 1;
display: inline-block;
}
#iconDelete:hover {
opacity: 0.8;
}
#iconDeleteBlack {
background: url(v0.82-graphics/icons/trashBlack.png);
width: 15px;
height: 20px;
opacity: 0.8;
display: inline-block;
}
#iconDeleteBlack:hover {
opacity: 1;
}
#sizeUpDiv {
background: url(v0.82-graphics/icons/sizeUp.png);
width: 22px;
height: 22px;
opacity: 1;
display: inline-block;
}
#sizeUpDiv:hover {
opacity: 0.8;
}
#sizeDownDiv {
background: url(v0.82-graphics/icons/sizeDown.png);
width: 22px;
height: 22px;
opacity: 1;
display: inline-block;
}
#sizeDownDiv:hover {
opacity: 0.8;
}
#content {
float: left;
width: 100%;
min-width: 1330px;
}
#siteContent {
position: relative;
top: 150px;
width: 1330px;
min-width: 1330px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
z-index: 3;
margin: 0 auto;
}
#siteContentGuest {
position: relative;
top: 0px;
width: 100%;
height: 650px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
z-index: 3;
margin: 0 auto;
background: linear-gradient(#ffffff, #e2eaee);
}
.siteContentDiv {
position: relative;
width: 100%;
height: 100vh;
margin-top: 20px;
z-index: 10;
}
#sectionTop {
position: relative;
padding-bottom: 10px;
}
#topItems {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
min-width: 1330px;
height: 200px;
z-index: 100;
text-align: center;
background-color: #eeeeee;
}
#topItemsContent {
position: relative;
width: 1220px;
margin: 0 auto;
}
#topItemBarBg {
position: absolute;
top: 0px;
width: 100%;
height: 28px;
background-color: #303030;
}
#topBanner {
position: relative;
margin: 0 auto;
left: 30px;
top: 45px;
z-index: 0;
text-align: center;
width: 740px;
height: 120px;
}
#topMenu {
position: relative;
margin: 0 auto;
padding-top: 5px;
left: 0px;
top: 28px;
z-index: 100;
text-align: center;
width: 100%;
height: 45px;
color: #808080;
font-size: 11px;
background-color: #ffffff;
box-shadow: 4px 4px 25px rgba(0, 0, 0, 0.1);
}
#topMenuLeft {
position: relative;
margin: 0 auto;
width: 1330px;
text-align: left;
}
#topLeftDate {
position: absolute;
top: -45px;
width: 200px;
text-align: left;
font-size: 11px; color: #ffffff;
}
#topMenuGuest {
position: relative;
margin: 0 auto;
padding-top: 5px;
left: 0px;
top: 0px;
z-index: 100;
text-align: center;
width: 100%;
height: 110px;
color: #ffffff;
font-size: 11px;
background-color: #253545;
}
.leftMenuItems {
text-align: left;
width: 100%;
padding: 0px;
border: 1px solid rgba(0,0,0,0);
border-left: 0;
border-right: 0;
padding-top: 5px;
padding-bottom: 5px;
color: #000000;
text-decoration: none;
}
.leftMenuItems:hover {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-left: 0;
border-right: 0;
}
.rightMenuItems {
background-color: #ffffff;
text-align: left;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 10px;
color: #606060;
}
.rightMenuItems:hover {
border: 1px solid #e0e0e0;
}
.homeButton {
position: relative;
top: 2px;
width: 18px;
height: 17px;
background: transparent url('graphics-v0.82/home.png') center top no-repeat;
display: inline-block;
}
.homeButton:hover {
background: transparent url('graphics-v0.82/homeCh.png') center top no-repeat;
}
.rssButton {
position: relative;
top: 2px;
width: 18px;
height: 17px;
background: transparent url('graphics-v0.82/rss.png') center top no-repeat;
display: inline-block;
}
.rssButton:hover {
background: transparent url('graphics-v0.82/rssCh.png') center top no-repeat;
}
#blackLine {
border: 0;
border-bottom: 1px dashed #ccc; margin-top: 10px;
margin-bottom: 4px;
padding-bottom: 0px;
}
#rightMenu {
position: absolute;
right: 12px;
top: 20px;
width: 100%;
text-align: right;
z-index: 101;
float: right;
color: #ffffff;
}
#leftMenu {
position: absolute;
left: 0px;
top: 22px;
width: 250px;
text-align: left;
z-index: 101;
}
#siteBody {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font: 13px arial;
line-height: 18px;
color: #656565;
text-align: center;
overflow: auto;
height: 100%;
background-color: #fafbfd;
}
table {
margin-left: auto;
margin-right: auto;
}
h1 {
font: bold 42px 'Lato';
color: #606060;
display: inline;
}
h1:hover {
color: #317bc9;
}
/*
h1 {
font: 34px 'Lato';
color: #000000;
display: inline;
line-height: 60px;
}
*/
h2 {
font: 34px 'Lato';
font-weight: 900;
color: #000000;
display: inline;
letter-spacing: 1px;
}
h3 {
font: 18px arial;
color: #317bc9;
display: inline;
}
h4 {
font: 16px arial;
color: #ffffff;
display: inline;
}
h5 {
font: bold 18px 'Lato';
color: #404040;
display: inline;
line-height: 26px;
}
.windowHeader {
position: relative; font-size: 22px; font-weight: bold; padding-left: 15px; margin-top: 15px;
}
.topLogo {
width: 180px;
height: auto;
}
.topSiteName {
display: inline;
font: bold 28px 'Lato';
}
.lineDotted {
border: 2px dotted #c0c0c0;
border-style: none none dotted;
color: #fff;
margin-top: 25px;
margin-bottom: 25px;
}
.lineThickDotted {
border: 1px dotted #c0c0c0;
/*border-style: none none dotted; */
color: #fff;
background-color: #f0f0f0;
padding-bottom: 0px;
height: 4px;
}
.lineRed {
border: 2px solid #317bc9;
color: #fff;
background-color: #fff;
margin-bottom: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #317bc9;
display: inline-block;
}
.newPostOverlay {
background-color: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 10;
display: none;
}
.newEditOverlay {
background-color: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 35;
display: none;
}
.reply {
position: relative;
font-size: 14px;
background-color: #fff;
box-sizing: post;
color: #333;
text-align: left;
margin-top: 8px;
margin-bottom: 8px;
border: 0px;
}
.replyContent {
display: inline-block;
width: auto;
max-width: 95%;
background-color: #efefef;
border-radius: 15px;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
line-height: 21px;
margin-bottom: 0px;
}
.replyContentName {
color: #000000;
text-decoration: none;
font-weight: bold;
font-size: 14px;
display: inline;
line-height: 28px;
}
.replyContentName:hover {
color: #0099ff;
}
.replyContentIcons {
position: relative;
top: -3px;
color: #202020;
font-size: 12px;
text-decoration: none;
margin-top: 0px;
padding-bottom: 6px;
}
.replyContentIcons a {
color: #202020;
font-weight: bold;
}
.newReplyOverlay {
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
display: none;
}
.newCommentReplyOverlay {
background-color: rgba(0,0,0,0.0);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
display: none;
}
.timelineUsername {
text-decoration: none;
color: #000000;
}
.timelineUsername:hover {
color: #0099ff;
}
.breaker {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #c0c0c0, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #c0c0c0, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #c0c0c0, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #c0c0c0, #f0f0f0);
margin: 2px;
}
.like {
position: relative;
top: 2px;
width: 22px;
height: auto;
display: inline-block;
}
.like .like-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.like:hover .like-top {
display: inline;
}
.dislike {
position: relative;
top: 5px;
width: 22px;
height: auto;
display: inline-block;
}
.dislike .dislike-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.dislike:hover .dislike-top {
display: inline;
}
.comment {
position: relative;
top: 5px;
width: 200px;
height: auto;
display: inline-block;
}
.comment .comment-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.comment:hover .comment-top {
display: inline;
}
section {
width: 100%;
}
section div {
width: 100%;
overflow: hidden;
border-radius: 3px;
z-index: 3;
position: relative;
}
section div textarea {
width: 480px;
height: 60px;
border: none;
padding: 5px 10px;
font-family: arial;
font-size: 20px;
resize: none;
outline: none;
}
.newPost {
z-index: 11;
border-radius: 7px;
border: 1px solid #c0c0c0;
}
.newPostAvatar {
float: left;
width: 55px;
height: 55px;
border-radius: 50%;
}
.newPostButton {
background-color: #317bc9;
width: 150px;
margin: 10px auto;
padding: 12px;
color: #ffffff;
border-radius: 5px;
border: 0;
cursor: pointer;
font-size: 18px;
outline: none;
}
.newPostButton:hover {
color: #ffffff;
background-color: #0099ff;
}
.newPostImageVideo {
width: 170px;
padding-top: 14px;
margin: 0 auto;
}
.newPostImageVideoContent {
background-color: #eaeaea;
border-radius: 15px;
text-align: left;
font-size: 14px;
cursor: pointer;
height: 32px;
}
.deleteButton {
background-color: #aa0000;
width: 230px;
margin: 10px auto;
padding: 12px;
color: #ffffff;
border-radius: 5px;
border: 0;
cursor: pointer;
font-size: 18px;
outline: none;
}
#uploadPreview img{
border: 1px solid #c0c0c0;
border-radius: 5px;
margin: 4px;
}
#sectionPosts {
z-index: 1;
width: 100%;
height: 400px;
}
.post {
position: relative;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
box-sizing: post;
color: #333;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin-top: 00px;
margin-bottom: 00px;
border-radius: 5px;
border: 1px solid #d0d0d0;
box-shadow: 0px 0px 25px rgba(0,0,0,0.1);
/*border-bottom: 4px solid #dadada;*/
}
#overlay {
position: absolute;
z-index: 1000;
top: 30px;
width: 190px;
height: 220px;
border-width: 1px;
border-style: solid;
border-color: #317bc9;
visibility: hidden;
font: 12px arial;
color: #ffffff;
padding: 15px;
border-radius: 5px;
background-color: #ededed;
/*background: linear-gradient(#808080, #a0a0a0);*/
background-repeat: no-repeat;
background-attachment: fixed;
/*box-shadow: 0px 0px 30px #d0d0d0;*/
}
#overlayLI {
position: absolute;
z-index: 1000;
top: 30px;
width: 400px;
height: 500px;
background: #ffffff;
border: 0px;
visibility: hidden;
right: 800px;
font: 12px arial;
color: #000000;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 35px #000000;
}
#overlayProfile {
position: absolute;
z-index: 1000;
top: 30px;
width: 200px;
height: 160px;
background: #303030;
border-width: 1px;
border-style: solid;
border-color: #317bc9;
visibility: hidden;
font: 12px arial;
color: #ffffff;
padding: 7px;
opacity: 0.97;
-moz-opacity: 0.97;
filter:alpha(opacity=97);
-moz-border-radius: 15px;
border-radius: 15px;
}
.zitem {
width:180px;
height:180px;
border:0px solid #222;
margin:5px 5px 5px 0;
/* required to hide the image after resized */
overflow:hidden;
/* for child absolute position */
position:relative;
/* display div in line */
float:left;
}
.zitem .caption {
width:180px;
height:50px;
background:#000;
color:#fff;
font-weight:bold;
text-align: left;
/* fix it at the bottom */
position:absolute;
bottom:-1px; /* fix IE issue */
left:0;
/* hide it by default */
display:none;
/* opacity setting */
filter:alpha(opacity=70); /* ie */
-moz-opacity:0.7; /* old mozilla browser i.e. netscape */
-khtml-opacity: 0.7; /* for really really old safari */
opacity: 0.7; /* css standard, currently it works in most modern browsers */
}
.zitem .caption a {
text-decoration:none;
color:#fff;
font-size:11px;
/* add spacing and make the whole row clickable*/
padding:2px;
padding-left: 7px;
display:block;
}
form {
color: #656565;
font-size: 16px;
line-height: 40px;
display: inline;
}
form input {
border: 1px solid #d0d0d0;
height: 40px;
font-size: 16px;
padding-left: 10px;
color: #656565;
background-color: #efefef;
border-radius: 15px;
}
form input:hover {
background-color: rgba(230,230,230,1);
}
form input:focus {
outline: none;
border: 1px solid #317bc9;
}
form select {
border: 1px solid #c0c0c0;
height: 30px;
font-size: 16px;
padding-left: 6px;
color: #656565;
}
#inputSubmit {
position: relative;
top: 0px;
height: 25px;
padding-top: -5px;
}
.formTop {
font: 11px arial;
}
.formTop input {
font: 11px arial;
height: 20px;
border-radius: 15px;
}
.formTop select {
height: 20px;
}
input.rounded {
border: 1px solid #ccc;
border-radius: 7px;
/* box-shadow: 2px 2px 3px #666; */
font: 14px verdana;
color: #a0a0a0;
padding: 4px 7px;
outline: 0;
height: 17px;
display: inline;
}
input.rounded:focus {
border-color: #317bc9;
}
.styledSubmitButton {
height: 50px;
background:#5CCD00;
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
color:#fff;
font-family: arial, verdana ,sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00;
cursor: pointer;
}
.styledSubmitButton:hover {
height: 50px;
background:#68e700;
background:-moz-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#68e700),color-stop(100%,#53b700));
background:-webkit-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-o-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-ms-linear-gradient(top,#68e700 0%,#53b700 100%);
background:linear-gradient(top,#68e700 0%,#53b700 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68e700',endColorstr='#53b700',GradientType=0);
padding:10px 15px;
color:#fff;
font-family: arial, verdana ,sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00;
cursor: pointer;
}
.styledSearchButton {
height: 26px;
background:#317bc9;
padding: 0px 10px 0px 10px;
color: #ffffff;
font: 20px arial;
border-radius: 7px;
border: 0px;
cursor: pointer;
}
.styledSearchButton:hover {
background: #808080;
}
#topSearch {
position: relative;
top: -4px;
height: 26px;
margin-left: 15px;
border-radius: 12px;
width: 500px;
}
.styledBlueButton {
height: 45px;
background: #317bc9;
padding: 3px 12px 4px 12px;
color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
border-radius:6px;
border: 1px solid #326891;
cursor: pointer;
}
.styledBlueButton:hover {
background: #228e10;
border: 1px solid #187309;
cursor: pointer;
}
.styledRedButton {
height: 20px;
background: #d10303;
padding: 5px 15px 0px 15px;
color: #ffffff;
font-family: arial, verdana ,sans-serif;
font-size: 13px;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
display: inline-block;
}
.styledRedButton:hover {
background: #ea4e4e;
color: #ffffff;
}
.styledBlackButton {
height: 20px;
background: #000000;
padding: 5px 15px 0px 15px;
color: #ffffff;
font-family: arial, verdana ,sans-serif;
font-size: 13px;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
display: inline-block;
}
.styledBlackButton:hover {
background: #404040;
color: #ffffff;
}
.styledRedButtonSmall {
height: 18px;
background: #d10303;
padding: 2px 10px 0px 10px;
color: #ffffff;
font-family: arial, verdana ,sans-serif;
font-size: 13px;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
.styledRedButtonSmall:hover {
background: #ea4e4e;
color: #ffffff;
}
.styledBlackButtonSmall {
height: 20px;
background: #000000;
padding: 2px 10px 0px 10px;
color: #ffffff;
font-family: arial, verdana ,sans-serif;
font-size: 13px;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
.styledBlackButtonSmall:hover {
background: #404040;
color: #ffffff;
}
.styledWhiteButton {
height: 40px;
background:#efefef;
background:-moz-linear-gradient(top,#efefef 0%,#a0a0a0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#efefef),color-stop(100%,#a0a0a0));
background:-webkit-linear-gradient(top,#efefef 0%,#a0a0a0 100%);
background:-o-linear-gradient(top,#efefef 0%,#a0a0a0 100%);
background:-ms-linear-gradient(top,#efefef 0%,#a0a0a0 100%);
background:linear-gradient(top,#efefef 0%,#a0a0a0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef',endColorstr='#a0a0a0',GradientType=0);
padding:0px 6px 2px 6px;
color:#000000;
font: bold 24px verdana, arial, sans-serif;
text-decoration: none;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #909090;
cursor: pointer;
}
.styledWhiteButton:hover {
height: 40px;
background:#68e700;
background:-moz-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#68e700),color-stop(100%,#53b700));
background:-webkit-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-o-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-ms-linear-gradient(top,#68e700 0%,#53b700 100%);
background:linear-gradient(top,#68e700 0%,#53b700 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68e700',endColorstr='#53b700',GradientType=0);
padding:0px 6px 2px 6px;
color:#fff;
font: bold 24px verdana, arial, sans-serif;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #459A00;
cursor: pointer;
}
.styledGreenButton {
height: 31px;
background:#68e700;
background:-moz-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#68e700),color-stop(100%,#53b700));
background:-webkit-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-o-linear-gradient(top,#68e700 0%,#53b700 100%);
background:-ms-linear-gradient(top,#68e700 0%,#53b700 100%);
background:linear-gradient(top,#68e700 0%,#53b700 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68e700',endColorstr='#53b700',GradientType=0);
padding:0px 5px 1px 5px;
color:#fff;
font: bold 14px verdana, arial, sans-serif;
text-decoration: none;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #459A00;
cursor: pointer;
}
.styledGreenButton:hover {
height: 31px;
background:#53b700;
background:-moz-linear-gradient(top,#53b700 0%,#69e800 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#53b700),color-stop(100%,#69e800));
background:-webkit-linear-gradient(top,#53b700 0%,#69e800 100%);
background:-o-linear-gradient(top,#53b700 0%,#69e800 100%);
background:-ms-linear-gradient(top,#53b700 0%,#69e800 100%);
background:linear-gradient(top,#53b700 0%,#69e800 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#53b700',endColorstr='#69e800',GradientType=0);
padding:0px 5px 1px 5px;
color:#fff;
font: bold 14px verdana, arial, sans-serif;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #459A00;
cursor: pointer;
}
.styledGreyButtonSmall {
height: 20px;
background: #656565;
padding: 2px 10px 0px 10px;
color: #ffffff;
font-family: arial, verdana ,sans-serif;
font-size: 13px;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
.styledGreyButtonSmall:hover {
background: #326891;
color: #ffffff;
}
.greyFileSelect {
height: 40px;
background: #656565;
padding: 15px 10px 0px 15px;
color: #ffffff;
font-family: arial, verdana ,sans-serif;
font-size: 16px;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
.greyFileSelect:hover {
background: #0099ff;
}
.topMenuItem {
font: bold 13px arial;
color: #000000;
text-decoration: none;
}
.topMenuItem:hover {
color: #317bc9;
text-decoration: none;
}
.topMenuRight {
font: bold 12px arial;
color: #ffffff;
text-decoration: none;
}
.topMenuRight:hover {
color: #ffffff;
text-decoration: none;
}
.topMenuRightBg {
position: relative;
display: inline;
top: -9px;
padding: 10px;
height: 100%;
}
.topMenuRightBg:hover {
background: #305070;
}
.linkButton {
background:#a2d847;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a2d847),color-stop(100%,#6dad00));
background:-ms-linear-gradient(top,#a2d847 0%, #6dad00 100%);
background:-moz-linear-gradient(top,#a2d847 0%, #6dad00 100%);
background:linear-gradient(top,#a2d847 0%, #6dad00 100%);
padding: 0px 12px;
color:#ffffff;
font-family: arial, verdana ,sans-serif;
font-size:15px;
border-radius:10px;
border:1px solid #459A00;
cursor: pointer;
text-decoration: none;
}
.linkButton:hover {
background:#a0f217;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a0f217),color-stop(100%,#5c9200));
background:-ms-linear-gradient(top,#a0f217 0%, #5c9200 100%);
background:-moz-linear-gradient(top,#a0f217 0%, #5c9200 100%);
background:linear-gradient(top,#a0f217 0%, #5c9200 100%);
padding:0px 12px;
color:#ffffff;
font-family: arial, verdana ,sans-serif;
font-size:15px;
border-radius:10px;
border:1px solid #459A00;
cursor: pointer;
}
.commentWrap {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* current browsers */
}
.thumbs {
border-radius: 7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
box-shadow: 0px 0px 20px #a0a0a0;
}
a {
color: #0099ff;
cursor: pointer;
}
a:hover {
color: #91acc0;
text-decoration:none;
cursor: pointer;
}
A.menuLinks {COLOR: #000000; position: relative;}
A.menuLinks:link { font: 13px arial; TEXT-DECORATION: none; COLOR: #000000;}
A.menuLinks:hover {COLOR: #000000; text-decoration: none; }
.menuinks{ font: 11px arial; TEXT-DECORATION: none; COLOR: #000000;}
A.smallLinks {COLOR: #808080; }
A.smallLinks:link { font: 12px arial; TEXT-DECORATION: none; COLOR: #000000;}
A.smallLinks:hover {COLOR: #326891; text-decoration: underline; }
.smallLinks{ font: 12px arial; TEXT-DECORATION: none; COLOR: #808080;}
A.toplinks {COLOR: #000000; }
A.toplinks:link { font: 14px verdana,arial,tahoma,sans-serif; TEXT-DECORATION: none; COLOR: #000000;}
A.toplinks:hover {COLOR: #317bc9; }
.toplinks{ font: 14px verdana,arial,tahoma,sans-serif; TEXT-DECORATION: none; COLOR: #000000;}
A.biglinks {COLOR: #317bc9; }
A.biglinks:link { font: 20px 'Lato'; TEXT-DECORATION: none; COLOR: #317bc9;}
A.biglinks:hover {COLOR: #91acc0; }
.biglinks{ font: 20px 'Lato'; TEXT-DECORATION: none; COLOR: #317bc9;}
A.forumlinks:link { font: 14px arial; COLOR: #0099ff; TEXT-DECORATION: none; }
A.forumlinks:hover { COLOR: #91acc0; TEXT-DECORATION: underline; }
A.forumlinks:visited { COLOR: #326891; TEXT-DECORATION: none; }
.activityLinks {
font: 13px arial;
color: #000000;
text-decoration: none;
}
.activityLinks:hover {
color: #0099ff;
text-decoration: none;
text-shadow: 0px 0px 5px #ffffff;
}
p.bigGrey {
display: inline;
color: #808080;
font: bold 40px arial;
line-height: 36px;
}
.presentationBoxRed {
position: relative;
margin: 0 auto;
background-color: #d10303;
width: 700px;
text-align: center;
color: #ffffff;
padding: 20px;
border-radius: 7px;
font-size: 16px;
box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.35);
line-height: 28px;
}
.presentationBoxWhite {
position: relative;
top: 0px;
width: 586px;
height: 420px;
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.12);
margin: 0 auto;
padding-top: 40px;
}
.presentationBoxWhiteLogo {
width: 338px;
height: auto;
}
#footer-wrap {
position: fixed;
bottom: -4px;
left: 0px;
width: 100%;
z-index: 100;
}
#footer-container {
height: 40px;
background-color: #000000;
/*filter:alpha(opacity=60); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;*/
box-shadow: 0px 0px 120px #202020;
}
#footer {
width: 100%;
margin: 0px auto;
padding-top: 3px;
position: relative;
color: #ffffff;
font: 12px arial;
}
#imgShowOverlay {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
background-color: #000000;
z-index: 1000;
}
/* CHECKBOXES */
input[type=checkbox] {
visibility: hidden;
}
#checkboxSquare {
width: 20px;
background-color: #ffffff;
border: 10px solid #ffffff;
position: relative;
top: 5px;
visibility: visible;
}
.checkboxSquare label {
cursor: pointer;
position: absolute;
left: 10px;
width: 20px;
height: 20px;
top: 0;
border-radius: 4px;
background: #fcfff4;
}
.checkboxSquare label:after {
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkboxSquare label:hover::after {
filter: alpha(opacity=30);
opacity: 0.5;
}
.checkboxSquare input[type=checkbox]:checked + label:after {
filter: alpha(opacity=100);
opacity: 1;
}
.checkboxGeneral {
position: relative;
top: 14px;
transform: scale(2);
margin-right: 7px;
background: #fcfff4;
border-radius: 4px;
}
.checkboxGeneral:checked + .label-for-checkboxGeneral {
font-weight: bold;
color: #317bc9;
}
.aboutDiv{
width: 100sw;
background-color: #ffffff;
color: #656565;
padding: 40px;
text-align: left;
box-shadow: 0px 0px 15px #d0d0d0;
border-radius: 7px;
}
.profileDiv {
position: relative;
margin-top: -12px;
background-position: center;
background-size: cover;
height: 400px;
border-radius: 12px;
}
.profilePicDiv {
position: relative;
margin: 0 auto;
margin-top: -170px;
top: 0px;
background-color: #eaeaea;
background-size: cover;
width: 200px;
height: 200px;
border: 7px solid #ffffff;
border-radius: 50%;
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.17);
}
.profileTable {
float: left;
width: 100%;
font-size: 16px;
}
.profileTable td {
padding: 5px;
}
.hrMenuBreaker {
border-top: 1px solid #dadada;
}
#stickyMenu {
width: 100%;
text-align: center;
font: 16px 'Lato';
}
#stickyMenu.stick {
position: fixed;
top: 42px;
left: 0px;
padding-left: 33px;
height: 53px;
padding-top: 2px;
color: #ffffff;
background-color: #ffffff;
z-index: 11;
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
font-size: 22px;
}
.profileMenu {
margin: 0 auto;
display: inline-block;
font-size: 18px;
overflow: hidden;
padding: 14px 50px;
padding-top: 16px;
color: #808080;
height: 26px;
cursor: pointer;
}
.profileMenu a{
display: inline-block;
text-decoration: none;
}
.profileMenu:hover {
background-color: #eaeaea;
color: #404040;
border-radius: 10px;
}
.profileMenu a:hover {
color: #ffffff;
}
.profileMenuActive {
display: inline-block;
/* background-color: #326891;
color: #ffffff; */
}
.profileMenuActive a {
/* color: #ffffff; */
}
.profileMenuActive::after {
position: relative;
display: block;
margin-top: 10px;
background-color: #0099ff;
width: 100%;
height: 6px;
content: "";
}
.fpBoxHover {
font-size: 14px;
padding: 10px;
}
.fpBoxHoverHeader {
font-size: 18px;
background-color: #000000;
color: #ffffff;
padding: 10px;
}
.tableStyle {
font-family: arial, sans-serif;
width: 100%;
border-collapse: collapse;
}
.tableStyle td, #tableStyle th {
font-size: 1em;
border: 1px solid #253545;
padding: 10px 7px 10px 7px;
text-align: left;
}
.tableStyle th {
font-size: 16px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #253545;
color: #ffffff;
}
.tableStyle tr:nth-child(odd) td {
color: #000000;
background-color: #dde6ee;
}
.tableStyleForumTop {
font-family: arial, sans-serif;
width: 100%;
border-collapse: collapse;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
margin-top: 4px;
}
.tableStyleForumTop td {
font-size: 13px;
padding: 3px;
/*padding: 7px 4px 7px 4px;*/
text-align: left;
line-height: 13px;
}
.tableStyleForumTop th {
height: 10px;
}
/*
.tableStyleForumTop tr:nth-child(odd) td {
color: #000000;
background-color: #efefef;
}
*/
.CSSTableGenerator {
position: relative;
top: 10px;
margin: 0px;
padding: 0px;
width: 860px;
border: 1px solid #bfbfbf;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;
padding:0px;
border-collapse: collapse;
border-spacing: 0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#efefef; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #bfbfbf;
border-width:0px 0px 1px 0px;
text-align:left;
padding:4px;
padding-left: 20px;
font: 12px arial;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 0px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ffffff 5%, #d0d0d0 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d0d0d0) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d0d0d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#d0d0d0"); background: -o-linear-gradient(top,#ffffff,d0d0d0);
background-color:#ffffff;
border:0px solid #bfbfbf;
text-align:left;
border-width:0px 0px 1px 0px;
font: 22px 'lato';
color:#808080;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ffffff 5%, #d0d0d0 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d0d0d0) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d0d0d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#d0d0d0"); background: -o-linear-gradient(top,#ffffff,d0d0d0);
background-color:#ffffff;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 0px;
}
blockquote {
border: 1px solid #e0e0e0;
background-color: #f6f6f6;
padding: 10px;
}
.leftTabs {
position: relative;
min-height: 550px;
clear: both;
margin: 15px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
cursor: pointer;
}
.tab [type=radio] {
display: none;
}
.leftTabContent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.leftTabContent > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .leftTabContent {
z-index: 1;
}
[type=radio]:checked ~ label ~ .leftTabContent > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
#spinner:not([hidden]) {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
background-color: rgba(0,0,0,0.6);;
}
#spinner::after {
content: "";
width: 80px;
height: 80px;
border: 10px solid #ffffff;
border-top: 11px solid #ff6600;
border-radius: 100%;
will-change: transform;
animation: spin 1s linear infinite;
z-index: 999;
}
.circleArrows a {
display: inline-block;
border-radius: 50%;
}
.circleArrows a:hover .left, a:hover .top, a:hover .bottom, a:hover .right{
border: 0.5em solid #e74c3c;
}
.circleArrows a:hover .left:after, a:hover .top:after, a:hover .bottom:after, a:hover .right:after {
border-top: 0.5em solid #e74c3c;
border-right: 0.5em solid #e74c3c;
}
.circleArrowDown {
position: relative;
top: -2px;
display: inline-block;
width: 22px;
height: 22px;
border: 3px solid #ffffff;
border-radius: 50%;
}
.circleArrowDown:after {
position: relative;
left: -6px;
top: 1px;
content: '';
display: inline-block;
margin-top: 0px;
width: 6px;
height: 6px;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.circleArrowRight {
position: relative;
top: 0px;
display: inline-block;
width: 15px;
height: 15px;
border: 2px solid #326891;
border-radius: 50%;
}
.circleArrowRight:after {
position: relative;
left: 3px;
top: -2px;
content: '';
display: inline-block;
margin-top: 0px;
width: 5px;
height: 5px;
border-top: 2px solid #326891;
border-right: 2px solid #326891;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.circleArrowDownLarge {
position: relative;
top: -2px;
display: inline-block;
width: 22px;
height: 22px;
border: 3px solid #326891;
border-radius: 50%;
}
.circleArrowDownLarge:after {
position: relative;
left: 0px;
top: -4px;
content: '';
display: inline-block;
margin-top: 0px;
width: 7px;
height: 6px;
border-top: 3px solid #326891;
border-right: 3px solid #326891;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.circleArrowDownSmall {
position: relative;
top: 0px;
display: inline-block;
width: 17px;
height: 17px;
border: 3px solid #91acc0;
border-radius: 50%;
}
.circleArrowDownSmall:after {
position: relative;
left: 0px;
top: -4px;
content: '';
display: inline-block;
margin-top: 0px;
width: 5px;
height: 4px;
border-top: 2px solid #91acc0;
border-right: 2px solid #91acc0;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#dropBtn {
border: none;
}
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
.dropdownTop {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 24px;
right: -20px;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
z-index: 1;
text-align: left;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #eee;}
.dropdown:hover .dropdown-content {display: block;}
#dropBtnProfile {
border: none;
display: block;
}
#dropdownContentProfile {
display: none;
position: absolute;
right: -10px;
background-color: #ffffff;
min-width: 170px;
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.35);
text-align: left;
z-index: 999;
}
#dropdownContentProfile a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdownContentProfile a:hover {background-color: #eee;}
.dropdown:hover #dropdownContentProfile {display: block;}
/*the container must be positioned relative:*/
.custom-select {
position: relative;
top: 10px;
font-family: Arial;
font-size: 12px;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background-color: #91acc0;
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 12px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 5px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #ffffff;
padding: 5px 0px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: #91acc0;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
.postMenuHover {
}
.postMenuHover:hover {
background-color: #efefef;
}
.postMenuClass {
position: absolute;
right: 0px;
opacity: 1;
top: 42px;
border: 1px solid #c0c0c0;
background-color: #ffffff;
width: 280px;
text-align: left;
padding: 0px;
border-radius: 10px;
box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.25);
font-size: 17px;
font-weight: bold;
cursor: pointer;
z-index: 25;
visibility: hidden;
}
.editTextTextarea {
width: 96%;
background-color: #f0f0f0;
scrollbar: none;
padding: 10px;
height: 100px;
max-height: 1000px;
font-size: 14px;
border-radius: 10px;
}
.editTextTextarea:focus {
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 99; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
font-size: 16px;
width: 500px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.topPicturesContainer {
position: relative;
width: 100%;
}
.topPicturesImage {
display: block;
width: 100%;
height: auto;
}
.topPicturesOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #326891;
border-radius: 7px;
}
.topPicturesContainer:hover .topPicturesOverlay {
opacity: 1;
background-color: rgba(50,104,145,0.8);
}
.topPicturesContainer:hover .topPicturesText {
opacity: 1.0;
transition: .5s ease;
}
.topPicturesText {
color: white;
font-size: 16px;
position: absolute;
top: 5px;
left: 7px;
width: 90%;
height: 152px;
text-align: left;
opacity: 0;
overflow: hidden;
}
.chatDiv {
position: fixed;
width: 470px;
height: 600px;
bottom: -20px;
right: 50px;
opacity: 1;
z-index: 100;
border-radius: 20px;
padding: 15px;
background: #ffffff;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.35);
}
.chatBubbles {
display: inline-block;
position: relative;
text-align: left;
border-radius: 15px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-top: 12px;
margin-bottom: 1px;
font-size: 16px;
line-height: 24px;
}
#chatWrite {
width: 400px;
border-radius: 10px;
border: 2px solid #dadada;
padding: 6px;
padding-left: 10px;
font-size: 16px;
resize: none;
overflow-y: scroll;
min-height: 35px;
max-height: 200px;
}
#chatWrite:focus {
border-radius: 10px;
border: 2px solid #317bc9;
outline: none;
}
#chatSearch:focus {
outline: none;
border: 2px solid #317bc9;
}
#notificationsWindow {
position: absolute;
top: 28px;
left: -168px;
border: 1px solid #c0c0c0;
background-color: #ffffff;
width: 480px;
min-height: 100px;
max-height: 400px;
text-align: left;
padding: 4px;
border-radius: 10px;
box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.25);
overflow-y: scroll;
visibility: hidden;
}
.galleryCenterCrop {
object-fit: cover;
object-position: center; /* Center the image within the element */
width: 100%;
height: 250px;
border-radius: 7px;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }