/* Browser reset */
html, body, div, span, iframe, h1, h2, h3, h4, h5, p, img, form, label, table, tbody, tr, th, td {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1em; font-family: inherit; vertical-align: baseline}
a img, :link img, :visited img {border: 0}
html, textarea, input {font-family:"Trebuchet MS", Arial, Sans-Serif; margin: 0; text-shadow: #fff 0px 1px 0px}
html, body {height: 100%;}
body {font-size: 12px; color:#223540; background: #e9e9e9 url("/images/bkg.png") no-repeat; background-position:top center; height:100%; background-attachment:fixed;}
a {color: #cf2037; text-decoration: none; cursor: pointer}
a:active, a:focus {outline: none; -moz-outline-style: none}
a:hover {text-decoration: underline;}
a.active {color:#223540; text-shadow: #ccaaaa 0px 0px 6px;}
a.active:hover {text-decoration: none}
ul li {margin-bottom:4px}
p {margin: 0 0 8px 0; line-height: 1.3em}
h1, h2, h3, h4 {font-weight:bold, text-rendering:optimizeLegibility}
h1 {font-size: 26px; margin: 20px 0 16px 0}
h2 {font-size: 18px; margin: 16px 0 10px 0}
h3 { font-size: 15px; margin: 10px 0 8px 0; font-weight: normal}
h4 { font-size: 13px; margin: 8px 0 6px 0; font-weight: normal}
h1.first, h2.first, h3.first, h4.first, p.first {margin-top: 0px !important}
h1.pageHeading {border:1px solid #c6c7c9; margin: 8px auto 0 auto; overflow:hidden; position:relative}
h1.pageHeading span {text-shadow: #555 0px 1px 2px; color:#fff; line-height: 72px; text-indent: 18px; height:72px; display:block; border:1px solid #fff; background: #fff url(/images/boxes/big_heading_bkg.jpg) center center no-repeat}
#container {min-height: 100%; position:relative}
hr {height: 0px; border: none; border-top:1px solid #dcdede; border-bottom: 1px solid #f7f8f8; margin:0px -10px}
input[type=checkbox] {padding:0}
input[type=submit] {margin:0 6px; cursor: pointer; padding:0 22px; border:1px solid #fd4545; border-bottom:1px solid #ed1b1b; border-top:1px solid #fc7070; background: transparent url('/images/btn/big_bkg.png') center top; height: 33px; color: #fff; font-size:14px; font-weight:normal; text-shadow: #000 0px 1px 2px}
input[type=submit]:hover {background: transparent url('/images/btn/big_bkg.png') center center; text-decoration: none}
input[type=submit]:active {background: transparent url('/images/btn/big_bkg.png') center bottom;color:#eee; text-decoration: none}
a.buttonConnect {margin:0 auto;float:left; padding-left:27px; color:#fff; display:block; background: transparent url('/images/btn/connect_left.png') 0px 0px no-repeat; height: 31px; color: #fff; font-size:13px; font-weight:normal; text-shadow: #000 0px -1px 0px}
a.buttonConnect span {display:block; height:31px; padding:0px 10px; line-height: 31px; background: transparent url('/images/btn/connect_right.png') top right}
a.buttonConnect:hover {text-decoration: none; background-position: 0px -31px}
a.buttonConnect:hover span {text-decoration: none; background-position: right -31px}
a.btnBig {display:block; float:left; cursor: pointer; padding:0 0 0 50px; background: transparent url('/images/controls/btn_big_bkg.png'); color: #fff; font-size:14px; font-weight:normal; text-shadow: #000 0px 1px 1px}
a.btnBig span {text-align:center;margin-right:-4px; line-height:50px; height:50px; display:block; padding:0 50px 0 0; background: transparent url('/images/controls/btn_big_bkg.png') top right;}
a.btn {margin-right:4px; height:25px; line-height:25px; display:block; float:left; cursor: pointer; padding:0 0 0 20px; background: transparent url('/images/controls/btn_bkg.png'); color: #fff; font-size:12px; font-weight:normal; text-shadow: #000 0px 1px 1px}
a.btn span {position:relative; white-space: nowrap; text-align:center;margin-right:-4px; line-height:25px; height:25px; display:block; padding:0 20px 0 0; background: transparent url('/images/controls/btn_bkg.png') top right;}
a.btn.img span {padding-left:20px}
a.btn img {position:absolute; top:4px; left:-14px; margin-right:10px}
a.btn.skip, a.btn.skip span {background-image: url('/images/controls/btn_skip_bkg.png'); color:#223540; text-shadow: #fff 0px 1px 0px}
a.btnBig.facebook {display:block; float:left; cursor: pointer; padding:0 0 0 50px; background: transparent url('/images/controls/btn_big_facebook_bkg.png'); color: #fff; font-size:14px; font-weight:normal; text-shadow: #000 0px 1px 1px}
a.btnBig.facebook span {text-align:center;margin-right:-4px; line-height:50px; height:50px; display:block; padding:0 50px 0 0; background: transparent url('/images/controls/btn_big_facebook_bkg.png') top right;}
a.btnBig:hover {background-position:left -50px; text-decoration: none}
a.btnBig:hover span {background-position:right -50px; text-decoration: none}
a.btnBig:active {background-position:left -100px; text-decoration: none}
a.btnBig:active span {background-position:right -100px; text-decoration: none}
a.btn:hover {background-position:left -25px; text-decoration: none}
a.btn:hover span {background-position:right -25px; text-decoration: none}
a.btn:active {background-position:left -50px; text-decoration: none}
a.btn:active span {background-position:right -50px; text-decoration: none}
table {margin:0 -10px 16px -10px; border-collapse: collapse; border-spacing: 0}
table .large {width:100%}
tr.odd {background: #fff}
.white tr.even, .result tr.even {background: #f2f2f2}
td, th {white-space:nowrap; padding:5px 10px; font-size:10px; vertical-align: middle}
td.smallpad {padding: 5px}
td.nopad {padding: 1px}
td.right {text-align:right}
td img.profile {width:20px; height:20px}
td.sum {text-align: right; font-weight: bold}
/*------- Shadows ---------*/
input[type=submit], a.buttonBig, a.button {-moz-box-shadow: 0px 1px 3px #999; -webkit-box-shadow: 0px 1px 3px #999; box-shadow: 0px 1px 3px #999}
.columns {width:986px; margin:0 auto;clear:both;position:relative}
.column {border:1px solid #c6c7c9; float:left; padding:10px; margin: 0 8px 8px 0; background: transparent url(/images/box_bkg.png); position:relative}
.columns .last {margin-right: 0px}
.columns-1 {border:1px solid #c6c7c9; width:964px; margin:8px auto 0 auto; background: transparent url(/images/box_bkg.png);padding:10px;clear:both;}
.columns-2 {width:986px; margin:8px auto 0 auto; clear:both; position:relative}
.columns-2 .column {width:467px}
.columns-3 {width:986px; margin:8px auto 0 auto; clear:both; position:relative}
.columns-3 .column {width:301px}
.columns-3 .last {width:302px}
.columns-3 .wide {width:632px}
.columns-3 .wide-hole {border:none; width:654px; padding:0; background:transparent}
.columns-3 .column h2, h2.white, .columns-1 h2 {margin:16px -10px 0 -10px; padding:8px 8px 18px 8px; background: transparent url(/images/boxes/h2_bkg_2.png) no-repeat}
.columns-3 .white h2, .columns-1.white h2 {margin:10px -10px 0px -10px; padding:8px; background: transparent url(/images/boxes/white_heading_bkg.gif) center bottom no-repeat !important}
.columns-1 > h2:first-child,
.columns-1 > .eventlist > h2:first-child,
.column > h2:first-child,
.column > .eventlistSmall > h2:first-child,
.columns-1 > .eventlistSmall > h2:first-child,
.column > .eventList > h2:first-child,
.wide > .eventlist:first-child > h2:first-child {margin-top:-10px !important; background-position-y: -1px}
.column h2.margin {margin-bottom:12px}
h2.normal {padding:0 !important; background: none !important; margin-bottom:16px !important}
h2 + h3 {margin-top:-10px}
h2.boxHeading {text-align:left; clear:both; margin: 20px 0 -1px 0; border:1px solid #c6c7c9; border-top-right-radius:2px;border-top-left-radius:2px}
h2.boxHeading span {display:block; margin:1px 1px 1px 1px; padding:8px; color:#666; text-shadow: #555 0px 1px 2px; color:#fff; background: #fff url(/images/boxes/big_heading_bkg.jpg) center center no-repeat; border-top-right-radius:2px;border-top-left-radius:2px}
.multi-column-1 {float:left; width:324px}
.multi-column-2 {float:left; width:654px; margin-right:8px}
.multi-column-1 .column, .multi-column-2 .column {float:none}
.widelast .multi-column-2 {width:588px}
.widelast .multi-column-1 {width:370px}
.widelast .column {width: 368px}
.widelast .wide {width:566px}
.column-1-banner {width: 322px; overflow-hidden padding:0; margin: 0; float:left; border:1px solid #bbb; position:relative;}
.nopadding {margin:-10px}
#headerPush {height:14px}
#header {border:1px solid #c6c7c9; background: url(/images/boxes/header_bkg.gif); width:984px; margin:0 auto; background-color:#fff; height: 55px; font-size:11px; color:#666; position:relative}
#logo {position:absolute; display:block; top:17px; left:20px; width:152px; height:21px; background: url(/images/logo/sofanatics.png)}
#userstatus {float:right; margin:8px 16px 0 0; position:relative; width:500px}
#loggedin {position:absolute; right:0px; top:0px}
#loggedout {position:absolute; top:10px; right:0px}
#header p {margin:0 0 6px 0; text-align: right}
#header p.controls {color:#aaa}
#header p img {margin-left:4px; position: relative; top:3px}
#header .loginIndicator {position:absolute; right:2px; top:5px}
#menu { width:450px; display:block; height:30px; position:absolute; left:180px; top:15px;}
#menu li {display: inline; padding: 0 30px 0 0}
#menu li a {font-size: 15px}
.infobar {padding:10px 20px; width:946px; margin:0 auto; background:#fff url(/images/boxes/infobar_bkg.gif) repeat-x; height: 60px; position:relative; border-top:1px solid #c6c6c6; border-bottom: 2px solid #cc3333}
.infobar h2 {margin: 10px 0; font-size:15px}
.infobar p {margin:5px 0; font-size:15px}
.infobar a.close {position:absolute; top:5px; right:5px}
#footerpush {height: 66px; clear:both}
#footer {position:absolute; bottom:0; width:100%}
#footer .columns-1 {border-bottom:none}
#footer ul {padding: 0 0 0 0; margin: 0; text-align: center}
#footer ul li {display: inline}
#footer a {padding: 0 15px; text-decoration: none; font-size:15px; color: #434a4c}
#footer a:hover {color: #cf2037}
#footer a.active {color: #000}
#footer a.active:hover {color: #000}
#javascriptAlert {background-color: #f9db17; padding:20px 10px; text-align: center; font-size:14px line-height: 50px; margin-bottom:10px}
form label {display:block; padding:8px 0;clear:both;overflow:hidden}
form label.checker {padding-left:150px;line-height: 17px}
form h3 {margin:30px 0 6px 0}
form label span.description {padding-right:20px;float:left;width:130px;position:relative;text-align:right;top:5px}
form label.checker span {width:auto; text-align:left}
form label.checker input {margin-right:3px; position: relative; left:-3px;}
form label input.text {width:300px}
form label.error {font-size: 11px; color:#FF0000; margin-left: 150px;padding: 0}
form label.checker label.error {margin-left:0px}
form label.submit {padding-left:150px;margin-top:20px}
#account .twitterIcon {float:left; margin:-2px 10px 30px 0}
a.twitterConnectBtn {margin:0 20px 20px 0;width:160px; height:27px; display:block; float:left; cursor: pointer; background: transparent url('/images/controls/twitter_connect_btn_bkg.png')}
a.twitterConnectBtn:hover {background-position: 0px -27px}
a.twitterConnectBtn:active {background-position: 0px -54px}
a.btnBig:hover {background-position:left -50px; text-decoration: none}
a.btnBig:hover span {background-position:right -50px; text-decoration: none}
a.btnBig:active {background-position:left -100px; text-decoration: none}
a.btnBig:active span {background-position:right -100px; text-decoration: none}
a.btn:hover {background-position:left -25px; text-decoration: none}
a.btn:hover span {background-position:right -25px; text-decoration: none}
a.btn:active {background-position:left -50px; text-decoration: none}
a.btn:active span {background-position:right -50px; text-decoration: none}
input.text {height:24px; line-height: 24px; background:#f5f5f5 url(/images/controls/input_bkg.gif) repeat-x; border:1px solid #cc3333; padding:0px 3px; font-size:14px}
input.text.big {background:#f5f5f5 url(/images/controls/input_big_bkg.gif) repeat-x; }
textarea {height:50px; line-height: 20px; background:#fff url(/images/controls/textarea_bkg.gif) repeat-x; border:1px solid #cc3333; padding:3px 6px 6px 6px; font-size:13px}
input.text:focus, textarea:focus {background: #fff}
input.defaultTextActive {font-size: 11px; color:#bbb;}
input.error {background-color:#FFFF00;}
form#signupFormPopup {width:460px; margin:0 auto}
form#signupForm {width:600px; margin:0 auto}
ul.tabs {height:22px; list-style: none; margin:1px -9px 0 -9px; padding:0px 5px 0 5px; border-bottom:1px solid #aaaaab; border-top:none; background: url(/images/controls/tabs_toolbar_bkg.png)}
ul.tabs li {font-weight:bold; width:auto; margin:0px 0px 0px 1px; float:left;}
ul.tabs a {font-size:11px; padding:0 10px; border-radius: 4px 4px 0 0; -webkit-transition: all 0.3s ease-in-out; background:#f8f8f8; display:block; border-top:1px solid #fff; height:21px; line-height: 23px; border:1px solid #c6c7c9 ; text-align: center}
ul.tabs li a:hover {-webkit-transition: all 0.1s ease-in-out; text-decoration: none; background:#fff url(/images/controls/tab_bkg.gif) repeat-x left -10px}
ul.tabs li.last a {border-right:none}
ul.tabs li.active a {background:#fff; border-bottom:1px solid transparent; color:#223540}
/* ----- Frontpage ----- */
#frontpageLift {}
#frontpageLift img {margin:-9px -9px 30px -9px}
#frontpageLift td {font-size:12px; line-height: 18px}
#frontpageSplash {width:322px; padding:0px; overflow: hidden}
.featureSplash .splash {float:left; padding:1px; border-right:1px solid #c6c7c9; position:relative}
.featureSplash .splash p {position:absolute; left:10px; top:132px}
.featureSplash .middle p {position:absolute; left:123px; top:185px}
.featureSplash .last p.first {line-height: 20px}
.featureSplash .last p.second {line-height: 20px; top:180px}
a.morefriendsBtn {text-align: center; width:278px; float:none !important; margin:0 !important}
.likeOnFriends {clear:both; height:30px; margin-top:16px}
/* ------ Event list ------- */
.eventlist {margin-bottom: 16px}
.eventlist .event {margin:0; position:relative; color:#25333b; cursor:pointer; clear:both}
.eventlist .event .btn {float:right; margin:7px 10px 0 0; width:73px}
.eventlist .active .btn {float:right; margin:25px 10px 0 0}
.eventlist .event p {display:table; margin:2px 0; height:30px; overflow:hidden}
.eventlist .time span.sport, .eventlist .time span.first {display:table-cell; height:30px; vertical-align:middle; border-left:1px solid #cbcbcb; padding:0 10px}
.eventlist .time span.first {border-left:none; font-weight: bold}
.eventlist .time span.status {text-align:center; border-left:1px solid #cbcbcb; padding:0 10px; width:100px; margin:0; padding-left:10px; position:absolute; right:0; top:0px; float:right; vertical-align: middle}
.eventlist .time span.status strong {font-weight:bold; font-size:16px; margin:3px 0 3px 0; letter-spacing: -1px}
.eventlist .time span.status strong.nl {width:100px; display:block; text-align:center; float:left;}
.eventlist .time span.status span {display:block; float:left; width:100px; text-align: center}
.eventlist .time span.status .sl {line-height: 30px}
.eventlist .event:hover .time {color:#555}
.eventlist h3 {background:transparent; width:511px; height:57px; color:#3a4357; padding:0 0 0 0; margin:-8px 0 10px 0; position:relative; font-size:14px; font-weight:bold}
.eventlist .active h3 {background:url(/images/events/bar_bkg.png); margin:10px 0}
.eventlist h3 .content {width:100%; position:relative; top:11px; left:0px; display:block}
.eventlist h3 .shield {display:block; margin:0 auto; z-index: 10; position:relative; width:39; height:43}
.eventlist h3 .team1 {max-width:190px; overflow: hidden; text-overflow: ellipsis; min-width:150px; white-space: nowrap; overflow:hidden; padding:0 40px 0 15px; background:url(/images/events/event_bar_left.png); height:26px; line-height: 26px; position:absolute; right:50%; top:5px; text-align:left}
.eventlist h3 .team2 {max-width:190px; overflow: hidden; text-overflow: ellipsis; min-width:150px; white-space: nowrap; overflow:hidden; padding:0 15px 0 40px; background:url(/images/events/event_bar_right.png) top right; height:26px; line-height: 26px; position:absolute; left:50%; top:5px; text-align:right}
.eventlist .event:hover h3 .team1 {background-position: left -26px}
.eventlist .event:hover h3 .team2 {background-position: right -26px}
.eventlist .score {text-shadow: rgb(0, 0, 0) 0px 1px 0px; color:#fff; height:26px; line-height: 26px;}
.eventlist .team1 .score {max-width:200px; position:relative; z-index:2; float:right; margin:0px -45px 0 10px; padding:0 36px 0 20px; background:url(/images/events/event_bar_red_left.png)}
.eventlist .team2 .score {max-width:200px; position:relative; z-index:2; float:left; margin:0px 10px 0 -45px; padding:0 20px 0 36px; background:url(/images/events/event_bar_red_right.png) top right}
.eventlist .team1 .teamFlag {float:left; middle; position:relative; top:2px; left:-13px; width:25px; height:22px;}
.eventlist .team2 .teamFlag {float:right; position:relative; top:2px; left:13px; width:25px; height:22px;}
.eventlist .event p.resultguess {display:block; color:#555; width:490px; font-size:11px; text-align:center; margin:-10px 0 0 10px}
.eventlist .event.active p.resultguess {margin-top:-5px}
h2 + table {margin-top:-9px}
.white h2 + table {margin-top:0px}
h2 + .eventlistSmall.header {margin-top:-33px}
.eventlistSmall:last-child {margin-bottom:-10px}
.eventlistSmall tbody tr:hover {cursor:pointer; text-shadow: rgba(255,0,0,0.2) 1px 1px 5px}
.eventlistSmall tbody tr:hover a {text-decoration: underline}
.eventlistSmall td {font-size:12px; line-height: 14px}
.eventlistSmall thead td {font-size: 10px}
.eventlistSmall td.result {border-left:1px solid #ccc; text-align: center}
/* ------ Event ------- */
.matchStatus_0 .show_on_1, .matchStatus_0 .show_on_2, .matchStatus_0 .show_on_1_2 {display:none !important}
.matchStatus_1 .show_on_0, .matchStatus_1 .show_on_2, .matchStatus_1 .show_on_0_2 {display:none !important}
.matchStatus_2 .show_on_0, .matchStatus_2 .show_on_1, .matchStatus_2 .show_on_0_1 {display:none !important}
#eventHeader {border:1px solid #c6c7c9; margin: 8px auto 0 auto; overflow:hidden; position:relative; width:984px; height:103px; background: #fff url(/images/boxes/big_heading_bkg.jpg) 1px 1px no-repeat; position:relative; overflow:hidden}
#eventHeader h1 {margin:0; position:absolute; left:0px; top:30px; width:960px; color:#25333b; font-size:19px; font-weight: bold; text-align: center}
#eventHeader img.shield {display:block; margin:0 auto; z-index: 10; position:relative}
#eventHeader .team1 {white-space: nowrap; overflow:hidden; padding:0 40px 0 30px; background:url(/images/events/event_header_left.png); height:62px; line-height: 58px; position:absolute; right:50%; top:-5px; text-align:left}
#eventHeader .team2 {white-space: nowrap; overflow:hidden; padding:0 30px 0 40px; background:url(/images/events/event_header_right.png) top right; height:62px; line-height: 58px; position:absolute; left:50%; top:-5px; text-align:right}
#eventHeader a {color:#000}
#eventHeader .score {text-shadow: rgb(0, 0, 0) 0px 1px 0px; color:#fff; height:32px; line-height: 32px;}
#eventHeader .team1 .score {max-width:400px; position:relative; z-index:2; float:right; margin:13px -40px 0 10px; padding:0 36px 0 20px; background:url(/images/events/event_header_red_left.png)}
#eventHeader .team2 .score {max-width:400px; position:relative; z-index:2; text-indent: 0; float:left; margin:13px 10px 0 -40px; padding:0 20px 0 36px; background:url(/images/events/event_header_red_right.png) top right}
#eventHeader .team1 .teamFlag {position:relative; top:8px; left:-15px; width:33px; height:30px}
#eventHeader .team2 .teamFlag {position:relative; top:8px; left:15px; width:33px; height:30px}
#eventHeader h2 {line-height:19px; height:37px; padding: 0 30px 0 0; font-weight:normal; position:absolute; left:1px; top:1px; font-size:13px; color:#000; margin:0; background: transparent url(/images/events/event_header_info_bkg.png) top right}
#eventHeader h2 span.info {text-shadow: rgb(0, 0, 0) 0px 1px 0px; line-height:19px;float:left; height:19px; padding:0px 15px 0 10px; margin-right:15px; color:#fff; background:#c22525}
#headerContainer {position:relative}
#headerContainer .likeButton {position:absolute; left:0px; bottom:0px}
#toolbar {background: #fff}
#toolbar.nologin {margin-top:0px}
#toolbar .loginIndicator {padding: 15px 0 24px 0; text-align: center}
#toolbar ul.tabs {height:16px}
#toolbar ul.tabs li {position:relative; top:-6px;}
#toolbar .step1, #toolbar .step2 {overflow: hidden; position:relative}
#toolbar p:last-child {margin-bottom:0px}
.toolbarItem {position:relative; margin-top:17px; text-align: left}
#toolbar .btnBig {float:none; width:150px; margin:0 auto;}
#toolbar .userPostInput {margin:0 0 16px 15px}
#loginTool h2 {background: none !important; color:#223540; font-size:17px; margin: 0px 0 6px 0; padding:0}
#loginTool p {text-align: left; margin:0}
#loginTool a.btnBig {float:right; margin-top:2px; width:100px}
#checkinTool h2 {background:none !important; color:#223540; font-size:19px; margin: 0px 0 16px 0; padding:0; text-align: center}
#checkinTool h2 img {vertical-align: middle; margin-right:10px;}
#checkinTool a.checkout {position:absolute; right:0px; top:5px}
#checkinTool a.btn {float:none; width:150px; margin:0 auto}
#checkinTool p {text-align: center}
#betTool .bet {height:36px; background: #eee; font-size:16px; font-weight: bold; text-align: center; margin-bottom:16px}
#betTool .team1 {width:210px; float:left; text-align: right; height:36px; line-height: 36px}
#betTool .guess {border-radius: 15px; margin:0 16px; width:150px; float:left; background:url(/images/controls/btn_big_bkg.png) 50% 50%; color:#fff; height:36px; line-height: 36px}
#betTool .team2 {width:210px; float:left; text-align: left; height:36px; line-height: 36px}
#betTool .guess input {width: 40px; font-size:16px; font-weight: normal; height:24px; text-align: center; margin-top:1px}
#inviteTool .dialog {text-align: left; overflow:hidden; clear:both; margin:0 -20px; padding:0px 20px; position:relative}
#inviteTool h2 {background: none !important; margin: 0; padding:10px 0 5px 0}
#inviteTool hr {margin:0 -10px}
#inviteTool .findFriends {height:25px; margin:0px; padding:5px 0;}
#inviteTool .findFriends label {display:block; float:left; height:25px; line-height: 25px}
#inviteTool .findFriends input {width:270px; margin-left:10px}
#inviteTool .content {height:110px; overflow: auto; margin:0 -10px 0 0; padding:10px 0}
#inviteTool .loading {position:absolute; left:48%; top:155px}
#inviteTool .friend {width:180px; float:left; height:25px; line-height: 25px; margin-bottom:5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
#inviteTool .friend span {line-height: 25px; margin-bottom:5px}
#inviteTool .friend input {margin-bottom:2px; margin-right:5px; vertical-align: baseline}
#inviteTool .friend img {width:25px; height:25px; border:solid 1px #fff; float:left; margin-right:4px}
#inviteTool .userPostInput {margin:10px 0 0 0}
#videochat {height:30px; margin:-9px -9px 0 -9px}
#videochat span {margin-left:9px; line-height: 32px}
#eventInvitation {margin:-1px 0 0 0; padding:8px 10px; vertical-align: middle; position:relative}
#eventInvitation .inviteFriends {margin:0}
#eventInvitation .inviteFriends a {margin:0 10px; padding:5px}
#eventInvitation .inviteFriends a:hover {text-decoration: none; border:1px double #aaa; padding:4px; background-color: #fff}
#eventInvitation img {vertical-align:middle; margin:0 4px 0 0}
#eventInvitation .likeButton {position:absolute; right:0px; top:7px; width:280px}
ul.friendList {padding:10px 0px; margin:0 -10px 10px -10px; list-style: none; overflow:hidden} /* background: url(/images/boxes/gradient_bkg.gif); */
ul.friendList li {float:left; width:52px; height:80px; position:relative; margin: 0px 0px 0px 10px}
ul.friendList li a {color:#223540}
ul.friendList li a:hover {text-decoration: none; color:#cf2037}
ul.friendList li img.profile {width:50px; height:50px; border:1px solid #999; background: #eee}
ul.friendList li img.vs {position:absolute; top:-3px; left:-6px}
ul.friendList li span {position:absolute; left:0px; display: block; width:100%; top:55px; text-align: center;font-size:11px}
ul.friendListSmall {overflow:hidden; font-size:11px; padding:10px 10px; margin:0 -10px 10px -10px; list-style: none;}
ul.friendListSmall li {float:left; width:100px; margin-bottom:2px; overflow: hidden; height:22px; white-space: nowrap; text-overflow: ellipsis}
ul.friendListSmall li a {color:#223540; line-height: 20px;}
ul.friendListSmall li a:hover {text-decoration: none; color:#cf2037}
ul.friendListSmall li img {vertical-align:middle; width:20px; height:20px; border:1px solid #999; background: #eee; margin-bottom:2px}
.fanMap {width:860px; height:400px}
.eventMessages .input label {font-size:11px; color:#999}
#faithOMeterGraph img {margin-top:44px}
#faithOMeterGraph .teams {position:absolute; top:50px; right:10px}
#faithOMeterGraph .teams span {margin-left:30px; padding-left:20px}
#faithOMeterGraph .teams span.team1 {background:url(/images/events/faithometer_team1_bkg.gif) -5px 0px no-repeat}
#faithOMeterGraph .teams span.team2 {background:url(/images/events/faithometer_team2_bkg.gif) -5px 0px no-repeat}
#fanbattle {padding:10px 14px; width:558px}
#fanbattle.team {padding:10px 14px; width:624px}
#fanbattle hr {height: 0px; margin:0}
#fanbattle h2 {margin-top:0px !important; background:none; padding:0; margin:0}
#chooseSide {height:18px; font-weight: bold; line-height: 25px; text-align: center; padding: 15px 0}
#chooseSide .btn {width:105px}
#chooseSide .team1 {}
#chooseSide .team2 {float:right;}
#faithOMeter {padding:0px 0px; margin:20px 0 10px 0}
#faithOMeter h3 {margin: 0px 0 10px 0; color:#2d2d2d}
#faithOMeter h3 span {color:#999; font-size:12px}
.matchStatus_2 #faithOMeter h3 {margin: 0}
#faithOMeter h3.team1 {float:left}
#faithOMeter h3.team2 {float:right}
#faithOMeter .meter {clear:both; text-align: center; margin-bottom:26px}
#faithOMeter img {vertical-align:bottom}
#faithOMeter .meter span {padding:0 10px}
#faithOMeter .bar {position:relative; margin:0 -3px; background:url(/images/controls/faith_track_bkg.png); width:212px; height:6px; padding:2px 3px 4px 3px}
#faithOMeter .bar .progress {position:relative; width:50%; height:6px; background:url(/images/controls/faith_bar_bkg.gif); -moz-border-radius: 2px; -webkit-border-radius: 2px;}
#faithOMeter .bar .arrow {width:5px; height:3px; position:absolute; top:12px; left:0px; background: url(/images/controls/faith_bar_arrow.gif) no-repeat}
#faithOMeter .bar .arrow p {position:absolute; left:-27px; top:3px; width:60px; text-align:center; font-size: 11px; text-shadow: none}
#faithOMeter .bar .thumb {width:1px; height:1px; background:url(/images/controls/faith_thumb.png); position:absolute; top:0px; left:0px}
#faithOMeter .bar .thumb p {cursor:move; position:absolute; left:-20px; top:0px; width:49px; height:36px; background:url(/images/controls/faith_thumb.png); position:absolute; text-align: center; line-height: 53px; font-size:11px; text-shadow: none}
#faithOMeter .bar.team1 {float:left}
#faithOMeter .bar.team2 {float:right}
#faithOMeter .userFaith {float:left; display:none}
#fanbattle.support #faithOMeter .userFaith {display:block}
#faithOMeter .userFaith h4 {color: #2d2d2d; margin-bottom:6px}
#faithOMeter .userFaithCtrl {margin-bottom:25px}
#faithOMeter .changeSides {float:right; margin-top:24px; display:none}
#fanbattle.support #faithOMeter .changeSides {display:block}
#fanbattle.support2 #faithOMeter .userFaith {float:right;}
#fanbattle.support2 #faithOMeter .changeSides {float:left}
#resultGuess, #resultGuessActive {text-align: center; overflow: hidden; margin:0 -14px}
#resultGuess {background: transparent url(/images/boxes/fan_battle_input_bkg.png) repeat-x}
#resultGuess h4 {font-size:12px; font-weight: bold; color:#2d2d2d; margin:10px 0 10px 0}
#resultGuess input {width:40px; border-radius:5px; text-align: center}
#resultGuess .guess span {display:block; width:220px; height:25px; line-height: 25px}
#resultGuess .guess span.team1 {float:left; text-align:right}
#resultGuess .guess span.team2 {float:right; text-align: left}
#resultGuess .controls {margin-top:15px}
#resultGuess .controls .btn {float:none; width:150px; margin:0 auto}
#fanbattle .active .content {background: transparent url(/images/boxes/fan_battle_input_bkg.png) repeat-x}
#fanbattle div.input {position:relative; opacity:0.3; overflow:hidden; width:384px; padding-bottom:16px}
#fanbattle #fanPhotoBtn {margin-left: 180px; float:right; margin:-8px 5px 0 0}
#fanbattle .input .overlay {left:0px; top:0px; position:absolute; width:440px; height:166px; z-index:200; zoom:1; filter: alpha(opacity=0); background:#fff; opacity:0}
#fanbattle.support .input {position:relative; opacity:1;filter:none; float:left}
#fanbattle.team .input {margin:16px 0px 0px 130px}
#fanbattle.support2 .input {float:right}
#fanbattle.support div.input * {filter: none}
#fanbattle.support .input .overlay {display:none}
#fanbattle .input .profile {width:35px; height:35px; position:absolute; left:0px; top:0px; border:1px solid #fff}
#fanbattle .input .inputHolder {width:250px;}
#fanbattle .toFacebook {display:block; text-align:right; margin:6px 0 10px 0}
#fanbattle .toFacebook input {vertical-align: bottom; margin-right:4px}
#fanbattle .toFacebook img {position:relative; top:3px}
#fanbattle.team hr {margin:0px -14px}
#fanbattle #photoSnapshot {display:none; clear: both; overflow: hidden; z-index:200; position:relative}
#fanbattle #photoSnapshotContent {height: 420px; position:relative}
#fanbattle .messagePane {padding:0 0px; margin:2px -13px -8px -13px;position:relative}
#fanbattle .translationCtrl {position:absolute; right:9px; top:0px; text-align: right; font-size:11px; margin:0; z-index:1; font-weight:bold; line-height: 23px;}
#fanbattle .translationCtrl label, #fanbattle .translationCtrl label span {vertical-align:baseline !important; font-weight:bold; line-height: 23px;}
#fanbattle .translationCtrl img {vertical-align:middle}
#fanbattle .messageList {padding:35px 10px 0 10px; margin:0 0px}
#fanbattle .loadMore {margin:5px 0}
#fanbattle .loadMore a.btn {float:none; width:120px; margin:5px auto 0 auto}
#fanbattle .gBranding {display:inline; height:25px; line-height:25px};
#fanbattle .input .buttonBig {margin:6px 0 0 -10px; width:60px; float:right}
#fanbattle .waitPeriod {text-align:right; display:none}
#fanbattle .connect {text-align: center; margin: 10px 0 20px 0}
#fanbattle div.stream {clear:both; margin: 10px -15px 0 -15px; padding-left:7%}
#fanbattle ul.tabs {clear:both; margin: 10px -15px 0 -15px; padding-left:7%}
#fanbattle ul.tabs li {width:30%}
.tweet, .message {overflow:hidden}
.chat {overflow:hidden; position:relative; font-size:12px; color:#4b4b4b; clear:both}
.chat img.profile {background:#fff; width:35px; height:35px;padding:1px;border:solid 1px #eee; border-bottom:solid 1px #d7d7d7;position: absolute; top:0px; left:0px}
.chat img.type {background:#fff; width:10px; height:10px; border:solid 1px #eee;position: absolute; top:30px; left:30px}
.chat .chatContent {position:relative; float:left; overflow:hidden; margin:0 0 8px 50px; padding:4px 8px 4px 8px; background: #f7f7f7 url(/images/chat/bkg.gif) repeat-x; border:1px solid #c5c7c8; border-bottom:solid 1px #9fa1a2; border-right:solid 1px #9fa1a2}
.chat h4{float:left; font-size:10px;margin:0 70px 6px 0; color:#4b4b4b;}
.chat h5 {color:#999; font-size:10px; position:absolute; right:8px; top:4px}
.chat p {clear:both; margin:0}
.chat p.event {font-size:10px; margin:3px -8px -4px -8px; color:#999; border-top: 1px solid #c5c7c8; background: #f2f2f2; padding:0px 8px}
.chat p.event a {font-size:10px; margin-top:3px; color:#666}
.chat p.event b {color:#222}
.chat .attachment {margin-top:8px; position:relative;font-size:11px}
.chat .attachment a.media {position:absolute;}
.chat .attachment img {max-width: 40px;}
.chat .attachment p {margin-left:50px;}
.chat p.likes {clear:both; background-color: #eee; border-top:solid 1px #d7d7d7; font-size:10px; margin:6px -4px -4px -10px; padding:4px 10px}
.chat span.caret {display:block; width:8px; height:10px; background:transparent url(/images/chat/caret_2.png); position:absolute; left:43px; top:15px; font-size: 1px}
.chat.team2 img.profile {left:auto; right:0px}
.chat.team2 .chatContent {float:right; margin:0 50px 8px 0; padding:4px 10px 4px 4px}
.chat.team2 h4{float:left; font-size:10px;margin:0 70px 6px 0; color:#4b4b4b;}
.chat.team2 span.caret {background:transparent url(/images/chat/caret_right_2.png); left:auto; right:43px;}
.chat.team2 img.type {left:auto; right:30px}
p.noMessages {text-align: center; padding-top:65px; padding-bottom:90px; color:#999}
.chat .fanPhoto {width:180px; height: 134px; margin: 0 -6px -2px -6px}
.chat.team2 .fanPhoto {margin: 0 -8px -2px -2px}
.chat.origin_101 p {line-height: 18px}
.chat.origin_101 .guess {vertical-align:middle; margin:0 0 3px 10px;font-size:11px; text-align:center; color:#000; display:inline-block; width:83px; height:30px; background:url(/images/chat/guess_bkg_2.png)}
.chat.origin_101 .guess .score1 {width:40%; float:left;line-height:30px}
.chat.origin_101 .guess .score2 {width:40%; float:right;line-height:30px}
.chat.origin_102, .chat.origin_104, .chat.origin_103 {float:left;color:#fff; height:26px; line-height: 26px; background: url(/images/events/message_goal_bkg_left.png) top right; padding:0 80px 0 10px; margin:10px -10px; text-shadow: none}
.chat.team2.origin_102, .chat.team2.origin_104, .chat.team2.origin_103 {float:right; background: url(/images/events/message_goal_bkg_right.png) top left; padding:0 10px 0 80px; margin:10px -10px}
.chat.origin_103, .chat.origin_104 {color:#333; background: url(/images/events/message_card_bkg_left.png) top right}
.chat.team2.origin_103, .chat.team2.origin_104 {background: url(/images/events/message_card_bkg_right.png) top left;}
/* ------- Generic ------- */
.userPostInput {position: relative; float:left;}
.userPostInput img.profile {width:35px; height:35px; position:absolute; left:0px; top:0px; border:1px solid #fff}
.userPostInput .linktext {padding-left:5px; text-align:left; display:block; margin:6px 15px 0 42px; color:gray; font-size:11px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif}
.userPostInput .linktext img {float:left; margin: 0 10px 10px 0}
.userPostInput h3, .userPostInput p {margin:0 0 3px 0}
.userPostInput h3 {font-size:11px; font-weight: bold; padding-top:5px}
.userPostInput h3 a {color:#3B5998}
.userPostInput .inputHolder {padding: 0 76px 0 0; display:block; margin:6px 15px 0 42px}
.userPostInput.nosend .inputHolder {padding: 0}
.userPostInput.biginput .inputHolder {padding: 0; margin-top:1px}
.userPostInput input[type=text], textarea {width:100%; height:23px}
.userPostInput textarea {height:40px}
.userPostInput .btn {position:absolute; top:0px; right:0px; margin:6px 4px 0 -10px; width:60px; float:right}
.center {margin:auto; text-align: center}
.errorHeader {padding: 50px 10px; text-align: center}
.white {background: #fff}
.loginIndicator {display:none}
.clear {clear:both}
.template {display:none}
.likeButton {visibility:hidden}
.tooltip {-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -box-shadow: 0px 3px 3px rgba(0,0,0,0.2); padding; border-radius: 3px; display:none; position:absolute; top:0px; left:0px; background:url(/images/controls/tooltip_border_bkg.png) ; border-right:1px solid #bb4848; border-top:1px solid #efc0c0; border-left:1px solid #efc0c0; padding:3px 3px 4px 3px; font-size:11px;color:#000}
.tooltip {border-top-color: rgba(255,255,255,0.5); border-left-color: rgba(255,255,255,0.5); border-right-color: rgba(189, 57, 57, 0.5)}
.tooltip .content {background: #f9f9f9; padding:3px 6px}
.tooltip .caret {width:11px; height:12px; background:url(/images/controls/tooltip_caret.png); position:absolute; left:48%; bottom:-8px}
.tooltip h3 {font-size:12px; margin:-5px -5px 5px -5px; padding:6px 1px; text-align: center; background: #f3f3f3; border-bottom:1px solid #ddd; font-weight:bold}
.tooltip p {margin:2px 0; text-align: center}
.tooltip p.playing {margin:4px 0}
.tooltip img {vertical-align:middle; margin: -10px 0; position:relative; top:-1px}
.pager {clear:both; padding:10px 0 0 0; text-align: center}
.pager a {padding:2px 5px}
.nomargin {margin:0px}
.nobottommargin {margin-bottom:0px}
.nobottompadding {padding-bottom:0px}
.admin {display:none}
/* -------- Facebook --------*/
#facebook {width:760px; overflow:hidden}
#facebook .columns {width:740px; padding:0 10px}
#facebook #header {width:756px; margin:0}
#facebook #footer {width:756px; margin:0}
#facebook #footer .columns-1 {width:736px; border-bottom:1px solid #c6c7c9;}
#facebook .columns {overflow-x: hidden; overflow-y: auto; position:absolute; top:64px; left:-2px; bottom:35px}
#facebook .columns-1 {width:700px}
/* -------- Friends -------*/
#friend .memberSince {margin:10px 0; position:absolute; right:10px; top:0px}
#friend div.profile p {margin:0 0 4px 0}
#friend img.bigProfile {float:left; margin:0 20px 20px 0; width:50px; height:50px}
#friend td {font-size:11px}
td.nodata {text-align: center; margin:20px 0; color:#666}
.split {float:left; width:47%}
.split.first {clear:both}
.split.last {float:right}
.pofilePictureList img {width:35px; height:35px; margin: 0 1px 1px 0}
/* --------- Sharing --------*/
.modalDialog {background:url(/images/boxes/share_dialog_bkg.png); width:100%; height:100%; position:fixed; left:0px; top:0px; display:none; z-index:100000}
.modalDialog .center {position:absolute; left:50%; top:30%; width:10px; height:10px; overflow: visible}
.modalDialog .border {padding:6px; position:absolute; left:-250px; width:500px; border-radius: 3px; background:url(/images/controls/tooltip_border_bkg.png) ; border:1px solid #bb4848; border-top:1px solid #efc0c0; border-left:1px solid #efc0c0}
.modalDialog .border {border-color: rgba(189, 57, 57, 0.5); border-top-color: rgba(255,255,255,0.5); border-left-color: rgba(255,255,255,0.5)}
.modalDialog .content {text-align:left; background: #fff; padding:20px 20px 10px 20px; position:relative}
.modalDialog .content.withcontrols {padding:20px 20px 0px 20px;}
.modalDialog .controls {clear:both; height:24px; padding:10px 25px; margin:40px -20px 0 -20px; background:#ededed; border-top:1px solid #ddd}
.modalDialog .controls .btn {float:right; margin-left:20px}
.modalDialog .userPostInput {width:100%; margin-bottom:20px}
.modalDialog ul {padding:0}
.modalDialog ul li {padding:3px 0 6px 30px; list-style:none; background: url(/images/icons/thumbs_up.png) no-repeat}
/* ------------ Teams -----------*/
#teamSearch input {display:block; width:360px; margin:0 auto 0 auto; font-size:18px; padding:8px 9px; z-index:2; position:relative; vertical-align: baseline; z-index:1001}
#teamSearch h3 {margin:10px 50px 12px 50px; text-align: center; line-height: 20px}
#teamSearch .resultContainer { margin:-21px auto 32px auto; width:540px; position:relative}
#teamSearch .result {z-index:1000; position:absolute; left:0px; top:0px; background: #fff url(/images/boxes/infobar_bkg.gif) repeat-x 0px 1px; padding:24px 10px 0px 10px; width:100%; border:1px solid #c6c7c9; -webkit-box-shadow: 0px 6px 50px rgba(0,0,0,0.25);-moz-box-shadow: 0px 6px 50px rgba(0,0,0,0.25); border-radius:5px 5px 0 0; moz-border-radius:5px 5px 0 0}
#teamSearch .result table {margin-bottom:0}
#teamSearch .result td {font-size:12px; line-height: 18px}
#teamSearch td .league {color:#999}
#teamcard {height:292px; overflow: hidden}
.teamsplit {float:left}
.teamsplit.first {clear:both; width:239px; height:310px; background:url(/images/teams/team_card.jpg); margin:-9px 0 -9px -9px}
.teamsplit.last {float:right; width:390px; margin-left:10px}
#teaminfo {position:relative}
#teaminfo img {margin-bottom:-3px}
#teaminfo h4, #teaminfo p {color:#fff; text-shadow: #000 1px 1px 0px}
#teaminfo h4 {margin:10px 0 0 10px; font-weight: normal; font-size: 11px}
#teaminfo p {margin: 0px 0 0 10px; font-size:15px}
#teaminfo .rank {position:absolute; text-align: center; top:178px; left:157px; width:50px; line-height: 22px; color:#000; text-shadow: #fff 0px 1px 0px}
#teaminfo .rank strong {font-size:20px; text-shadow: #000 1px 1px 0px; color:#fff}
#teaminfo img.activated {position:absolute; left:84px; top:238px;}
#teamcard p.info {position:absolute; left:250px; bottom:0px; margin-right:10px; color:#666}
#teamcard h1+h3 {margin-top:-4px}
.teamsupport {width:420px; text-align: center}
#fanprogress {width:378px; height:129px; position:relative; margin: 0 auto 16px auto}
#fanprogress .active {height:129px; position:absolute; left:0px; top:0px; background: url(/images/teams/fan_o_meter_active.png)}
#fanprogress .normal {height:129px; position:absolute; right:0px; top:0px; background: url(/images/teams/fan_o_meter.png) top right}
#fanstrip {border-top:1px solid #cc3333; position:relative; margin:0 20px 52px 20px}
#fanstrip div {position:absolute; left:0px; top:-7px}
#fanstrip p {position:absolute; left:-100px; width:200px; height:40px; text-align: center; line-height: 40px; background: url(/images/teams/fan_o_meter_arrow.png) top 50% no-repeat}
#fanstrip p strong {font-size:16px}
.teamFanPhotos img {width:100px}
.teamFanPhotos p {color:#666; margin-top:130px; font-size:15px}
.btnSupportTeam {background: url(/images/controls/btn_become_fan_bkg.png); width:130px; height:81px; margin:0 auto 10px auto; cursor: pointer; display:block; color:#fff; line-height: 130px; text-align: center; text-shadow: none}
.btnSupportTeam:hover {background-position: 0 -81px; text-decoration: none}
.btnSupportTeam:active {background-position: 0 -162px;}
.fanRemove {font-size:11px; text-align: right}
#inviteTool.small .findFriends input {width:205px}
#inviteTool.small .friend {width:148px; float:left; height:25px; line-height: 25px; margin-bottom:5px}
#fanOMeter {width:218px; height:165px; margin:5px auto 30px auto; position:relative; background:url(/images/teams/fan_o_meter_activated.png);}
#fanOMeter h2 {position:absolute; width:230px; left:0px; top:112px; text-align: center; font-size:30px; background:none !important}
#fanOMeter h2 span {font-size:20px}
.pofilePictureList {overflow:hidden; margin:0 -10px 0 -2px}
.pofilePictureList a {float:left; margin:1px}
#teamFanConsole {background: #fff url(/images/teams/right_pane_bkg.jpg) no-repeat; color:#fff; text-shadow: #000 0px 1px 0px}
#teamFanConsole img {float:left; margin:0 10px 10px 0}
#teamFanConsole h2.first {margin-bottom: 5px !important}
#teamFanConsole .loginIndicator {margin:19px 0 20px 70px}
/* --------- Banners --------*/
.banner_300 {width:300px; margin:16px auto; border:1px solid #c6c7c9}
.competition h2 {margin-bottom: 10px !important}
.competition .competitionDescription {font-size:10px; color:#000; clear: both; padding-top: 10px;}
.competition p.profile {margin: 5px 0 10px 0; padding-top:6px}
.competition img.profile {float:left; width:25px; height:25px; border:1px solid #999; background: #eee; margin:-6px 5px 10px 0}
.competition .mostFriendsOnlineHolder {background: #ffffff url("/images/most_friends_online/background.png") no-repeat; background-position:top center; text-align: center;}
.competition .greenBox {background: url("/images/most_friends_online/green_bg.png") no-repeat; background-position:top center; width: 132px; height: 54px; text-shadow: #555 0px 1px 2px; text-align: center; color: #ffffff; margin-top: -4px; padding-bottom: 2px; padding-top: 10px; float: left; }
.competition .smallBox {background: url("/images/most_friends_online/small_box_bg.png") repeat-x; background-position: top; height: 16px; width: 240px; border: 0px solid #c6c6c6;vertical-align: middle; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding-top: 5px; padding-bottom: 0px;}
.competition .bigBox {background: url("/images/most_friends_online/box_bg.png") repeat-x; background-position: top; height: 51px; width: 368px; border: 0px solid #c6c6c6;vertical-align: middle; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding-top: 5px; padding-bottom: 0px; -moz-box-shadow: 0px 1px 3px #999; -webkit-box-shadow: 0px 1px 3px #999; box-shadow: 0px 1px 3px #999}
.competition #gameOverBox {background: url("/images/most_friends_online/gameover_bg.png") repeat; background-position: top; height: 90px; width: 348px; border: 0px solid #c6c6c6;vertical-align: middle; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 0px; -moz-box-shadow: 0px 1px 3px #999; -webkit-box-shadow: 0px 1px 3px #999; box-shadow: 0px 1px 3px #999}
.competition #myInfo {width: 115px; height: 50px; float: left; text-align: center; padding-top: 8px; }
.competition #totalFriends {width: 115px; height: 50px; float: left; text-align: center; padding-left: 3px; padding-right: 3px; padding-top: 8px;}
.eventlist .event {-webkit-perspective:400px;}
.eventlist .content, .eventlist .team1, .eventlist .team2, .eventlist .shield {-webkit-transition:-webkit-transform 0.5s ease-out;}
.eventlist .event:hover .content, .eventlist .event:hover .team1, .eventlist .event:hover .team2, .eventlist .event:hover .shield {-webkit-transition:-webkit-transform 0.1s ease-out;}
.eventlist .event:hover h3 .content {-webkit-transform: scale(1.05)}
.eventlist .event:hover .shield {-webkit-transform: scale(1.1)}
@-webkit-keyframes eventHeader {
0% { opacity: 0; -webkit-transform: scale(0.3) rotateY(-200deg) }
100% {opacity: 1; -webkit-transform: scale(1)}
}
#eventHeader h1.animation {-webkit-animation: eventHeader 1s ease-out;}
@-webkit-keyframes eventHeaderH2 {
0% { opacity: 0; -webkit-transform: translateY(-50px) }
100% {opacity: 1; -webkit-transform: translateY(0px)}
}
#eventHeader h2.animation {-webkit-animation: eventHeaderH2 0.5s ease-out}
#fanbattle .newMessages {-webkit-perspective:0; -webkit-perspective-origin: 50% 20px;}
@-webkit-keyframes chatMessage {
0% { -webkit-transform: rotateY(90deg) }
100% { -webkit-transform: rotateY(0deg)}
}
@-webkit-keyframes chatMessage2 {
0% { -webkit-transform: rotateY(-90deg) }
100% { -webkit-transform: rotateY(0deg)}
}
.chat.team1.animation {-webkit-transform-origin:0% 50%; -webkit-animation: chatMessage 0.7s ease-out}
.chat.team2.animation {-webkit-transform-origin:100% 50%; -webkit-animation: chatMessage2 0.7s ease-out}
.modalDialog {-webkit-perspective:500px}
@-webkit-keyframes shareDialogIn {
0% { -webkit-transform: rotateX(90deg) scale(0.3) }
100% { -webkit-transform: rotateX(0deg) scale(1)}
}
@-webkit-keyframes shareDialogOut {
0% { -webkit-transform: rotateX(0deg) scale(1) }
100% { -webkit-transform: rotateX(100deg) scale(0.3)}
}
.modalDialog.animate .border {-webkit-animation: shareDialogIn 0.4s ease-out}
.modalDialog.animateOut .border {-webkit-animation: shareDialogOut 0.3s ease-in}