/*  Design copyright James John Malcolm.
	With some help from Bruce Lawson.
	Original:
	Version 1.2 - 2nd July 2009.
	Archived:
	Version 1.3 - 24th Febuary 2010
	Colours inspired by and with apologies to: http://www.colourlovers.com/palette/694737/Thought_Provoking
	-
	CSS is (of course!) freely stealable, and heavily commented to make understanding new css 3 functions easy.
	It's also reasonably messy!
	-
	Tweet me any questions, or whether these comments have been useful or not! 
	@jamesjm
	-
	Lots of webkit & gecko (mozilla) specific rules as a lot of modules aren't finalised yet.
	Lots of bugs (especially webkit & opera), which are documented in the code.
	-
	Still waiting for perspective:500; to work in Webkit desktop. */

* {cursor:progress;} /* Sorry, I'm just feeling a bit evil today */

/* 	Border-box
	=========================================================================
	Border-box makes 'width' definite and forces padding to subtract from it,
	instead of the default adding. Essentially the way IE 5 used to do it.
	Can be handy for liquid layouts or just if you want to simplify your
	arithmetic when lining things up. Only have to worry about margins!
	-
	I believe IE  needs to be in quirks-mode to go into the 'border-box' mode. Not sure.
	-
	So how's about 'margin-box'?
	http://www.quirksmode.org/css/box.html */
* {
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
}
/* 	Upon selecting
	========================================================================
	For that ultimate control you don't really need.
	Sadly, but not unexpectedly, there's no background image possible.
	-
	Also, svg-masked elements & css-generated content are not affected (in Webkit). (press cmd-a/ctrl-a)
	Also also, selection opacity is affected locally by opacity of selected elements. (press cmd-a/ctrl-a)
	-> Looks like bugs.
	-
	Firefox 3.6 has reverted back to needed -moz-, because ::selection has been removed from the current CSS3 draft.
	-
	https://developer.mozilla.org/En/CSS/::selection
*/
*::-moz-selection {
background:rgba(192, 41, 66, 0.2);
}

*::selection {
background:rgba(192, 41, 66, 0.2);
}

/* 	HTML 5 elements
	========================================================================
	Because they're (from the browser's point of view)
	"made up" elements, you need to block-level'em before
	you can do ANYTHING to them directly. Two notes:
		1) "header h1 {}" always works anyway, without block-leveling.
		2) [role] or [role=banner] start working too after a good block-leveling.
*/
article, header, footer, section, aside {display:block;margin:0;padding;0;}

/* 	#wrapper - because it's still the easiest way to centre a whole page.
	====================================================================== */

#wrapper {
position:relative;
width:912px;
padding:0 0 0 12px;
margin:0 auto;
line-height:1.4;
 -webkit-animation-name: fader;
 -webkit-animation-duration: 3s;
 -webkit-animation-iteration-count: 3;
 -webkit-animation-direction: alternate;
 -moz-animation-name: fader;
 -moz-animation-duration: 3s;
 -moz-animation-iteration-count: 3;
 -moz-animation-direction: alternate;
}

/* Needed because Firefox doesn't believe in doing display:table and position:relative magic at the same time */
#wrapper:before {
content:""; clear:both;
display:block; height:24px;
} /* This used to work! */


/* To make sure users know this is an archived version.
==================================================== */

#archive {position:absolute;margin:0.2em 2em;z-index: 200;} /* Z-index needed to place it above the header, to make the link clickable.
																Firefox supports a special click-through property: pointer-events: none;
                    											which you'd place on all the elements blocking the clicks.
                    											See: http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ */
#archive p {margin:0;}


/*a {position:relative !important;} */ /* To fix loads of (Safari) bugs with relation to multiple columns */

/* a:hover animation, as seen on Binary Bonsai (but in JS).
=============================================================================================================================
a:focus added for people who scoot around the web by keyboard.
You *can* just do
a {opacity:.7; -webkit-transition: opacity .8s ease;}
a:hover, a:focus {opacity:1;}
but this gives you so much more (easy!)control over timing
and levels at each step. "from-%-%-%-to" are the steps for
each animation, so you can be as specific as you like.
Opacity has the great quality of affecting visited & non-visited links to equal effect.
-
However, Webkit (Safari/Chrome) can't handle opacity in CSS3's multi-columns.
You can work around this by using rgba colours, which is only really scalable
if you have one or two background colours in your design.
That's why I've only added it back in for the News and the Tweets.
-
The only difficulty is that 'backtograve' runs onload initially.
That *can* be a problem if you're moving stuff around in your
animation. Remember: (pretty much) everything can have a :hover!
-
http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html
Also, a list of Animatable proporties:
http://oli.jp/2010/css-animatable-properties/
*/

a {color:#406063;text-decoration:none;}
a:hover,a:focus {text-decoration:underline;}

@-webkit-keyframes cometolife {
 from {opacity:.7;}
 40% {opacity:.9;}
 to {opacity:1;}
}
@-webkit-keyframes backtograve {
 from {opacity:1;}
 40% {opacity:.9;}
 to {opacity:.7;}
}
@-moz-keyframes cometolife {
 from {opacity:.7;}
 40% {opacity:.9;}
 to {opacity:1;}
}
@-moz-keyframes backtograve {
 from {opacity:1;}
 40% {opacity:.9;}
 to {opacity:.7;}
}
#news a, .avatar a img, a.tweet-link {
opacity:.8;
text-decoration:underline;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
/*
 -webkit-animation-name: backtograve;
 -webkit-animation-duration: .8s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 */
 }

#news a:hover, #news a:focus,
.avatar a:hover img, .avatar a:focus img,
 a.tweet-link:hover, a.tweet-link:focus {
opacity:1;
position:relative;
-webkit-transition: opacity .3s ease-out;
-moz-transition: opacity .3s ease-out;
/*
 -webkit-animation-name: cometolife;
 -webkit-animation-duration: .6s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 */
}

.twit a {text-decoration: underline;}

/* 	CSS3 Font embedding. 1.1mb of fonts, 2 (nearly)complete families is overkill
	for normal use. Here we're just showing off. Just look at how much
	nicer the Italic and Bold Italic rendering is! Supported in Firefox 3.5+ & Safari 3.1+ & Opera 10 (Kinda)
	-
	Bug in Firefox 3.5:
	Doesn't notice "font-variant:small-caps" in a @font-face declaration. If you put it last,
	all normal text will be small-caps! Workaround is to put it first.
	-
	Bug in Opera 10 (alpha):
	Only seems to support one variant per font-family when importing via @font-face. (just like IE does)
	Workaround: move the Regular (normal one) to the bottom, so it overrides all above.
	-
	Bug in Opera 10 (alpha):
	Opera doesn't apply italics if any other font-family other than sans-serif or serif
	is applied. When a @font-face'd font-family is applied all italics go bold.
	This messes up nice italics and bold italics!
	Even fails with "body {font:15px/1.1 "Tahoma", sans-serif;}"!
	-
	Bug in Opera 10 (alpha):
	For large font sizes, Opera renders bold text wrongly when the font-family isn't (sans-)serif.
	Looks like it's rendered double. (regular emboldend and the real bold-font?)
	Zoom in on screen to see it clearly.
	Text-shadow replicates the (wrong) rendering perfectly.
	-
	Bug in Opera 10 (alpha):
	Kerning bug when font-family is @font-face'd. Kerning changes when selected. (Ctrl-A)
	Notice the ".next" and "4pm" shift. Kerning is (much) better when selected!
	Workaround: Use positioned text-shadow as main text!
	-
	'Feature' in Safari (4):
	Need to specify "font-weight:normal;" & "font-style:normal;" when the regular font-style
	is specified last. It'd be helpful if the default, implied, values were:
	font-weight:normal;
	font-style:normal;
	font-variant:normal;
	Essentially we're working around a workaround...
	Good news: Firefox 3.5 *does* imply these default values.
	(apart from not noticing font-variant: altogether, obviously, see above)
	-
	Because we've added variants in the @font-face below, we can just specify the font-family and it works!
	Headers get special text-rendering set for extra quality, kerning & ligatures. Only Gecko 1.9 (Firefox3+).
	See also:
	https://developer.mozilla.org/en/CSS/text-rendering
	-
	More on css3 fonts: http://www.css3.info/preview/web-fonts-with-font-face/
	-
	Ideally you'd want to use font-size-adjust, but only really Gecko supports it (fully?).
	See http://www.brunildo.org/test/xheight.pl for the concept
	See http://www.brunildo.org/test/aspect-table.html for a table of all aspect values of
	installed fonts - Safari and Firefox compute different values!
	*/
	
	/* Font definition for Internet Explorer, 
	====================================================================================
	eot files don't get downloaded by other browsers. (at least not Safari)
	-
	Included because IE 8 is such a good puppy - it renders this design pretty well!
	-
	Internet explorer doesn't support "font-weight" or "font-style" arguments,
	which is rubbish for fallback (as Bold fonts will fallback to normal variants)
	and increases the amount of CSS you have to write.
	-
    EOT linking *must* be first, or bad things happen.
    -
    EOT files created by http://code.google.com/p/ttf2eot/ on Linux.
    (Which is a pain in the ... someone make a pre-compiled Mac programme out of it already!)
	-
	====================================================================================
	-
	Gentium (Open Source!) licence permits embedding it on webpages. Not many fonts do!
	-
	If you want to use Gentium yourself, please download Gentium here:
	http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=Gentium_basic
	-
	Other great (free) web fonts here: http://opentype.info/demo/webfontdemo.html
	-
    */

@font-face {
font-family: "Gentium";
src: url(fonts/GenBasR.ttf.eot); /* Just the one, as that's all IE can handle! */
}
@font-face {
font-family: "Gentium"; /* keep the name the same throughout... */
src: url(fonts/GenBasB.ttf) format("truetype"); /* Adding the bold version makes *such* a difference. */
font-weight: bold; 	 /* ...but add the style and weight of what you're adding	 */
font-style:normal;
}
@font-face {
  font-family: "Gentium"; /* It doesn't actually matter what you call it, so call it something short & clear! */
  src: url(fonts/GenBasR.ttf) format("truetype");
  font-weight:normal;
  font-style:normal;
}


/*	 Fontin Sans @font-face importing
==========================================================================================
	A font by Jos Buivenga (exljbris) -> www.exljbris.nl
	-
	Fontis Sans. An excellent font (with compatible licence!)
	Direct link: http://www.josbuivenga.demon.nl/fontinsans.html */
@font-face {
font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_SC_45b.otf) format("opentype");
font-variant: small-caps;
font-weight:normal;
font-style:normal;
} 				/*	 Small caps first for Firefox 3.5 workaround, see "Bug in Firefox 3.5" above. */
@font-face {
font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_I_45b.otf) format("opentype");
font-style: italic;
font-weight:normal;
}
@font-face {
font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_B_45b.otf) format("opentype");
font-weight: bold;
font-style:normal;
}
@font-face {
font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_BI_45b.otf) format("opentype");
font-style: italic;
font-weight: bold;}
@font-face {
font-family: "Fontin Sans";  /* Use local() if you want people to use their local version instead of downloading it from you */
src:	local("Fontin Sans Regular"),  /* For mac */
		local("FontinSans-Regular"),	/* For windows */
		url(fonts/Fontin_Sans_R_45b.otf);
font-weight:normal;
font-style:normal;
}

/*	 FGentium @font-face importing for Opera & IE
========================================================================================== */
@font-face { /* For IE, so it still gets a nice font. */
  font-family: "Fontin Sans Bold";
  src: url(fonts/GenBasB.ttf.eot);
}
@font-face { /* Put in by Bruce, workaround for Opera */
  font-family: "Fontin Sans Bold";
  src: url(fonts/Fontin_Sans_B_45b.otf) format("opentype");
}

/* 
*/

/* Basic styles 
====================================================================================================================================== */

body {color:#421a2a;
margin:0;padding:0;
font:15px/1.2 "Fontin Sans", Candara, "Tahoma", sans-serif;
font-weight:normal;
background: #ecd078;
/* Faking the background gradient with an image for the benefit of all browsers that don't use Webkit or Presto
background: #ecd078 url(images/body-bg.png) repeat-x top; */

/* For  browsers that support SVG backgrounds in CSS (see spec http://www.w3.org/TR/css3-background/#the-background-image):
But creates streaks and slowness and Safari -- and doesn't actually add anything extra beyond the png.
background: #ecd078 url("images/body-bg.svg") no-repeat; */


}
	 
/* Webkit bug? gradients applied to body get repeated after  several 1000px, so you'd suddenly
get the gradient again above "Register" and also behind the 4th news article.
 
As a bonus, the "height:400px;" on body:after allows you to control the gradient
more precisely, as it's much easier to guess 40% (color-stop:0.4) from 400px
than 0.5% from the body's height. */
     
     body:after {
     content:"";
     z-index:-1;
     position: absolute;
     top:0;
     left:0;
     width:100%;
     height:400px;
     /* Gradient backgrounds....webkit (safari+chrome) supports it the one way, */
  background: -webkit-gradient(linear, left top, left bottom, from(#e7b26a), to(#ecd078), color-stop(0.4, #ecd078));
  -webkit-background-origin: padding-box; 
  	/* while Mozilla (Firefox) supports it another way. I like this one better. Easier to see what the heck you're doing. */
  background: -moz-linear-gradient(top, #e7b26a, #ecd078 40%, #ecd078);
  -moz-background-origin: padding;
  	
     }

code {font-family: "Fontin Sans", Candara, sans-serif;font-variant: small-caps;font-size: 16px;} /* To (a) show off Fontin Sans Small Caps
																			and (b) make the code-text a little more friendly. */

h1, h1 a {color:#0c0c0c; font-family:"Gentium", serif;letter-spacing: 1px; font-weight:bold;
			text-decoration:none;opacity:1; /* For safety, if ever it is introduced */
			}
h2, h3, h4, h5 { font-family: "Gentium", "Times New Roman", serif;text-rendering:  geometricPrecision;
font-size:24px;
}

header h1 {
letter-spacing:0; /* Otherwise Firefox doesn't produce ligatures */
margin:-10px 0 -6px 2px;
padding:0 0 0 0;
font-size:129px;
line-height:129px;
font-family: "Fontin Sans", Candara, Cambria, "Palantino", "Trebuchet MS", sans-serif;
font-weight: bold; /* don't try to embolden an already-bold font */
text-rendering:  geometricPrecision; /* For Firefox to make it exact, and  
really bring out the font's attributes. Also turns on ligatures. But not on FF3.6/winXP. Who knew? */
}



header p:before { 
/*
You sadly can't use html entities in css (like & or —) but you
can use Unicode Hex Characters. See also the following explanation:
http://alanhogan.com/tips/css/special-characters-in-generated-content
-
List of Unicode hex characters:
http://www.alanwood.net/demos/ansi.html
*/
content: '\201C'; 
float:left;
margin:0 2px 0 0;
height:30px;
font-family: Georgia, serif;
font-size:60px;
line-height:.7; /* To raise the quote marks without using negative margins. */
color:#444;
}




header p {
margin:48px 0 0 0;padding:0 18px 0 0; 
-moz-transition: margin-right 1s ease-out;
-o-transition: margin-right 1s ease-out;

width:438px;
color:#333;
text-align: right;
font-family: "Gentium", serif;

font-size:24px;
float:right;
}


/* Easter Eggs. Just be glad I didn't add blink.
==============================================================================================================================
	Because this is an animation, I can start at -2px. Transitions take their startingpoint from the element in flow. */
@-webkit-keyframes bounce {
 from {margin-right: 0px;}
 30% {margin-right: -10px;}
 60% {margin-right: 10px;}
 to {margin-right: 0px;}
}
@-moz-keyframes bounce {
 from {margin-right: 0px;}
 30% {margin-right: -10px;}
 60% {margin-right: 10px;}
 to {margin-right: 0px;}
}

/* When the h1 is hovered, the following P gets it! */
header h1:hover + p:nth-of-type(1) {
position:absolute;
top: 137px;right:0;
float:none;
/* -moz-transition: margin-right 1s linear;*/
-o-transition: margin-right 1s linear;
margin-right:-15px;

/* Webkit gets something a little more interesting */
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 20;
 -webkit-animation-direction: alternate;
-moz-animation-name: bounce;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 20;
-moz-animation-direction: alternate;
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: 20;
animation-direction: alternate;
}


header h1:hover:nth-of-type(1):before {
content:"Just a little easteregg!";
position:absolute;
top:140px;
left:600px;
padding:6px 12px;

font-size:15px;
line-height:1;

color:rgba(65,65,65,.3);

background:rgba(235,235,235,.1);
-moz-border-radius: 15px; /* Works! */
-webkit-border-radius: 15px; /* Webkit: Border-radius seems to be ignored for generated content. */
border-radius: 15px;
border: 1px solid rgba(235,235,235,.4); /* Alpha seems to be ignored for border-colours. */

}


h2.vevent {line-height: 1.2;}
h2.vevent, header + article > p {
width:438px;padding-left:6px;}



/* Notice how this generated text will ignore the
::selection rules, even when they're put in specially.
header:after::selection {
background: red;
}
*/

/* Easter Eggs.*/
@-webkit-keyframes fader {
 from {opacity:1;}
 25% {opacity:.7;}
  50% {opacity:1;}
   75% {opacity:.8;}
 to {opacity: 1;}
}
@-moz-keyframes fader {
 from {opacity:1;}
 25% {opacity:.7;}
  50% {opacity:1;}
   75% {opacity:.8;}
 to {opacity: 1;}
}
/* Somehow, you can't target a :before or :after generated content directly with your animation?
	Instead they're animated along with the originating element.
	This means you can't (?) position them diffrently in the animation. Opacity, (bg-)colour work.
	Animations also seem to override any !important rules on children elements?
	-
	Could we also have :hover for :before? (e.g. article h2.vevent:nth-of-type(1) + span:before:hover)
	-
	Luckily, transitions *do* work, but instantaniously...and so aren't actually a transition but a shift. */

h3:hover + img, h3:hover + p img  {
 -webkit-animation-name: fader;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: alternate;
 -moz-animation-name: fader;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: 1;
 -moz-animation-direction: alternate;
animation-name: fader;
animation-duration: 2s;
animation-iteration-count: 1;
animation-direction: alternate;}


/* List of speakers
================================================================================================================================================ */

header+article > ul {
list-style:none;
padding:0;
margin:-12px -12px 0 0; /* margin-right: -12px; (the second -12px) is to work around a Opera/IE margin bug. See below.) */

display:table;
clear:both;
}


/*
We *could do*
[role=main] > ul li -&- [role=main] > ul li:nth-of-type(even)
but that doesn't work in Firefox 3, so we're doing it the old fashioned way.
all, 3rd & 5th get orange,
2nd, 4th & 6th get blue.
-
You'll notice I've put in:
	display: inline-block;
	vertical-align: top;
this is to make the blocks work like you'd *want* floats too (in this case), but don't.
It helps when the first block is the longest block on the line like so:
* * * *
*   *
*
[  ][  ]
[  ][  ]
-
Opera has some issues with margins when using display:inline-block (instead of float:left).
I think it has to do with me using box-sizing:border-box;.
Update: IE (8) renders it exactly the same as Opera,
so it seems to be a case of Opera emulating IE exactly.
-
More on inline-block:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://www.quirksmode.org/css/box.html
-
Great inline-block examples:
http://www.brunildo.org/test/ImgThumbIBL2b.html
http://www.brunildo.org/test/ImgThumbIBL.html
overview: http://www.brunildo.org/test/indext1.shtml
-
Link colours are rgba() because Webkit throws a tantrum
when using "opactiy:" in a multi-column. (but only after
the first column)
*/

header+article > ul li, header+article > ul li + li + li, header+article > ul li + li + li + li + li {

display: inline-block;
vertical-align: top;

width:213px;
padding:6px;
margin: 12px 11px 0 0; /* The right margin of 11px is to work around a bug introduced in FF 3.6, to do with
							the box-model and inline-block probably. It used to work in FF 3.5! */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* Better off putting border-radius behind the -render-specific ones, so in the future the default
						handeling will be followed - it might change after all */
border: 1px solid #cb533c;
background:#d95b43;
color:#421a2a;

  background: -webkit-gradient(linear, left top, right bottom, from(#d95b43), to(#cd553f), color-stop(0.8, #d95b43));
  -webkit-background-origin: padding-box; 
  background: gradient(linear, left top, right bottom, from(#d95b43), to(#cd553f), color-stop(0.8, #d95b43));
  background-origin: padding-box; 

}

header+article > ul li + li, header+article > ul li + li + li + li, header+article > ul li + li + li + li + li + li {
background: #53777a;
border: 1px solid #4d6e71;
color:#ecd078;
}
header+article > ul li a, header+article > ul li + li + li a, header+article > ul li + li + li + li + li a {
color:#fbf4e8;
color:rgba(251,244,232,.9);
/*color:#fbf4e8;  Yes I am that picky that I want a yellower white for my orange boxes...*/
}
header+article > ul li + li a, header+article > ul li + li + li + li a, header+article > ul li + li + li + li + li + li  a {
color:#fffcf7;
color:rgba(255,252,247,.9);
/* color:#fffcf7;  ...and a blue-er white for my blue boxes */
 /*ff886e;*/
}


/* Don't ever try and float an image in a multicolumn box, it's a world of hurt */

/* Also, FF 3.6 doesn't like me clearing this img */

header+article > ul li img {
float:right;
clear:right;
margin:6px 0 6px 12px;
border:1px solid rgba(150%, 150%, 150%, 0.2);
height:108px;
}

header+article > ul li:nth-of-type(even) img {
border:1px solid rgba(130%, 130%, 130%, 0.2);
}

/* Magic get-it-where-I-want-it helper-float
with apologies to http://mrclay.org/web_design/bottom_float.php */

header+article > ul li h3:after {
content:"";
width:1px;margin:0px; /*so it'll get outa da way, but still to it's magic.*/
padding:0;
float:right;
height:96px;

}

header+article > ul li + li + li + li + li img {
margin-top:12px;
padding:0;
}

header+article > ul li + li + li + li + li h3:after {
height:84px;
}


#molly + p img {float:left;margin-left:0;margin-right:24px;} /* Because I know the width of the image & enclosing box */

header+article > ul li + li + li + li + li {
width:438px;
}

h3 {
padding:0;
margin:0;
font-size:20px;

  }

/*
===================================================================
Expressions for :nth-of-type explained here:
http://reference.sitepoint.com/css/understandingnthchildexpressions
Would be easy to indicate specific ones like so: 3,6,7.
I bet the linear formular is much faster for browsers to render.
Of course, you can just put it in twice.
--
The return of <multicol>!
http://www.quirksmode.org/css/multicolumn.html
Too bad you can't specify text-align:right; for the first column
and text-align:left; for the second. :nth-column anyone?
=================================================================== */
/* 
This beautiful way of doing it only works in Firefox 3.5 (Gecko 1.9.1) and Safari (4?).
article li:nth-of-type(-n+3) p ===> (first three) */
article li p {
line-height:1.2;
}
/* 
This beautiful way of doing it only works in Firefox 3.5 (Gecko 1.9.1) and Safari (4?).
article li:nth-of-type(1n+5) p ===> (fifth and all after) */
article li + li + li + li + li p {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;

// -webkit-column-width: 170px;
// -moz-column-width: 170px;
// -webkit-column-rule: 1px solid grey;
// -moz-column-rule: 2px solid rgb(34, 136, 17);
}

h2 {line-height:1.2;}

/* Sidebar, newsbar
=======================================================================================================================================s */

#sidebar {
float:right;
display: table;
width:450px; 

padding:0 12px 0 0;
margin:0;
}


#sidebar nav ul {
list-style:square;
padding:0 12px;
margin:-6px 0 0;
line-height:1.4;
}
#sidebar nav ul li {
padding:3px 0;
margin:0;
}

section {
float:right;
clear:left;
width:450px;
padding:0 12px 0 0;
}
section h2 + ul {
list-style:square;
padding:0 12px 0 12px;
line-height:1.4;
}

article + article, aside#others {
float:right;
clear:both;

width:450px;
padding:0 12px 0 0;}


#news  {
float:left;
display: table;
width:438px;
padding:0 6px 12px;
margin:0;
color:#eddba2; 


background:#542437;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 1px solid #431d2c;
}
#wrapper #news h2, #news a {
color:#e0c56c;
}
#wrapper #news h2 {
opacity:.8;
}

#news article {
padding:0 3px;
float:left;
}

#news article + article {
width:auto;
text-align:left;}

#news article p {
width:418px;}

#news article footer {
border-top:1px solid #d53953;
padding-top:3px;
}

#news article header h2 a {
text-decoration: none;
}

#news article header time {
float:left;
font-weight: bold;
}
#news article header time:after {
content:"\2013"; /* Unicode endash */
margin:0 .4em 0 .2em;
}

#news nav {clear:both;margin:0;padding:0;}
    nav .alignleft, nav .alignright {padding:12px 6px;width:50%;}
    nav .alignleft {float:left;}
    nav .alignright {float:right;text-align:right;}


/* Tweets
====================================================================================================================================== */

aside ol.tweets {

list-style: none;
padding:6px 12px 0 18px;
margin:0;

color:#ecd078;

/* Purple*/
background:#542437;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 1px solid #431d2c;


/* Took me a while, but the trick is to keep the percentages pretty close to each other,
	otherwise you just get a cone (which can be used as a spotlight of course, but that's
	not what we're going for). Also: we need #hex-alpha: hexa(#fff,0.5). A colour-keyword-alpha notation might also be cool.
	-webkit-gradient(linear, left top, left bottom, from(#4c2032), to(#4c2032), color-stop(0.1, #542437),color-stop(0.7, #542437));
	--
	Does add some slowness to the page in Safari.
	--
	As you can see, mozilla (Firefox) implements a completely different (but kinda easier) syntax from Webkit (Safari).
*/
background:#542437  -webkit-gradient(radial, 65% 72%, 180, 65% 72%, 10, from(#542437), to(rgba(113, 50,75,0.7)));
background:#542437  -moz-radial-gradient(65% 72%, circle closest-side, rgba(113,50,75,0.7) 0%, #542437 100%);
background:#542437	gradient(radial, 65% 72%, 180, 65% 72%, 10, from(#542437), to(rgba(113, 50,75,0.7)));
					


}

aside ol.tweets a {
color:#fbf4e8; /*ff886e;*/
}

aside .info a {
opacity:.6;
}
aside .info a:hover,aside .info a:focus {
opacity:1;
}

aside ol.tweets li {

padding:12px 0;
}

aside ol.tweets div.avatar {
float:left;
margin:3px 11px 0 -2px;
}


aside ol.tweets div.avatar img {
border:1px solid rgba(130, 130, 130, 0.1);
}

span.twit {display:block;}
div.msg {}

.msgtxt {width:340px;display: inline-block;}
.info {margin-left:60px}


aside ol.tweets div.avatar a {display: block;} /* Opacity fix for Safari, as our links start with an opacity of .7 */


/* Artile page / Comments
============================================================================================================================ */

#content {
width:438px;
}

/* Don't look at me, it isn't my fault! */
#content article.cstyle1, #content article.cstyle2, #content article.cstyle3, #content article.cstyle4,
#content article.cstyle5, #content article.cstyle6, #content article.cstyle7, #content article.cstyle8,
#content article.cstyle9, #content article.cstyle10, #content article.cstyle0 {
float:none;
margin:12px 12px 12px 0;
padding:.5em 24px .5em 24px;
width:438px;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* Better off putting border-radius behind the -render-specific ones, so in the future the default
						handeling will be followed - it might change after all */
border: 1px solid #cb533c;
background:#d95b43;
color:#421a2a;

  background: -webkit-gradient(linear, left top, right bottom, from(#d95b43), to(#cd553f), color-stop(0.8, #d95b43));
  -webkit-background-origin: padding-box;
  background: gradient(linear, left top, right bottom, from(#d95b43), to(#cd553f), color-stop(0.8, #d95b43));
  background-origin: padding-box;

}

#content article.alt {
background: #53777a;
border: 1px solid #4d6e71;
color:#ecd078;
}
#content article.cstyle1 a, #content article.cstyle2 a, #content article.cstyle3 a, #content article.cstyle4 a,
#content article.cstyle5 a, #content article.cstyle6 a, #content article.cstyle7 a, #content article.cstyle8 a,
#content article.cstyle9 a, #content article.cstyle10 a, #content article.cstyle0 a {
color:#fbf4e8; /* Yes I am that picky that I want a yellower white for my orange boxes...*/
}
#content article.alt  a {
color:#fffcf7; /* ...and a blue-er white for my blue boxes */
}

#content article .commentmetadata {
float:right;
margin:0;
text-align: right;
width:7em; /* It's not pretty, but it's not like the time and date are separated by mark-up! */
}

#commentform {
padding:0;
}

#commentform p {
display:table;
}
#commentform label {
float:left;
width:174px;
}

#commentform input, #commentform textarea {
float:left;
width:240px;
}
#commentform input:not(#submit), #commentform textarea {
background:#fbf3db; /* Close enought to white to still be instanty recognisable as input fields,
					   but yellow enough not to clash too much */
}

#submit {
margin:12px 0 6px 174px;
clear:both;display:block;}


/* Footer of page
============================================================================================================================ */

#wrapper > footer {
float:right;
clear:right;
width:438px;
margin:24px 12px 0 0;
padding:1em 24px 1em 66px;

background:#ebebeb;
background:rgba(235,235,235,.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 1px solid rgba(235,235,235,.5);

}
#wrapper > footer p {padding:0 12px;}

#wrapper > footer a {
color:#426062;
}

#wrapper > footer a {
opacity:1 !important;
}
#wrapper > footer a:hover,#wrapper > footer a:focus {
opacity:1;
}