/*
	CSS STYLESHEET FOR FREETHEFLASH.COM
	Copyright (C) FreeTheFlash.com
	Created by: Feross Aboukhadijeh
*/

/*******************************
	DEFAULT
*******************************/

body {
	background: #3c3c3c url(images_site/background_site.jpg) center;
	background-repeat: repeat-y;
	color: #FFF; /* Default text color = white */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

a:link, a:active, a:visited {
	color: #FF9933; /* Orange */
}

a:hover {
	color: #FFFFFF; /* White */
}

img {
	border: none;
}

#content a img {
	filter:alpha(opacity: 90); 
	-moz-opacity: 0.9;
	opacity: 0.9;
	border: #000 1px solid;
}

#content a:hover img {
	filter:alpha(opacity: 100); 
	-moz-opacity: 0.99;
	opacity: 0.99;
	border: #FFF 1px solid;
}

/*******************************
	NAV STYLES
*******************************/

#nav {
	background-color: #663300;
}

#topButtons, #blueButtons {
	width: 180px;
	padding: 0 0 0px 0; /* Space below #topButtons before Ad? */
	margin-bottom: 0;
	color: #FFF;
	font-size: 11px; /* REMOVE? */
	border-top: 1px solid #000000;
}

#topButtons ul, #blueButtons ul {
	list-style: none;
	margin: 0; /* No margin or padding. Added later. */
	padding: 0;
	border: none;
}

#topButtons li, #blueButtons li {
	border-bottom: 1px solid #000000; /* Black line between each button */
	margin: 0;  /* No margin or padding. Added later. */
}

#topButtons li a, #blueButtons li a {
	display: block;
	padding: 6px 6px 6px 12px; /* Padding all around. More on the left */
	color: #FFF; /* Remove? */
	width: 162px;
	background: #663300 url(images_site/background_topbuttons.jpg);
	background-repeat: repeat-x;
	text-decoration: none; /* No underline on links */
	font-weight: bold;
}

#topButtons li a:hover, #blueButtons li a:hover {
	background: #BB5D00; /* Orange BG Rollover */
	background-repeat: repeat-x;
}

#blueButtons { /* blueButtons are EXACTLY the same as topButtons, except for the changes in this rule, and the two next rules */
	border-top: 0; /* Remove duplicate border lines between the two sets of buttons*/
}

#blueButtons li a {
	background: #001050 url(images_site/background_bluebuttons.gif);
}

#blueButtons li a:hover {
	background: #4477DD; /* Blue BG Rollover */
}

body#home #topButtons li a.home, body#flash #topButtons li a.flash, body#videos #topButtons li a.videos, body#games #topButtons li a.games, body#audio #topButtons li a.audio, body#prankcalls #topButtons li a.prankcalls, body#soundboards #topButtons li a.soundboards, body#downloads #topButtons li a.downloads, body#signup #blueButtons li a.signup, body#login #blueButtons li a.login {
	color: #CCCCCC;
	background: #333333;
	background-repeat: repeat-x;
}

body#home #topButtons li a.home:hover, body#flash #topButtons li a.flash:hover, body#videos #topButtons li a.videos:hover, body#games #topButtons li a.games:hover, body#audio #topButtons li a.audio:hover, body#prankcalls #topButtons li a.prankcalls:hover, body#soundboards #topButtons li a.soundboards:hover, body#downloads #topButtons li a.downloads:hover, body#signup #blueButtons li a.signup:hover, body#login #blueButtons li a.login:hover {
	color: #FFFFFF;
	background: #232323;
	background-repeat: repeat-x;
}

/* */

#bottomButtons {
	width: 180px;
	padding: 0 0 0 0; /* Padding below #bottomButtons */
	margin-bottom: 0;
	color: #FFF;
	font-size: 11px; /* REMOVE? */
	border-top: 1px solid #000000;
}

#bottomButtons div {
	height: 30px;
	background: url(images_site/friends_title.gif) no-repeat left top;
}

#bottomButtons ul, ul#links57762 {
	list-style: none;
	margin: 0; /* No margin or padding. Added later. */
	padding: 0;
	border: none;
}

#bottomButtons li, ul#links57762 li {
	border-bottom: 1px solid #000000; /* Black line between each button */
	margin: 0;  /* No margin or padding. Added later. */
}

#bottomButtons li a, ul#links57762 li span a {
	display: block;
	padding: 3px 6px 3px 12px; /* Padding all around. More on the left */
	color: #FFF; /* Remove? */
	width: 162px;
	background: #663300 url(images_site/background_topbuttons.jpg);
	background-repeat: repeat-x;
	text-decoration: none; /* No underline on links */
	font-weight: bold;
}

#bottomButtons li a:hover, ul#links57762 li span a:hover {
	background: #BB5D00; /* Orange BG Rollover */
	background-repeat: repeat-x;
}

html>body #topButtons li a, html>body #bottomButtons li a, html>body ul#links57762 li span a { /* Sizes the Nav bar in FF */
	width: auto;
}

#coolSites div.coolSitesTitle {
	height: 30px;
	background: url(images_site/coolsites_title.gif) no-repeat left top;
}

#coolSites p {
	text-align: center;
	margin-top: 0;
}

#funPages div {
	height: 30px;
	background: url(images_site/funpages_title.gif) no-repeat left top;
}

#funpages a.fpe {
	padding: 3px 2px 3px 10px;
	font-size: 110%;
}

#funpages a.fpe:link, #funpages a:visited {
	text-decoration: none;
}

#funpages a.fpe:hover, #funpages a:active {
	text-decoration: underline;
}

/*******************************
	GENERAL
*******************************/

#logo {
	background-image: url(images_site/background_logo.gif);
	background-position: top left;
	background-repeat: no-repeat;
	border: none;
}

#status {
	background-color: #733900;
	color: #F46600; /* Dark Orange "color: #CC6600;" */
	font-size: 12px;
	font-weight: bold;
}

#headerLinks {
	color:#FFF;
	font-weight: bold;
}

#headerLinks .right {
	color: #FFC184;
	font-size: 11px;
	font-weight: normal;
}

#footer {
	font-size: 11px;
	line-height: 1.7em;
	background-color: #333;
	text-align: center;
}

#footerLinks {
	padding: 15px 5px 3px 5px;
	word-spacing: 0.6em;
	letter-spacing: 0.05em;
}

#footerLinks a:link, #footerLinks a:visited {
	color: #FF9933;
}
#footerLinks a:hover, #footerLinks a:active {
	color: #FFF;
}

#footerText {
	color: #CCC;
	padding: 2px 5px 2px 5px;
}

#keywords h3 {
	font-size: 10px;
	color: #888;
	padding: 2px 5px 10px 5px;
	font-weight: normal;
}

#keywords h3 a {
	text-decoration: none;
	color: #888;
}

.etcPage h2 {
	margin-top: 25px;
}

/*******************************
	LAYOUT
*******************************/

table {
	padding: 0;
	margin: 0;
	border: 0;
}

td {
	vertical-align: top;
}

#wrapper, #header, #mainBody, #footer {
	width: 922px;
	margin-left: auto;
	margin-right: auto;
}

#title {
	height: 90px;
	overflow: hidden;
	border-bottom: 1px solid #000;
}

#nav {
	width: 180px;
	float: left;
}

#headerLinks {
	height: 24px;
	background-image: url(images_site/background_headerlinks.jpg);
	background-repeat: repeat-x;
	background-position: top left;
	padding: 6px 10px 0 10px;
}

#headerLinks .left {
	width: 400px;
	float: left;
}

#headerLinks .right {
	width: 450px;
	text-align: right;
	float: right;
}

#leftContent {
	padding-left: 10px;
}

#rightContent {
	padding-left: 10px;
	padding-right: 10px;
}

#footer {
	clear: both;
}

#logo {
	width: 922px;
	height: 90px;
}

#status {
	height: 20px;
	padding: 5px 10px 0 10px;
	overflow: hidden;
}

#status .left {
	width: 700px;
	float: left;
}

#status .right {
	width: 150px;
	text-align: right;
	float: right;
	color: #CCC;
	padding-top: 0;
}

/*******************************
	CONTENT
*******************************/

html body div#content {
	background: #000000 url(images_site/background_body.jpg) no-repeat left top;
	margin-left: 180px;
	padding: 10px 0 10px 0;
}

#featured {
	background: url(images_site/box1middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #featured { /* Put padding back to normal for FF */
	padding-top: 0;
}

#adSites {
	background: url(images_site/box2middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #adSites { /* Put padding back to normal for FF */
	padding-top: 0;
}

#adSites p.yourAdHere {
	text-align: right;
	margin-bottom: 0;
	font-size: 10px;
	padding-right: 10px;
}

#adSites a:link p, #adSites a:visited p, #adSites a:hover p, #adSites a:active p {
	text-decoration: none;
	color: #FFF;
}

#leaderboard {
	background: url(images_site/box3middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #leaderboard { /* Put padding back to normal for FF */
	padding-top: 0;
}

#leaderboard a:link, #leaderboard a:active, #leaderboard a:visited, #newGames a:link, #newGames a:active, #newGames a:visited {
	color: #FFF;
}

#leaderboard a:hover, #newGames a:hover {
	color: #000;
}

.leaderboard_number {
	float: left;
	color: #FFF;
	font-size: 180%;
	padding-right: 5px;
	width: 30px;
	text-align: right;
}

#newVideos {
	background: url(images_site/box4middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newVideos { /* Put padding back to normal for FF */
	padding-top: 0;
}

#newGames {
	background: url(images_site/box5middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newGames { /* Put padding back to normal for FF */
	padding-top: 0;
}

#newFlash {
	background: url(images_site/box6middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newFlash { /* Put padding back to normal for FF */
	padding-top: 0;
}

#newAudio {
	background: url(images_site/box7middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newAudio { /* Put padding back to normal for FF */
	padding-top: 0;
}

#newSoundboards {
	background: url(images_site/box6middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newSoundboards { /* Put padding back to normal for FF */
	padding-top: 0;
}

#newPrankcalls {
	background: url(images_site/box4middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newPrankcalls { /* Put padding back to normal for FF */
	padding-top: 0;
}

#newDownloads {
	background: url(images_site/box16middle.gif) repeat-y;
	padding: 0;
	margin-bottom: 15px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #newDownloads { /* Put padding back to normal for FF */
	padding-top: 0;
}

/* File Rules */

.file {
	padding: 6px 5px 6px 10px;
	clear: left;
}

html>body .file {
	padding: 12px 5px 12px 10px;
	clear: left;
}

.file img {
	float: left;
	margin-right: 10px;
}

.file h2 {
	font-size: 120%;
	margin: 3px 3px 6px 0;
	text-decoration: underline;
}

.file p {
	margin: 6px 5px 0 0;
}

#adSites .file {
	padding: 5px 5px 0 15px;
}

#adSites .file h2 {
	font-size: 110%;
	margin: 5px 10px 0 0;
}

#adSites .file p {
	margin: 6px 0 5px 0;
}

/* Search Box */

.searchBox {
	height: 13px;
	font-size: 10px;
	background-color: #DDD;
	border: 1px solid #000;
}

.searchButton {
	height: 18px;
	font-size: 10px;
	background-color: #CCC;
	color: #000;
}

/*******************************
	ADS
*******************************/

#topAd {
	background-color: #000;
	height: 90px;
	width: 728px;
}

#navAd {
	text-align: center;
	margin: 0 auto;
	vertical-align: top;
	height: 660px; /* 600 Tall + 60 for each additional FTF button ad. */
	width: 160px;
}

#bodyAd {
	margin-bottom: 10px;
	height: 250px;
	width: 300px;
}

#bodyAdContent {
	margin-bottom: 10px;
	height: 250px;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

#mediaTable #bodyAdContent { /* Seperate style for media Page */
	margin-top: 10px;
	padding-bottom: 5px;
}

#bodyAd a img, #etcPage a img, #bodyAdContent a img {
	border: 0;
	filter:alpha(opacity: 100); 
	-moz-opacity: 0.99;
	opacity: 0.99;
}

#bodyAd a img:hover, #etcPage a img:hover, #bodyAdContent a img:hover {
	border: 0;
	filter:alpha(opacity: 100); 
	-moz-opacity: 0.99;
	opacity: 0.99;
}

/*******************************
	TABS
*******************************/

ul#tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 710px;
	float: left;
	margin-left: 4px; /* Fix margin for IE */
}

html>body ul#tabs { /* KLUDGE: Fix margin back for FF */
	margin-left: 8px;
}

ul#tabs li {
	float: left;
	background: url(images_site/tab_right.gif) no-repeat right top;
	margin-right: 1px;
}

ul#tabs li a {
	display: block;
	padding: 0 15px; /* Tabs size according to their contents */
	padding-top: 10px;
	padding-bottom: 12px;
	background: url(images_site/tab_left.gif) no-repeat left top;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#flash ul#tabs li.flash {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#flash ul#tabs li.flash a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#videos ul#tabs li.videos {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#videos ul#tabs li.videos a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#games ul#tabs li.games {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#games ul#tabs li.games a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#audio ul#tabs li.audio {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#audio ul#tabs li.audio a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#prankcalls ul#tabs li.prankcalls {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#prankcalls ul#tabs li.prankcalls a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#soundboards ul#tabs li.soundboards {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#soundboards ul#tabs li.soundboards a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

body#downloads ul#tabs li.downloads {
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

body#downloads ul#tabs li.downloads a {
	display: block;
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	float: left; /* KLUDGE: Fix for IE5.2 Mac */
}

ul#tabs li a:hover, ul#tabs li a:active {
	color: #CCC;
}

html>body ul#tabs li:hover { /* Hide button hover-state from IE */
	background: url(images_site/tab_right_current.gif) no-repeat right top;
}

html>body ul#tabs li a:hover { /* Hide button hover-state from IE */
	background: url(images_site/tab_left_current.gif) no-repeat left top;
	color: #FFF;
}

html>body#flash ul#tabs li.flash a:hover {
	color: #CCC;
}

html>body#videos ul#tabs li.videos a:hover {
	color: #CCC;
}

html>body#games ul#tabs li.games a:hover {
	color: #CCC;
}

html>body#audio ul#tabs li.audio a:hover {
	color: #CCC;
}

html>body#prankcalls ul#tabs li.prankcalls a:hover {
	color: #CCC;
}

html>body#soundboards ul#tabs li.soundboards a:hover {
	color: #CCC;
}

html>body#downloads ul#tabs li.downloads a:hover {
	color: #CCC;
}

ul#tabs li a:link, ul#tabs li a:visited {
	color: #FFF;
}

ul#tabs li a:hover, ul#tabs li a:active { /* Show a grey rollover to IE since it doesn't understand the button rollovers */
	color: #CCC;
}

/*******************************
	LISTING
*******************************/

#listing {
	float: left;
	margin-left: 4px; /* Fix margin for IE */
	margin-right: 14px;
	border-top: 15px solid #B05800;
}

html>body #listing {
	margin-left: 8px; /* Fix margin back for FF */
}

/* Page Buttons */

#pageButtons {
	float: left;
	background-color: #333;
	border: 1px solid #666;
	margin-top: 20px;
	padding: 8px 10px 8px 10px;
	margin-bottom: 5px;
	margin-left: 4px;
	width: 690px;
}

#pageButtons #pageButtonsText {
	font-size: 140%;
	border: none;
	padding-right: 10px;
}

html>body #pageButtons {
	margin-left: 8px;
}

#pageButtons span, #pageButtons a {
	padding: 4px 8px;
	margin: 0;
	font-size: 140%;
	font-weight: bold;
}

#pageButtons p {
	text-align: right;
}

#pageButtons span {
	border: 1px solid #FFF;
}

#pageButtons a:link, #pageButtons a:visited {
	border: 1px solid #333;
}

#pageButtons a:hover, #pageButtons a:active {
	border: 1px solid #FFF;
}

.imgfile {
	padding: 8px 5px 8px 10px;
}

.imgfile h2 {
	font-size: 120%;
	margin: 0px 0 5px 0;
	text-decoration: underline;
}

.imgfile p {
	margin: 5px 0 0 0;
}

/*******************************
	CONTENT
*******************************/

#contentInfo {
	margin-bottom: 12px;
}

#contentInfo .col1 img {
	float: left;
	border: 1px solid #FFF;
	margin-right: 10px;
}

#contentInfo .col1 h1 {
	font-size: 180%;
	margin: 0;
	margin-bottom: 10px;
}

#contentInfo .col1 div {
	margin-bottom: 5px;
}

#contentInfo .col1 .smallSize {
	color: #00FF00;
}

#contentInfo .col1 .mediumSize {
	color: #FFFF00;
}

#contentInfo .col1 .largeSize {
	color: #FF0000;
}

#contentInfo h2 {
	display: inline;
	font-size: 100%;
	padding-right: 8px;
	margin-bottom: 10px;
}

#contentInfo .col1 {
	float: left;
	width: 600px;
}

#contentInfo .col2 {
	float: right;
	text-align: center;
	margin-right: 15px;
}

#contentInfo .col2 h3 {
	margin: 0;
	margin-top: 10px;
	font-size: 160%;
	color: #FFFF00;
}

#contentInfo .col2 h4 {
	margin: 0;
	font-size: 140%;
	margin-top: 6px;
}

#mediaFile {
	margin: 0 0 15px 8px;
}

#mediaFile .loading {
	text-align: center;
}

#mediaFileVideo {
	margin: 10px;
}

#mediaFileVideo span p {
	padding: 0 15px;
	margin: 10px 0;
	text-align: center;
	display: block;
}

.mediaFileVideoCell {
	width:400px;
}

.loading p {
	display: inline;
	margin: 0;
	padding: 0;
	width: 460px;
}

#vid {
	z-index: 10000;
}

#description span, #gameInstructions span {
	display: block;
	font-size: 11px;
	margin: 10px 10px 4px 10px;
}

#description, #gameInstructions, #tellAFriend, #comments {
	padding: 0;
	margin: 10px 10px 10px 10px;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

#rateThis, #leaveComment {
	padding: 0;
	margin: 0 0 15px 0;
	padding-top: 3px; /* Fix padding problem in IE 6.0 */
}

html>body #description, html>body #gameInstructions, html>body #tellAFriend, html>body #comments, html>body #rateThis, html>body #leaveComment { /* Put padding back to normal for FF */
	padding-top: 0;
}

#description {
	background: url(images_site/box9middle.gif) repeat-y;
}

#gameInstructions {
	background: url(images_site/box10middle.gif) repeat-y;
}

#tellAFriend {
	background: url(images_site/box11middle.gif) repeat-y;
}

#comments {
	background: url(images_site/box12middle.gif) repeat-y;
}

#rateThis {
	background: url(images_site/box13middle.gif) repeat-y;
}

#leaveComment {
	background: url(images_site/box14middle.gif) repeat-y;
}

#tellAFriend a {
	font-size: 140%;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px dashed;
	margin-top: 4px;
}

/*******************************
	SITE MAP
*******************************/

.sitemap li {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: bold;
}

ul.sitemap {
	margin-bottom: 25px;
}

#content a.email img {
	filter:alpha(opacity: 100); 
	-moz-opacity: 0.99;
	opacity: 0.99;
	border: 0;
	margin-bottom: -1px;
}

#content a.email:hover img {
	filter:alpha(opacity: 100); 
	-moz-opacity: 0.99;
	opacity: 0.99;
	border: 0;
}

#content a.downloadButton img {
	border: 0;
}

#content a.downloadButton:hover img {
	border: 0;
}

p.more {
	text-align: right;
	margin: 0;
	margin-right: 10px;
}

p.more a:link, p.more a:visited, #newGames p.more a:link, #newGames p.more a:visited {
	color: #FFF;
	text-decoration: none;
}

p.more a:hover, p.more a:active, #newGames p.more a:hover, #newGames p.more a:active {
	text-decoration: underline;
}

.downloadDiv {
	height: 60px;
	width: 300px;
	float: left;
}

.downloadDiv a {
	display: block;
	font-size: 160%;
	height: 60px;
	width: 300px;
	padding-left: 50px;
	padding-top: 20px;
	background: url(images_site/download_flame.gif) no-repeat left top;
}

.downloadDiv a:link, .downloadDiv a:visited {
	text-decoration: underline;
}

.downloadDiv a:hover, .downloadDiv a:active {
	text-decoration: none;
}

.free {
	width: 210px;
	float: right;
}

.free img {
	float: left;
}

.free h4 {
	color: #00FF00;
	font-size: 135%;
	margin: 6px 0;
}

h2 span {
	font-size: 75%;
	font-style: italic;
}

/*******************************
	OVERWRITE STYLES
*******************************/

.red {
color: red;
}

.orange {
color: orange;
}

.yellow {
color: yellow;
}

.green {
color: green;
}

.blue {
color: blue;
}

.purple {
color: #9900FF;
}

.bold {
font-weight: bold;
}