/* -------------------------------------------------------------------

	Boondoggle - <css creator>
	<client>
	
	1. Structure
	2. Header
	3. Navigation
	4. Column01
	5. Column02
	6. Column03
	7. Footer
	8. Miscellaneous
	
	always include reset.css, it will reset your style
	for all browers, it includes the clearfix
	
	typography specs must be specified in typography.css
	form specs must be specified in forms.css
	
	ID en class naming => use capitals for seperation: navHome

------------------------------------------------------------------- */



/* ----- imports -------------------------------------------------- */

@import url(typography.css);
@import url(forms.css);



/* ------------------------------------------------------------------------------------- 1. Structure -------------------------------------------- */

body		{  
	margin: 0;
	padding: 0;
}

#container	{  }
#wrapper	{  }

#header		{  
	width: 100%;
	height: 95px;
	background-image:url(/content/img/bg-header.png);
	position: relative; 
}
#navigation	{  }
#content	{  
	width: 950px;
	margin: 13px auto;
	position: relative; 
}
#column01	{  
	margin: O;
	padding: 0;
	float:left;
	width: 624px;
	position: relative; 
}
#column02	{  
	float:right;
	width: 326px;
	top: 0px;
	position: relative;
}
#column03	{  }
#footer		{ 
	clear: both; 
	width: 950px;
	margin: 0 auto;
	top: 20px;
	/* background-image:url(/content/img/shadow.png); */
	position: relative;
}



/* ------------------------------------------------------------------------------------- 2. Header ----------------------------------------------- */

/* item description */
#header #menu {  
	width: 950px;
	height: 95px;
	margin: 0 auto;
	
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size: 14pt;
	text-decoration: none;
	color: #787878;

}
#header #menu #links {
	top: 50px;
	left: 75px;
	position: relative;
	float: left;
}
#links{
	margin-left:180px;
}

#header #menu #links a {
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size: 14pt;
	text-decoration: none;
	color: #FFFFFF;
}

#header #menu #logo-cuptweets {
	left: 15px;
	position: relative;
	float: left;
}

#header #menu #logo-sporza {
	top: 10px;
	position: relative;
	float:right;
}



/* ------------------------------------------------------------------------------------ 3. Navigation ------------------------------------------- */

/* item description */
#navigation #itemName {  }



/* ------------------------------------------------------------------------------------- 4. Column01 --------------------------------------------- */

#getting-started{
	background-color:#084234;
	width:619px;
	min-height:150px;
	background-image:url(/Content/img/halloffame-back_03.gif);
	background-position:top;
	background-repeat:repeat-x;
	margin-bottom:10px;
}
#getting-started-title {
	padding-top:33px;
	margin-left:32px;
}
#getting-started p{
	margin-top:10px;
	margin-left:32px;
	margin-right:32px;
	margin-bottom:0px;
	color:#FFFFFF;
	font-family:tahoma, helvetica, arial, sans-serif;
	font-size: 12px;
}
#getting-started a { color: #82c55b; }
#getting-started a:hover { text-decoration: none; }
#getting-started a.active { font-weight: bold; }
#getting-started ol { margin: 0 0 0 35px; }
#getting-started ol li {
	line-height: 18px;
	list-style: none;
	margin-bottom: 10px;
	padding-left: 35px;
}
#getting-started .btnHolder { margin-top: 20px; text-align: center; }
#getting-started #useSiteButton { float: left; background: url(/Content/img/btn-use-site.gif) no-repeat 0 0; width: 243px; height: 29px; margin-right: 50px; }
#getting-started #useTwitterButton { float: left; background: url(/Content/img/btn-use-twitter.gif) no-repeat 0 0; width: 195px; height: 29px; }
#getting-started #useSiteButton.active, #getting-started #useTwitterButton.active { background-position: 0 -31px; }
#getting-started #useSite, #getting-started #useTwitter { clear: both; display: none; margin-top: 10px; }
#getting-started .moreInfo { clear: both; margin-top: 25px; }
#getting-started .olItem1 {	background: url(/Content/img/bg-ol-1.gif) no-repeat 0 0; }
#getting-started .olItem2 {	background: url(/Content/img/bg-ol-2.gif) no-repeat 0 0; }
#getting-started .olItem3 {	background: url(/Content/img/bg-ol-3.gif) no-repeat 0 0; }
#getting-started .olItem4 {	background: url(/Content/img/bg-ol-4.gif) no-repeat 0 0; }
#getting-started .olItem5 {	background: url(/Content/img/bg-ol-5.gif) no-repeat 0 0; }
#getting-started-close{
	float:right;
	position:relative;
	top:3px;
	margin-left:3px;
	}
/* item description */
#column01 #itemName {  }

.rankingButton
{
	margin-left:5px;
}


#UserRanking{
	background-color:#084234;
	width:348px;
	min-height:396px;
	background-image:url(/Content/img/halloffame-back_03.gif);
	background-position:top;
	background-repeat:repeat-x;
	margin-bottom:3px;
	margin-bottom:3px;
}

#userranking-title{
	display:block;
	margin-left:19px;
	padding-top:16px;
}
#UserRanking ul{
	padding-left:5px;
	margin-top:11px;
	list-style:none;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size: 14px;
	}
#UserRanking ul li{
	padding-left:9px;
	padding-top:3px;
	height:22px;
	background-image:url(/Content/img/halloffame-li-background_03.png);
	background-position:left top;
	background-repeat:no-repeat;
}
#userranking-check{
	margin-left:19px;
	margin-top: 15px;
}
#check-title{
	display:block;
	width:300px;
	font-weight:bold;
}
#check-form{
	margin-top:8px;
	height:30px;
	padding-bottom:10px;
}
#check-form input{
	height:21px;
	width:210px;
	float:left;
}
#check-form a{
	float:left;
	text-decoration:none;
	margin-left:4px;
	padding-left:10px;
	padding-top:7px;
	color:#FFFFFF;
	font-weight:bold;
	background-image:url(/Content/img/GO-back_07.png);
	background-repeat:no-repeat;
	background-position:left top;
	width:41px;
	height:28px;
	display:block;
}
.rank{
    font-weight:bold;
	float:left;
	width:25px;
}

.rank-other{
    font-weight:bold;
	float:left;
	margin-right:10px;
}

.username{
	float:left;
	overflow: hidden;
}
.username a{
	color:#FFFFFF;
	text-decoration:none;
}
.username a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}
.score{
	float:right;
	width:37px;
}

#experts{
	margin-top:-12px;
	background-color:#000000;
	width:348px;
	height:156px;
	background-image:url(/Content/img/experts-back_03_03.gif);
	background-position:top;
	background-repeat:repeat-x;
}
#experts-title{
	display:block;
	margin-left:19px;
	padding-top:16px;
}


#ShareArea{
	background-color:#084234;
	width:348px;
	min-height:50px;
	background-image:url(/Content/img/halloffame-back_03.gif);
	background-position:top;
	background-repeat:repeat-x;
	margin-bottom:3px;
}

#ShareArea a{ 
	font-family:Tahoma, Arial;
	color:#FFFFFF;
	font-style:normal;
	text-decoration:underline;
}

.shareButton{
	float:right;
	margin-right:10px;
	margin-top:18px;
}



#banners{
	
	width:348px;
	min-height:127px;
	
	margin-top:3px;
	margin-bottom:3px;
}
#banner-left{
	float:left;
	width:171px;
	height:127px;
	background-color:#000000;
	background-image:url(/Content/img/experts-back_03_03.gif);
	background-position:top;
	background-repeat:repeat-x;
}
#banner-left img{
	margin-top:15px;
	margin-left:50px;
	border:0;
}
#banner-right{
	margin-left:6px;
	float:left;
	width:171px;
	height:127px;
	background-color:#000000;
	background-image:url(/Content/img/experts-back_03_03.gif);
	background-position:top;
	background-repeat:repeat-x;
}
#banner-right img{
	margin-left:8px;
}
.banner-text{
	margin-top:15px;
	margin-left:8px;
	width:150px;
	display:block;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size: 11px;
}
/* ------------------------------------------------------------------------------------- 5. Column02 --------------------------------------------- */

/* item description */
#column02 #itemName {  }



/* ------------------------------------------------------------------------------------- 6. Column03 --------------------------------------------- */

/* item description */
#column03 #itemName {  }



/* ------------------------------------------------------------------------------------- 7. Footer ----------------------------------------------- */

/* item description */
#footer #logo-lifelabs { 
	left: 15px;
	position: relative;
	float: left;
 }
 
 #footer #footer-links { 
	top: 15px;
	position: relative;
	float: right;
	color: #FFFFFF;
 }

 #footer #footer-links a {
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size: 8pt;
	text-decoration: none;
	color: #FFFFFF;
}


/* ------------------------------------------------------------------------------------- 8. Miscellaneous ---------------------------------------- */
#faq h2{
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	margin-left:10px;
	color:#FFFFFF;
}
#faq p{
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:12px;
	font-weight:normal;
	margin-left:10px;
	color:#FFFFFF;
}
faq ul{
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#FFFFFF;
	padding-left:10px;
}
.shortcode{
	text-align:center;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:14px;
	font-weight:bold;
}

.submit-button{
	margin-top:10px;
	width:440px;	
	text-align:center;
}

.facebook-link { 
	width : 196px; 
	height : 28px; 
	display: block;
	float:left;
	background-image : url(/Content/img/predictviafacebook.gif); 
	margin-left:10px;
} 

.facebook-link:hover { 
	width : 196px; 
	height : 28px; 
	display: block;
	float:left;
	background-image : url(/Content/img/predictviafacebook-hover.gif); 
	margin-left:10px;
}

.twitter-link { 
	width : 196px; 
	height : 28px; 
	display: block;
	float:left;
	background-image : url(/Content/img/predictviatwitter.gif); 
	margin-left:17px;
} 

.twitter-link:hover { 
	width : 196px; 
	height : 28px; 
	display: block;
	float:left;
	background-image : url(/Content/img/predictviatwitter-hover.gif); 
	margin-left:17px;
}

.submit{
	display:block;
	width:461px;
	height:312px;
	background-color:#037665;
}
.submit-title{
	margin-left:45px;
	padding-top:13px;
}
.submit-inner{
	width:440px;
	height:232px;
	background-color:#095b4f;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding-bottom:0px;
}
.submit-bottom{
	width:440px;
	height:11px;
	background-image:url(/Content/img/submit-bottom_03.png);
	background-position:top;
	padding-top:0;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
}
.submit-inner table{
	border:0;
	width:440px;
	height:132px;
	padding:0;
	margin:0;
}

.submit-score-td
{
	border:0;
	width:129px;
	height:112px;
	text-align:center;
}

.submit-shootout-td
{
	border:0;
	width:129px;
	height:25px;
	text-align:center;
	vertical-align:middle;
}


.submit-table-middle
{
	border:0;
	width:140px;
	height:112px;
	text-align:center;
	width:182px;
}
.submit-score-td input 
{
	border:0;
	width:34px;
	height:29px;
	text-align:center;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	vertical-align:middle;
}

.submit-inner input:disabled {
	width:34px;
	height:29px;
	text-align:center;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:black;
	background-color:white;
	border:0;
}


.submit-hometeam-shortcode{
	margin-top:29px;
	font-size:14px;
	font-weight:bold;
}
.submit-hometeam-flag{
}
.submit-hometeam-score{
	height:29px;
	width:60px;
	margin-left:37px;
	padding:0px;
}
.submit-input{
	float:left;
}
.submit-arrows{
	margin-top:3px;
	margin-left:4px;
	display:inline-table;
	float:left;
	height:29px;
	width:13px;
}
.submit-date{
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:13px;
}

.submit-teams{
	margin-top:4px;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:15px;
	font-weight:bold;
}
.submit-group{
	margin-top:4px;
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size:13px;
}

.submit-status{
	margin-top:0px;
	font-size:12px;
	width:auto;
}

#usernotfound{
	background-color:#095b4f;
	width:250px;
	height:auto;
}
#usernotfound p{
	padding:10px;
}
#usernotfound p a{
	color:#FFFFFF;
}
#detail-line{
	margin-top: 10px;
	background-color:#6a756d;
	height:1px;
	width:532px;
	margin-left:20px;
	margin-right:auto;
}
#graph-title{
	margin-top:16px;
	font-weight:bold;
}
#detail-graph{
	width:338px;
	float:left;
	margin-left:20px;
}
#graph-legend{
	float:left;
	margin-top:30px;
	text-align:right;
	}
#graph{
	float:left;
}

#detail-twitter{
	float:left;
	width:200px;
}
#twitter-title{
	margin-top:16px;
	font-weight:bold;
}
#title-small{
	font-size:11px;
	font-weight:normal;
}
.twitter-percentage{
	width:90px;
	float:left;
	font-size:28px;
	font-weight:bold;
}
.twitter-inner{
	margin-top:10px;
	float:none;
	width:180px;
	height:30px;
}
.percentage-small{
	margin-top:5px;
	width:90px;
	float:left;
	font-size:11px;
	font-weight:normal;
}
img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		/*		
		div#content {
			position: relative; 
			
			
			width: 500px;
			margin: 0 auto;
			padding: 20px;
			font-family: helvetica, arial, sans-serif;
			font-size: 10pt;
			line-height: 16pt;
		}*/
		


.imgReplaced { background-repeat: no-repeat; display: block; outline: none; text-indent: -9999px; }

.left	{ float: left; }
.right	{ float: right; }
.clear	{ clear: both; }
.hide	{ display: none; }
.first	{ margin-top: 0; padding-top: 0; }
.last	{ margin-bottom: 0; padding-bottom: 0; }

hr { display: none; }

/* flash alternative styles */
.block { background: #efefef; border: 4px solid #dfdfdf; clear: both; margin: 25px 0; padding: 25px; }
ul#alternativeNav { border-bottom: 2px solid #333; border-top: 2px solid #333; list-style: none; padding: 10px 0 10px 5px; margin: 0 0 20px 0; }
ul#alternativeNav li { float: left; margin: 0 10px 0 0; }

/* clearfix */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.clearfix { display: inline-block; }

.main-table{
  width:619px;
  border: #084234 13px solid;
  background-image: url(/Content/img/transparent-back.png);
  padding:0px; 
  margin:0px;
}
.main-table td{ 
	 border:0;
}
.main-table td a{ 
	 color:#FFFFFF;
}

.main-table h1{ 
	border:0;
	font-family:Tahoma, Arial;
	color:#FFFFFF;
	font-size:21px;
	font-style:normal;
}

.main-table h1 a{ 
	border:0;
	font-family:Tahoma, Arial;
	color:#FFFFFF;
	font-size:21px;
	font-style:normal;
	text-decoration:underline;
}

.tab-bar{ 
	border-bottom:#083f32 1px solid;
	border-top:#083f32 1px solid;
	margin:0;
	padding:0;
	height:32px;
}

.tab{
	/*width: 50%;*/
    margin:1px;
    text-align:center;
    font-family:Tahoma, Arial;
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    padding:4px 0 4px 0;
}

.tab-left{ 
	border-left:#083f32 1px solid;
}
.table-line{
	border-bottom: #083f32 1px solid;
}
.td-padding{
	padding:0px;
}

.tab-active{ 
	background-color:#e60000;
}
.game {
	margin-left:10px;
	margin-right:auto;
	height:auto;
}
.game-top{
	border-top:#727272 1px solid;
	border-left:#727272 1px solid;
	border-right:#727272 1px solid;
	width:573px;
	min-height:90px;
	margin-top:10px;
	margin-left:10px;
	margin-right:0px;
    margin-bottom:0px;
    padding-bottom:0px;
   background-image:url(/Content/img/game-background-color.png);
}

.game-bottom{
   margin: 0px;
   margin-left:10px;
   padding: 0px;
   height:12px;
   width:573px;
   background-image:url(/Content/img/game-background_03.png);
  background-repeat:no-repeat;
  clear:both;

}
/*
.date-holder{
    margin-left:20px;
	text-align:left;
	vertical-align:middle;
}*/
.date-holder
{
	width:60px;
	text-align:right;
	vertical-align:middle;
	padding:0px;
}
.left-score{
	float:left;
	text-align:center;
}
.right-score{
	float:left;
	text-align:center;
}
.flag-left
{
	padding: 0px 0px 0px 30px;
    vertical-align:middle;
}
.flag-right{
    padding: 0px 30px 0px 0px;
    vertical-align:middle;
}

.more-info{

   text-align:right;
   margin-top:10px;
 width  :60px;
   font-family:Tahoma, Arial;
   color:#FFFFFF;
   font-size:12px;
   padding:0px;
   
   
}

.score
{
 
}

.score-col
{
	font-family    :Tahoma, Arial;
   color:#FFFFFF;
   font-size:24px;
   font-weight:bold;
 width:20px;
 vertical-align:middle;
 text-align:center;
}

.score-name
{
 text-align:center;
vertical-align:middle;
}

.score-name-col
{
 width:220px;
 text-align:center;
 vertical-align:middle;
}

.match-name-col
{
	vertical-align:middle;
	padding:0px 0px 0px 0px;
	text-align:center;
	height:30px;
}

.game-score-inner{
   /*width:227px;*/
   text-align:center;
   font-family:Tahoma, Arial;
   color:#FFFFFF;
   font-size:12px;
   padding-left:10px;
   padding-right:10px;
   vertical-align:middle;
}

#game-table td
{

}

#game-table
{
	margin-bottom:0px;
}

#game-score-table 
{
	margin-bottom:0px;
}


#game-score-table td
{
	padding:0px 0px 0px 0px;
}

#game-table h1{
   font-family:Tahoma, Arial;
   color:#FFFFFF;
   font-size:16px;
   text-align:center;
   vertical-align:bottom;
   padding: 3px 0px 0px 0px;
   height:18px;
   margin-bottom:0px;
}

.game-score-inner h1{
   font-family:Tahoma, Arial;
   color:#FFFFFF;
   font-size:16px;
   text-align:center;
   vertical-align:middle;
}

.game-score-inner h2{
   font-family:Tahoma, Arial;
   color:#FFFFFF;
   font-size:20px;
   font-weight:bold;
   margin-top:0px;
   margin-bottom:3px;
}

.button{ 
	margin-left:auto;
	margin-right:auto;
	background-image:url(/Content/img/btn_submit.png);
	background-repeat:no-repeat;
	display:block;
	width:151px;
	height:18px;
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bold;
	padding:3px 0px 0px 0px;
}


.more-info a{
   color:#FFFFFF;
   margin-top: 10px;
}
.percentage{
   margin-left:auto;
   margin-right:auto;
   width: 100px;
   height:1px;
   display:block;
   background-color:#FF0000;
}

.green{
   float:left;
   display:block;
   height:1px;
   background-color:#00FF00;
}

.red{
   float:left;
   display:block;
   height:1px;
   background-color:#FF0000;
}