/* RECAP:
- Never define a padding for an element that has a width defined, it breaks in IE.
- When a wrapping block has floating elements in it, in order to stop the floating messgin
	you have to overflow: hidden your wrapping block.
- Duplicate chars in IE6: remove html comments between first and last series of floated elements.
- Use px instead of em or %, in order to get same rendering in IE, FF and Safari.
- For nice rollover menubars you must use <li>, see listamatic for examples
*/

/*@import url("/css/reset.css");*/

/* ************************************ IE6 fixes *************************************** */

* html {
	font-size:						small; /* IE6 hack, now text size renders exactly as on FF and Safari */
}


/* ********************************* Global styles *************************************** */

body {
	background:						#ffffff;
	color:								#555; /* color of the text, this is nicer than pure black */
	text-align:						left;
	font:									15px "Helvetica Neue", Helvetica, Arial;
	margin:								0;
	line-height:					22px;
}

/* .wrapper is a shared class used by each block in the layout */
.wrapper {
	width:								980px; /* as IE and FF don't render the same em size, I must use px */
	margin:								auto; /* center the block */
	overflow:							hidden;
}

a {
	text-decoration:			none;
	color:								#125aa7;
}

a:hover {
	text-decoration:			underline;
	color:								#0b9df0;
}

address {
	margin:								0 0 30px 20px;
}

h1 {
	line-height:					36px;
	margin-bottom:				5px;
	font-weight:					normal;
}

h2 {
	line-height:					26px;
}

h1, h2, h3, h4 {
	margin-top:						0;
}

h2, h3, h4 {
	margin-bottom:				5px;
	font-weight:					normal;
}

h2 {
	letter-spacing:				1px;
	font-size:						22px;
	font-weight:					normal;
}

img {
	border:								0;
	float:								left;
	margin:								0 10px 0 0;
}

p {
	margin:								5px 0 10px 0;
}

pre {
	background-color:			black;
	color:								white;
	padding:							5px;
	margin-bottom:				10px;
}

/* ********************************** Lists *********************************** */

ul {
	margin:								5px 0 15px 5px;
	padding:							0 0 0 10px;
}

li {
	list-style-position:	inside;
}

ul li {
	background:						url("/images/icons/bullet_grey.gif") no-repeat 0 6px;
	list-style:						none;
	padding-left:					20px;
}

ol li {
	list-style-type:			decimal;
}

/* ********************************* Page *************************************** */

#page {
	position:							relative;
	padding-bottom:				120px;
}

/* ********************************* Header *************************************** */

#header {
	position:							relative;
	background:						#212121 url("/images/backgrounds/black.gif") repeat-x;
	height:								55px;
}

#logo {
	margin:								0;
	float:								left;
	margin-top:						2px;
}

#logo a {
	width:								275px;
	height:								50px;
	display:							block;
	text-indent:					-1234px;
}

/* ********************************* Menu *************************************** */

#menu a {
	color:								#ddd;
	text-decoration:			none;
}

#menu a:hover {
	color:								white;
}

#menu ul {
	margin:								12px 0 0 0;
	padding:							0px 0 8px 0;
	float:								right;
}

#menu ul li {
	background:						none;
	padding:							0;
	float:								left;
	list-style-type:			none;
	list-style-image:			none;
	margin:								0 0 0 30px;
}

#menu ul li.end {
	margin-left:					0;
}

/* ********************************* Headline *************************************** */

#headline {
	background:						url("/images/backgrounds/grey.gif") repeat-x;
	padding:							10px 0 10px 0;
	text-align:						center;
}

#headline h1 {
	color:								#0b9df0;
}

/* ********************************* Columns *************************************** */

.column_half {
	width:								455px;
	float:								left;
	margin-right:					45px;
}

.column_quarter {
	width:								210px;
	float:								left;
	margin-right:					25px;
	text-align:						left;
}

.end {
	margin-right:					0;
}

/* #################################### Sidebar ##################################### */

#sidebars {
	width:								280px;
	float:								right;
}

.sidebar {
	margin-bottom:				25px;
}

.promote {
	font-family:					"Century Gothic";
	font-size:						25px;
}

.promote img {
	vertical-align:				middle;
	float:								none;
}

/* #################################### Content #################################### */

#content {
	overflow:							hidden;
	padding-top:					25px;
}

#content_with_sidebars {
	width:								670px;
	text-align:						justify;
}

/* ************************************ Entry *********************************** */

.entry {
	margin-bottom:				30px;
	padding-bottom:				15px;
	background:						#fff url("/images/diagonal.png") repeat-x 0 100%;
	overflow:							hidden;
}

.entry p {
	text-align:						justify;
}

.entry .meta {
	color:								#bbb;
	font-style:						italic;
	border-bottom:				1px solid #ddd;
	float:								none;
	width:								100%;
}

/* ************************************ Navigation *********************************** */

#navigations {
	overflow:							hidden;
}

.navigation {
	width:								250px;
	font-size:						12px;
	padding:							0 18px 0 18px;
}

#navigations .next {
	background:						url("/images/icons/navigation_next.png") no-repeat 0 3px;
	float:								left;
}

#navigations .previous {
	background:						url("/images/icons/navigation_previous.png") no-repeat 100% 3px;
	float:								right;
	text-align:						right;
}

/* ************************************ Subcontent *********************************** */

#subcontent {
	background:						#fff url("/images/backgrounds/white.jpg") repeat-x;
	overflow:							hidden;
	padding-top:					35px;
}

/* ********************************* Announcement *************************************** */

#announcement {
	background:						#111 url("/images/backgrounds/black.gif") repeat-x;
	color:								#666;
	font-family:					Helvetica;
	text-align:						center;
	margin-top:						20px;
	padding-top:					15px;
	position:							absolute;
	bottom:								0;
	width:								100%;
	font-size:						12px;
}

/* ********************************* Quote *************************************** */

.quote img {
	margin-top:						10px;
}

.quote blockquote {
	margin:								0;
	font-family:					Times;
	font-style:						italic;
}

.quote p {
	font-size:						13px;
	text-align:						right;
	color:								#999;
}

/* ********************************* Misc *************************************** */

.meta {
	width:								100px;
	font-weight:					bold;
	display:							block;
	float:								left;
	color:								#aaa;
}

.container {
	overflow:							hidden;
}

.float_right {
	float:								right;
}

.technologies {
	float:								left;
	width:								680px;
}