/* Set padding to keep content from hitting the edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* =============== GLOBAL */ body { background: #22282e; color: #aaaaaa; font-family: 'PT Sans', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Titillium Web', sans-serif; } h2 .label { font-size: 50%; vertical-align: middle; } .label-primary { background-color: #44505c; } small { color: #999999 !important; } a { color: #cccccc; } a:hover, a:active, a:focus { color: #cccccc; } hr { border-color: #393e43; display: block; border-top: 1px solid #393e43; } .thumbnail { border: 1px solid #393e43; background: #292e33; } .thumbnail .caption { color: #aaaaaa; text-align:center; } /* =============== FOOTER */ footer { margin-top: 40px; } footer #footer-disclaimer { font-style: italic; color: #666666; } /* =============== GLOBAL BUTTONS */ .btn { color: #ffffff; text-shadow: 0 1px 0 #37393b; background-image: -webkit-linear-gradient(top,#6f7377 0,#595e62 100%); background-image: -o-linear-gradient(top,#6f7377 0,#595e62 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#6f7377),to(#595e62)); background-image: linear-gradient(to bottom,#6f7377 0,#595e62 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f7377', endColorstr='#595e62', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-repeat: repeat-x; border-color: #6f7377; } .btn:focus, .btn:hover { background-color: #595e62; color: #ffffff; text-shadow: 0 1px 0 #37393b; border-color: #8B8F93; } .btn-default { color: #dedede; } .btn-primary { color: #ffffff; background-image: -webkit-linear-gradient(top,#108bd2 0,#0969ac 100%); background-image: -o-linear-gradient(top,#108bd2 0,#0969ac 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#108bd2),to(#0969ac)); background-image: linear-gradient(to bottom,#108bd2 0,#0969ac 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#108bd2', endColorstr='#0969ac', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-repeat: repeat-x; border-color: #108bd2; } .btn-primary:focus, .btn-primary:hover { color: #ffffff; background-color: #0969ac; border-color: #31AAEF; } .btn-primary:active, .btn-primary:active { color: #ffffff; background-color: #0969ac; border-color: #31AAEF; } .btn-success { background-image: -webkit-linear-gradient(top,#5cb85c 0,#419641 100%); background-image: -o-linear-gradient(top,#5cb85c 0,#419641 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641)); background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-repeat: repeat-x; border-color: #3e8f3e } .btn-success:focus, .btn-success:hover { background-color: #419641; background-position: 0 -15px } .btn-success.active,.btn-success:active { background-color: #419641; border-color: #3e8f3e} .battle-net-region-card-link:hover { text-decoration : none; } .battle-net-region-card-link img { opacity: 0.5; transition: opacity .15s ease-in-out; } .battle-net-region-card-link:hover img { opacity: 1; text-decoration: none; } .battle-net-region-card-link h3 { transition: color .15s ease-in-out; } .battle-net-region-card-link:hover h3 { color: #ffffff; } /* =============== GLOBAL ALERTS */ .alert { background: #292e33; border: 1px solid #393e43; box-shadow: none; color: #8593a0; text-shadow: none; } .alert-warning { background: #292e33; border: 1px solid #393e43; box-shadow: none; color: #8593a0; text-shadow: none; } /* =============== GLOBAL PROGRESS BAR */ .progress { background: #292e33; border: 1px solid #393e43; height: 24px; } .progress-bar { height: 23px; } .progress span { position: inherit !important; } /*.progress-bar { background-image: -webkit-linear-gradient(top,#42474d 0,#383d43 100%); background-image: -o-linear-gradient(top,#42474d 0,#383d43 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#42474d),to(#383d43)); background-image: linear-gradient(to bottom,#42474d 0,#383d43 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff42474d', endColorstr='#ff383d43', GradientType=0); background-repeat: repeat-x; }*/ /* =============== GLOBAL FORMS */ .form-control { background: #292e33; border-color: #565a5e; color: #c9cbcc; } label { font-weight: normal; } /* =============== GLOBAL NAV */ .navbar { background: #171c22; color: #aaaaaa; font-family: 'Titillium Web', sans-serif; margin-bottom: 0; border-bottom: 1px solid #2d3339; } .navbar-brand { background: url("images/logo.png") no-repeat 0 50%; width: 245px; height: 100px; background-size: contain; text-indent: -9999px; padding: 0; } ul.navbar-nav { margin-top: 30px; margin-left: 30px; } ul.navbar-nav li { font-size: 1.2em; } .navbar-nav>li>a { color: #b6b6b6; } .navbar-nav>li>a:hover, .navbar-nav>li>a:focus { background-color: #22282e; color: #ffffff; } /*.nav-social { opacity: 0.25; } .nav-social:hover, .nav-social:hover { opacity: 1.0; }*/ /* =============== PROFILE NAV */ .navbar-profile ul.navbar-nav { margin: 0; } .navbar-profile h2 { margin: 0; padding: 8px 15px; } /* =============== GLOBAL NAV REGISTER CTA */ #registerLink { background: #12aaeb; color: #ffffff; text-shadow: none; } #registerLink:hover { background: #1cb4ee; } /* =============== GLOBAL JUMBOTRON */ .container .jumbotron { border-radius: 0; background: #44505c; position: relative; border: 1px solid #64707b; margin-bottom:10px; } .jumbotron .label { position: absolute; top: 20px; right: 20px; font-size: 1.1em; padding: 10px; font-weight: normal; background: #64707b; color: #b2b8bd; } .jumbotron h1 { font-size: 2.4em; } .jumbotron p { font-size: 1.2em; } /* =============== GLOBAL TABLES */ .table > tbody > tr> td { border-top: 1px solid #393e43; vertical-align:middle; } .table > thead:first-child > tr:first-child > th { border-bottom: 2px solid #616569; } .table > tfoot > tr > td { border-top: 1px solid #616569; } .right_aligned { text-align:right; } .table > tbody > tr:hover { background-color: #383D43; } /* =============== CHARITY ITEM BOXES */ .charity-list:nth-child(even) .event-thumbnail { margin-left: 10px; } .charity-list { vertical-align: middle; } .event-thumbnail { border: 1px solid #393e43; clear: both; background: #292e33; height: 163px; padding: 15px; vertical-align: middle; } .event-thumbnail img { max-width: 100%; } .event-thumbnail div:first-child { padding: 0; } .event-thumbnail .caption { padding: 0 0 0 10px; margin: 0; } .charity-description h4 { font-weight: bold; padding-bottom: 10px; margin: 0; } .charity-description p { color: #aaaaaa; font-size: 0.9em; margin: 0; line-height: 1.5em; } .charity-description-large p { color: #aaaaaa; font-size: 1.2em; margin: 0; line-height: 1.5em; } .charity-description-large h4 { font-weight: bold; padding-bottom: 10px; margin: 0; font-size: 2.5em; } .charity-selector { padding: 0 14px 0 14px; } .charity-selector .selected { border: 1px solid #727c86; background: #3e454d; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } /* =============== REGISTRATION FORM */ section.form, section#loginForm, section#socialLoginForm, section#existingLogins { padding: 20px; background: #1e2328; margin-bottom: 20px; } section.form hr, #loginForm hr, #socialLoginForm hr, #existingLogins hr { border-top: 3px solid #22282e; display: block; margin: 20px -20px 20px -20px; } section.form h2, section.form h3, section.form h4, #loginForm h2, #loginForm h3, #loginForm h4, #socialLoginForm h2, #socialLoginForm h3, #socialLoginForm h4, #existingLogins h2, #existingLogins h3, #existingLogins h4 { margin: 0; } section.form .validation-summary-errors, #loginForm .validation-summary-errors, #socialLoginForm .validation-summary-errors, #existingLogins .validation-summary-errors { margin-bottom: 20px; } div#RegistrationPrivacyStatement { margin-top: 10px; font-size:small;} #existingLogins table td { border: none; vertical-align: middle; } #existingLogins table tr:hover { background: none; } .charity-select-col { display:table-cell; } .charity-selector { display:table; } /* =============== EVENT DETAILS */ #event-register h3 { margin: 12px; } #event-register { padding: 20px; margin-top:70px; } #event-register p { margin: 0; } #event-splash { position: relative; padding: 0; background: no-repeat; background-size: cover; height: 250px; } #event-splash p { font-size: 1px; text-indent: -9999px; } .event h3 { font-size: 1.3em; } .event-callout-label { font-size: 2em; } #event-social { position: absolute; bottom: 0; right: 0; padding: 10px; } #home-splash { padding: 0; padding-top: 160px; padding-bottom: 40px; background: url("images/games/dota2/header-home-dota2.png") no-repeat center top; } /* =============== DEBUG PANEL */ .debug_details { margin:10px; padding:10px; background-color:lightgrey; font-family:Consolas; } .debug_details > h1 { display:block; font-weight:bold; } .debug_details > ul { list-style:none; } .debug_details_key { display:inline-block; width:250px; text-align:right; } .debug_details_value { width:150px; text-align:left;} .debug_panel { width:100%; position:fixed; bottom:0px; left:0px; padding:10px; background: #888888; z-index: 99999; font-size:small; } .debug_panel_button { color:black; } .debug_buttons_container { text-align:right; } .debug_loading_gif { display:none; } /* =============== STREAM PANEL */ .player_stream_button { display:inline; cursor:pointer; border:thin; margin:10px; } /* =============== PLEDGE SUMMARY */ /* Styles for the control that shows a donor the amount he owes to a given charity */ /*.pledge_summary_group { width:100%; border:thin solid black; } .pledge_summary_group_completed { background-color: #90e8c3; color: #007853; } .pledge_summary_group_incomplete { background-color: #fcddde; color: #9a3738; }*/ /* The progress bar that's displayed on the user's private profile showing how many wins a player has achieved. */ .pledge_summary_progress { width:100%; text-align:center; } .pledge-summary-player-column { width:28%; min-height:60px; } .pledge-summary-amount-per-win- { width:20%; min-height:60px; } .pledge-summary-total-column { width:12%; min-height:60px; } .pledge-summary-wins-column { width:40%; min-height:60px; } .pledge-complete-text-completed { color: lightgreen; } .pledge-complete-text-incomplete { color: salmon; } .user-profile-picture-container { display:inline; } .profile-about-me { font-style:italic; } textarea.edit-about-me { height:12em; } /* Base class for all progress controls. .progress is the outer element that contains a .progress-bar which fills up to the required amount */ .progress { margin:5px; position:relative; } .progress span { position: absolute; width:100%; text-align:center; } .progress-bar { position:absolute; } /* =============== EVENT SUMMARY PAGE */ .player_list_wins_progress { width:100%; text-align:center; } .sc2_event_player_list_username_column { width:20%; min-height:60px; } .sc2_event_player_list_wins_column { width:40%; padding-right:2em; } .sc2_event_player_list_race_column { width:20%; } .sc2_event_player_list_league_column { width:20%; } .event_summary_player_list_table { width:100%; } .event_player_list_featured_column { width:32px; height:67px; } /*SCAFFOLDING - feel free to delete this, it's just for my benefit!*/ .event_summary_banner { background-image:url('/Content/images/games/StarCraft/lotvsplash2.png'); background-repeat: no-repeat; background-position:top right; } .about-content p { padding-left:3em; } .how-it-works-glyph { padding-right:10px; } .loading-icon { background: url(images/loading.gif) no-repeat; height:32px; width:32px; background-size: contain; } .player-list-container { min-height: 10em; padding-top:1em; } /* ========== LEAGUE BADGES & ICONS */ .league-badge { display:inline-block; vertical-align:middle; } .grandmaster-badge { background: url(images/games/StarCraft/grandmaster.png) no-repeat; } .master-badge { background: url(images/games/StarCraft/master.png) no-repeat; } .diamond-badge { background: url(images/games/StarCraft/diamond.png) no-repeat; } .platinum-badge { background: url(images/games/StarCraft/platinum.png) no-repeat; } .gold-badge { background: url(images/games/StarCraft/gold.png) no-repeat; } .silver-badge { background: url(images/games/StarCraft/silver.png) no-repeat; } .bronze-badge { background: url(images/games/StarCraft/bronze.png) no-repeat; } .race-icon { display: inline-block; vertical-align: middle; } .small-race-icon { height:48px; width:48px; margin-left:-4px; margin-right:-4px; } .small-race-icon-terran { background:url(images/games/StarCraft/terran_icon_small.png); width:48px; } .small-race-icon-zerg { background:url(images/games/StarCraft/zerg_icon_small.png); } .small-race-icon-protoss { background:url(images/games/StarCraft/protoss_icon_small.png); } .small-race-icon-random { background:url(images/games/StarCraft/random_icon_small.png); } .small-badge { height:29px; width:25px; background-position-x:-145px; } .small-badge-top100 { background-position-y:0px; } .small-badge-top50 { background-position-y:-30px; } .small-badge-top25 { background-position-y:-60px; } .small-badge-top8 { background-position-y:-90px; } .medium-badge { height:50px; width:44px; background-position-x:-100px; } .medium-badge-top100 { background-position-y:0px; } .medium-badge-top50 { background-position-y:-50px; } .medium-badge-top25 { background-position-y:-100px; } .medium-badge-top8 { background-position-y:-150px; } .stream-container { width:1100px; height:200px; top:0px; padding-top:10px; margin-bottom:25px; background-color:#1e2328 } .stream-summary-box { background-color:#1e2328; padding:10px; margin: 10px; display:inline-block; } .stream-summary-preview { } .stream-summary-player-name { font-weight:bold; font-size:large;} /* =============== RESPONSIVE FIXES */ @media only screen and (max-width : 758px) { .charity-list:nth-child(even) .event-thumbnail { margin: 0 -15px 20px -15px; } .event-thumbnail img { float: left; margin-right: 10px; } }