@charset "UTF-8";

/*

CSS By Cellardoor Design - Mitchell Renton
Web: 		http://www.cellardoor-design.co.uk
Email: 		mitch@cellardoor-design.co.uk
Project:	Footymatters.com

*/

/* ====== COLOURS ===== 

RED			#C41616
TEXT		514f4c

/* ====== GENERAL ===== */

body		{ background: #ccc url(../images/bg-tile.gif) repeat; background-attachment: fixed; font: 62.5% Verdana, Geneva, Tahoma, sans-serif  }
#container	{ width: 960px; margin: 0 auto; margin-bottom: 15px; background: #fff; border: 1px solid #ccc; -moz-border-radius: 10px; -moz-border-radius: 10px; }

/* ====== TYPOGRPAHY ===== */

h1, h2, h3, h4, h5	 	{ margin-bottom: 15px; color: #000; }
h1						{ font-size: 2.2em; }
h2						{ font-size: 1.8em; }
h3						{ font-size: 1.3em; }
h4						{  }
h5						{  }
p						{ font-size: 1.1em; line-height: 20px; padding-bottom: 15px; }
a						{ color: #C41616; text-decoration: none; }
a:hover					{ text-decoration: underline; }



/* ====== HEADER SECTION ===== */

#advertisements			{ width: 728px; height: 90px; margin: 10px auto; background: #C41616; }
#header fieldset		{ float: right; margin-top: 12px;  }
#header input			{ float: left; width: 110px; height: 16px; margin: 0 8px 0 0; padding: 4px 10px 2px 2px; background: #000; border: 1px solid #C41616; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; }
#header .button			{ margin-right: 10px; padding: 2px 2px 2px 0; background: #000; border: 1px solid #C41616; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #ccc; cursor: pointer; }
#header .button:hover	{ background: #575B5E; border: 1px solid #494c4e; }
#header					{ width: 960px; height: 206px; }
#logo					{ float: left; width: 681px; height: 170px; }

#logo-icon				{ float: left; margin-top: 18px; }
#logo-text				{ float: left; margin-top: 30px; }

h3#tagline				{ float: right; width: 158px; height: 26px; margin: 85px 25px 0 0;  display: block; text-indent: -9999px; background: url(../images/thinking_football.gif) no-repeat; display: inline; }
#latest_flash			{ height: 50px; margin: 0 25px; padding: 0 0 0 110px; background: url(../images/latest.gif) no-repeat left;   }
#latest_flash p			{ padding-top: 15px; font-size: 1.5em; font-style: italic; color: black; }




/* ====== NAVIGATION ===== */

#navigation					{ width: 960px; height: 50px;  background: url(../images/nav-bg.gif) no-repeat; }
ul.dropdown                 { position: relative; }
ul.dropdown li              { float: left; zoom: 1;  }
ul.dropdown li a           	{ height: 50px; display: block; text-indent: -9999px; }
ul.dropdown li.hover,
ul.dropdown li:hover       	{ position: relative; }

ul li.home					{ width: 115px; background: url(http://www.footymatters.com/images/navigation/home.gif) no-repeat; }
ul li.articles				{ width: 108px; background: url(http://www.footymatters.com/images/navigation/articles.gif) no-repeat; }
ul li.news-stats			{ width: 132px; background: url(http://www.footymatters.com/images/navigation/news-stats.gif) no-repeat; }
ul li.forum					{ width: 108px; background: url(http://www.footymatters.com/images/navigation/forum.gif) no-repeat; }
ul li.video					{ width: 108px; background: url(http://www.footymatters.com/images/navigation/video.gif) no-repeat; }
ul li.review				{ width: 109px; background: url(http://www.footymatters.com/images/navigation/reviews.gif) no-repeat; }
ul li.community				{ width: 132px; background: url(http://www.footymatters.com/images/navigation/community.gif) no-repeat; }
ul li.join					{ width: 109px; background: url(http://www.footymatters.com/images/navigation/join.gif) no-repeat; }

ul li.home a.home-on, li.home a:hover				{ width: 115px; background: url(http://www.footymatters.com/images/navigation/home-on.gif) no-repeat; }
ul li.articles a.home-on, li.articles a:hover		{ width: 108px; background: url(http://www.footymatters.com/images/navigation/articles-on.gif) no-repeat; }
ul li.news-stats a.home-on, li.news-stats a:hover	{ width: 132px; background: url(http://www.footymatters.com/images/navigation/news-stats-on.gif) no-repeat; }
ul li.forum a.home-on, li.forum a:hover				{ width: 108px; background: url(http://www.footymatters.com/images/navigation/forum-on.gif) no-repeat; }
ul li.video a.home-on, li.video a:hover				{ width: 108px; background: url(http://www.footymatters.com/images/navigation/video-on.gif) no-repeat; }
ul li.review a.home-on, li.review a:hover			{ width: 109px; background: url(http://www.footymatters.com/images/navigation/reviews-on.gif) no-repeat; }
ul li.community a.home-on, li.community a:hover		{ width: 132px; background: url(http://www.footymatters.com/images/navigation/community-on.gif) no-repeat; }
ul li.join a.home-on, li.join a:hover				{ width: 109px; background: url(http://www.footymatters.com/images/navigation/join-on.gif) no-repeat; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 				{ width: 180px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 1; background: #fff; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
ul.dropdown ul li 			{ padding: 8px 0 8px 5px; border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li a			{ height: auto; text-indent: 0; width: 100%; display: inline-block; color: #514f4c; font-size: 1.2em; } /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a:hover	{ background: none; color: #C41616; }	

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 			{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 	{ visibility: visible; }




/* ====== LEFT_CONTENT ===== */

#content_wrap			{ background: url(../images/content-bg.png) repeat; padding-top: 15px; }
#content				{ float: left; width: 592px; margin-left: 25px; padding-bottom: 20px; display: inline; }
#feature				{ position: relative; width: 577px; height: 304px; margin-bottom: 10px; }
.picappFront			{ height: 299px; }
#feature .inside		{ position: absolute; bottom: 0; left: 0; width: 545px; display: block; padding: 12px 16px; background: url(../images/transparent-bg.png); }
#feature h1				{ margin-bottom: 10px; font-size: 2.8em; font-weight: bold; letter-spacing: -1px; }
#feature h1 a			{ color: #fff; }
#feature p				{ font-size: 1.3em ; line-height: 1.6em; color: #fff; }
#recent_articles		{ width: 592px; margin-top: 15px; }


/* ====== PAGE ===== */

.post					{ width: 575px; border: 1px solid #ccc; background: #fff; }
.post .inside 			{ padding: 20px; }
.post h1				{ border-bottom: 1px dotted #C41616; padding-bottom: 5px; }


/* ====== POST ===== */


.article						{ float: left; width: 279px; height: 339px; border: 1px dotted #C41616; margin: 0 15px 15px 0; background: url(../images/article-bg-l.gif) no-repeat; display: inline; }
.article .inside				{ width: 233px; height: 299px; margin: 20px auto; overflow: hidden; }
.article p						{ font-size: 1.1em; }
.alt							{ background: url(../images/article-bg-r.gif) no-repeat; }
.article .thumb					{ float: left; width: 85px; height: 85px; margin: 4px 10px 5px 0; display: inline; }
.article h2						{ margin-bottom: 10px; }
.article h2 a					{ color: #333; }
.article h2 a:hover				{ color: #C41616; }
.article h3, 
#single_article h3				{ font-size: 1.1em; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #333; } 
.article .meta,
#single_article .meta			{ float: left; margin-right: 10px; display: inline; }
.article .date, 
#single_article .dates			{ float: left; display: inline; }
.article .comment_count,
#single_article .comment_count	{ float: right; padding-left: 17px;  background: url(../images/speech.gif) no-repeat 5px 6px; display: inline; }


/* ====== SINGLE_ARTICLE ===== */

#single_article					{ background: #fff; border: 1px solid #ccc; margin: 0 15px 15px 0; clear: both; }  
#single_article .inside			{ padding: 20px; }
#single_article h1				{ margin: 0; }
.alignright						{ float: right; margin: 0 0 15px 15px; border: 1px solid #ccc; }
.alignleft						{ float: left; margin: 0 10px 10px 0; border: 1px solid #ccc; }
.caption						{ background: #eee; padding: 5px 0 0; text-align: center; clear: both; }
p.caption-text					{ padding: 3px 0!important; }


/* ====== VIDEO ===== */

.video_wrap						{ float: left; width: 270px; height: 100%; margin: 0 0 15px 21px; padding: 10px; background: #fff; border: 1px solid #ccc; display: inline; }
.video_wrap p					{ font-size: 1.2em; padding: 5px 3px 0 0; }


/* ====== COMMENT BOX ===== */

#comment_box					{ background: #fff; border: 1px solid #ccc; margin: 0 15px 15px 0; font-size: 1.2em; }
#comment_box .inside			{ padding: 20px; } 
li#comment						{ border-bottom: 1px dotted #ccc; margin-bottom: 10px; }
#comment_box span.date			{ font: 1.1em Georgia, Cambria, Times, "Times New Roman", serif; }

/* ====== RIGHT CONTENT ===== */

#sidebar					{ float: left; width: 318px; }
#spoiler_wrap				{ margin-bottom: 15px; }
.article_spoiler			{ position: relative; float: left; width: 159px; height: 152px; background: blue; display: inline; }
.article_spoiler h3			{ font: 1.2em Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; letter-spacing: -1px; }
.article_spoiler a			{ position: absolute; bottom: 0; left: 0; width: 143px; display: block; padding: 6px 8px; background: url(../images/transparent-bg.png); color: #fff; }
.sidebar_left				{ background: #fff; float: left; width: 152px; margin: 0 10px 15px 0; border: 1px solid #ccc; display: inline;   }
.sidebar_left .comment		{ padding-top: 10px; border-bottom: 1px dotted #ccc; }
.sidebar_left .comment p	{ font-style: italic; }
.sidebar_left .comment h4	{ font-size: 1.1em; color: #C41616; }
.sidebar_right .inside		{ padding: 10px; }
.sidebar_left .inside		{ padding: 10px; }
.sidebar_right				{ background: #fff; float: right; width: 152px; margin-bottom: 15px; border: 1px solid #ccc; display: inline;  }
.sidebar_left h2, 
.sidebar_right h2,
.sidebar_full h2			{ padding: 10px 5px 10px 5px; margin: 0; color: #fff; font-family: Tahoma, Geneva, Verdana; text-transform: uppercase; letter-spacing: 2px;   } 
.sidebar_left h2,
.sidebar_right h2			{ background: #262626 url(../images/sidebar_half-bg.jpg) no-repeat left; }
.sidebar_full h2			{ background: #262626 url(../images/sidebar_full-bg.jpg) no-repeat left;  }
.sidebar_full				{ margin-bottom: 15px; }
.sidebar_right img			{ float: left; display: inline; }


/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #ccc;
 font-size: 1.5em;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #ccc;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #C41616; }

ul.tabbernav li a:hover
{
 color: #fff;
 background: #C41616;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:15px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}






/* ====== FOOTER ===== */

#footer					{ height: 50px; background: #C41616; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; }
#footer p				{ padding: 10px 25px 0 0; text-align: right; color: #fff; }

#cellar ul li.cellardoor	{
								border-left: none;
								width: 960px;
								margin: 0 auto;
								}
					
#cellar ul li.cellardoor a	{
								
								padding-right: 100px;
								display: block;
								width: 133px;
								height: 35px;							
								background: url(../images/cellardoor.png) no-repeat;
								}