/* overall */ html { scroll-behavior: smooth; } body { background-attachment: fixed; background-size: cover; } * { font-family: arial, helvetica, sans-serif; font-size: 11pt; } a { text-decoration: none; } h1 { font-size:30px; } p { margin: 0px !important; } body { margin: 0; } ul{ padding:0px; margin:0px; } select{ padding:5px; margin-top:5px; border:0px; font-weight:bold; font-family:fontello, sans-serif; } option{ font-family:fontello, sans-serif; } label { margin-left: 5px; margin-right: 5px; cursor: pointer; } input[type="file"], .nloadmore { cursor:pointer; } textarea { resize: none; } /* omnipresent */ .mobile { display:none !important; } .link { text-decoration: none; } .external:after{ font-family:fontello; font-weight:normal; content: ' '; } /* basic structure */ .topbar { width: 100%; height: 45px; margin: 0; position: relative; } .wrapper { width: 100%; clear: both; display: inline-block; text-align: center; } .container { display: inline-block; text-align: center; } #posts { width: 800px; float: left; } aside { margin-top: 5px; width: 280px; float: left; display: inline-block; } .gotop { width: 30px; height: 30px; padding: 5px; position: fixed; display: table; text-align: center; right: 20px; bottom: 20px; border-radius: 10px; } .gotop a { text-align: center; display: table-cell; vertical-align: middle; opacity: 0.7; font-size: 20px; } #hiddenside { background-color: rgba(255, 255, 255, 0); position: fixed; right: 10px; bottom: 115px; width: 350px; height: auto; } /* topbar elements */ .topbutton { vertical-align: middle; display: table-cell; line-height: 45px; height: 100%; width: 50px; position: relative; } .topicon { text-decoration: none; display: inline; font-size: 20px; } .ntbutton { position:relative; } .badge { text-decoration: none; } .alert { border-radius: 90px; width: 10px; height: 10px; position: absolute; right: 15px; top: 15px; display: none; } #notifications { position: absolute; right: -20px; top: 45px; width: 350px; max-height: 500px; display: none; line-height:12px; overflow-y:scroll; border-radius:3px; } .notif{ width:330px; height:80px; display:inline-block; text-align:left; position:relative; } #quicksend { border-radius: 3px; font-weight: bold; } .notifContents{ margin:10px; display:flex; height:60px; max-width:325px; } .nloadmore { display:inline-block; height:20px; padding-top:10px; } /* sidebar */ .side_element { border-radius: 3px; width: 92%; margin: 10px; display: inline-block; text-align: center; } .side_element li { font-family: fontello, sans-serif; height:30px; line-height:30px; text-align:left; padding-left:12px; list-style-type: none; } /* posts area elements */ .uploadedImage { width: 60px; margin: 10px 0px 10px 10px; height: 60px; border: 1px solid #ccc; display: inline-block; box-shadow: 3px 3px 3px grey; float: left; background-size: cover; } .uploadBox { width: 100%; display: inline-block; border-bottom: 1px solid #ddd; } .delpic { border-radius:90px; display:inline-block; cursor:pointer; } #send { padding:5px; border-radius:3px; font-weight:bold; margin-top:5px; float:left; } .formbtn { background-color:transparent; border: 0px; margin-top:11px; margin-left:15px; float:left; width:20px; height:20px; line-height:20px; text-align:center; overflow:hidden; font-size:20px; } .formbtn label{ margin:-5px; font-size:20px; } .element { width: 800px; clear: both; display: inline-block; margin-top: 5px; } .profile,.loader { float:left; border-radius:5px; width:650px; } .profileButton{ padding: 5px; border-radius: 5px; font-family: fontello, sans-serif; } #usermenu .menu { display: none; width: 150px; height: 100px; position: absolute; top: 45px; left: -80px; transition: 0.4s; } #usermenu:hover>.menu, #usermenu:active>.menu { display: block; transition: 0.4s; } .postMenu { cursor: pointer; position:relative; } .postMenu div{ border-radius: 3px; } .postMenu li { margin:0px; width:100%; height:35px; display:block; text-align:center; line-height:35px; } .postMenu:hover > div{ display:block !important; } .postMenu ul { margin:0px; width:100%; padding:0px; } .profileMenu:hover > div, .listmenu:hover > div{ display:block !important; } .listmenu li { font-family: fontello, sans-serif; height:30px; line-height:30px; text-align:left; padding-left:12px; list-style-type: none; } .felem { margin-left: 10px; float: left; } .avatar { width: 80px; height: 80px; float: left; margin: 15px; border-radius: 10px; background-size: auto 80px; } .post, .rb, .textonly, .loadmore { width: 650px; float: left; text-align: center; position: relative; border-radius: 3px; } #searchmobile{ display:none; } .postform { width:650px; float: left; text-align: center; position: relative; border-radius: 3px; display:block !important; } .postHeader { width: 100%; display: inline-block; height: 40px; text-align: left; } .previewpost { display: none; position: absolute; margin-top: -100px; width: 400px; border-radius:3px; } .user { position:relative; } .userinfo { display: none; position: absolute; left:0px; top:15px; width: 300px; height: auto; border-radius:3px; line-height:initial; z-index:99; } .userinfo_upper{ top:-100px; } .userinfo_co { width: 280px; margin: 10px; text-align: center; position:relative; } .userinfo_he { width: 300px; height: 150px; } .media { width: 100%; display: inline-block; } .img { width: 600px; text-align: center; } .blur { -webkit-filter: blur(25px) brightness(70%) grayscale(100%); /* Safari 6.0 - 9.0 */ filter: blur(25px) brightness(70%) grayscale(100%); opacity: 0.5; transition: 0.4s; } .toggleblur { display:none; cursor: pointer; font-family: sans, fontello; } .small { width: 321px !important; height: 321px; line-height: 321px; /* background-color: black; */ float:left; margin:2px !important; } .smaller { width: 212px !important; height: 212px; line-height: 212px; /* background-color: black; */ float:left; margin:2px !important; } .icon { width: 80px !important; height: 80px !important; line-height: 80px; float:left; text-align:center; margin:2px !important; } .postbody { margin: 15px; } .content { width: 600px; display: inline-block; margin:0px !important; text-align: left; } .post_footer { width: 630px; display: table-cell; clear: both; padding: 10px; height: 20px; text-align: left; border-radius: 3px; } .post_buttons { font-family: fontello; float: right; display: inline-block; text-align: right; font-size: 15pt; } .post_buttons a, .post_buttons span { font-family: inherit; text-decoration: none; color: inherit; font-size: inherit; } .reply { width: 100%; clear: both; text-align: left; display: block; } .note { width: 640px; float: left; text-align: left; border-radius: 5px; padding: 5px; } .button { padding: 15px; float: left; text-align: center; border-radius: 5px; font-size: 20pt; } /* pages */ .setting label { display: block; width: 40px; height: 20px; padding: 5px; float: left; margin: 0px; text-align: center; transition: all 0.3s ease-in-out; } .setting input[type="radio"]:checked+label { font-weight: bold; } /* other stuff */ /* */ .lightbox-opened { /* background-color: #333; */ background-color: rgba(50, 50, 50, 0.85); cursor: pointer; height: 100%; /* left: 0; */ overflow-y: scroll; position: fixed; text-align: center; top: 0; width: 100%; z-index:105; &:before { background-color: #333; background-color: rgba(#333, 0.9); color: #eee; content: "x"; font-family: sans-serif; padding: 6px 12px; position: fixed; text-transform: uppercase; } img { box-shadow: 0 0 6px 3px #333; } } .no-scroll { overflow: hidden; } /* */ .fontello { font-family: fontello; } .loading { font-family: fontello; color: black; content: "\E822"; animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; /* transform: rotate(3deg); */ /* transform: rotate(0.3rad);/ */ /* transform: rotate(3grad); */ /* transform: rotate(.03turn); */ } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .disabled { background-color: black; }