/* Site design and development as well as the stylistic decisions for The Klaxon written by Greg Mihalko. The development would not have been possible however without the help of Big John Design at Position is Everything along with Douglas Livingstone, who developed the brilliant Negative margined floats method at the heart of this design, Paul O'Brian, Philippe Wittenbergh, Tedd Sperling, Bruno Fassino's and the rest of the folks who contribute to W3C, Position is Everything and any other open source web development sites. This layout is truly the result of the efforts of many developers over a long period. Thank you. */ 


/* ----------------------------- Generic ----------------------- */


html, body {margin: 0; padding: 0; border: 0;}

body {
color: #333333;
font-family: georgia, "times new roman", serif;
font-size: 12px;
line-height: 16px;
text-align: center;
}

/* ----------------------------- Typography ----------------------- */

p  {margin: 0; padding-bottom: 12px;}

h1 {
font-size: 21px;
line-height: 27px;
padding:5px 0;
margin: 0;
}

h2 {font-size: 16px; line-height: 20px; }

h3 {font-size: 14px; line-height: 18px;}

.podcast h3 {font-size: 11px; line-height: 15px; padding:0; padding-bottom: 4px;  margin: 0;}

h3.voices {margin:0; padding:0;}

h4,h5,h6 {font-size: 12px; margin:0; padding:0; }

.jobboard h4,h5,h6 {font-size: 10px; }

.speakertopic {font-style: italic; font-size: 15px;}


a {text-decoration: none; color: #333333;}
a:hover{text-decoration: underline;}
a:visited {color: #333333;}
strong, b {font-weight: bold;}
li {list-style: none; margin: 0; padding: 0;}
ul {list-style: none; margin: 0; padding: 0;}

.right-resources ul li {list-style: disc; list-style-position: outside; margin: 0; color: #666666;}

.right-resources ul {margin: 0; padding-left: 18px;}

ol li{list-style: decimal; list-style-position: outside; margin: 0; color: #666666;}

ol{ margin: 0; padding-left: 22.5px;	}

.alignright {margin-top: 0; text-align: right; clear: both;}

.small {font-size: 11px; text-decoration: none;}

.calendar .post p a {text-decoration: none;}

.post p a {text-decoration: underline;}

.post p i a{text-decoration: none;}
.post p i a:hover{text-decoration: underline;}

.classification {padding: 2px 3px; margin-bottom: 7.5px; font-size: 14px; color: #FFFFFF; background: #e10a00; display: inline; width: auto; }

.titles {padding: 2px 2px; margin-bottom: 7.5px; font-size: 10px; color: #999999; font-family: Arial, sans-serif; text-transform: uppercase; font-weight: bold;  border-top: solid 2px #CCCCCC;}

.post .classification a {color: #FFFFFF;}

.modified {color: #999999; font-family: Arial, sans-serif;
   font-size: 10px;
   line-height: 12px;
   padding:0 0 10px 0;
   margin: 0;}


/* ----------------------------- Header and Footer ----------------------- */

.header {
position: relative;
height: 200px;   
width: 975px;
text-align: left;
margin-bottom:25px;
font-size: 14px;
}


.bottom {width: 975px; border-top: 1px solid #CCCCCC; position: relative; text-align: center; padding: 15px 0;}

.topbar {padding: 15px 0 0 0; margin: 0; width: 975px; text-align: right; float: right; font-family: Arial, sans-serif;  font-size: 9px; color: #CCCCCC; border-bottom: solid 1px #CCCCCC;}

.header .topbar a {text-align: right; color: #999999;}

.main-head{float: left; width: 975px; margin:0; padding: 15px 0;}

.header .navbar .searchbar img {position: absolute; top:3px; right: 205px;}

.searchbar{position: absolute; right: 0px; top: 0px; padding: 3.5px 0;}

#s { color: #666666; font-family: Arial, sans-serif; border: solid 1px #e10a00; padding: 1px; width: 125px; }

.button { background-color: #FFFFFF; color: #e10a00; font-weight: bold; font-size: 10px; font-family: Georgia, serif; border: solid 1px #e10a00; text-transform: uppercase;}

#searchsubmit:hover {color: white; background-color: #e10a00; font-weight: bold; font-size: 10px; font-family: Georgia, serif; border: solid 1px #e10a00; text-transform: uppercase; }

/* .full-story {
position: relative;
width: 975px;
text-align: left; 
padding: 15px 0;
margin-top: -30px;
margin-bottom: 50px;

} */

/* ----------------------------- Navigation ----------------------- */



.navbar {position: relative; float: left; width: 975px; border-top: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC;}

.navbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 700px; /* Width of Menu Items */
	}

.navbar ul li {
	position: relative;
	float: left;
	}
	
.navbar ul li.first a{padding-left:0px;}
	
.navbar li ul {
	position: absolute;
	left: 0; /* Set 1px less than menu width */
	top: 22px;
	display: none;
	}

/* Styles for Menu Items */
.navbar ul li a {
	float: left;
	display: inline;
	text-decoration: none;
	color: #666666;
	padding: 5px 10px;
	margin: 0;
	border-bottom: 0;
	}

.navbar ul li a:hover {text-decoration: underline;}

/* Fix IE. Hide from IE Mac \*/
* html .navbar ul li { float: left; height: 1%; }
* html .navbar ul li a { height: 1%;}
/* End */

.navbar .main-nav ul li a:hover {  } /* Hover Styles */
		
.navbar li ul li a { padding: 10px 10px; margin: -2px 0;} /* Sub Menu Styles */
		
.navbar li:hover ul, li.over ul { float: left; display: block; } /* The magic */



/* ----------------------------- Images ----------------------- */

img{border:0;}

.left-main-inner img {max-width: 635px;}

.left-main-inner .post img {width: 635px; height: auto; padding-top: 5px;}

.voices img {width: 219px; height: auto; padding: 7.5px 0;}

.right-col-container img {max-width: 220px;}

.fourphase img {width: 220px; height: auto; padding: 5px 0;}

.blog img {width: 220px; height: auto;}


.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

* html .post .wrapper img.alignleft {
   float: left;
}

.alignright {
   float: right;
}


.wp-caption {
   width: 635px;
   height: auto;
   overflow: hidden;
   margin: 0;
   padding:0;
}

* html .post .wp-caption .alignnone img {
	width: 635px;
	height: auto;
	overflow: hidden;
   margin: 0;
   padding: 0;
   border: 0;
}

.post .wp-caption .alignnone img {
	width: 635px;
	height: auto;
	overflow: hidden;
   margin: 0;
   padding: 0;
   border: 0;
}

.post .wp-caption p.wp-caption-text {
width: 635px;
text-align: right;
	color: #999999; font-family: Arial, sans-serif;
   font-size: 10px;
   line-height: 12px;
   padding: 2px 0 10px 0;
   margin: 0;
}

.wrapper .post img.contactimg {width: 125px; height: auto; padding: 0; margin: 15px 15px 7.5px 0; border: solid 1px #CCCCCC; vertical-align: top;}

* html .wrapper .post img.contactimg {width: 125px; height: auto; padding: 0; margin: 15px 15px 7.5px 0; border: solid 1px #CCCCCC; vertical-align: top;}

/* ----------------------------- Comments ----------------------- */

#author, #email, #url, #comment {padding: 2px; margin: 5px 0 5px 0; background: none; border: solid 1px #CCCCCC;}
#comment{width: 42em;}




/* ----------------------------- Layout ----------------------- */


.clear { clear: both; }

.to-right {float: right;}

.to-left {float: left;}

.left-main-inner{
float: left;
width: 640px;
padding-right: 15px;
padding-bottom: 15px;
}

* html .left-main-inner{
float: left;
width: 640px;
overflow: hidden;
padding-right: 15px;
padding-bottom: 15px;
}

.left-main-inner .post {padding-bottom: 15px; margin-bottom: 22.5px; overflow: hidden;}

.right-main-inner{width: 305px; float: left; padding-left: 15px; font-size: 11px; line-height: 15px; }

.left-main-inner .post p {width: 42em;}

.right-resources {margin-bottom: 15px;}

.post {padding-bottom: 15px; overflow: hidden;}

* html .post {padding-bottom: 15px; overflow: hidden;}

.voices .post {padding:0; margin:0;}

.podcasts {float: left; width:137px; overflow: hidden; padding-right: 15px; border-right: solid 1px #CCCCCC;  }

.podcast {padding-bottom: 15px;}

.podcast p {padding:0; margin: 0;}

.voices-events-container{float: left; width: 385px; padding-left: 15px; padding-bottom: 15px; margin-bottom: 5px;}

.voices {float:left; width:219px; padding-right: 15px; overflow: hidden; border-right: solid 1px #CCCCCC;}

.events {float: left; width:135px; overflow: hidden; padding-left: 15px;  }

.jobboard {float: left; width:136px; padding-left: 15px; overflow: hidden; font-size: 10px; line-height: 14px; }

.full-story {margin-top: 15px; margin-bottom: 30px; border: solid 1px #CCCCCC; padding: 0; width: 975px;}

.right-col-container{
	float:right; 
	overflow: hidden; 
	width: 220px; 
	padding-left: 15px; 
	margin-left: 15px; 
	border-left: solid 1px #CCCCCC; 
}

.fourphase {float: left; overflow: hidden;}

.blog {float: left; overflow: hidden;}

.right-col-ad {float: left;overflow: hidden;}

.most-read-container {float: left; width: 304px; margin-top: 15px; padding-top: 15px;}

.most-read-ad {border: solid 1px #CCCCCC; margin: 10px 0;}

.mostread {padding-bottom: 15px; margin-bottom: 15px;  border-bottom: solid 1px #CCCCCC;}
h3.mostreadtitle {padding: 2px 4px; display: block; background-color: #666666; color: #FFFFFF;}

.left-col {float: left; width:135px; padding-right: 15px;}

.right-col {float: right; width:135px; padding-left: 15px; list-style: none;}

.testfloat {width: 50px; background: #ffd; padding: 2px; font-size: 8px; font-family: Verdana, sans-serif;}

.ap-test {
	position: absolute;
	top: -102px;
	font-family: Verdana, sans-serif;
	font-size: 8px;
	width: 150px;
	height: 100px;
	border-top: 1px solid #000;
	color: yellow;
}

/* \*/
* html .ap-test {
top: -101px;
t\op: -102px;
}
/* */

.ap-left {left: 0;}

.ap-right {right: 0;}


/* ----------------------------- Primary Layout ----------------------- */

/* To adjust the side col widths, or the vertical col dividers, a certain set of values must be changed
all at the same time and by exact amounts or problems will result. Each of these group's member values
have been marked off with comments that start with "Critical..."
For example, if the left col width needs to be changed then all the values marked "Critical left col dimension value" MUST have their pixel values
altered by the same amount. Certain of these left col width values are marked "(moves inversly)", and
these get changed by the same pixel amount but inversly to the other values. So if margin-left on .outer
is increased by 10px, then the width of .outer must decrease by 10px, and so on.

To change the width of the entire layout, .wrapper, .outer, .float-wrap, and .left-main all get changed together,
and only after that is it safe to change col or divider widths. Remember, even one small mistake will degrade or
even break the layout, so be very careful! it's possible to "loosen" the layout so small errors aren't so messy,
but then it becomes hard to finely control text spacing.

For spacing within the cols, it's best to apply margins on content elements inserted into the cols,
because padding directly on those col elements will change their widths, breaking the layout.

Certain hiding hacks have been used extensively in this layout, so here is a quick explaination of them.

The Tan hack:

* html .anyelement {rules read only by IE/Win and IE/Mac}

The Mac-hack:  (first the active comment you are reading now must be closed...) */

/* \*/

/* */

/*...Back in comment mode now. Anything between those two comment lines will be hidden from
IE/Mac. Don't use any comments within this hack or it will close prematurely and IE/Mac will begin
reading before it should.

The above two hacks are combined so as to feed rules only to IE/Win. Proper use of backslash escape
characters inside property names used in the Holly hack can further segregate rules to be read by only
IE6 from rules for IE5.x/Win.

These hiding hacks, along with several other fixes, make possible this formerly impossible layout.
It is highly unlikely that new browsers will have any problem with these valid hiding hacks, and
Microsoft does not plan any browser changes soon that would alter the proper operation of the layout.

*/


.wrapper {
margin: 0 auto;
width: 1025px;
padding: 0 25px;
text-align: left;
}

* html .wrapper {   /* IE5.x/win box model fix */
width: 1027px;
wid\th: 1025px;
}

.outer {
position: relative; /* IE needs this or the contents won't show outside the parent container. */
margin-left: 655px;    /* Critical left col dimension value */
width: 320px;   /* Critical left and right col/divider dimension value (moves inversly) */
/* background: #fff; Sets background of left-main col */
border-left: 1px solid #CCCCCC;   /* Critical left divider dimension value */
/* border-right: 1px solid #CCCCCC; Critical right divider dimension value */
}

* html .outer {   /* IE5.x/win box model fix */
width: 322px;   /* Critical left and right col/divider dimension value (moves inversly) */
wid\th: 320px;   /* Critical left and right col/divider dimension value (moves inversly) */
}

.float-wrap {
float: left;
width: 320px;   /* Critical left and right col/divider dimension value (moves inversly) */
margin-right: -1px;   /* Static fix */
}

.right-main {
float: right;
width: 320px;   /* Critical left and right col/divider dimension value (moves inversly) */
margin-bottom: -1px;   /* Fixes a variance in IE/win for the green AP bottom boxes */
/* \*/
margin-left: -1px;
/* Hidden from IE-mac */
}

.left {
position: relative; /* IE needs this or the contents won't show outside the parent container. */
width: 655px;    /* Critical left col/divider dimension value */
margin-left: -654px;    /* Critical left col/divider dimension value */
}

* html .left {
float:left;
}

*>html .left {width:654px;}   /* Fix only for IE/Mac */

.container-left {
width: 653px;    /* Critical left col dimension value */
/* padding-bottom: 110px;    To keep content from going underneath the AP bottom boxes */
}

/* Static fixes */

/* Below is the Holly hack, and if IE/Win shows bugs it's a good idea to apply this hack to
	different elements and see if that fixes the problem. Sometimes it may be necessary
	to use "position: relative;" on certain elements, but it's hard to tell in advance which
	elements will need such fixes. Here it prevents IE5/Win from clipping the left ends
	of the headings. */
/* \*/
* html h2 {height: 1%;}
/* */


/* This is a fix for IE5/Win at the largest text size setting. */
/* \*/
* html .left {margin-right: -3px;}
/* */


.italics-test, .italics-test-side {
font-style: italic;
text-align: justify;
}

/*
The following fixes prevent justified italic text from destroying the layout in IE/win.
	The problem is that those properties together make IE force the container wider,
	which in this type of floated layout causes a float drop. 	Pre-IE6 gets "width: 100%"
	and "overflow: hidden", while IE6 gets "width: auto" and "overflow: visible, which
	is the default, but explicitly stating it seems to keep IE6 happy. IE6 also needs
	to see the "height: 1%" to give it some kind of box dimension. Browser coddling
	we call it. Finally, Bruno found that "word-wrap: break-word;" disarranged the
	justified text in IE5.5 and 6, so it is defaulted to "normal" for this text.
	If you don't need justified and italicized text then forget all these fixes */

/* \*/
* html .italics-test, * html .italics-test-side {
overflow: hidden;
width: 100%;
o\verflow: visible;
w\idth: auto;
hei\ght: 1px;
}
/* */

/* All the IE fixes that are inside separate "Mac-hacks" may be grouped 	within
	just one Mac-hack for convenience if desired. However, each fix must come
	later than the rule it is fixing or the fix itself will be overridden. */