*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img{max-width:100%;} #waterfall { /* position: fixed; height: 100%; width: 175px; xxfont-size: 12px;*/ } #waterfall .waterfallTitle { color: rgb(51, 51, 51); font-size: 16pt; font-size: 1.3em; /* for some reason it needs this and not the line above*/ margin-top: 5px; line-height: 19px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; } #waterfall a:hover { color: red; text-decoration: none; } .waterfall>div { background: white; margin: 0 7px 7px 0; padding: 15px; box-shadow: 0 1px 5px -1px rgba(170, 180, 190, 1); border-radius: 5px; /*outline: 1px solid rgba(255,100,130,.2);*/ } .waterfall>div:hover { outline: 1px solid rgba(255, 100, 130, 1); } .wfForum-show { position: fixed; top: 5px; left: 0%; color: white; font-size: 30px; background: #333; border-top-right-radius: 10px; border-bottom-right-radius: 10px; width: 30px; margin-top: -15px; height: 40px; line-height: 35px; text-align: center; opacity: .15; font-weight: normal; transition: .15s linear opacity; cursor: pointer; text-shadow: 1px 3px 0px rgba(0, 0, 0, 1); z-index: 3; } .wfForum-show:hover { opacity: 1; } #savedSearchList { margin-right:14px; } .avatar { float: right; padding: 0px 2px 5px 10px; font-size: 85%; width: 70px; cursor: pointer; } .avatarcontact { float: left; padding: 0px 2px 5px 10px; font-size: 85%; width: 70px; height: 180px; cursor: pointer; } #postAvatar span.glyphicon.glyphicon-user,.responseAvatar span.glyphicon.glyphicon-user { width: 40px !important; font-size: 40px !important; height: 40px !important; color: lightgrey !important; font-family: Glyphicons Halflings !important; } .avatar span.glyphicon.glyphicon-user { color: lightgray; width: 40px; font-size: 40px; height: 40px; } .bubble { position: relative; width: auto; height: 12px; padding: 1px; background: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: #7F7F7F solid 1px; color: gray; } span.badge { cursor: pointer; } /* footer format */ #footer { background: #ffffff; border-top: 1px solid #ff4b02; color: #333; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); } .box { /* width:800px; */ margin: 0 auto; } /* End footer format */ .title { font-size: 18px; font-weight: bold; color: #000000; padding-bottom: 2px; } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (max-width: 989px) { .title { font-size: 16px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 380px) and (max-width: 767px) { .title { font-size: 14px; } } .text { font-size: 12px; } .author { font-weight: bold; } .timestamp { font-family: arial, helvetica, sans-serif; font-size: 1.0em; color: #666666; padding-bottom: 2px; } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 300px) and (max-width: 767px) { .timestamp { font-size: 10px; } } .lastUpdatedBy { padding-left: 5px; font-weight: bold; } .lastUpdated { font-weight: bold; } span.badge.highlighted { background-color: red; } @media only screen and (max-width: 1260px) { .container-fluid { margin-right: 0px; padding-right: 0px; margin-left: 0px; padding-left: 0px; max-width:1260px; } #searchDropDown { /*display: inline-block;*/ margin-left: 5px; width: 1000px; } } @media only screen and (min-width: 1260px) { .container-fluid { width:1260px; margin: 0 auto; padding-right:0px; padding-left: 0px; border-left: 2px solid #323949; border-right: 2px solid #323949; } } .page { padding: 10px 15px; padding-top: 65px; margin: 0; background-color: rgba(240, 242, 244, 1); background-image: linear-gradient(to top, rgba(240, 242, 244, 1), rgba(210, 214, 218, 1)); margin: 0px 0px 0px 218px; } #wfForum { margin-top: 60px; /* margin-left: -6.8px; */ margin-left: 8px; padding-bottom: 10px; background-color: rgba(240, 242, 244, 1); width: 225px; position: fixed; height: 100%; -webkit-overflow-scrolling: touch; overflow: scroll; } @media only screen and (min-width: 1260px) { #wfForum { margin-left: 0px; } } #wfForum::-webkit-scrollbar { display: none; } .wfForumItem { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 5px; padding-bottom: 15px; padding-top: 15px; font-weight: bold; text-shadow: 0 1px 0 #000; font-family: sans-serif; text-decoration: none; background: #323949; color: #ccc; text-indent: 20px; } .wfForumItem a { font-weight: bold; text-shadow: 0 1px 0 #000; font-family: sans-serif; text-decoration: none; color: #ccc; } .wfForumSection { background-color: rgba(255, 255, 255, 1); padding-top: 20px; padding-bottom: 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 15px; font-weight: bold; text-shadow: 0 1px 0 #000; font-family: sans-serif; text-decoration: none; background: #323949; color: #fff; text-indent: 0px; } .wfForumItemSelected { background-color: rgba(240, 24, 24, 1); } #wfForum.closed { left: -235px; } .page.closed { margin-left: 0px; } /* top menu */ .topMenu { border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; font-family: sans-serif; /* text-align: center; */ font-size: 16pt; font-weight: bold; background: #323949; height: 60px; padding: 3px; position: fixed; top: 0px; right: 8px; left: 8px; z-index: 22; max-width:1260px; } @media only screen and (min-width: 1260px) { .topMenu{ width:1260px; margin: 0 auto; left: 0px; right:0px; border-left: 2px solid #323949; border-right: 2px solid #323949; } } .topMenu .forumToggle { /*background-image: url("/img/pubzap/open.png");*/ background-repeat: no-repeat; margin-left: 5px; margin-top: 15px; height: 20px; width: 20px; float: left; } .topMenu .leftComponents { display: inline-block; vertical-align: top; height: 60px; width: 37px; /*float:left;*/ } .topMenuTitle { display: inline-block; vertical-align: top; /*color:red;*/ height: 60px; /*width: calc(100% - 165px);*/ margin-top: 0px; margin-bottom: 0px; line-height: 1.42857143; } .topMenuTitle h1{ display: inline-block; vertical-align: top; font-size: 12pt; font-weight: bold; font-family: sans-serif; margin-top: 8px; margin-bottom: 0px; vertical-align: top; } #topMenuHome:hover, #topMenuHome:link, #topMenuHome:visited, #topMenuForum:hover, #topMenuForum:link, #topMenuForum:visited{ color:rgb(204, 204, 204); text-decoration:none; } @media only screen and (max-width: 400px) { .topMenuTitle { /*margin-left:-5px;*/ padding-top: 10px; font-size: 10pt; overflow: hidden; } .topMenu .subtitle { font-size: 8pt; } } .topMenuTitle h1 { /*width: calc(100% - 160px);*/ margin-left: 0px; font-size: 11pt; margin-top: 5px; } .topMenuTitle div { width: 10px; } } @media only screen and (max-width: 320px) { .topMenuTitle { /*margin-left:-5px;*/ padding-top: 10px; font-size: 10pt; overflow: hidden; } .topMenu .subtitle { font-size: 8pt; } } .topMenu .backButton { /* float:left;*/ margin-top: 10px; background-color: #323949; border-color: #323949; padding-left: 5px; } .topMenu .backButton span { height: 20px; width: 20px; font-size: 21px; } .topMenu .account { display: inline-block; vertical-align: top; float: right; font-size: 12pt; margin-top: 0px; margin-right: 5px; margin-top: 12px; z-index: 20; } .topMenuButton { background-color: #323949; /*border-color: #323949;*/ } #searchDropDown { width: 220px; color: grey; } #searchDropDown li { margin-top: 5px; margin-bottom: 5px; } .dropdown-menu>li { color: yellow; background-color: rgb(40, 96, 144); } .dropdown-menu,.dropdown-menu>li>a { color: white; background-color: rgb(40, 96, 144); } @media only screen and (min-width: 480px) { #searchDropDown { width: calc(90vw - 75px); } } @media only screen and (min-width: 1260px) { #searchDropDown { width: 1000px; } } #searchDropDown div { display: inline-block; margin-left: 5px; width: calc(100% - 55px); } #searchDropDown button { margin-right: 5px; float: right; border-color: #323949; } #searchDropDown .form-control { width: calc(100%); } #loginDropDown { padding: 5px; background-color: #286090; } #loginDropDown label { /*color: black;*/ } #loginDropDown li.dropdown-header { color: white; } /* popover */ #wf.popover { z-index: 1; hidden: true; } .wf.popover.show { z-index: 15; hidden: false; } #wf.popover.content { } #wf.popover.close { } .wfImg { margin-bottom:5px; } .forumPostPage { background-color: white; background-image: none; } #forumPostContent font *,#forumPostContent font,#forumPostContent span *,#forumPostContent span,#forumPostContent strong *,#forumPostContent p,.responseText font *,.responseText font,.responseText span *,.responseText span,.responseText strong *,.responseText p,.responseText blockquote,#forumPostContent blockquote { font-family: 'Helvetica Neue', 'HelveticaNeue-Regular', 'Helvetica Neue-Regular', 'Helvetica', 'Arial', 'sans-serif' !important; /* font-weight: normal !important; */ font-style: normal !important; font-size: 14px !important; color: #000000 !important; } #forumPostContent h1 { font-family: 'Helvetica Neue', 'HelveticaNeue-Regular', 'Helvetica Neue-Regular', 'Helvetica', 'Arial', 'sans-serif' !important; font-weight: bold !important; font-style: normal !important; font-size: 18px !important; line-height: 19px !important; color: #000000 !important; } .response { margin-bottom: 15px; } .responseTitle { font-size: 15px; margin-top: 5px; line-height: 19px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; display: inline; } .responseText { /* background-color:whitesmoke; */ /*padding:5px;*/ } .responseAvatar { display: inline-block; vertical-align: top; width: 40px; cursor: pointer; } .responseAvatar img { max-width: 40px; } .responseAvatar.glyphicon.glyphicon-user { color: lightgray; width: 40px; font-size: 35px; height: 40px; } .responseRest { display: inline-block; vertical-align: top; width: calc(100% - 50px); border-left: 2px; border-left-style: solid; border-left-color: lightgray; padding-left: 3px; } span.glyphicon.glyphicon-camera { color: grey; } span.like.glyphicon.glyphicon-heart { color: grey !important; font-family: Glyphicons Halflings !important; } span.liked.glyphicon.glyphicon-heart { color: red !important; font-family: Glyphicons Halflings !important; } span.glyphicon.glyphicon-file { color: grey; } span.glyphicon.glyphicon-comment { color: grey; display: block; float: left; clear: both; margin-top: 4px; cursor: pointer; } span.glyphicon.glyphicon-comment span { margin-left: 4px; vertical-align: top; } span.responseEdit{ color: grey; display: block; clear: none; float: left; margin-left: 5px; margin-top:4px; } span.responseEdit span { margin-left: 4px; vertical-align: top; } span.responseEdit a:hover, span.responseEdit a:link, span.responseEdit a:visited{ color: grey; text-decoration:none; } span.glyphicon.glyphicon-asterisk { color: red; margin-left: -39px; } span#accountNotifyU.glyphicon.glyphicon-asterisk { margin-left: -16px } span#PMNotifyU.glyphicon.glyphicon-asterisk { margin-left: -16px } .xtitle span.glyphicon.glyphicon-asterisk { color: red; margin-left: 0px; } .response span.glyphicon.glyphicon-asterisk { color: red; margin-left: 0px; } .OldrelatedPosts { background-color: rgb(211,211,211); margin-right:8px; padding-left:4px; padding-right:4px; } .relatedPosts { position:relative; margin:0 5px 0 10px; display:inline-block; height:36px; padding: 0 15px 0 10px; font-size: 25px; line-height:35px; cursor: pointer; font-weight: 100; margin: 20px 25px; background:#f3f3f3; transition: background 0.3s; } .relatedPosts:after{ position:absolute; content:""; right:-19px; width: 1px; height:0px; border-left:18px solid #f3f3f3; border-top: 20px solid transparent; border-bottom: 20px solid transparent; transition: border 0.3s; } .relatedPosts:hover{ background: gray; color:#ffffff; } .relatedPosts:hover:after{ border-left-color:gray; } span#accountNotify.glyphicon.glyphicon-user.selected { color: red; } .quickReply { display: block; float: left; clear: both; background-color: lightgrey; /* border-style: solid; border-width: 1px; */ width: 100%; margin-top: 5px; padding: 5px; } .quickReply .buttonGroup { float: right; margin-top: 5px; } .quickReply button { /*float:right;*/ } #pFeatureThread { border-top: lightgrey solid .5px; margin-top: 10px; padding-top: 10px; } #pThreadMover { border-top: lightgrey solid .5px; margin-top: 10px; padding-top: 10px; } #loginForm { margin-top: 20px; width: 100%; text-align: center; } #loginUnPw { text-align: left; padding-right: 30px; padding-bottom: 15px; } #loginFb { text-align: left; vertical-align: top; } a.relatedPosts{ background-color: lightgray; margin-left: 4px; margin-right: 4px; padding: 5px; padding-left:8px; padding-right:8px; border-radius: 5px; } /* #cssmenu >ul { overflow-y: scroll; max-height:calc(100% - 40px); }*/ .responseReply{ } .responseRestReply{ } .responseReplyTitle{ display: inline-block; width: 100%; margin-top: 20px; margin-bottom: 20px; color: gray; } #avatarContent{ display: flex; align-items: top; flex-flow: row; flex-wrap: wrap; } #avatarContent>div{ padding:5px; text-align:center; } /* wf.youtube.css - this blob should probably be loaded from wf.header, just after the line where wf.css is loaded. */ /* These definitions support the responsive YouTube player, and should be loaded as part of our site's main stylesheet. For testing, they can be loaded in the head section of watch.header, following the main stylesheets. */ .youtube-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .youtube-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto } div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("png/removed.png") no-repeat; } #youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }