/*
 * m a r g i n s
 */


	/*
	 * o u t e r   m a r g i n s
	 */

   	header div.top {
                padding:0 18%;
        }
	header div.tabs {
                padding-left:18%;
                margin-right:18%;
        }
	header.bar {
                padding:0 18%;
        }
	footer div.pagination {
                padding-left:18%;
                margin-right:18%;
        }
	article     ,
	div.more    ,
	div.middled {
                margin-left:18%;
                margin-right:18%;
        }


	@media all and (max-width: 1243px) {
	   	header div.top {
        	        padding:0 10%;
	        }
		header div.tabs {
                	padding-left:10%;
	                margin-right:10%;
        	}
		header.bar {
        	        padding:0 10%;
	        }
		footer div.pagination {
                	padding-left:10%;
	                margin-right:10%;
        	}
		article  ,
		div.more {
                	margin-left:10%;
	                margin-right:10%;
        	}
	}
	@media all and (max-device-width: 1243px) {
	   	header div.top {
        	        padding:0 10%;
	        }
		header div.tabs {
                	padding-left:10%;
	                margin-right:10%;
        	}
		header.bar {
        	        padding:0 10%;
	        }
		footer div.pagination {
                	padding-left:10%;
	                margin-right:10%;
        	}
		article  ,
		div.more {
                	margin-left:10%;
	                margin-right:10%;
        	}
	}

	@media all and (max-width: 995px) {
	   	header div.top {
        	        padding:0 5%;
	        }
		header div.tabs {
                	padding-left:5%;
	                margin-right:5%;
        	}
		header.bar {
        	        padding:0 5%;
	        }
		footer div.pagination {
                	padding-left:5%;
	                margin-right:5%;
        	}
		article  ,
		div.more {
                	margin-left:5%;
	                margin-right:5%;
        	}
	}
	@media all and (max-device-width: 995px) {
	   	header div.top {
        	        padding:0 5%;
	        }
		header div.tabs {
                	padding-left:5%;
	                margin-right:5%;
        	}
		header.bar {
        	        padding:0 5%;
	        }
		footer div.pagination {
                	padding-left:5%;
	                margin-right:5%;
        	}
		article ,
		div.more {
                	margin-left:5%;
	                margin-right:5%;
        	}
	}

/* TODO: Add some padding to left and right so looks like sheets */
	@media all and (max-width: 730px) {
	   	header div.top {
        	        padding:0 1em;
	        }
		header div.tabs {
                	padding-left:1em;
	                margin-right:1em;
        	}
		header.bar {
        	        padding:0 1em;
	        }
		footer div.pagination {
                	padding-left:1em;
	                margin-right:1em;
        	}
		article ,
		div.more {
                	margin-left:1em;
	                margin-right:1em;
        	}
	}
	@media all and (max-device-width: 730px) {
	   	header div.top {
        	        padding:0 1em;
	        }
		header div.tabs {
                	padding-left:1em;
	                margin-right:1em;
        	}
		header.bar {
        	        padding:0 1em;
	        }
		footer div.pagination {
                	padding-left:1em;
	                margin-right:1em;
        	}
		article  ,
		div.more {
                	margin-left:1em;
	                margin-right:1em;
        	}
	}



	/*
	 * i n n e r   m a r g i n s
	 */

	article dl         ,
	article h1         ,
	article h2         ,
	article h3         ,
	article h4         ,
	article h5         ,
	article h6         ,
	article p          ,
	article address    ,
	article blockquote ,
	article figure     ,
	article pre        ,
	article > div > ul ,
	article > div > ol {
		margin-left:28pt;
		margin-right:28pt;
	}
		article blockquote p      ,
		article blockquote h1     ,
		article blockquote h2     ,
		article blockquote h3     ,
		article blockquote h4     ,
		article blockquote h5     ,
		article blockquote h6     ,
		article blockquote figure ,
		article blockquote ol     ,
		article blockquote ul     {
			margin-left:10pt;
			margin-right:0pt;
		}
		article pre {
			padding-left:10pt;
			padding-right:10pt;
		}

	article nav.tags {
		padding-left:28pt;
		padding-right:28pt;
	}




	header div.tabs div.logo {
		margin-right:28pt;
	}

	footer div.pagination li.left a {
		padding-left:28pt;
	}
	footer div.pagination li.right a {
		padding-right:28pt;
	}


/*
 * base font sizes
 */

header div.top    ,
header div.top h1 ,
header div.top h2 {
	font-size: 8pt;
}

header div.tabs       ,
footer div.pagination {
	font-size:9pt;
}

article {
	font-size:10pt;
}




/* *********************************************************************************************************************** *
 * b o d y                                                                                                                 *
 * *********************************************************************************************************************** */

body {
	background-color:#f5f5f5;
	color:#373737;

	font-family: "Lucida Grande","Jamrul",Helvetica,Verdana,Arial,Tahoma,sans-serif;
}

	a {
		text-decoration:none;
	}



	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sup {
		top: -0.5em;
	}

	sub {
		bottom: -0.25em;
	}

	kbd {
		border: 1px solid #aaa;

		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;

		-moz-box-shadow: 1px 2px 2px #ddd; 
		-webkit-box-shadow: 1px 2px 2px #ddd;
		box-shadow: 1px 2px 2px #ddd;

		background-color: #f9f9f9;

		background-image: -moz-linear-gradient(top, #eee, #f9f9f9, #eee);
		background-image: -ms-linear-gradient(top, #eee, #f9f9f9, #eee);
		background-image: -o-linear-gradient(top, #eee, #f9f9f9, #eee);
		background-image: -webkit-linear-gradient(top, #eee, #f9f9f9, #eee);
		background-image: linear-gradient(top, #eee, #f9f9f9, #eee); 

		padding: 1px 3px; font-family: inherit; font-size: 0.85em;
	}




/* *********************************************************************************************************************** *
 * h e a d e r   d i v . t o p                                                                                             *
 * *********************************************************************************************************************** */

header div.top .honorific-prefix {
	display:none;
}

header div.top {
	height:      312.5%;
	line-height: 312.5%;
	height:      175%;
	line-height: 175%;
}

header div.top    ,
header div.top h1 ,
header div.top h2 {
	text-transform:uppercase;
}

header div.top {
	background-color:#e8e8e8;
	background-image:url("/image/2011/top-background.png");
	border-bottom:1px solid #eaeaea;
}

header div.top   ,
header div.top a {
	font-weight:bold;
	color:#7a7a7a;
}

	header div.top h1 ,
	header div.top h2 {
		display:inline-block;
	}
		header div.top h2 {
			float:right;
		}

	header div.top a {

	}
		header div.top a:hover {
			color:#007ca5;
		}


/* *********************************************************************************************************************** *
 * h e a d e r   d i v . t a b s   &   f o o t e r   d i v . p a g i n a t i o n                                           *
 * *********************************************************************************************************************** */

header div.tabs                   ,
footer div.pagination             ,
header div.tabs       nav ul li a ,
footer div.pagination nav ul li a {
	height:62px;
}
header div.tabs       nav ul li a ,
footer div.pagination nav ul li a {
	line-height:62px;
}



header div.tabs.thin       ,
footer div.pagination.thin {
	font-size:63%;
}
header div.tabs.thin                   ,
footer div.pagination.thin             ,
header div.tabs.thin       nav ul li a ,
footer div.pagination.thin nav ul li a {
	height:34px;
}
header div.tabs.thin       nav ul li a ,
footer div.pagination.thin nav ul li a {
	line-height:34px;
}



header div.tabs       ,
footer div.pagination {
	background-color:white;

	border-color:#494949;

	margin-top:22pt;


	-moz-box-shadow:	  0    2px 1px #d3d3d3
				, 0   -1px 1px #d3d3d3
				, 2px  0   1px #d3d3d3
				;
	-webkit-box-shadow:	  0    2px 1px #d3d3d3
				, 0   -1px 1px #d3d3d3
				, 2px  0   1px #d3d3d3
				;
	box-shadow:		  0    2px 1px #d3d3d3
				, 0   -1px 1px #d3d3d3
				, 2px  0   1px #d3d3d3
				;

}

	header div.tabs       nav ,
	footer div.pagination nav {
		display:inline-block;
	}
	footer div.pagination nav {
			width:100%;
	}
		header div.tabs       nav ul ,
		footer div.pagination nav ul {
			display:inline-block;

			margin:0;
			padding:0;
		}
		footer div.pagination nav ul {
			width:100%;
		}
			header div.tabs       nav ul li ,
			footer div.pagination nav ul li {
				display:inline-block;
			}
			footer div.pagination nav ul li.left  ,
			footer div.pagination nav ul li.right {
				width:49%;
			}
			footer div.pagination nav ul li.left {
				text-align:left;
			}
			footer div.pagination nav ul li.right {
				text-align:right;
			}

				header div.tabs       nav ul li a ,
				footer div.pagination nav ul li a {
					display:inline-block;

					color:#373737;

					font-weight:bold;
					text-transform:uppercase;

					text-align:center;

					width:100%;
				}

				header div.tabs  nav ul li a {
					min-width:68pt;
				}
				header div.tabs.alphabet       nav ul li a ,
				footer div.pagination.alphabet nav ul li a {
					min-width:16pt;

				}

				footer div.pagination nav ul li.left  a:hover ,
				footer div.pagination nav ul li.right a:hover {
					background-color:#2599CF;
					color:white;
				}



					header div.tabs       nav ul li a:hover ,
					footer div.pagination nav ul li a:hover {
						background-color:#fbfbfb;
						color:#007ca5;
					}

					header div.tabs nav ul.selected-home		li a.name-home		,
					header div.tabs nav ul.selected-blog		li a.name-blog		,
					header div.tabs nav ul.selected-topics		li a.name-topics	,
					header div.tabs nav ul.selected-software	li a.name-software	,
					header div.tabs nav ul.selected-resume		li a.name-resume	,
					header div.tabs nav ul.selected-contact		li a.name-contact	,
					header div.tabs nav ul.selected-subscribe	li a.name-subscribe	,
					header div.tabs nav ul 				li a.selected		{
						background-color:#f5f5f5;
						border-left:1px solid #e5e5e5;
						border-right:1px solid #e5e5e5;
					}


					footer div.pagination li.left   ,
					footer div.pagination li.right  {
					}



	header div.tabs div.logo {
		display:inline-block;

		float:right;

		font-size:645%;
		font-size:915%;
margin-top:-0.13em;
margin-top:-0.23em;
	}

		header div.tabs div.logo {
			color:#007ca5;
		}
			header div.tabs div.logo:hover {
				background-color:#007ca5;
				color:white;
			}

/* *********************************************************************************************************************** *
 * d i v . m a i n                                                                                                         *
 * *********************************************************************************************************************** */

div.main {
	margin-top:65pt;
}



/* *********************************************************************************************************************** *
 * a r t i c l e   n a v . t a g s                                                                                         *
 * *********************************************************************************************************************** */

article nav.tags {
	font-size:60%;
}

article nav.tags {
	border-top:1px solid #e0e0e0;

	margin-top:5em;
	padding-top:4.2em;

	padding-bottom:4em;
}

	article nav.tags ul {
		display:inline-block;
	}

		article nav.tags ul li {
			display:inline-block;
		}

			article nav.tags ul li a {
				display:inline-block;

				background-color: #555555;
				color: white;

				padding: 0.7em 1.4em;
				border-radius: 1.4em;
				min-width:6.8em;

				text-align:center;
				font-weight:bold;

				opacity:0.2;
			}


				article nav.tags ul li a:hover {
					background-color:#007ca5;

					opacity:1;
				}

/* *********************************************************************************************************************** *
 * a r t i c l e   /   d i v . m o r e                                                                                     *
 * *********************************************************************************************************************** */


article  ,
div.more {
	background-color:white;
	color:#494949;


	-moz-box-shadow:	   0    2px 1px #d3d3d3
				,  0   -1px 1px #d3d3d3
				,  2px  0   1px #d3d3d3
				, -2px  0   1px #d3d3d3
				;
	-webkit-box-shadow:	   0    2px 1px #d3d3d3
				,  0   -1px 1px #d3d3d3
				,  2px  0   1px #d3d3d3
				, -2px  0   1px #d3d3d3
				;
	box-shadow:		   0    2px 1px #d3d3d3
				,  0   -1px 1px #d3d3d3
				,  2px  0   1px #d3d3d3
				, -2px  0  1px #d3d3d3
				;

margin-top:20pt;
}
article {
	padding-bottom:2em;
}
	article h1 ,
	article h2 ,
	article h3 ,
	article h4 {
		color:#262324;

		font-weight:bold;
		padding-top:18pt;
	}
	article h1 {
		font-size:218%;
	}
	article h2 {
		font-size:164%;
	}
	article h3 {
		font-size:145%;
	}
	article h4 {
		font-size:118%;
	}
/* TODO: h5 and h6 should have different styles */
	article h5 {
		font-weight:bold;
		text-decoration:underline;
		padding-top:2.5em;
	}
	article h6 {
		font-weight:bold;
		text-decoration:underline;
		padding-top:2.5em;
	}

	article blockquote {
		border-left:3px solid #e4e4e4;
	}

	article p {
		text-align:justify;
		line-height:1.43;
	}

	article p       ,
	article address {
		margin-top:12pt;
	}

	article a {
		color:#007ca5;
	}

	article b      ,
	article strong {
		font-weight:800;
	}

	article i  ,
	article em {
		font-style:italic;
	}

	article > div > ul li ,
	article > ul li {
		margin-top:12pt;
	}



	article pre {
		font-family:monospace;
		margin-top:12pt;
	}

	article pre code em {
		background-color:yellow;
		color:black;
		font-style:normal;
	}

	article pre code strong {
		background-color:red;
		color:black;
		font-style:normal;
	}

	article pre {
		background-color:black;
		color:white;
		border:1px solid #909090;
	}





	article code.roman-numeral {
		font-family: serif;
	}





	article .small-text {
		font-size:80%;
	}
	article.large-text p {
		font-size:218%;
	}







	div.more {
		text-align:center;
	}
	div.more a {
		color:#007ca5;;
		font-weight:bold;
	}
	div.more a {
		display:inline-block;
		width:100%;
		padding-top:0.7em;
		padding-bottom:0.7em;
	}
	div.more a:hover {
		background-color:#2599CF;
		color:white;
	}


/* *********************************************************************************************************************** *
 * a r t i c l e   n a v . a l p h a b e t                                                                                 *
 * *********************************************************************************************************************** */

article nav.alphabet         ,
article nav.alphabet ul li a {
	height:74px;
}
article nav.alphabet ul li a {
	line-height:74px;
}


article nav.alphabet {
	display:inline-block;

width:95%;
margin-left:auto;
margin-right:auto;

	background-color:#494949;;

	border-color:#494949;

	margin-top:22pt;


	-moz-box-shadow:	  0    2px 1px #d3d3d3
				, 0   -1px 1px #d3d3d3
				, 2px  0   1px #d3d3d3
				;
	-webkit-box-shadow:	  0    2px 1px #d3d3d3
				, 0   -1px 1px #d3d3d3
				, 2px  0   1px #d3d3d3
				;
	box-shadow:		  0    2px 1px #d3d3d3
				, 0   -1px 1px #d3d3d3
				, 2px  0   1px #d3d3d3
				;
}

	article nav.alphabet ul {
		display:inline-block;
	}

		article nav.alphabet ul li {
			display:inline-block;
		}

			article nav.alphabet ul li a {
				display:inline-block;

				color:white;
min-width:20pt;
				text-align:center;
			}

				article nav.alphabet ul li a:hover {
					background-color:#fbfbfb;
					color:#007ca5;
				}



/* *********************************************************************************************************************** *
 * a r t i c l e   d i v . q u o t e                                                                                       *
 * *********************************************************************************************************************** */

	article div.quote p.quote-by   ,
	article div.quote p.quote-from {
		font-size:80%;
	}
	article div.quote p.quote-from {
		opacity:0.6;
	}



/* *********************************************************************************************************************** *
 * n a v . s u b s c r i b e                                                                                               *
 * *********************************************************************************************************************** */

	nav.subscribe {
		font-size:12px;
		text-transform:uppercase;
	}



/* *********************************************************************************************************************** *
 * s u p . c i t a t i o n   a                                                                                             *
 * *********************************************************************************************************************** */
body {
	counter-reset: citation-number-counter;
}
sup.citation a:before {
	counter-increment: citation-number-counter +1;
	content: "[" counter(citation-number-counter) "]";
}