/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
font-family:arial;
}
div {
display:block;
margin:0px;
}
#title {
float:left;
height:45px;
width:235px;
font-size:14pt;
font-weight:bold;
background:lightblue;
padding-top:25px;
padding-left:8px;
}
#scoreboard {
/*float:left;
display:inline;*/
height:105px;
width:520px;
position:absolute;
left:10px;
top:385px;
background-color:tan;
border:solid black 1px;
}
#scoresLabel {
-webkit-transform:rotate(-90deg) translate(-43px,-43px) ;
-moz-transform:rotate(-90deg) translate(-43px,-43px) ;
-o-transform:rotate(-90deg) translate(-43px,-43px) ;
transform:rotate(-90deg) translate(-43px,-43px) ;
float:left;
font-size:10pt;
font-weight:bold;
height:18px;
width:103px;
text-align:center;
background:antiquewhite;
margin-right:-69px;
}
#scoredate {
position:absolute;
top:2px;
width:100px;
left:219px;
text-align:center;
}
#scoreprev,#scorenext {
position:absolute;
top:2px;
border:thin solid black;
width:65px;
padding:2px;
font-size:9pt;
background:#CCCCCC;
}
#scoreprev:hover,#scorenext:hover {
background:lemonchiffon;
cursor: pointer;
}
#scoreprev {
left:21px;
text-align:left;
}
#scorenext {
left:447px;
text-align:right;
}
.gamescore {
display:inline;
float:left;
height:69px;
width:89px;
margin-top:25px;
margin-left:2px;
padding:2px;
border:solid thin blue;
background:antiquewhite;
position:relative;
}
.gamescore span:nth-child(2),.gamescore span:nth-child(5) {
position:absolute;
left:65px;
}
.gamescore span:nth-child(7),.gamescore span:nth-child(9) {
font-size:7.5pt;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
#rankings {
display:inline;
float:left;
position:relative;
background:goldenrod;
height:400px;
width:480px;
}
/*#detail {
display:inline;
float:left;
position:relative;
background:antiquewhite;
height:288px;
width:480px;
}*/
#bracket {
position:absolute;
width:520px;
top:504px;
left:10px;
border:thin green solid;
background:#ccc;
height:180px;
}
#bracket span,.series-box {
position:absolute;
display:inline;
font-size:9pt;
}
.west.R1 {
left:2px;
}
.west.R2 {
left:90px;
}
.west.R3 {
left:178px;
}
.R4 {
left:229px;
}
.east.R3 {
left:280px;
}
.east.R2 {
left:368px;
}
.east.R1 {
left:456px;
}
.round-title {
font-weight:bold;
width:60px;
text-align:center;
color:green;
}
.series-box {
height:30px;
border:thin solid black;
width:60px;
background:#333;
color:white;
}
.series-box:hover {
padding:-1px;
border:thin solid green;
background:lemonchiffon;
color:black;
cursor:pointer;
}
.s0 { top:20px;}
.s1 { top:40px;}
.s2 { top:60px;}
.s3 { top:80px;}
.s4 { top:100px;}
.s5 { top:120px;}
.s6 { top:140px;}
.round-title.west.R2,.round-title.east.R2 {
top:20px;
}
.round-title.west.R3,.round-title.east.R3 {
top:60px;
}
.round-title.R4 {
top:160px;
}
.series-box span {
position:absolute;
text-align:center;
}
.series-box.west :nth-child(3n+2){
left:40px;
width:20px;
}
.series-box.east :nth-child(3n+1){
left:20px;
width: 40px;
}
.series-box.west :nth-child(3n+1){
left:0px;
width:40px;
}
/*.series-box :nth-child(3n+1):hover{
color:yellow;
}*/
.series-box.east :nth-child(3n+2) {
left:0px;
width:20px;
}
#summaryx, #rosterx, #detail, #games {
border: 1px solid black;
border-collapse: collapse;
}
#summary td, #roster td {
border: 1px solid black;
}
#series2,#seriesgames,#games2 {
border-top:solid black 1px;
}
td,th {
text-align:center;
padding:3px;
}
th.w30 {
width:30px;
}
th.w160 {
width:160px;
}
tr.highlight,#roster td {
background-color:powderblue;
}
#roster .sorting,#summary .sorting {
background-color: mediumturquoise;
}
a,a:link,a:visited {
color:blue;
text-decoration:none;
}
a:hover {
background-color:blue;
color:white;
}
#roster tr td:nth-child(1),#roster tr td:nth-child(2),#roster tr td:nth-child(3),#summary tr td:nth-child(2) {
color:blue;
}
#roster tr td:nth-child(1):hover,#roster tr td:nth-child(2):hover,#roster tr td:nth-child(3):hover,#summary tr td:nth-child(2):hover {
background:lemonchiffon;
cursor:pointer;
}
td.inactive {
text-decoration: line-through;
}
.standings {
position:absolute;
left:540px;
top:5px;
height:35px;
vertical-align:bottom;
}
#summary {
position:absolute;
left:10px;
top:50px;
width:520px;
height:288px;
}
#roster {
position:absolute;
left:540px;
top:50px;
width:660px;
height:288px;
}
#series {
position:absolute;
left:10px;
top:696px;
width:520px;
height:150px;
border:solid black 1px;
background:#CCCCCC;
}
#series>div {
position:absolute;
left:5px;
top:40px;
height:68px;
width:110px;
text-align:center;
font-size:12pt;
font-weight:bold;
}
#series>div span:nth-of-type(2n) {
position:absolute;
left:20px;
width:45px;
text-align:center;
}
#series>div span:nth-of-type(2n+3) {
position:absolute;
left:75px;
}
#series>div span:nth-of-type(2n):hover {
background:lemonchiffon;
cursor:pointer;
}
#series table {
position:absolute;
left:120px;
width: 400px;
height: 148px;
font-size:9pt;
}
#series table td {
padding:2px;
text-align:left;
}
#series table tr:hover {
background:lemonchiffon;
cursor:pointer;
}
#series table tr td:nth-child(1) {
width:55px;
}
#series table tr td:nth-child(2) {
width:70px;
}
#series table tr td:nth-child(3),#series table tr td:nth-child(6) {
width:28px;
}
#series table tr td:nth-child(4),#series table tr td:nth-child(5),#series table tr td:nth-child(7) {
width:18px;
}
#series table tr td:nth-child(2) {
text-align:left;
}
#detail {
position:absolute;
left:540px;
top:380px;
width:660px;
height:500px;
overflow-y: auto;
}
.teamreport div,.playerlog div,.roundpicks div {
text-align:center;
margin-bottom: 8px;
margin-top:4px;
font-size:13pt;
font-weight:bold;
}
.teamreport table {
position:absolute;
left:30px;
width:auto;
}
.playerlog table {
position:absolute;
left:156px;
width:auto;
}
.roundpicks table {
position:absolute;
left:48px;
width:auto;
}
.teamreport table tr:nth-child(1),.playerlog table thead tr:nth-child(1),.roundpicks table tr:nth-child(1) {
background:#CCCCCC;
}
.teamreport table td,.teamreport table th,.playerlog table td,.playerlog table th,.roundpicks table th,.roundpicks table td {
padding-top:1px;
padding-bottom:1px;
width:25px;
border-top:thin solid black;
border-bottom:thin solid black;
}
.playerlog table tr td:nth-child(1),.playerlog table tr td:nth-child(2) {
width:120px;
}
.teamreport table tr td:nth-child(2),.teamreport table tr td:nth-child(8),.roundpicks table tr td:nth-child(2){
width:200px;
}
.clickable:hover {
background:lemonchiffon;
cursor:pointer;
color:blue;
text-decoration:underline;
}
.updatestamp {
position:absolute;
left:800px;
width:400px;
height:35px;
vertical-align:bottom;
text-align:right;
top:5px;
}
.title {
position: absolute;
left: 10px;
height:40px;
vertical-align:bottom;
width: 520px;
}
.gamescore:hover {
background:lemonchiffon;
cursor:pointer;
}
.gamesheet div:nth-child(3) {
position:absolute;
text-align:right;
left:505px;
width:130px;
top:4px;
font-size:12pt;
font-weight:bold;
}
.gamesheet div:nth-child(1) {
position:absolute;
text-align:left;
left:25px;
width:130px;
top:4px;
font-size:12pt;
font-weight:bold;
}
.gamesheet div:nth-child(2) {
position:absolute;
left:140px;
width:380px;
top:15px;
text-align:center;
font-size:16pt;
font-weight:bold;
}
.gamesheet div:nth-child(2) span:nth-child(2){
font-size:12pt;
margin-left:10px;
margin-right:10px;
}
.gamesheet table {
position:absolute;
top:54px;
left:25px;
width:610px;
border:none;
}
.gamesheet table tr td,.gamesheet table tr th {
text-align: left;
border:none;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
.injured {
margin-left:4px;
color:red;
font-weight:bold;
}