/** 
*	SpeedHunters Blog Main Stylesheet 
*
* Author: 		 Maarten Haubrich
* Version: 		 0.2
*/


/* the content.css defines styles for content within the #content div */
@import url("cs_common.css");

/* the sidebar.css defines styles for content within the #sidebar div */
@import url("cs_overrides.css");

/* the content.css defines styles for content within the #content div */
@import url("content.css");

/* the sidebar.css defines styles for content within the #sidebar div */
@import url("sidebar.css");


/* 
* global definitions
*/
body,p,div,span,li,td,th,a,pre,img 
{
    font-family: Arial, Sans-Serif, Helvetica;
    font-size: 11px;
    line-height: 16px;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    color: #333;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
body,p,div,span,li,th,a,pre,img
{
    text-align: left;
}

/* 
* body definition
*  - remove any margins and padding. 
*/
body {
    /* this is a workaround for IE browsers that don't understand margin: auto; */
    text-align: center;

    padding: 0 0 0 0;
    margin: 0 0 0 0;
    
    background-color: #000;
}

/* 
* outer container wrapping entire contents of the site.
*  - defines an absolute width for the entire contents.
*  - defines a minimum height for the entire contents.
*  - centered horizontally by the margin-left and -right statements.
*  - contains background image for the flow and the background color
*    if the content is longer than the flow image.
*/
div#centercontainer {

    /* this is a workaround for IE browsers that don't understand margin: auto; */
    text-align: center;

    /* center the container horizontally on the page. */	
    margin-left: auto;
    margin-right: auto;

    /* define an absolute width and a minimum height. */
    width: 1006px;
    min-height: 1000px;
    height: auto;

    /*
    * ATT: 
    * this background image starts out transparent; the #letterbox div which is 
    * nested inside the #centercontainer div provides a background image to fill
    * in this space.
    * this approach enables the flow image to be tiled, reducing page size. 
    */
    background-image: url('../images/flow_background.png'); 	
    background-repeat: repeat-x;
    background-position: top left;

    /*
    * if the content should get too high the background color takes over.
    * it is set to the blue-shade at the very bottom of the flow_background.png.
    */
    /*background-color: #affdf9;*/
    background-color: #010000;

    /* allow the background to continue for 20px at the bottom */
    padding-bottom: 20px;
}


/* 
* letterbox container inside the centercontainer.
*  - it's reason-for-existance is soley to provide the background image for the 
*    header of the site.
*/
div#letterbox {

    /* this is a workaround for IE browsers that don't understand margin: auto; */
    text-align: center;

    /*
    * top background image containing the speedhunters logo.
    * the logo will have to be linked using a transparent image.
    */
    background-image: url('../images/top_background.png');
    background-repeat: no-repeat;
    background-position: top left;

    width: 1006px;
}

/* 
* inner container wrapping the top, nav and main elements
*  - centered inside the letterbox
*  - defines an absolute width
*/
div#innercontainer {

    /* center the container horizontally in the letterbox container. */			
    margin-left: auto;
    margin-right: auto;

    /* define an absolute width for the content. */
    width: 950px;
}

/* 
* top container for the rss feed link and the logo elements
*/
div#top {
    height: 112px;
}

/*
* positioning for the subscribe via rss button.
*/
div#subscribe_via_rss {
    float: left;
    margin-top: 24px;
}

/*
* positioning for the logo.
*/
div#logo {
    float: right;
    margin-top: 24px;
}

/* 
* nav container for the tabs and meta links
*/
div#nav {
    height: 27px;
}

/*
* positioning for tabs
*/
div#tab_container {
    float: left;
    width: 705px;
    border-left: 1px solid #000;

    /*
    * the tabbar_background is a transparent PNG with only 1px black at the bottom.
    * it is used to create the top border of the content box, while enabling
    * the current tab to "overwrite" this border with it's own.
    */ 
    background-image: url('../images/tabbar_background.gif');
    background-repeat: repeat-x;
    background-position: top left;
}

/*
* list style for the tabs
*/
div#tab_container ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
} 

/*
* list element style for the tabs
*/
div#tab_container ul li {
    float: left;

    font-weight: bold;
    font-size: 12px;
    line-height: 25px;
    color: #f8353e;

    padding-left: 10px;
    padding-right: 10px;

    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom:  1px solid #000;

    /* 
     * this color value should match the content background.
     */
    background-color: #999999;
}

/*
* list element style for the current tab
*/
div#tab_container ul li.current {
    /* 
     * overwrite the border setting to let the tab "flow" into the content area. 
     * this color value has to match the tab background and the content background
     */
    border-bottom:  1px solid #2e2e2e;
    background-color: #2e2e2e;
}	 

div#tab_container ul li a {
    font-weight: bold;
    font-size: 12px;
    line-height: 25px;
    color: #FFFFFF;
    text-transform:uppercase;
}

/*
* positioning for the meta links
*/
div#meta_container {
    float: right;
     
    width: 227px;
    height: 27px;

    /*
    * the tabbar_background is a transparent PNG with only 1px black at the bottom.
    * here we use it to create the top border of the sidebar box without having
    * to put a top border on the sidebar div creating a 1px offset.
    */ 
    /*background-image: url('../images/tabbar_background.gif');
    background-repeat: repeat-x;
    background-position: top left;

    background-color: #fff;
    opacity: 0.75;
    -moz-opacity: 0.75;
    filter:alpha(opacity=75);*/
} 

/*
* list style for the tabs
*/
div#meta_container ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
} 

/*
* list style for the tabs
*/
div#meta_container ul li {
    float: right;

    padding-top: 8px;
    padding-left: 4px;
    padding-right: 4px;
     
    font-style: italic;
}

div#meta_container ul li a {
    color: #fff;
    font-style: italic;
    opacity: 1.0;
}

/* 
* main container for the main content and sidebar
*/
div#main {
    clear: both;
    min-height: 600px;
}

/* 
 * content box
 */
div#content {
    /* make sure we don't break the layout. */
    vertical-align: top;
    overflow: hidden;

    width: 705px;
    border: 1px solid #000000;
    /* 
    * this color value should match the tabbar background.
    */
    background-color: #2e2e2e;
}

/* 
* sidebar box
*/
div#sidebar {
    float: right;

    /* make sure we don't break the layout. */
    overflow: hidden;

    width: 227px;

    border: 1px solid #000000;
    background-color: #999999;
}

/* 
 * link definitions
 */
a,a:visited{
    color: #f8353e;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* text "Sort By" in Forum (also see the ID in \Web\Themes\Speedhunters\Forums\grouplist.aspx) */
#txtSortBy 
{
    color: #FFFFFF;
}
.copyright a:link, .Tag1 a:visited, .Tag1 a:active
{
	text-decoration: none;
	color: #fff;
}

/* Media style */
.CommonMeidaContentPostBox
{
    padding:10px 10px 6px 13px;
}
.CommonMediaCommentBox
{
    margin-left:3px;
    background-color: #E4E4E4;
    width:672px;
}
.CommonContentBox.Highlighted2
{
    float: left;
	padding-right: 12px;
	overflow: hidden;
	width: 220px;
}

.CommonBrowseMediaBox
{
    background-color:#808080;
}

.CommonBrowseMediaBox.Header
{
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
}

.CommonContentBoxHeaderForm
{
    color: #FFF;
}

UL.CommonContentBoxList
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: #E4E4E4;
    width:inherit;
}

UL.CommonContentBoxList.Seperator
{
    border-top: solid 1px #ccc;
    margin-top: -4px;
}

UL.CommonContentBoxList LI
{
    margin: 3px 0;
    padding: 0 0 2px 6px;
    border-bottom: solid 1px #D4D4D4;
}

UL.CommonContentBoxList LI.Selected a
{
	padding-right: 10px;
	background-image: url('../images/common/button-right-arrow.gif');
	background-repeat: no-repeat;
	background-position: right center;
	font-weight: bold;
}

UL.CommonContentBoxList LI.Child
{
	padding-left: 14px;
}

/* File list (Media Style) */
.CommonFileArea
{
	margin: 4px;
	width: 152px;
	overflow: hidden;
	float: left;
}

.CommonFileContent
{
	padding: 3px 8px 0 8px;
}

.CommonFile
{
	border: solid 2px #ccc;
	width: 131px;
	height: 94px;
	text-align: center;
	overflow: hidden;
	background-color: #fff;
	position: relative;
}

.CommonFile img
{
	border-width: 0;
	margin: 0;
	padding: 0;
}

.CommonFileDetails
{
	padding: 4px 0 8px 0;
	white-space: nowrap;
}

.CommonFileInner
{
	height: 94px;
	width: 131px;
	vertical-align: middle;
	text-align: center;
	padding: 0;
	margin: 0;
}

.CommonFileInner a.CommonFileLink
{
	display: block;
	height: 94px;
	width: 131px;
	text-decoration: none;
	position: absolute;
	left: 0;
	top: 0;
}

.CommonFileRoundTop, .CommonFileRoundBottom
{
	height: 5px;
}

.CommonFileRoundTop .r1, .CommonFileRoundTop .r2, .CommonFileRoundTop .r3, .CommonFileRoundTop .r4,
.CommonFileRoundBottom .r1, .CommonFileRoundBottom .r2, .CommonFileRoundBottom .r3, .CommonFileRoundBottom .r4
{
	height: 1px;
	overflow: hidden;
}

.CommonFileRoundTop .r1, .CommonFileRoundBottom .r4 { margin: 0 5px; }
.CommonFileRoundTop .r2, .CommonFileRoundBottom .r3 { margin: 0 3px; }
.CommonFileRoundTop .r3, .CommonFileRoundBottom .r2 { margin: 0 2px; }
.CommonFileRoundTop .r4, .CommonFileRoundBottom .r1 { margin: 0 1px; height: 2px; }

.CommonFileRoundTop .r1, .CommonFileRoundTop .r2, .CommonFileRoundTop .r3, .CommonFileRoundTop .r4,
.CommonFileRoundBottom .r1, .CommonFileRoundBottom .r2, .CommonFileRoundBottom .r3, .CommonFileRoundBottom .r4,
.CommonFileContent
{
	background-color: #ececec;
}

/* Comment Bubbles */

.CommonCommentArea
{
	margin: 12px 0;
}

.CommonCommentUser
{
	float: left;
	width: 64px;
	min-height: 60px;
	overflow: hidden;
}

.CommonCommentArrow
{
	float: left;
	padding-top: 10px;
	width: 10px;
	height: 20px;
	overflow: hidden;
}

.CommonCommentArrow .r1, .CommonCommentArrow .r2, .CommonCommentArrow .r3, .CommonCommentArrow .r4,
.CommonCommentArrow .r5, .CommonCommentArrow .r6, .CommonCommentArrow .r7, .CommonCommentArrow .r8, 
.CommonCommentArrow .r9, .CommonCommentArrow .r10
{
	height: 2px;
	overflow: hidden;
}

.CommonCommentArrow .r1 { margin-left: 0; }
.CommonCommentArrow .r2 { margin-left: 1px; }
.CommonCommentArrow .r3 { margin-left: 2px; }
.CommonCommentArrow .r4 { margin-left: 3px; }
.CommonCommentArrow .r5 { margin-left: 4px; }
.CommonCommentArrow .r6 { margin-left: 5px; }
.CommonCommentArrow .r7 { margin-left: 6px; }
.CommonCommentArrow .r8 { margin-left: 7px; }
.CommonCommentArrow .r9 { margin-left: 8px; }
.CommonCommentArrow .r10 { margin-left: 9px; }

.CommonCommentBubble
{
	margin-left: 74px;
	width: 520px;
}

.CommonCommentContent
{
	padding: 0 10px 1em 10px;
	min-height: 32px;
	position: relative;
	overflow: hidden;
	width: 500px;
}

.CommonCommentBubbleRoundTop, .CommonCommentBubbleRoundBottom
{
	height: 5px;
}

.CommonCommentBubbleRoundTop .r1, .CommonCommentBubbleRoundTop .r2, .CommonCommentBubbleRoundTop .r3, .CommonCommentBubbleRoundTop .r4,
.CommonCommentBubbleRoundBottom .r1, .CommonCommentBubbleRoundBottom .r2, .CommonCommentBubbleRoundBottom .r3, .CommonCommentBubbleRoundBottom .r4
{
	height: 1px;
	overflow: hidden;
}

.CommonCommentBubbleRoundTop .r1, .CommonCommentBubbleRoundBottom .r4 { margin: 0 5px; }
.CommonCommentBubbleRoundTop .r2, .CommonCommentBubbleRoundBottom .r3 { margin: 0 3px; }
.CommonCommentBubbleRoundTop .r3, .CommonCommentBubbleRoundBottom .r2 { margin: 0 2px; }
.CommonCommentBubbleRoundTop .r4, .CommonCommentBubbleRoundBottom .r1 { margin: 0 1px; height: 2px; }

.CommonCommentBubbleRoundTop .r1, .CommonCommentBubbleRoundTop .r2, .CommonCommentBubbleRoundTop .r3, .CommonCommentBubbleRoundTop .r4,
.CommonCommentBubbleRoundBottom .r1, .CommonCommentBubbleRoundBottom .r2, .CommonCommentBubbleRoundBottom .r3, .CommonCommentBubbleRoundBottom .r4,
.CommonCommentArrow .r1, .CommonCommentArrow .r2, .CommonCommentArrow .r3, .CommonCommentArrow .r4,
.CommonCommentArrow .r5, .CommonCommentArrow .r6, .CommonCommentArrow .r7, .CommonCommentArrow .r8, 
.CommonCommentArrow .r9, .CommonCommentArrow .r10,
.CommonCommentContent
{
	background-color: #CEDEFD;
}

.Owner .CommonCommentBubbleRoundTop .r1, .Owner .CommonCommentBubbleRoundTop .r2, .Owner .CommonCommentBubbleRoundTop .r3, .Owner .CommonCommentBubbleRoundTop .r4,
.Owner .CommonCommentBubbleRoundBottom .r1, .Owner .CommonCommentBubbleRoundBottom .r2, .Owner .CommonCommentBubbleRoundBottom .r3, .Owner .CommonCommentBubbleRoundBottom .r4,
.Owner .CommonCommentArrow .r1, .Owner .CommonCommentArrow .r2, .Owner .CommonCommentArrow .r3, .Owner .CommonCommentArrow .r4,
.Owner .CommonCommentArrow .r5, .Owner .CommonCommentArrow .r6, .Owner .CommonCommentArrow .r7, .Owner .CommonCommentArrow .r8, 
.Owner .CommonCommentArrow .r9, .Owner .CommonCommentArrow .r10,
.Owner .CommonCommentContent
{
	background-color: #DFFFED;
}

.CommonMessageHeader
{
	font-size: 110%;
}

.CommonMessageRecipients
{
	font-size: 80%;
	padding: 2px 0;
}

.CommonMessageDate
{
	border-bottom: solid 1px #999;
	margin-bottom: 10px;
	padding-bottom: 4px;
	font-size: 80%;
}

.CommonMessageActions
{
	float: right; 
	margin: 0 0 4px 4px; 
	font-size: 80%;
	font-weight: bold;
}

UL.CommonContentBoxList LI.CommonActivity
{
	padding-left: 22px;
	background-position: left top;
	background-repeat: no-repeat;
	min-height: 16px;
}

UL.CommonContentBoxList LI.CommonActivity.NewProfileAnnouncement { background-image: url('../images/activities/new-profile-announcement.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewProfileComment { background-image: url('../images/activities/new-profile-comment.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewUser { background-image: url('../images/activities/new-user.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewBlog { background-image: url('../images/activities/new-blog.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewBlogPost { background-image: url('../images/activities/new-blog-post.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewBlogComment { background-image: url('../images/activities/new-blog-comment.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewForum { background-image: url('../images/activities/new-forum.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewForumThread { background-image: url('../images/activities/new-forum-thread.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewForumPost { background-image: url('../images/activities/new-forum-post.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewMediaGallery { background-image: url('../images/activities/new-media-gallery.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewMediaGalleryPost { background-image: url('../images/activities/new-media-gallery-post.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewMediaGalleryComment { background-image: url('../images/activities/new-media-gallery-comment.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewGroup { background-image: url('../images/activities/new-group.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewGroupMember { background-image: url('../images/activities/new-group-member.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewFriendship { background-image: url('../images/activities/new-friend.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewGroupPage { background-image: url('../images/activities/new-group-page.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewUserFile { background-image: url('../images/activities/new-user-file.gif'); }
UL.CommonContentBoxList LI.CommonActivity.NewUserFolder { background-image: url('../images/activities/new-folder.gif'); }

.CommonInlineTagEditor
{
	padding: 4px;
	border: solid 1px #999;
	background-color: #f3f3f3;
}