/*
IMPORTANT NOTICE
This HTML5 and CSS layout is COPYRIGHT 2006-2020 Design215 Inc.
It MAY NOT be copied or used for any other web site without the express
written permission of Design215 Inc. 954-630-3695 www.design215.com
Design215.com CSS/110 stylesheet, v01.20.06
for 2020 Linkatopia.com site
Updated 01.29.2022
-----------------------------------------------------------------------------
THIS STYLESHEET IS DESIGNED TO BE PAIRED WITH A THEME STYLESHEET
-----------------------------------------------------------------------------
Page Defaults and CSS Fixes
-----------------------------------------------------------------------------
*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
html,body {
text-align:center; margin:0; padding:0; height:100%;
box-sizing:border-box;
min-width:480px;
}
/*
Fonts
-----------------------------------------------------------------------------
Define all fonts for the entire site in this section.
*/
body {
font-family:verdana,helvetica,sans-serif; font-size:10px;
}
p,dl,ul,ol,table td,pre.p2,.xword,.xtitle,div.xarticle {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:14px;
}
p.p1,p.r1,p#bio {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:14px;
line-height:120%;
}
p.p2,p.r2,p.rt,div.tg p.ds {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
line-height:140%;
}
p.p3,p.p4,p.blog,blockquote {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
line-height:140%;
}
p.p5,p.c1,p.leader {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
line-height:150%;
}
p.p6 {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:24px;
line-height:130%;
}
p.postlist {
line-height:110%;
}
p#bio {
font-size:16px;
}
h3,span.h3,.xbig,.hdate {
font-family:'Source Sans Pro',arial,helvetica,sans-serif;
font-size:18px; font-weight:700;
margin:2px 2px 4px 6px; padding:0;
text-transform:uppercase; letter-spacing:1px;
}
span.h3 {
display:block;
}
#footer h3 {
}
h2 {
font-family:'Source Sans Pro',arial,helvetica,sans-serif;
font-size:18px;
margin:10px 4px 4px 4px; padding:0;
text-transform:uppercase; letter-spacing:1px;
}
h1 {
font-family:'Source Sans Pro',arial,helvetica,sans-serif;
font-size:24px; font-weight:700;
margin:4px 4px 4px 4px; padding:0;
text-transform:uppercase; letter-spacing:1px;
}
h2.blog,h1.blog {
text-transform:none;
}
span.postdate {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-weight:700;
font-size:16px; line-height:16px; margin:0;
text-transform:uppercase; letter-spacing:1px;
}
h1#user {
text-transform:none; font-size:32px; line-height:40px;
}
pre,code,.ckBox,.formula {
font-family:'courier new',courier,monospace; font-size:16px;
}
.xsmall {
font-family:arial,helvetica,sans-serif; font-size:11px;
}
#footer p {
font-size:14px; line-height:160%;
text-align:right; margin:0; padding:0 0 0 4px;
}
#footer p.xnav {
font-size:16px; line-height:180%;
text-align:left; margin:0; padding:8px 0 0 6px;
}
#footer a.w3 {
font-family:verdana,helvetica,sans-serif; font-size:12px; font-weight:bold;
}
.fbutton,.spopup {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
line-height:120%; letter-spacing:1px;
}
ul.alist li {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
line-height:120%;
}
ul.p6 li {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:20px;
}
a.k {
font-family:arial,helvetica,sans-serif; font-size:14px;
}
p.xblock,
div.C_small4 p {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
line-height:160%;
}
div.navlinks p,
div.navlinks2 p {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:16px;
}
.boxBlur,
.boxBlurDisable,
.boxBlur:focus,.boxFocus,
.boxBlurR,
.boxBlurR:focus,.boxFocusR,
.boxError,.boxErrorR,
.boxRequired,.boxRequiredR,
.boxRequired:focus,.boxRequiredR:focus,
.boxClear {
font-family:verdana,helvetica,sans-serif; font-size:16px;
padding:4px 6px 4px 6px;
}
a.del,
a.btn2,
a.btn3,
a.btnfade {
line-height:20px;
font-size:16px; font-weight:400;
vertical-align:middle;
}
/* drop-down menus */
div.dropx,div.dropx a {
font-family:arial,helvetica,sans-serif; font-size:16px;
}
/* Linkatopia tooltip menus */
#xtooltip p.tt1,
#xtooltip p.tt2,
div.tipmenu,
div.tipmenu p {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:18px;
line-height:140%;
}
/* Font sizes for Tag Cloud */
.sz1,.sz2,.sz3,.sz4,.sz5,.sz6,.sz7,.sz8,.sz9 {
font-family:'Source Sans Pro',arial,helvetica,sans-serif;
}
.sz1 {font-size:16px;}
.sz2 {font-size:16px;}
.sz3 {font-size:18px;}
.sz4 {font-size:20px;}
.sz5 {font-size:20px;}
.sz6 {font-size:22px;}
.sz7 {font-size:22px;}
.sz8 {font-size:24px;}
.sz9 {font-size:24px;}
/*
Type Selectors
-----------------------------------------------------------------------------
Define the defaults for HTML elements in this section.
*/
html,body {
text-align:center; margin:0; padding:0; height:100%;
}
body {
display:flex; flex-direction:column;
}
blockquote {
line-height:120%;
margin:12px 40px 12px 30px; padding:0;
}
form {
margin:2px 4px 2px 4px; padding:2px 0 0 0;
}
img {
margin:0; padding:0; border:0;
}
iframe {
margin:0;
}
ol li {
padding:2px 0 4px 0;
}
p {
margin:2px 6px 2px 4px; padding:0; /* default is no left margin */
}
pre {
margin:0; padding:0;
}
table {
margin:2px 6px 2px 4px; padding:0;
}
table td { /* eliminates the need for valign="top" */
line-height:130%;
vertical-align:top;
}
table td.rt { /* eliminates the need for align="right" */
text-align:right;
}
table td.ct { /* eliminates the need for align="center" */
text-align:center;
}
ul {
list-style:none;
margin:4px 0 0 4px; padding:0;
}
ul li {
}
form table { /* no left margin for tables inside forms */
margin:2px 6px 2px 0; padding:0;
}
.lf {
text-align:left;
}
.ct {
text-align:center;
}
.rt {
text-align:right;
}
.wd1 { /* used for wide buttons, any style */
display:inline-block; width:150px;
}
.hdn {
visibility:hidden;
}
/*
Class and ID Selectors
-----------------------------------------------------------------------------
Define styles for all elements except the layout containers
*/
/* Mobile Menu button */
a.mobile {
display:block; line-height:20px; margin:0; padding:6px 0 0 4px; width:40px; height:35px;
font-weight:bold; color:#000;
cursor:pointer;
user-select:none;
}
a.mobile:link,
a.mobile:visited {text-decoration:none; font-weight:bold; color:#000;}
a.mobile:hover {text-decoration:none; font-weight:bold; color:#000;}
a.mobile svg {
fill:#fafafa;
width:36px;
height:32px;
}
svg #topm2 {
fill:#555; opacity:0.6;
}
/* Style for back arrow buttons */
a.bak {
display:inline-block;
margin:0 15px 0 0; padding:0 8px 0 2px; color:inherit;
transform:scaleX(-1);
}
a.bak:link,
a.bak:visited,
a.bak:hover {
text-decoration:none; font-weight:normal; color:inherit;
}
br.clr {
clear:both;
}
br.nb { /* use on mobile */
display:none;
}
/* blog */
div.postlink {
padding:0 0 20px 0;
}
div.xboxv { /* video playlist boxes */
position:relative;
display:inline-block; vertical-align:top;
width:300px; height:200px;
padding:2px 2px 8px 0; margin:2px 2px 8px 8px;
}
div.vwrap { /* wrapper for youtube player */
position:relative;
width:100%;
padding-bottom:55%;
padding-top:15px;
margin:0 0 0 15px;
height:0;
overflow:hidden;
}
div.vwrap iframe,
div.vwrap object,
div.vwrap embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
/* Social media buttons, tweet, like, pinit */
div.social {
position:relative; float:left; height:35px; width:80px;
margin:0; padding:0;
}
div.social2 {
position:relative; float:left; height:35px; width:120px;
margin:0; padding:0;
}
div.socialclear {
position:relative; clear:both; width:120px;
margin:0; padding:0;
}
img.xpic {
margin:1px 3px 3px 1px; padding:0;
border:solid 1px #444;
}
img.xleft { /* left aligned image */
float:left; margin:2px 10px 2px 0;
}
img.favico {
margin:0 0 -2px 0; padding:0;
}
img.favico2 {
margin:0 0 -2px 0; padding:0 4px 0 2px;
width:16px; height:16px;
}
img.feedico {
margin:0 0 0 8px; padding:0;
}
/* resize images that are wider than their container */
p.p2 img,
p.p4 img,
p.p5 img,
p.blog img {
max-width:98%;
}
span.imgtxt {
display:block; max-width:620px;
}
iframe.noshow {visibility:hidden;}
label.noshow,
h1.noshow,
h2.noshow,
span.tt,
span.noshow {display:none;}
object.p1 {
margin:2px 6px 2px 4px; padding:0;
}
p.c1 { /* centered */
text-align:center; line-height:normal;
margin:2px 6px 2px 4px; padding:0;
}
p.p1 { /* normal line height for narrow columns */
margin:2px 6px 2px 4px; padding:0;
}
p#bio {
margin:2px 6px 12px 4px; padding:0;
}
p#uopt {
margin:0; padding:8px 20px 12px 0;
}
p.p3 { /* normal right margin */
margin:4px 10px 0 4px; padding:0;
}
/* official accounts */
svg.official {
position:relative; display:inline-block; vertical-align:middle;
width:24px; height:24px;
margin:0 0 0 8px; padding:0;
}
span.sp100 {
position:relative; display:inline-block;
width:100px;
}
/* user links */
div.u {
position:relative;
margin:2px 0 8px 0; padding:2px 30px 6px 40px;
}
div.u p.t {
margin:4px 15px 2px 8px; padding:0;
white-space:nowrap; overflow:hidden;
}
div.u p.ds {
margin:0 15px 0 0; padding:2px 0 0 8px;
}
div.u p.mm {
margin:0; padding:6px 0 0 8px;
}
/* user links, tags: shared */
svg.kp1,
svg.k1 {
position:relative; top:2px;
fill:#76d900;
width:16px;
height:16px;
margin:0; padding:0;
}
/* user links, tags: private */
svg.kp2,
svg.k2 {
position:relative; top:2px;
fill:#ffea00;
width:16px;
height:16px;
margin:0; padding:0;
}
/* favico */
p.fi {
position:absolute; width:32px; height:32px; left:8px; top:8px;
padding:0; margin:0;
text-align:right;
}
p.fi img {
position:relative; max-width:32px;
padding:0; margin:0; border:0;
vertical-align:top;
}
/* tag icon */
svg.tags {
position:relative; top:2px;
fill:#888;
width:20px;
height:16px;
margin:0; padding:0;
}
/* links 3-dot menu, sort menu */
p.op,
p.ot {
position:absolute; width:30px; height:30px; right:0px; top:4px;
text-align:center; padding:0; margin:0;
overflow:hidden;
}
p.ot {
width:90px;
right:9px;
text-align:right;
}
p.op svg,
p.ot svg {
fill:currentColor;
width:30px;
height:28px;
}
p.op a,
p.ot a {
user-select:none;
}
input#zcopy {
position:absolute; left:-9999px;
}
/* tag heading */
div.tg {
position:relative;
margin:2px 0 0 0; padding:2px 30px 0 0;
min-height:48px;
}
div.tg p.ds {
margin:0 15px 0 0; padding:2px 0 0 8px;
}
/* friends lock */
svg.tg1 {
position:relative; top:2px;
fill:#76d900;
width:18px;
height:20px;
margin:4px 4px 0 0; padding:0;
}
/* private lock */
svg.tg2 {
position:relative; top:2px;
fill:#ffea00;
width:18px;
height:20px;
margin:4px 4px 0 0; padding:0;
}
svg.rss {
position:relative; top:2px;
width:16px;
height:16px;
margin:0 12px 0 0; padding:0;
}
svg.stars {
position:relative; top:2px;
fill:#0000aa;
width:16px;
height:16px;
margin:0; padding:0;
}
svg.stars #starint {
fill:#e2e7ff;
}
svg.chk {
position:relative; top:4px;
fill:currentColor;
width:18px;
height:18px;
margin:0; padding:0;
}
svg.clipb {
position:relative; top:3px;
fill:currentColor;
width:18px;
height:18px;
margin:0; padding:0;
}
svg.edit {
position:relative; top:2px;
fill:currentColor;
width:18px;
height:18px;
margin:0; padding:0;
}
svg.delete {
position:relative; top:2px;
fill:currentColor;
width:18px;
height:18px;
margin:0; padding:0;
}
svg.share {
position:relative; top:2px;
fill:currentColor;
width:18px;
height:18px;
margin:0; padding:0;
}
svg.qr {
position:relative; top:2px;
width:32px;
height:32px;
margin:0; padding:0;
}
/*
Sorting options for links under a specific tag.
the negative margin moves it up to the same line as the .
height is necessary in IE or else the links can't be clicked.
*/
p.r1 {
text-align:right;
line-height:16px; height:16px;
margin:-20px 6px 4px 0; padding:0;
}
p.r2 {
text-align:right;
line-height:150%;
margin:4px 10px 4px 4px; padding:0;
}
p.rtx {
position:absolute; top:4px; right:20px;
text-align:right;
line-height:normal;
margin:0; padding:2px 0 4px 2px;
}
p.xblock {
margin:0; padding:2px 4px 2px 4px;
}
div.C_small4 p {
margin:0; padding:2px 4px 2px 4px;
}
pre.p2 {
line-height:150%;
margin:4px 4px 0 12px; padding:0;
}
table.t1 { /* no left margin */
margin:2px 6px 2px 0; padding:0;
}
table.t2 {
width:98%;
}
table.t3 {
width:270px;
}
table.formrating {
margin:2px 2px 0 4px;
}
table.xtags {
width:98%;
}
table.xtags td {
padding:0 10px 2px 4px;
}
table.xtags td.rt {
padding:0 0 2px 4px;
}
ul.alist,ul.clist {
margin:4px 0 0 4px; padding:0;
}
ul.alist li {
}
ul.alist li.blank,ul.blist li.blank {
}
/* Form fields */
.ckBox { /* checkboxes */
margin:1px; padding:0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"] {
vertical-align:top;
margin-bottom:8px;
/* max-width:60%; */
}
textarea {
/* max-width:80%; */
}
.fbutton {
margin:0; padding:0;
}
/* contact form "required" */
p.cfreq {
font-size:95%;
padding:0 0 0 8px; margin:0;
}
span.cfreq {
position:relative;
font-weight:bold; color:#f00;
}
/* contact/guestbook forms */
div.cfmsg,
#cf1,
#cf2,
#cf6,
#cf7,
#cf15,
#cf17 {
width:80%; max-width:420px;
}
#cf12 {
width:100%;
}
span.st7 {
display:none;
}
/* hide "spinners" on input type="number" */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance:none;
margin:0;
}
input[type=number] {
-moz-appearance:textfield;
}
/* Form fields generated by makeFormField(), v10.23.2020 */
div.formbox,
div.formfield {
position:relative; display:inline-block; vertical-align:top;
text-align:left; min-width:50px; max-width:98%;
margin:10px 10px 2px 6px; padding:0 0 6px 0;
font-size:14px;
}
div.formbox { /* tighter margins */
margin:0 10px 2px 6px;
}
div.formbox p,
div.formfield p {
margin:0; padding:0;
font-size:14px;
}
div.formbox input,
div.formbox textarea,
div.formfield input,
div.formfield textarea {
max-width:98%;
}
p.charcount {
position:absolute; width:80px; top:0px; right:4px;
text-align:right; margin:0; padding:0;
}
/* special cases */
#pag_vdetails #zphonec {
top:1.4em;
}
/* forms on other pages */
textarea#textcount {
width:500px;
}
textarea#compress1,
textarea#text1,
textarea#text2 {
width:600px;
}
input#flines {
width:250px;
}
/* Misc Classes */
.norm {font-weight:normal;}
.sm {position:relative; top:-4px; font-size:9px; font-weight:normal;} /* service mark (sm) */
.super {position:relative; top:-4px; font-size:10px;} /* superscript */
.xline {
position:relative; display:block; line-height:4px;
margin:0 2px 8px 12px; padding:0;
}
/*
Containers for this layout
-----------------------------------------------------------------------------
For this site, #container needs a fixed width so all of the backgrounds and other
divs inside it line up. Otherwise there are some 1px rounding issues depending on the
size of the browser window.
*/
/* Page Header, full width of container, OUTSIDE OF CONTAINER */
#mnav {
position:fixed; flex:none; right:calc(50% - 470px); top:12px; height:44px; width:44px;
text-align:center; margin:0; padding:0;
overflow:visible; z-index:97; /* must be less than drop menu z-index */
}
#pagehead {
position:fixed; flex:none; left:0; top:0; height:100px; width:100%;
text-align:center; margin:0; padding:0;
overflow:visible; z-index:97; /* must be less than drop menu z-index */
}
#headerbox {
position:relative; height:100%; max-width:980px;
text-align:center; margin:0 auto 0 auto; padding:0;
overflow:visible;
}
#pagehead div.navbar { /* width and height necessary for image replacement */
position:absolute; left:15px; top:7px; width:330px; height:75px;
text-align:left; margin:0; padding:0;
z-index:97;
}
#pagehead div.navbar svg#logo {
width:210px; height:70px; margin:0; padding:0;
}
svg#linkalogo #logo_outer {
fill:#2a388a;
}
svg#linkalogo #logo_inner {
fill:#e2e6f4;
}
body.userpage #pagehead {
height:160px;
}
body.userpage #pagehead div.navbar {
position:absolute; top:18px; left:auto; right:70px; width:160px; height:50px;
text-align:right; margin:0; padding:0;
}
body.userpage #pagehead div.navbar img#foldicon {
display:none;
}
body.userpage #pagehead div.navbar svg#logo {
display:none;
}
#pagehead div.ava {
position:absolute; top:12px; left:16px; min-width:100px; min-height:100px;
text-align:center; margin:0; padding:0;
}
div.ava img {
width:160px; height:160px;
box-shadow:1px 1px 5px rgba(0,0,0,0.2);
}
div.ava img.sh1 {
border-radius:50%;
}
#alertmsg {
position:absolute; left:0; top:80px; width:100%;
text-align:center; margin:0 auto 0 auto; padding:0; z-index:96;
}
#alertmsg img {max-width:420px;}
#container {
position:relative; flex:1 0 auto;
text-align:center; margin:0; padding:0;
}
/* Page body, full width of container */
#pagebody {
position:relative;
width:100%; /* needed for flex mode */
min-height:500px;
text-align:left; margin:100px 0 0 0; padding:0;
}
body.userpage #pagebody {
margin:160px 0 0 0;
}
/* Full width container CLASS for full width backgrounds */
div.contentbg {
position:relative; width:100%;
text-align:left; margin:0; padding:15px 0 0 0; /* bottom padding needed for flex mode?? */
}
/* Inner content box for centered, fixed width content */
div.contentbox {
position:relative; max-width:980px;
text-align:left; margin:0 auto 0 auto; padding:0;
}
div.contentbox2 {
display:flex; flex-flow:row wrap; justify-content:center;
margin:0; padding:0;
}
/* Columns, Total width must be <= 750px */
div.L_full {width:100%;}
div.R_full {width:900px;}
div.L_full2 {
position:relative;
width:100%; max-width:980px;
margin:0 auto 60px auto; padding:0;
}
#snav {
display:flex; flex-flow:row nowrap; justify-content:center; align-items:center;
position:fixed; height:80px; width:80px; left:50%; bottom:15px;
text-align:center; margin:0 0 0 -40px; padding:0;
overflow:visible;
z-index:96;
}
#snav div {
flex:0 0 53px; margin:0 16px 0 16px; padding:4px;
width:53px; height:53px;
border-radius:50%;
background-color:rgba(96,96,96,0.8);
box-shadow:0px 0px 3px 2px rgba(0,0,0,0.8);
}
#snav div a {
display:block; line-height:44px; margin:1px; padding:0; width:47px; height:47px;
font-family:verdana,helvetica,sans-serif; font-size:28px; font-weight:normal; color:#fff;
text-decoration:none; vertical-align:middle;
border-radius:50%;
background-color:#666;
background-position:center center;
border:2px solid #eee;
cursor:pointer;
user-select:none;
}
#snav div.nb2 {
width:63px; height:63px;
}
#snav div.nb2 a {
width:57px; height:57px;
}
/* add link nav */
#ib1 svg {
position:relative; top:9px;
fill:#fff;
width:40px;
height:40px;
margin:0; padding:0;
}
/* tags nav */
#ib2 svg {
position:relative; top:6px;
fill:#fff;
width:29px;
height:29px;
margin:0 3px 0 0; padding:0;
}
/* friends nav */
#ib3 svg {
position:relative; top:7px;
fill:#fff;
width:30px;
height:30px;
margin:0; padding:0;
}
/* Footer, new HTML5 */
#footer {
display:flex; flex-wrap:wrap; justify-content:center;
margin:0; padding:10px 0 50px 0;
}
div.L_footer {
flex:1 1 180px;
margin:4px; padding:4px;
text-align:left;
}
div.R_footer {
flex:1 1 100%;
margin:4px; padding:8px;
text-align:right;
}
div.xsocial {
text-align:right;
}
div.xsocial a {
margin:0 0 0 10px;
}
/*
Page specific styles
-----------------------------------------------------------------------------
Define styles and style groups that are only used on certain pages
*/
div.ctitle,
div.ctitle2 {
position:relative; text-align:center;
margin:0; padding:0 0 20px 0; overflow:hidden;
}
div.ctitle img {max-width:100%; height:auto;}
div.C_inline,
div.C_small2,
div.C_small3,
div.C_small4,
div.C_med { /* centered column that wraps @ min-width */
position:relative; display:inline-block; vertical-align:top;
text-align:left; max-width:580px; min-width:460px;
margin:0; padding:0; overflow:hidden;
}
/* equal to flex groups */
div.C_large,
div.C_title {
position:relative; text-align:left;
width:100%; max-width:1012px; margin:0 0 4px 0;
}
div.C_title {
padding:20px 0 4px 0;
}
.padleft {padding:0 0 0 4px;}
div.C_med {
margin:4px 0 4px 0; min-width:580px;
}
/* flex group 2 - 70%, 1000px + 12px between */
div.C_small {
position:relative; flex:45%; align-self:flex-start;
max-width:750px; margin:0 0 4px 0; padding:0;
}
div.C_flex1 {
position:relative; flex:80%; align-self:flex-start; order:2;
max-width:740px; margin:0 0 4px 0; padding:0;
}
div.C_flex2 {
position:relative; flex:15%; align-self:flex-start; order:3;
max-width:200px; min-width:200px; margin:4px 4px 4px 20px; /* 20px between cols when used as right sidebar */
}
div.C_flex3 {
position:relative; flex:25%; align-self:flex-start; order:1;
max-width:250px; min-width:250px; margin:4px 20px 4px 4px; /* 20px between cols when used as left sidebar */
}
div.C_flex4 {
position:relative; flex:25%; align-self:flex-start; order:1;
max-width:250px; min-width:250px; margin:4px 20px 4px 4px; /* 20px between cols when used as left sidebar */
}
/* flex group 3 - 70%, 1000px + 12px between */
div.C_small2 {
position:relative; flex:40%; align-self:flex-start;
max-width:460px; margin:4px 5px 4px 5px;
}
div.C_small3 {
max-width:360px; min-width:300px;
}
div.C_small4 {
max-width:200px; min-width:170px;
}
/* order flex columns */
div.column1 {
order:1;
}
div.column2 {
order:2;
}
div.scroll2,
table.scroll2 {
overflow-x:scroll;
}
div.C_inline {
max-width:440px; min-width:440px;
margin:0;
}
div.C_flex {
position:relative; flex:0 1 470px; align-self:flex-start;
}
/* user homepage, javascript links */
div#zlinks {
position:relative;
}
div#xurls { /* html links */
position:relative;
display:none;
}
div#utg,
div#ufr {
display:none;
}
div#pg2 {
position:absolute;
width:100%; max-width:600px;
margin:0; padding:10px 0 40px 0;
background:#fff;
visibility:hidden;
box-shadow:0px 3px 5px rgba(0,0,0,0.5);
z-index:95;
}
div#pg2 div {
margin:0 20px 0 20px;
}
div#ztags div,
div#zfriends div {
margin:0;
}
/* profile / preferences */
div.linkgroup {
display:none;
}
/* friends lists */
div.frL {
}
div#fr1 div,
div#fr2 div,
div.frL div {
margin:6px 2px 8px 2px;
}
div.frL div p {
position:relative;
display:inline-block;
vertical-align:middle;
margin:0; padding:2px 10px 2px 2px;
font-size:16px;
}
div.frL a,
div.frL a:link,
div.frL a:hover {
font-size:20px; text-decoration:none;
}
div.frL img {
width:64px; height:64px;
border:3px solid #f0f0f0;
border-radius:50%;
vertical-align:top;
margin:0; padding:0;
box-shadow:1px 1px 0 rgba(0,0,0,0.2);
}
/* add_popup.php, v09.26.2020 */
#pag_addpopup {
text-align:left;
}
#popnav {
position:absolute; width:240px; top:10px; right:10px;
text-align:right;
}
#xmainpop {
position:relative; width:100%; min-width:460px; max-width:640px;
text-align:left; margin:0 auto 0 auto; padding:10px 0 140px 0;
}
#xmainpop h1 {
text-transform:none; margin:4px 0 0 10px;
}
#xmainpop p.p2 {
margin:4px 0 0 10px;
}
#xmainpop #xurl,
#xmainpop #xtitle,
#xmainpop #xnotes,
#xmainpop #xtags {
width:98%;
}
#xmainpop table.pop {
width:98%;
}
#mainpop div.xbox2 {
width:98%;
}
/* settings pages */
body.sp1 #pagebody {
margin:66px 0 0 0;
}
body.sp1 #hdm {
position:fixed; left:0; top:0; min-height:66px; width:100%;
margin:0; padding:0;
text-align:left;
background:#f4f4f4;
border-bottom:1px solid #ccc;
z-index:97;
}
#hdm h1 {
padding:12px 0 0 0;
}
#pag_settings #saveBtnFixed {
position:fixed; flex:none; left:0; bottom:0; min-height:80px; width:100%;
margin:0; padding:0;
justify-content:center;
background:#f4f4f4;
border-top:1px solid #ccc;
z-index:99;
}
#pag_settings #saveBtnFixed p {
padding:25px 0 0 0;
}
#pag_settings #footer {
display:none;
}
#pag_settings #container {
padding-bottom:200px;
}
/* Design215 Drop Menu, v11.22.2012 */
#xtooltip {
position:absolute; left:-200px; top:5px; z-index:98;
margin:0; padding:0 0 7px 0;
}
#xtooltip p.tt1,
#xtooltip p.tt2 {
text-align:left; margin:0; padding:12px 12px 12px 16px;
background:#ffffee;
border-radius:3px; border:1px solid #222;
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
}
/* Linkatopia tooltip menus */
div.tipmenu {
position:absolute; visibility:hidden;
width:160px; min-width:160px; top:-999em; /* removes the extra vertical space from the long menu */
text-align:left; margin:0; padding:12px 12px 12px 12px;
background:#ffffee;
border-radius:3px; border:1px solid #222;
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
}
div.tipmenu p {
margin:0; padding:0 0 12px 0;
}
#menu1 { /* mobile menu */
position:fixed; visibility:hidden; z-index:99;
width:400px; top:-999em; /* removes the extra vertical space from the long menu */
text-align:left; background:#fff; color:#000; padding:8px 4px 12px 4px;
border-radius:2px; border:1px solid #666;
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
}
div.menucol {
position:relative; width:32%; margin:0; padding:0;
display:inline-block; vertical-align:top;
}
div.menucol2 {
position:relative; width:60%; margin:0; padding:0;
display:inline-block; vertical-align:top;
}
div.menucol p,
div.menucol2 p {
margin:0; padding:0;
}
div.menucol p.ld {
border-right:1px solid #aaa;
}
#menu2 { /* context menu */
position:absolute; visibility:hidden; z-index:99;
width:280px; top:-999em; /* removes the extra vertical space from the long menu */
text-align:left; background:#fff; color:#000; padding:8px 4px 12px 4px;
border-radius:2px; border:1px solid #666;
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
}
div.dropx {
text-align:left;
margin:0; padding:0;
}
div.dropx p {
font-family:'Source Sans Pro',arial,sans-serif; font-size:18px;
text-transform:uppercase; color:#000;
}
div.dropx a {
position:relative; display:block; height:24px;
font-family:'Source Sans Pro',arial,sans-serif; font-size:18px;
text-transform:uppercase; letter-spacing:1px;
font-weight:normal; color:#000;
margin:0; padding:6px 3px 6px 12px;
}
div.dropx a:link,
div.dropx a:visited {text-decoration:none; color:#000;}
div.dropx a:hover {
text-decoration:none; color:#fff; background:#000099;
}
div.dropx span.c2 {
position:relative;
font-family:'Source Sans Pro',arial,sans-serif; font-size:12px;
text-transform:uppercase; letter-spacing:1px;
font-weight:normal; color:#000;
margin:0; padding:6px 3px 0px 18px;
}
div.xclearmenu { /* content under columns */
position:relative; clear:both; width:400px;
margin:0; padding:0;
}
/* replace or resize images */
img.rp50 { /* small footer logo v12.29.2009 */
position:relative; margin:-12px 0 0 0; top:12px;
}
@media only screen and (max-width:980px) {
/* Style adjustments for viewports that meet the condition */
p,dl,ul,ol,table td,pre.p2 {
font-size:16px;
}
p.p1,p.r1 {
font-size:16px;
}
p.p2,p.r2 {
font-size:16px;
}
p.p3,p.p4,p.blog,p#bio,blockquote {
font-size:18px;
}
p.p5,p.c1,p.leader {
font-size:18px;
}
a.k {
font-size:18px;
}
h1#user {
font-size:28px;
}
.boxBlur,
.boxBlurDisable,
.boxBlur:focus,.boxFocus,
.boxBlurR,
.boxBlurR:focus,.boxFocusR,
.boxError,.boxErrorR,
.boxRequired,.boxRequiredR,
.boxRequired:focus,.boxRequiredR:focus,
.boxClear {
font-family:verdana,helvetica,sans-serif; font-size:22px;
padding:4px 6px 4px 6px;
}
div.formbox,
div.formfield {
margin:10px 10px 2px 6px; padding:0;
font-size:14px;
}
div.formbox {
margin:0 10px 2px 6px;
}
div.formbox p,
div.formfield p {
margin:0; padding:0;
font-size:16px;
}
#headerbox {
height:90px;
width:100%; max-width:100%;
}
body.userpage #headerbox {
height:180px;
}
body.userpage #pagehead div.navbar,
#pagehead div.navbar { /* width and height necessary for image replacement */
position:absolute; top:12px; left:auto; right:70px; width:160px; height:50px;
text-align:right; margin:0; padding:0;
}
#pagehead div.navbar img#foldicon {
display:none;
}
#pagehead div.navbar svg#logo {
width:150px; height:50px; margin:0 6px 0 0;
}
div.ava img {
width:180px; height:180px;
}
#mnav {
right:24px; top:12px;
}
#pagebody {
min-height:200px;
margin:0;
}
body.userpage #pagebody {
margin:190px 0 0 0;
}
div.contentbox {
}
div.contentbox2 {
justify-content:left;
}
div.C_med {
max-width:720px; min-width:96%; margin:4px 10px 4px 10px;
}
div.C_title,
div.C_large {
width:96%;
margin:4px 10px 4px 10px;
}
div.C_large2 {
width:98%;
margin:0 2px 0 4px;
}
div.C_small2 {
border-left:none; padding:40px 0 0 0;
}
div.C_small3 {
max-width:420px;
}
div.C_flex1 {
flex:96%;
max-width:950px; min-width:95%; margin:4px 10px 4px 10px;
}
div.C_flex2 {
flex:96%;
max-width:90%; min-width:320px; margin:4px 10px 4px 10px;
}
div.C_flex3 {
order:3;
max-width:420px; min-width:350px; margin:4px 10px 4px 10px;
}
div.C_flex4 {
max-width:420px; min-width:350px; margin:4px 10px 4px 10px;
}
div.C_small4 {
max-width:200px; min-width:180px;
}
p.xblock,
div.C_small4 p {
line-height:180%;
}
img.zthumb {
width:138px;
}
div.art img {
background:none; padding:0;
}
div.fnav {
top:14px; left:20px;
}
div.xsocial {
top:44px; left:10px;
}
div.fcredits {
width:60%; top:14px; right:10px;
}
br.nb {display:block;}
/* menus */
div.dropx a {
font-family:'Source Sans Pro',arial,sans-serif; font-size:24px;
text-transform:uppercase; letter-spacing:1px;
height:24px; font-weight:normal; color:#000;
margin:0; padding:12px 3px 12px 20px;
}
}
@media only screen and (max-width:720px) {
#pagehead {
position:relative;
}
body.userpage #pagebody {
margin:0;
}
/* styles for iframe popups */
p.xblock,
div.C_small4 p {
font-family:'Source Sans Pro',arial,helvetica,sans-serif; font-size:18px;
line-height:180%;
}
}
@media all and (orientation:landscape) and (max-width:800px) {
#pagehead {
position:relative;
}
body.userpage #pagebody {
margin:0;
}
}