/*  Main Page Styles
    This is what makes the main page of TechCentral beautiful.
--------------------------------------------------------------------------------
 */
#contentMainPage
{ width: 630px; float: left; display: inline; margin: 0 0 0 10px; }

#mainPageHighlight
{
  float: left; display: inline; width: 630px;  height: 300px;
  margin: 10px 0px; padding: 0;
  background: url("/images/mainpage_highlightbg.jpg") repeat-x top left;
  /*overflow: hidden; Disabled for testing */
}
#mainPageHighlight_info
{
  float: left; display: inline; width: 630px; height: 190px; overflow: hidden;
}
#mainPageHighlight_info h1
{
  float: left; display: inline; width: 350px; padding: 10px 0 5px 0; margin: 0 0 0 10px;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 24px; font-weight:normal; color: #fff; 
}
#mainPageHighlight_info h1 a { color: #fff; }
#mainPageHighlight_info p
{
  float: left; display: inline; width: 350px; margin: 0 0 0 10px;
  line-height: 20px; color: #fff;
}
#mainPageHighlight_info img
{
  float: right; display: inline; margin: 0; padding: 10px;
}

/*Special stylings for mainPageHighlight - certain items can call for specific styles.*/
#mainPageHighlight_info .right h1, #mainPageHighlight_info .right p { float: right; display: inline; margin: 0 10px 0 0px; }
#mainPageHighlight_info .right img { float: left; display: inline; }

#mainPageHighlight_selection
{ float: left; display: inline; width: 630px; height: 100px; list-style: none; padding: 0; margin: 0; overflow: hidden; }
#mainPageHighlight_selection li
{ float: left; display: inline; padding: 0; margin: 0; margin-left: 24px; margin-top: 10px; }

#contentMainPage .mainPageSection
{ width: 630px; float: left; display: inline; overflow: hidden; }
#contentMainPage .newsRow
{ width: 640px; float: left; display: inline; padding-bottom: 10px; }  /*The extra width plus newsSection's overflow:hidden allows newsColumn to have right margins. */
#contentMainPage .newsColumn
{ width: 312px; float: left; display: inline; margin: 0px 6px 0px 0px; }

#contentMainPage .newsTitle
{
  padding: 2px 0 0 10px; height: 20px;
  font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; color: #fff;
  background: url("/images/mainpage_newstitle.gif") repeat-x top left;
}
#contentMainPage .newsTitle a { color: #fff; }
#contentMainPage .newsTitle a:hover { color: #fff; }
#contentMainPage .newsBoxListType {}
#contentMainPage .newsBoxListType li { list-style: none; margin: 0; padding: 3px; border-bottom: 1px dotted #808080; }
#contentMainPage .newsBoxListType li:last-child { border-bottom: none; }
#contentMainPage .newsBoxPictureType {}
#contentMainPage .newsBoxPictureType .news_container 
{
  float: left; display: inline; width: 295px;
  line-height: 14px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; color: #555555;
  border-bottom: 1px dotted #808080;
}
#contentMainPage .newsBoxPictureType .news_container:last-child { border-bottom: none; }
#contentMainPage .newsBoxPictureType .news_container img { float: left; display: inline; margin: 5px 10px 0px 10px; padding-bottom: 5px; }
#contentMainPage .newsBoxPictureType .news_container h2 { float: right; display: inline; width: 190px; margin-top: 5px; font-weight: bold; line-height: 14px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; color: #555555; }
#contentMainPage .newsBoxPictureType .news_container p { float: right; display: inline; width: 190px; line-height: 14px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; color: #555555; }

#contentMainPage .miscRow { width: 640px; float: left; display: inline; padding-bottom: 10px; }
#contentMainPage .miscColumn { float: left; display: inline; width: 206px; margin-right: 6px; overflow: hidden; }
#contentMainPage .miscTitle 
{
  height: 26px;  padding: 2px 10px 0px 10px;
  font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 18px; font-weight:normal; color: #666666; 
  background: url("/images/common_white-grey-title.gif") repeat-x top left;
}
#contentMainPage .miscTitle a, #contentMainPage .miscTitle a:hover { color: #666666; }

#contentMainPage .miscBoxColumnistType {}
#contentMainPage .miscBoxListType { border: 1px solid #cccccc; }
#contentMainPage .miscBoxPicturesType { border: 1px solid #cccccc; }

#contentMainPage .miscBoxColumnistType div { float: left; display: inline; border: 1px solid #cccccc; border-top: none; background: #e1e1e1 url("/images/mainpage_columnistbg.gif") repeat-x top left; }
#contentMainPage .miscBoxColumnistType div img { float: left; display: inline; margin: 10px 10px 0px 10px; padding-bottom: 10px; }
#contentMainPage .miscBoxColumnistType div h2 { float: right; display: inline; margin-right: 10px; width: 110px; margin-top: 5px; font-size: 11px; }
#contentMainPage .miscBoxColumnistType div p { float: right; display: inline; margin-right: 10px; width: 110px; padding-bottom: 10px; font-size: 11px; }
#contentMainPage .miscBoxColumnistType div a, #contentMainPage .miscBoxColumnistType div a:hover { color: #666666; }

#contentMainPage .miscBoxListType { background: #ffffff url("/images/mainpage_contestbg.jpg") top left repeat-x; }
#contentMainPage .miscBoxListType ul { list-style: square outside; padding: 10px; margin: 0; padding-bottom: 5px; }
#contentMainPage .miscBoxListType li { padding: 0; margin: 0px 0px 0px 15px; }
#contentMainPage .miscBoxListType a, #contentMainPage .miscBoxListType a:hover { color: #666666; }

#contentMainPage .miscBoxPicturesType { float: left; display: inline; background: #ffffff url("/images/common_grey-white-bg.gif") top left repeat-x; width: 206px; padding: 10px 0px; }  /*Exceeds the width of .miscColumn, so .miscColumn's overflow:hidden can hide .miscBoxPicturesType's margin-right.*/
#contentMainPage .miscBoxPicturesType div { float: left; display: inline; width: 95px; margin-right: 6px; text-align: center; margin-bottom: 5px; }
#contentMainPage .miscBoxPicturesType div h2, #contentMainPage .miscBoxPicturesType div p { font-size: 10px; color: #666666; margin: 0; padding: 0; line-height: 12px; }
#contentMainPage .miscBoxPicturesType div h2 { font-weight: bold; }
#contentMainPage .miscBoxPicturesType div h2 a, #contentMainPage .miscBoxPicturesType div h2 a:hover { color: #666666; }
#contentMainPage .miscBoxPicturesType div p {}

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



/*  News Page Styles
    For generic news pages and news page components.
--------------------------------------------------------------------------------
 */
#contentNewsPage
{ width: 630px; float: left; display: inline; margin: 0 0 0 10px; }

.newsPageArticles { padding-bottom: 20px; overflow:hidden; width: 630px; }
.newsPageArticles .news_date { float: left; display: inline; font-family:Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; margin: 10px 0px; background: #eee; padding: 5px 10px; border-bottom: 1px solid #96c3d6; width: 630px; }  /*Thanks to the padding and width, this will actually appear wider that 630px but HEY no worries, .newsPageArticles has overflow: hidden.*/
.newsPageArticles .news_container { margin-bottom: 10px; float: left; display: inline; width: 630px; }
.newsPageArticles .news_container h2 { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #0066cc; }
.newsPageArticles .news_container p { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; line-height: 20px; color: #666; padding: 0; margin: 0; }
.newsPageArticles .news_container img.left { float: left; display: inline; padding-right: 10px; }
.newsPageArticles .news_container img.right { float: right; display: inline; padding-left: 10px; }
.newsPageArticles .news_container img.center {}  /*Please, please don't use img.center in StarPress.*/
/*
--------------------------------------------------------------------------------
 */



/*  Story Page Styles
    For generic story pages and story page components.
--------------------------------------------------------------------------------
 */
#contentStoryPage
{ width: 630px; float: left; display: inline; margin: 0 0 0 10px; }

.storyPageArticle { padding-bottom: 20px; }
.storyPageArticle .storyPageArticle_storyDate { display: block; margin: 10px 0 5px 0; padding: 0 0 5px 0; font-family:Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; }
.storyPageArticle h1 { margin: 0 0 2px 0; padding: 0 0 2px 0; font-family:Arial, Helvetica, sans-serif; font-size: 24px; font-weight:normal; color: #333333; }
.storyPageArticle .storyPageArticle_storyHeader { display: block; margin: 0 0 15px 0; padding: 0 0 5px 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight:normal; color: #666666; border-bottom: 1px dotted #666666; text-transform: uppercase; }
.storyPageArticle .storyPageArticle_newsStory { display: block; }
.storyPageArticle .storyPageArticle_newsStory p { padding: 0 0 15px 0; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #333; }
.storyPageArticle p {}
.storyPageArticle div.story_image { padding: 5px; text-align: center; }
.storyPageArticle div.left { float: left; display: inline; }
.storyPageArticle div.right { float: right; display: inline; }
.storyPageArticle div.center { margin: 0px auto; }
.storyPageArticle div .caption { display: block; color: #660000; font-family: Trebuchet, Arial, Sans-Serif; font-size: 10px; }

.storyPageArticleProduct { padding-bottom: 20px; }
.storyPageArticleProduct table { width: 100%; border-bottom: 1px solid #ccc; background: #fff url("/images/productdetails_bg.gif") top left repeat-x; color: #666; }
.storyPageArticleProduct table td { vertical-align: top; padding: 5px 15px 0px 15px; font-family:Arial, Helvetica, sans-serif; font-size: 10px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.storyPageArticleProduct table td.label { width: 35%; }
.storyPageArticleProduct table td.value { width: 65%; }
.storyPageArticleProduct .storyPageArticleProduct_header
{ padding: 2px 0 0 10px; height: 20px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; color: #fff; background: url("/images/productdetails_headerbg.gif") top left repeat-x }

.storyPageArticleExtra { padding-bottom: 20px; }

/* "Add This" button style */
#story_tools 
{ float: left; display: inline; margin: 20px 0; }
#story_tools ul 
{ list-style-type: none; }
#story_tools ul li
{ float: left; display: inline; margin-right: 5px; }
#story_tools_facebooklike { float: left; text-align: center; width: 630px; }
#story_tools_facebooklike iframe { margin: 0px auto; text-align: left; }


#storyPageArticle_autoPageControl { background: #eee; text-align:right; font-size: 12px; padding: 5px 10px; }
#storyPageArticle_autoPageControlNote { color: #888; text-align:right; font-size: 11px; padding: 5px 10px; display: none; }
#storyPageArticle_autoPageControl a { border: 1px solid #ccc; padding: 2px 5px; background: #cccccc url("/images/common_white-grey-title.gif") top left repeat-x; }
#storyPageArticle_autoPageControl a:hover { text-decoration: none; }
#storyPageArticle_autoPageNumbering { padding: 2px 5px; font-weight: bold; }  
/*
--------------------------------------------------------------------------------
 */



/*  General Paging Style
--------------------------------------------------------------------------------
 */
.paging {
	float: right;
	display: inline;
	width: auto;
}

.paging ul{
  list-style-type: none;
}

.paging h1 {
	font-weight: bold;
}

.paging li {
	float: left;
	display: inline;
	border-left: solid 1px #6d6d6d;
	border-right: solid 1px #6d6d6d;
	margin: 0px 0px 0px -1px;
}

.paging li.first {
	border-left: none;
}

.paging li.last {
	border-right: none;
}

.paging li a {
	display: block;
	padding: 4px;
	margin: 0px 4px;
	color: #000;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

.paging li.first a {
	background: url( '/images/older_posts.gif' ) no-repeat left;
}

.paging li.last a {
	background: url( '/images/newer_posts.gif' ) no-repeat right;
} 

.paging li.here a,
.paging li a:hover,
.paging li.first a:hover,
.paging li.last a:hover {
	color: #fff;
	background: #0349B1;
}
/*
--------------------------------------------------------------------------------
 */



/*  Gallery Page Styles
    Galleries! Galleries and images!
--------------------------------------------------------------------------------
 */
#contentGallery
{ width: 630px; float: left; display: inline; margin: 0 0 0 10px; }

.galleryPageGallery { border: 1px solid #ccc; padding-top: 20px; margin-bottom: 20px; }
.galleryPageGallery table { width: 630px; }
.galleryPageGallery table td { width: 50%; vertical-align: top; padding-bottom: 20px; }
.galleryPageGallery table td .galleryItemImage { height: 180px; background: url("/images/galleries_item.png") 50px 0px no-repeat; }
.galleryPageGallery table td .galleryItemImage img { margin-left: 75px; margin-top: 20px; }
.galleryPageGallery table td .galleryItemTitle { padding: 0px 40px; color: #600; }
.galleryPageGallery table td .galleryItemTitle a { color: #600; }
.galleryPageGallery table td .galleryItemText { padding: 0px 40px; }

.galleryPagePaging { background: #ccc; float: left; display: inline; overflow: hidden; margin-bottom: 20px; width: 630px; height: 20px; padding: 5px 0px; }
.galleryPagePaging span, .galleryPagePaging a { text-align: center; float: left; display: inline; width: 35px; height: 20px; line-height: 20px; background: #eee; margin: 0px 5px; }
.galleryPagePaging a { border: 1px solid #666; background: #ccc url("/images/galllery_paging.gif") left top repeat-x; }
.galleryPagePaging a.selected { font-weight: bold; }
.galleryPagePaging a:hover { color: #000; background: #f00 url("/images/galllery_paginghover.gif") left top repeat-x; }

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



/*  Products Page Styles
    More like products index page.
--------------------------------------------------------------------------------
 */
#contentProductsPage
{ width: 630px; float: left; display: inline; margin: 0 0 0 10px; }

#productsPageHighlight { float: left; display: inline; width: 630px; background: #fff url("/images/common_grey-white-bg.gif") top left repeat-x; overflow: auto; border-bottom: 1px solid #ccc; margin-bottom: 10px; }
#productsPageHighlight img { float: left; display: inline; margin: 0; padding: 10px; }
#productsPageHighlight h1 { float: right; display: inline; width: 400px; padding: 10px 0 5px 0; margin: 0 10px 0 0; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 24px; font-weight:normal; color: #000; }
#productsPageHighlight h1 a {}
#productsPageHighlight p { float: right; display: inline; width: 400px; margin: 0 10px 0 0; line-height: 20px; color: #666; padding-bottom: 10px; }

.productsPageSubHeader { font-family: Helvetica, Sans-Serif; font-size: 16px; font-weight: bold; text-transform: uppercase; color: #3d709d; padding: 0px 10px; margin-bottom: 0px; }
.productsPageRowSubHeader { float: left; display: inline; width: 630px; height: 20px; background: url("/images/sectionHeader_item.gif") repeat-x top left; font-family: Helvetica, Sans-Serif; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #fff; }
.productsPageRowSubHeader span { padding: 0px 10px; line-height: 20px; display: block; }
.productsPageRowSeparator { float: left; display: inline; width: 630px; height: 5px; background: url("/images/sectionHeader_item.gif") repeat-x top left; overflow: hidden; }  /*Such a simple thing, sigh... The overflow: hidden is for IE6, or else it expands the div to some sort of default height.*/

.productsPageRow { width: 630px; overflow: hidden; background: url("/images/common_dot_ccc.gif") 314px 0px repeat-y; padding-bottom: 10px; }  /*Strangely, in IE6, margin-bottom will also give it a margin-top. WTF?*/
.productsPageColumn { overflow: hidden; width: 314px; float: left; display: inline; margin-right: 1px; background: #fff url("/images/common_grey-white-title.gif") top left repeat-x; }
.productsPageColumn h3 { float: left; display: inline; font-family: Helvetica, Sans-Serif; font-size: 16px; font-weight:normal; font-weight: bold; color: #cc3333; padding: 5px 0 0 10px; }
.productsPageColumn h3 a { color: #cc3333; }
.productsPageColumnHeader a {}
.productsPageColumn div 
{
  float: left; display: inline; width: 314px; margin-right: 1px; overflow: hidden;
  line-height: 18px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; color: #555555;
}
.productsPageColumn div img { float: left; display: inline; margin: 5px 10px 0px 10px; padding-bottom: 5px; }
.productsPageColumn div h2 { float: right; display: inline; width: 180px; margin-top: 5px; margin-right: 20px; font-weight: bold; font-size: 11px; color: #555555; }
.productsPageColumn div h2 a {}
.productsPageColumn div p { float: right; display: inline; width: 180px; margin-right: 20px; color: #555555; padding-bottom: 5px; }
.productsPageColumn div { border-bottom: 1px dotted #ccc; }
.productsPageColumn div:last-child { border-bottom: none; }

.productCategoryListing { float: left; display: inline; overflow: hidden; width: 630px; margin-bottom: 10px; }
.productCategoryListing div { float: left; display: inline; width: 630px; margin-bottom: 10px; }
.productCategoryListing div img { float: left; display: inline; margin: 5px 10px 0px 10px; padding-bottom: 5px; }
.productCategoryListing div h2 { float: right; display: inline; width: 400px; margin-top: 5px; margin-right: 20px; font-weight: bold; font-size: 11px; color: #555555; }
.productCategoryListing div h2 a {}
.productCategoryListing div p { float: right; display: inline; width: 400px; margin-right: 20px; color: #555555; padding-bottom: 5px; }
.productCategoryListing div { border-bottom: 1px dotted #ccc; }
.productCategoryListing div:last-child { border-bottom: none; }

.productCategoryPaging { background: #ccc; float: left; display: inline; overflow: hidden; margin-bottom: 20px; width: 630px; height: 20px; padding: 5px 0px; }
.productCategoryPaging span, .productCategoryPaging a { text-align: center; float: left; display: inline; width: 35px; height: 20px; line-height: 20px; background: #eee; margin: 0px 5px; }
.productCategoryPaging a { border: 1px solid #666; background: #ccc url("/images/galllery_paging.gif") left top repeat-x; }
.productCategoryPaging a.selected { font-weight: bold; }
.productCategoryPaging a:hover { color: #000; background: #f00 url("/images/galllery_paginghover.gif") left top repeat-x; }
/*
--------------------------------------------------------------------------------
 */




/*  Events Page Styles
    For more eventful items.
--------------------------------------------------------------------------------
 */
#eventsPage
{ width: 630px; float: left;  display: inline; margin: 0 0 0 10px; }

.eventsListing { float: left; display: inline; overflow: hidden; width: 630px; margin-bottom: 10px; }
.eventsListing div { float: left; display: inline; width: 630px; margin-bottom: 10px; }
.eventsListing div img { float: left; display: inline; margin: 5px 10px 0px 10px; padding-bottom: 5px; }
.eventsListing div h2 { float: right; display: inline; width: 460px; margin-top: 5px; margin-right: 20px; font-weight: bold; font-size: 11px; color: #555555; }
.eventsListing div h2 a {}
.eventsListing div span { float: right; display: inline; width: 460px; margin-right: 20px; color: #888; padding-bottom: 5px; }
.eventsListing div p { float: right; display: inline; width: 460px; margin-right: 20px; color: #555; padding-bottom: 5px; }
.eventsListing div { border-bottom: 1px dotted #ccc; }
.eventsListing div:last-child { border-bottom: none; }

.eventsPaging { background: #ccc; float: left; display: inline; overflow: hidden; margin-bottom: 20px; width: 630px; height: 20px; padding: 5px 0px; }
.eventsPaging span, .eventsPaging a { text-align: center; float: left; display: inline; width: 35px; height: 20px; line-height: 20px; background: #eee; margin: 0px 5px; }
.eventsPaging a { border: 1px solid #666; background: #ccc url("/images/galllery_paging.gif") left top repeat-x; }
.eventsPaging a.selected { font-weight: bold; }
.eventsPaging a:hover { color: #000; background: #f00 url("/images/galllery_paginghover.gif") left top repeat-x; }
/*
--------------------------------------------------------------------------------
 */


/*  Regarding Ads and Expandables
    It's precisely that.
--------------------------------------------------------------------------------
 */
#ad_leaderboard
{ width: 728px; height: 90px; margin: 0; padding: 0; }
#ad_leaderboard #ad_leaderboard_inner
{ position: absolute; width: 728px; height: 90px; overflow: hidden; }
/*
--------------------------------------------------------------------------------
 */