/*
// -------------------------------------------------------------------------------------------
// This stylesheet is used to style the structure, partucularly site width, column widths, 
// and page specific column widths.
// -------------------------------------------------------------------------------------------
*/

#wrapper { margin:0 auto; width:100%; padding:0 0 20px; position:relative; }

/* Mast Styles */
#mast { width:100%; }
#mast_sleeve { width:980px; margin:0 auto; }

#masthead { float: right; width: 345px; }
#masthead img { float: right; border-bottom: 2px solid #000; }
#masthead blockquote { position: absolute; float: none; clear: none; margin-top: 29px; padding: 5px 0 0; width: 190px; background: url(/magazine/graphics/border_dotted.gif) repeat-x top; }
#masthead blockquote p { margin-bottom: 0; padding-bottom: 10px; font-weight: bold; font-style: italic; font-size: 1.154em; background: url(/magazine/graphics/border_dotted.gif) repeat-x bottom; }

#attachments #mast_sleeve { border-bottom: 2px solid #000; }
#attachments #logo { float: none; padding:0; }

/* Main Columns */
/* Pad columns in to allow for left/right column */
#columns { position:relative; clear:both; width:483px; padding:0 331px 0 166px; margin:10px auto 20px; background: url(/magazine/graphics/fauxcol.gif) repeat-y top; min-height: 0; }
#columns:after { content:"."; clear:both; display:block; height:0; visibility:hidden; }
#colwrapper { width:100%; }
#colmain { float:left; width:100%; }
#content { float:right; width:100%; }

/* Ensure that changes here are reflected in padding for #columns */
#leftcolumn { float:left; width:166px; margin-left:-166px; display: inline; }
#leftcolumn #leftcolumn_sleeve { margin-right:15px; }

.drop_rc #columns { width:814px; padding-right:0; background-image:url(/magazine/graphics/fauxcol_single.gif);}

#rightcolumn { float:right; width:331px; margin-right:-331px; }
#rightcolumn .twocolumn { min-height: 0; }
#rightcolumn .twocolumn:after { content:"."; clear:both; display:block; height:0; visibility:hidden; }
#rightcolumn .twocolumn .column1 { float:left; width:50%; }
#rightcolumn .twocolumn .column2 { float:right; }
#rightcolumn_sleeve { margin-left:15px; }

/* Form Styling - Adjustments required for larger/smaller sites and if left column is dropped */
.formbox .text { width:66.7%; }
.formbox select { width:68%; }
.formsmall, .formbox .formsmall { width:23%; }
.formmedium, .formbox .formmedium { width:46.5%; }
.formbox select.formsmall { width:24.3%; }
.formbox select.formmedium { width:48%; }
.formbox select.formlarge { width:68%; }

/* Basic Two Column Structure */
.twocolumn { padding:0; clear:both; min-height: 0; } /* for when section head contains no title but has RSS icon */
.twocolumn:after { content:"."; clear:both; display:block; height:0; visibility:hidden; }
.twocolumn .column1 { float:left; width:48.9%; }
.twocolumn .column2 { float:right; width:48.9%; }
.section_column1 { float:left; width:482px; }
.section_column1 .column1_sleeve { padding-right:6px; }
.section_column2 { float:right; width:300px; }

/* Index */
#index #columns { background-image: url(/magazine/graphics/fauxcol_triple.gif); }
#index #crumbtrail { background-color: #fff; margin-bottom: 0; border-bottom: 15px solid #fff; }
#index .section_column1 { width: 317px; }
#index .section_column2  { width: 151px; }
#index .section_column2 .style2 .column1 { width: 151px; }
#index .section_column2 .style2 .column2 { float: none; width: 151px; }

#index .section_column2 .colour2 .style2 .column1, #index .section_column2 .colour3 .style2 .column1 { width: 135px; }
#index .section_column2 .colour2 .style2 .column2, #index .section_column2 .colour3 .style2 .column2 { float: none; width: 135px; }

/* Section 2 Styling */
.section_twocolumn { min-height: 0; }
.section_twocolumn:after {content:"."; visibility:hidden; height:0; display: block; clear: both; }

/* Section 2 */
#section2 #leftcolumn { margin-left:0; }
#section2 #rightcolumn { display:none; }
#section2 #columns { padding-left:0; padding-right:0; width:980px; }
#section2 #content { width:812px; }
#section2 .section_column1 { width:482px; }
#section2 .section_column2 { width:316px; }
#section2 #search_ad_container { margin-left: 0; float: none; }
#section2 #crumbtrail { width: 100%; }

/* Section 4 */
#section4 .section_twocolumn { background: url(/magazine/graphics/fauxcol_middle.gif) repeat-y top; }
#section4 .section_column1 { width:317px; }
#section4 .section_column2 { width:151px; }
#section4 .section_column2 .style2 .column1 { width: 151px; }
#section4 .section_column2 .style2 .column2 { float: none; width: 151px; }

#section4 .section_column2 .colour2 .style2 .column1, #section4 .section_column2 .colour3 .style2 .column1 { width: 135px; }
#section4 .section_column2 .colour2 .style2 .column2, #section4 .section_column2 .colour3 .style2 .column2 { float: none; width: 135px; }

/* Story */
#story #search_ad_container .ad { margin-bottom: 0; }
#story .section_twocolumn { background: url(/magazine/graphics/fauxcol_right.gif) repeat-y top; }
#story .section_column1 { width:482px; overflow:hidden; }
#story .section_column2 { width:316px; padding:0; }
#story .section_column2 #search_ad_container { float: none; }
#story #crumbtrail { width: 100%; }