/*
	ArunMurti.com
	CSS Layout (Screen)
*/


/* Global Rules */

img {
	border: 0;
}

html {
	background: #444;
	
	min-width: 760px;
}

body {
	color: #A00;
	width: 760px;
	background-color: #444;
	font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif;
	font-size: 10pt;
	
	margin: 0 auto;	/* Centeres in non IE/Win browsers */
	border: 0;
	padding: 0;
	
	text-align: center; /* For centering in IE-Windows (paired with text-align: left in "container" */
}

p {
	color: #333;
}


/* Sections */

#container {
	background-color: #FFF;
	
	text-align: left;
}

#head_b {
	margin: 0;
	padding: 0;
	border: 0;

	overflow: hidden;

	color: #FFF;
	background: #000;
	
	height: 30px;
	
	font-size: 8pt;
}

#head_b h1	{
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	border: 0;
}

#head_b h1 a {
	width: 760px;
	height: 0px !important;
	height /**/:30px; /* for IE5/Win */

	background: transparent url(../images/head_b.gif) top left no-repeat;

	margin: 0;
	padding: 0;
	border: 0;

	float: left;
	padding: 30px 0 0 0;
	overflow: hidden;
}

#head_r {
	color: #FFF;
	background: #A00 url(../images/head_r.gif) top left no-repeat;
	
	height: 30px;
}

/* Navigation Bar */
#nav {
	margin: 0;
	padding: 0;
	border: 0;

	list-style: none;
	display: inline;
	overflow: hidden;
}

#nav ul	{
	width: 760px;
	height: 30px;

	background: transparent url(../images/nav_bg.gif) top left repeat-x;

	margin: 0;
	padding: 0;
	/*position: relative;*/ /* makes IE/Win not work when scaling */
}

#nav li {
	margin: 0;
	padding: 0;
	border: 0;
	
	list-style: none;
	display: inline;
}
	
#nav a {
	float: left;
	padding: 30px 0 0 0;
	overflow: hidden;
	
	height: 0px !important;
	height /**/:30px; /* for IE5/Win */	
}


#menuarticles	a {width: 100px; background: transparent url(../images/nav_articles.gif) top left no-repeat;}
#menublog		a {width: 100px; background: transparent url(../images/nav_blog.gif) top left no-repeat;}
#menucolophon	a {width: 100px; background: transparent url(../images/nav_colophon.gif) top left no-repeat;}
#menucontact	a {width: 100px; background: transparent url(../images/nav_contact.gif) top left no-repeat;}
#menulinks		a {width: 100px; background: transparent url(../images/nav_links.gif) top left no-repeat;}
#menuportfolio	a {width: 100px; background: transparent url(../images/nav_portfolio.gif) top left no-repeat;}
#menuprojects	a {width: 100px; background: transparent url(../images/nav_projects.gif) top left no-repeat;}

#menuarticles	a:hover {width: 100px; background: transparent url(../images/nav_articles_hover.gif) top left no-repeat;}
#menublog		a:hover {width: 100px; background: transparent url(../images/nav_blog_hover.gif) top left no-repeat;}
#menucolophon	a:hover {width: 100px; background: transparent url(../images/nav_colophon_hover.gif) top left no-repeat;}
#menucontact	a:hover {width: 100px; background: transparent url(../images/nav_contact_hover.gif) top left no-repeat;}
#menulinks		a:hover {width: 100px; background: transparent url(../images/nav_links_hover.gif) top left no-repeat;}
#menuportfolio	a:hover {width: 100px; background: transparent url(../images/nav_portfolio_hover.gif) top left no-repeat;}
#menuprojects	a:hover {width: 100px; background: transparent url(../images/nav_projects_hover.gif) top left no-repeat;}

body#articles	#menuarticles	a {width: 100px; background: transparent url(../images/nav_articles_tab.gif) top left no-repeat;}
body#blog		#menublog		a {width: 100px; background: transparent url(../images/nav_blog_tab.gif) top left no-repeat;}
body#colophon	#menucolophon	a {width: 100px; background: transparent url(../images/nav_colophon_tab.gif) top left no-repeat;}
body#contact	#menucontact	a {width: 100px; background: transparent url(../images/nav_contact_tab.gif) top left no-repeat;}
body#links		#menulinks		a {width: 100px; background: transparent url(../images/nav_links_tab.gif) top left no-repeat;}
body#portfolio	#menuportfolio	a {width: 100px; background: transparent url(../images/nav_portfolio_tab.gif) top left no-repeat;}
body#projects	#menuprojects	a {width: 100px; background: transparent url(../images/nav_projects_tab.gif) top left no-repeat;}


/* sub-navigation */
div#subnav {
	color: #AAA;
	background-color: #EEE;
	
	font-family: "Lucida Sans", "Helvetica", "Arial", sans-serif;
	font-size:   8pt;

	border-top:		1px solid #DDD;
	border-bottom:	1px solid #DDD;

	width:	740px;
	height:  20px;
	line-height: 20px;	/* Setting height = line-height vertically centers the single text line */

	clear: both;
}

#subnav a:link {color: #333; text-decoration: none; font-weight: bold;}
#subnav a:active {color: #A00; text-decoration: none; font-weight: bold;}
#subnav a:visited {color: #333; text-decoration: none; font-weight: bold;}
#subnav a:hover {text-decoration: underline; font-weight: bold;}


/* content */

div#content {
	width: 740px;
	padding: 10px;
	
	min-height: 300px;
}

div#content h2 {
	font-size: 10pt;
	
	margin: 0;
	padding: 0;
	border: 0;
}

div#contentnav {
	width: 80px;

	padding: 10px 0 0 10px;
	margin: 0;

	float: left;
}

div#contentnav p {
	color: #A00;
	font-family: "Lucida Sans", "Helvetica", "Arial", sans-serif;
	font-size:   10pt;
	font-weight: bold;

	padding: 0 0 10px 0;
	border: 0;
	margin: 0;
}

div#contentnav ul {
	color: #333;
	font-family: "Lucida Sans", "Helvetica", "Arial", sans-serif;
	font-size:   9pt;

	width: 80px;

	padding: 0;
	margin: 0;

	list-style: none;
	
	line-height: 2.0;
}

div#contentnav a:link {color: #333; text-decoration: none;}
div#contentnav a:visited {color: #333; text-decoration: none;}
div#contentnav a:hover {text-decoration: underline;}
	
div#contentwrapper {
	width: 650px;
	float: right;
}

div#contentimgs {
	width: 400px;
	padding: 10px 0 10px 10px;
	float: left;
}

div#contenttext {
	width: 490px;
	padding: 10px 0 10px 10px;
	float: left;
	
	text-align: left;
	
	font-size: 9pt;
}

div#contenttext a:link {color: #333; text-decoration: none;}
div#contenttext a:visited {color: #333; text-decoration: none;}
div#contenttext a:hover {text-decoration: underline;}

div#contenttext h2 {
	font-size: 10pt;
	
	margin: 0;
	padding: 0;
	border: 0;
}
	
div#contentinfo {
	text-align: left;
	
	font-size: 9pt;

	width: 220px;
	padding: 10px 0 0 10px;
	float: right;
}

div#contentinfo a:link {color: #333; text-decoration: none;}
div#contentinfo a:visited {color: #333; text-decoration: none;}
div#contentinfo a:hover {text-decoration: underline;}

div#contentinfo h2 {
	font-size: 10pt;

	margin: 0;
	border: 0;
	padding: 0;
}

div#contentinfo h3 {
	color: #444;

	font-family: "Garamond", "Georgia", "Times New Roman", "Times", serif;
	font-size: 10pt;
	font-weight: bold;
	
	text-decoration: none;
	
	margin: 0;
	border: 0;
	padding: 0;
}

div#contentinfo h3 a:link {color: #333; text-decoration: none; font-weight: bold;}
div#contentinfo h3 a:active {color: #A00; text-decoration: none; font-weight: bold;}
div#contentinfo h3 a:visited {color: #333; text-decoration: none; font-weight: bold;}
div#contentinfo h3 a:hover {text-decoration: underline; font-weight: bold;}


div#contentinfo p {
	width: 200px;
	
	font-weight: normal;
	
	line-height: 1.5;
}

div#content img.screenshot {

	padding: 0;
	margin: 8px;
	border: 4px solid #DDD;
	outline: 1px solid #CCC;

	/* vertical-align: middle; */
}

/* footer */

#footer {
	clear: both;

	color: #333;
	background-color: #EEE;
	
	height: 50px;
	padding: 10px;
	
	border-top: 1px solid #DDD;
	
	font-family: "Lucida Sans", "Helvetica", "Arial", sans-serif;
	font-size: 8pt; 
}

#footer a:link {color: #333; text-decoration: none;}
#footer a:visited {color: #333; text-decoration: none;}
#footer a:hover {text-decoration: underline;}

#foot_b {
	clear: both;
	background-color: #000;
	
	height: 5px;
}

#foot_r {
	clear: both;
	background-color: #A00;
	
	height: 5px;
}


/* form */

form {
	width: 480px;
	
	color: #333;
}

form fieldset {
	margin: 0;
	border: 0;
	padding: 0;
	clear: left;
}

form legend {
	clear: both;
	font-size: 100%;
	font-weight: bold;
	padding-left: 0;
	padding-top: 0.8em;
	color: #A00;
/*
	position: relative;
	left: -0.5em;
*/
}

form label {
	float: left;
	width: 45%;
	display: block;
	padding: 0.4em;
}

form label.wider {
	width: 95%;
}

form label.narrower {
	/* IE 6 (and most other browsers) */
	width: 20%;
}

.xform label.narrower {
	/* IE 5.5 */
	width: 23%;
}

input, select, textarea {
	width: 100%;
	margin-top: 0.1em;
}

.smallinput {
	padding-left: 2em;
	margin-right: -2em;
}

.smallinput input {
	width: 1.2em;
	height: 1.1em;
	margin-right: 0.4em;

	position: relative;
	margin-left: -1.7em;
	padding-left: 0.3em;
}

.submit input {
	width: 6em;
}