﻿/*
-----------------------------------------------------
Wizards.com:  boxes.css
Copyright (c) 2008 Wizards of the Coast
http: //www.wizards.com/
-----------------------------------------------------
*/


/* Styles to create a rounded corner box */
/* ----------------------------------------------- */

.box {
	position: relative;
	float: left;
	background: url("/Magic/Magazine/Images/box-top-left.gif") no-repeat left top;
}
.box .top {
	position: relative;
	height: 23px;
}
.box ul.filters,
#centerColumn #content .box .top ul.filters {
	list-style-type: none;
	position: absolute;
	top: 2px;
	right: 0;
	width: 250px;
	height: 21px;
	overflow: hidden;
	background: transparent url("/Magic/Assets/background_filters.gif") no-repeat right top;
	padding: 0 10px;
	margin: 0;
}
.box .top ul.filters li {
	float: left;
}
.box .top ul.filters li a {
	display: block;
	padding: 0 0 0 4px;
	color: #000;
	text-decoration: none;
}
.box .top ul.filters li a:hover {
	text-decoration: underline;
}
.box .top ul.filters li a.active {
	color: #933;
}
.box .top h3 {
	display: block;
	position: relative;
	right: -10px;
	height: 123px;
	line-height: 23px;
	background: url("/Magic/Magazine/Images/box-top-right.gif") no-repeat right top;
	color: #fff;
}
.box .top h3 img {
	display: block;
	padding-top: 4px;
}
.box .center-content {
	background: url("/Magic/Magazine/Images/box-border-right.gif") repeat-y right top;
	margin: 0;
	position: relative;
	right: -10px;
	padding-bottom: 10px;
}
.box .center-content h4 {
	font-size: 1.083em;
	margin: 0;
	line-height: 1.1;
	font-weight: bold;
}
.box .center-content h5.byline {
	line-height: 1.2;
	font-weight: normal;
	font-style: italic;
	margin-bottom: 0.25em;
}
.box .center-content p {
	margin: 0.5em 0;
	line-height: 1.2;
}
.box ul.more,
#centerColumn #content .box ul.more {
	position: absolute;
	bottom: 6px;
	left: 4px;
	margin: 0;
}
.box ul.more li,
#centerColumn #content .box ul.more li {
	list-style-type: disc;
	margin: 0 0 0 1.5em;
	color: #600;
}
.box ul.more a,
#centerColumn #content .box ul.more a {
	text-decoration: none;
	font-weight: bold;
	color: #600;
}
.box ul.more a:hover,
#centerColumn #content .box ul.more a:hover {
	text-decoration: underline;
}
.box .bottom {
	margin-top: -5px;
	height: 5px;
	background: url("/Magic/Magazine/Images/box-bottom-left.gif") no-repeat left bottom;
}
* html .box .bottom { /* for ie6 only */
	margin-top: -15px;
}
.box .bottom span {
	display: block;
	position: relative;
	right: -10px;
	height: 5px;
	background: url("/Magic/Magazine/Images/box-bottom-right.gif") no-repeat right bottom;
	z-index: 2;
}


/* Modifications for specific boxes */
/*
These two boxes (headlines/quicklinks/polls) exist in multiple places 
on the site so they live here. If a box only exists on one page,
put it's styles in a page-specific stylesheet
*/
/* ----------------------------------------------- */

/* Headlines (used in multiple places on the site so this lives here) */

#most-recent-headlines {
	width: 605px;
}
#most-recent-headlines .center-content {
	padding: 4px 4px 4px 0;
	height: 222px;
	overflow: hidden;
}
#centerColumn #content #most-recent-headlines ul.headlines {
	margin-top: 14px;
	list-style-type: none;
	margin: 0;
	width: 605px;
}
#most-recent-headlines ul.headlines li {
	clear: both;
}
#most-recent-headlines ul.headlines a,
#centerColumn #content #most-recent-headlines ul.headlines a {
	display: block;
	float: left;
	width: 575px;
	padding: 1px 10px;
	color: #000;
	font-size: 1.083em;
	border-bottom: 1px solid #ccc;
	text-decoration: none;
}
#most-recent-headlines ul.headlines a:hover,
#centerColumn #content #most-recent-headlines ul.headlines a:hover {
	text-decoration: underline;
	cursor: pointer; /* for ie */
}
#most-recent-headlines a em {
	font-weight: bold;
	font-style: normal;
}
#most-recent-headlines a span {
	display: block;
}
#most-recent-headlines a .headline {
	float: left;
	width: 310px;
}
#most-recent-headlines a .byline {
	float: left;
	width: 175px;
}
#most-recent-headlines a .date {
	float: right;
	width: 90px;
}
* html #most-recent-headlines a .date { /* fixes IE6 duplicate character bug */
	margin-right: -3px;
}
#most-recent-headlines .filters { 
	float: right;
}
#most-recent-headlines .filters .text {
	font-weight: bold;
}

/* Quicklinks */
#quicklinks {
	margin: 14px 0 0 17px;
	display: inline; /* fixes ie6 double-margin bug */
	width: 165px;
}
#quicklinks .center-content {
	padding: 4px 4px 4px 0;
	height: 222px;
	overflow: hidden;
}


/* Right column (sidebar) */
/* ----------------------------------------------- */

/* Poll */
#rightColumn #poll {
	margin-top: 10px;
	width: 145px;
}
#rightColumn #poll .center-content {
	padding: 4px 4px 4px 0;
	width: 141px;
}
#rightColumn #poll ul {
	position:relative;
}