/*-----------------------------------------------------------------------------
Axis Magazine Main Stylesheet
author: Drive New Media, Inc.
date: 8/12/09
-----------------------------------------------------------------------------*/
/* Colors: 

	red 		#900;
	coolgrey 	#DBDFEC;
	warmgrey	#998D84;
	
*/
/* =Reset Styles / Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}

/* Consistently resizes text and line-height across all browsers */
/*default font size from 16px to 10px */
body { font-size:62.5%; line-height:1.6em;text-align: center;color: #000;font-family: Arial, Helvetica, Verdana, sans-serif;background-color: #000;}

ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
hr {border: none;border: 1px #ccc solid;margin: 10px 0;}
a {color: #900; text-decoration: none;}
a:hover {color: #900; text-decoration: underline;}


/* -------------------------- HEADERS ------------------------------------ */

/*h1,h2,h3,h4,h5,h6 {text-transform:capitalize!important;}*/
h1 { font-size: 2.2em; line-height: 1em; color: #900; }
h2 { font-size: 1.7em; line-height: 1em; color: #000; }
h2 a { color: #000; text-decoration:none; }
h2 a:hover { color: #000; text-decoration:underline; }
h3 {
	color: #900;
	font-size: 1.5em;
}
h4 {
	color: #4d4d4d;
	font-size: 1.2em;
	font-weight: bold;
}

/* ------------------------- REUSED CLASSES ---------------------------- */
.left { float: left; }
.right { float: right; padding-top:5px; }
.clear { clear: both; }
.generalpad { padding:20px; }
.generalpadLR {padding:0 20px 10px 20px;} 
#posts .paginate { margin-left:20px;height:26px;}
#photosMain .paginate { height:26px;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inherit; }
/* for IE/Mac */
.frapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.d_block { display: block; }

/* ------------------------- LAYOUT SECTIONS ------------------------------ */
/* wRapper Name */
#ODB { text-align: left; margin: 0 auto; padding:0 0 10px 0; width:958px; border:1px solid #333;}
#container {text-align:left; margin:0 auto; width:940px; }
#contentarea {clear:both; margin:0 auto; width:940px;}
#contentarea p {font-size:1.3em;padding:3px 0;}
#maincolumn {float:left;width:640px;margin-right:20px;}
#subcolumn {float:left;width:280px;}

#homevideos { width: 640px; height: 386px; background-color: #dbdfec; display: block; margin-bottom:10px; }

#posts { width: 640px; background-color: #dbdfec; margin-bottom:10px; padding-top:10px; }
#pageHome #posts h1 {text-indent:-9999px;background:url(../images/h_axis_posts.gif) no-repeat left bottom;width:400px; margin:0 20px 10px 20px;}
#posts h1 {margin:0 0 10px 0;}
#posts .generalpadLR h1 {margin:10px 0 0 0;}
#posts ul li {clear:both; padding:0 20px 10px 20px; background:url(../images/bg_maincolumn_divider.gif) no-repeat bottom; height:110px; margin-bottom:10px; }
#posts li h2 {text-transform:uppercase;}
#posts li h2 span {text-transform:none;}
#posts ul li img {float:left; margin:0 23px 10px 0; border:1px solid #666;}
#posts div.hr {background: url(../images/bg_maincolumn_divider.gif) no-repeat top center;border:0;height:2px;width:640px;margin-bottom:10px;}
#posts div.hr hr {
  display: none;
}


#photosMain { width: 640px; background-color: #dbdfec; margin-bottom:10px; padding:10px 0; }
#photosMain h1 {margin:0 0 10px 0;}
#photosMain .generalpadLR h1 {margin:10px 0 0 0;}
#photosMain ul {padding:0 20px; }
#photosMain ul li {display:inline; padding:0; margin-bottom:10px; }
#photosMain li h2 {text-transform:uppercase;}
#photosMain li h3 {padding:5px 0;}
#photosMain ul li img { border:1px solid #666;margin:3px 1px 3px 0;}
#photosMain div.hr {background: url(../images/bg_maincolumn_divider.gif) no-repeat top center;border:0;height:2px;width:640px;}
#photosMain div.hr hr {
  display: none;
}
#photosSub { width: 620px; background-color: #dbdfec;}
#photosSub h1 {margin:0 0 10px 0;}
#photosSub .generalpadLR h1 {margin:10px 0 0 0;}
#photosSub ul {padding:0; }
#photosSub ul li {display:inline; padding:0; margin-bottom:10px; }
#photosSub li h2 {text-transform:uppercase;}
#photosSub li h3 {padding:5px 0;}
#photosSub ul li img { border:1px solid #666;margin:3px 1px 3px 0;}

#commentsWrapper {
		clear:both;
}

#flashcontent3 {padding-bottom:10px;}

ul.pdfArchive {padding:10px;width:920px;background-color:rgb(219, 223, 236);}
ul.pdfArchive li {padding-right:10px;float:left;}
.example2 {border:1px solid #000;margin:5px 0;}

.comment {background-color:#fff;margin:0 5px;}
#comment_entry {padding:10px 0;}
#breadcrumbs { padding-left:20px;font-size:1.3em;padding-bottom:7px;}

/* Search Fields */
#subsearch { width: 280px; background-color: #998D84; margin-bottom:10px; }
#formsearch { padding:10px 10px 0 15px;width: 255px;}
#searchinput {border: 1px;font-size: 10px;padding: 4px;width: 200px;}
.submit {background: url(../images/b_search.gif) no-repeat;border: 0;height: 20px;margin-left:10px;text-indent: -9999px;width: 30px;color:#998D84;}
input:focus {outline: 5px auto -webkit-focus-ring-color;outline-style: auto;outline-width: 5px;outline-color: -webkit-focus-ring; }

#cover img {margin-left:11px;}
#subcolumn hr {background: url(../images/bg_subcolumn_divider.jpg) no-repeat top center;border:0;height:2px;width:280px;margin-bottom:10px;}
/*#subcolumn #subsearch div.hr2 hr {
  display: none;
}*/

#cover {padding:3px 0 23px 0;}

#cover a img.example1 {
	padding: 5px;
	margin: 0 10px;
}

#cover a:hover img.example1 {
	background-color: #fff;
}

#subad { width: 280px;margin-bottom:10px; }
#subphotos { width: 280px; background-color: #998D84; margin:10px 0; padding-bottom:15px; }
#subphotos h1 {text-indent:-9999px;background:url(../images/h_onthescene.gif) no-repeat left bottom;margin:0 0 10px 12px;padding-top:10px;}
#subphotos ul { padding:3px 12px; }
#subphotos ul li { display:inline; padding-right:3px; }
#subphotos p {padding:3px 12px;}
#subphotos a {color:#fff; font-size:.90em;}



#footer { font-size:1.3em;clear:both; width:940px; background:#900 url(../images/bg_footer.jpg); }
#footer h3 {color:#000;font-size:1.3em; border-bottom:1px solid #000;margin-bottom:5px;}
#footer a, #footer a:link, #footer a:visited { color:#fff; text-decoration:none; margin-bottom: 10px;}
#footer a:hover { color:#fff; text-decoration:underline;}
#footer a.padLeft { padding-left: 10px; }


#footerad { margin-bottom:10px; }

#network, #advertising { float:right; width:175px;}
#network h3, #advertising h3 {width:160px;}
#social { float:left;width:650px;}
#social h3 {width:570px;}
#social img {vertical-align:middle;padding-right:5px;}
#footer #footernav  {
	clear:both;font-size:.88em;padding-top:20px;
	}
#footer #footernav a {
	color:#000; font-weight:bold;
	}

/*#### Main Navigation ####*/

ul#main_nav { text-align:left;background:url(../images/bg_navigation.gif); position:absolute; width:640px;}
ul#main_nav li { float:left; list-style-type:none; }
ul#main_nav li a { height:44px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none; }

li#navHome a, li#navMagazine a, li#navVideos a, li#navPhotos a, li#navContests a, li#navContact a { background:url(../images/bg_navigation.gif); }

li#navHome a 			{ background-position:0 0; width:61px; left:0; }
li#navHome a:hover		{ background-position:0 44px; }
body#pageHome li#navHome a 	{ background-position:0 44px; }

li#navMagazine a 			{ background-position:-61px 0; width:110px; left:61px; }
li#navMagazine a:hover		{ background-position:-61px 44px; }
body#magazine li#navMagazine a 	{ background-position:-61px 44px; }

li#navVideos a 			{ background-position:-171px 0; width:86px; left:171px; }
li#navVideos a:hover		{ background-position:-171px 44px; }
body#videos li#navVideos a 	{ background-position:-171px 44px; }

li#navPhotos a 			{ background-position:-257px 0; width:92px; left:257px; }
li#navPhotos a:hover		{ background-position:-257px 44px; }
body#photos li#navPhotos a 	{ background-position:-257px 44px; }

li#navContests a 			{ background-position:-349px 0; width:110px; left:349px; }
li#navContests a:hover		{ background-position:-349px 44px; }
body#contests li#navContests a 	{ background-position:-349px 44px; }

li#navContact a 			{ background-position:-459px 0; width:181px; left:459px; }
li#navContact a:hover		{ background-position:-459px 44px; }
body#advertising_contact li#navContact a 	{ background-position:-459px 44px; }

/* ------------------------- scrollable ------------------------------ */
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
#scrollableWrapper { margin: 0 auto; padding-top: 20px; width: 600px; height:330px; }
div.scrollable { position:relative; overflow:hidden; width: 600px; height:330px; } 
/*  required settings
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable ul.items { 
    /* this cannot be too large */ 
    width:20000em; position:absolute;	
} 
/* 
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable ul.items li { float:left;width: 600px; position: relative;}
div.scrollable ul.items li a { text-decoration: none; }
div.scrollable ul.items li div.overlay { background: url(../images/scrollable/g_overlayBG.png) top right repeat; color: #fff; width: 205px; height: 330px; position: absolute; top: 0; right: 0; padding: 10px; }
div.scrollable ul.items li h3 { font-size: 1.6em;line-height:1.4em;color: #fff; }
div.scrollable ul.items li p { font-size: 1.2em; line-height: 1.4; color: #ccc; }
div.scrollable ul.items li img {padding: 0; margin: 0;}
/* you may want to setup some decorations to active item */ 
ul.items li.active { border:1px inset #ccc; background-color:#fff; }
/* this makes it possible to add next button beside scrollable */
div.scrollable { float:left;}
/* disabled navigational button */
a.disabled {visibility:hidden !important;}

div.navi { float: right; padding: 10px 0 0 0; height: 20px; width: 70px; }
div.navi a { background: url(../scripts/scrollable/arrow/navigator.png) 0 0 no-repeat; display: block; float: left; font-size: 1px; height:8px; margin: 3px; width: 8px;  }
div.navi a:hover { background-position:0 -8px; }
div.navi a.active { background-position: 0px -16px; }
h3.viewAllVideos { float: right; padding: 10px 10px 0 0;font-size:1.2em; }


/*##### CALENDAR #####*/
#event_calendar { background: #fff; width: 248px; margin:0 auto;}
#calendar { width:248px; text-align: center; border: 1px #fff solid; margin-bottom:10px; }
#calendar .calendarHeader {text-align:center;color: #fff;text-transform:uppercase;font-size:1.2em;font-weight:bold;padding:6px 0 0;}
.calendarHeaderRow {background-color:#B42B2F;}
table#calendar td.calendarDayHeading {color:#000;font-size:0.88em;text-transform:uppercase;text-align:center;font-weight:bolder;border:none;background:#B42B2F;padding: 3px 0;height: 10px;border-bottom: 2px #fff solid; width: 33px;}
table#calendar td {background:#d9d9d9 url(/images/css/calendar.gif) no-repeat center;padding:0;text-align: center;color:#000;width: 33px;height: 24px; border-top: 1px #fff solid; border-right: 1px #fff solid; }
table#calendar td a { background: #bdb9b5 url(/images/css/calendar.gif) no-repeat top; display: block; width: 34px; height: 24px; }
table#calendar tr td.calendarToday a, table#calendar tr td.calendarToday {background: #7b736c url(/images/css/calendar.gif) no-repeat bottom;color: #fff!important;width: 33px;height: 24px; font-weight:bold;}
div.calendarMonthLinks a { color: #fff; font-weight:bold; }
div.calendarMonthLinks a:hover { color: #000;font-weight:bold; text-decoration: none;}