html *
{
font-size:14px;
font-family:SkyMedium,Arial,sans-serif;
}
.bar-1 {
background: #F7B334;
}
.full-width {
width: 100vw;
height: 100px;
margin-bottom: 40px;
background-color: red;
}
.bar-2 {
background: #A7A9AC;
}
.percentage-bar-header{
font-size:14px;
font-family:SkyMedium,Arial,sans-serif;
}
.lost{
background-color: #FF0000;
display:inline-block;
width: 14px;
height: 14px;
color: #fff;
line-height: 1em;
text-align: center;
font-weight: 700;
}
.w{
background-color: #3BA744;
display:inline-block;
width: 14px;
height: 14px;
color: #fff;
line-height: 1em;
text-align: center;
font-weight: 700;
}
.d{
background-color: #FF9900;
display:inline-block;
width: 14px;
height: 14px;
color: #fff;
line-height: 1em;
text-align: center;
font-weight: 700;
}
.colon{
background-color: #828282;
display:inline-block;
width: 14px;
height: 14px;
color: #fff;
line-height: 1em;
text-align: center;
font-weight: 700;
}
span.hipi1{
background-color: #339900;
display:inline-block;
width: 20px;
height: 14px;
color: #fff;
line-height: 1em;
text-align: center;
}
span.home{
background-color: #3B5998;
color: #FFFFFF;
height: 14px;
display:inline;
white-space:pre-wrap;
font-family:arial, sans-serif;
padding-left:5px;
padding-right:5px;
}
span.away{
background-color: #1DCAFF;
color: #000000;
height: 14px;
display:inline;
white-space:pre-wrap;
font-family:arial, sans-serif;
padding-left:5px;
padding-right:5px;
}
button {
padding: 5px 10px;
border: 1px solid #25682a;
background: #3FB449;
background: -webkit-gradient(linear, left top, left bottom, from(#3FB449), to(#25682a));
background: linear-gradient(to bottom, #3FB449 0%, #25682a 100%);
color: #fff;
font-weight: bold;
}
button:hover {
border: 1px solid #328e3a;
background: #5fc768;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, left bottom, from(#5fc768), to(#328e3a));
background: linear-gradient(to bottom, #5fc768 0%, #328e3a 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
cursor: pointer;
color: #000;
}
.percentage-bar{
position:relative
}
.percentage-bar-inner{
overflow:hidden;
height:23px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
background-color:#061737;
background-image:-moz-linear-gradient(top,#0d2d6c 0,#061737 100%);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#0d2d6c),color-stop(100%,#061737));
background-image:-webkit-linear-gradient(top,#0d2d6c 0,#061737 100%);
background-image:-o-linear-gradient(top,#0d2d6c 0,#061737 100%);
background-image:-ms-linear-gradient(top,#0d2d6c 0,#061737 100%);
background-image:linear-gradient(to bottom,#0d2d6c 0,#061737 100%);
font-family:SkyMedium,Arial,sans-serif
}
.percentage-bar__bar{
height:23px;
background-color:#1b52a7;
background-image:-moz-linear-gradient(top,#69a6dd 0,#1b52a7 100%);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#69a6dd),color-stop(100%,#1b52a7));
background-image:-webkit-linear-gradient(top,#69a6dd 0,#1b52a7 100%);
background-image:-o-linear-gradient(top,#69a6dd 0,#1b52a7 100%);
background-image:-ms-linear-gradient(top,#69a6dd 0,#1b52a7 100%);
background-image:linear-gradient(to bottom,#69a6dd 0,#1b52a7 100%);
-webkit-transition:width 1s;
-moz-transition:width 1s;
-ms-transition:width 1s;
-o-transition:width 1s;
transition:width 1s
}
.percentage-bar__bar.empty,.percentage-bar__bar.full{
border-right:none;
box-shadow:none
}
.percentage-bar__left{
position:absolute;
top:3px;
left:9px;
color: #FFF;
}
.percentage-bar__right{
position:absolute;
top:3px;
right:9px;
color: #FFF;
}
.table-controls {
margin-bottom: 10px;
padding: 10px 5px 0 5px;
background: #eee;
font-size: 14px;
}
.table-controls input, .table-controls select {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 10px;
border: 2px solid #3FB449;
background: #fafafa;
outline: none;
}
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.container {
margin: 5px;
}
*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td {
margin: 0;
padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
}
a {
color: #BA0707;
text-decoration: none;
}
a:hover {
color: #BA0707;
}
nav {
display: block;
background: #374147;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 8px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #f5f5f5;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 169px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}