/************************************************************************************
 * CONTAINERS
 */
 body {
	margin: 0;
	padding: 0;
	font-family: Corbel,Tahoma,Verdana,sans-serif;
	font-size: 11px;
	background-color: #3b3b3b;
	color: #BFBFBF;
}
div#header {
	margin:0;
	padding:0;
	white-space: nowrap;
	height: 24px;
	width: 100%;
	background-image: url(/images/nav_bkg.gif);
	background-repeat: repeat-x;
	z-index:10;
}
div#footer {
	width:1024px;
	margin:2em auto;
	text-align:right;
}


/************************************************************************************
 * GENERAL
 */
a:link, a:visited { color: #808080; }
.clear { clear: both; }


/************************************************************************************
 * MASTHEAD
 */
span#masthead {
	padding: 2px;
	color: #bfbfbf;
	font-family: Georgia,Tahoma,Verdana,sans-serif;
	font-size:13px;
	float:right !important;
	z-index:0;
	display: inline;
	margin: -1.5em 1em 0 0;
}
span#masthead em {
	font-style: oblique;
	font-weight: bold;
}
div#masthead a {
	color: #bfbfbf;
}


/************************************************************************************
 * PHOTOBLOG PHOTO
 */
div#phototitle {
	z-index:100;
	float:left;
	margin-left:24px;
	font-family: Corbel,Tahoma,Verdana,sans-serif;
	font-size:15px;
}
div#photoinfo {
	top: 24px;
	text-align:right;
	margin-right:1em;
	margin-top:0.4em;	
}
div#photoinfo ul {
	padding:0;
	margin:0;
	white-space:nowrap;
	list-style:disc outside;
}
div#photoinfo ul li {
	display:inline;
	margin:0 1em 0 1em;
}
div#photo {
	margin-top: 24px;
}
div#photo img {
	display: block;
	margin: 0 auto;
	background-color: #F2F2F2;
	padding: 1em;
	-webkit-border-radius:9px;
	-moz-border-radius:9px;	
}
div#blog, div#comments, div#commentform, div#social {
	width: 1024px;
	margin:2em auto;
	font-size: 14px;
}


/************************************************************************************
 * PHOTOBLOG DESCRIPTION
 */
div#blog {
	margin-top:0;
	margin-bottom:0;
	font-family: Corbel,Tahoma,Verdana,sans-serif;
	font-size: 16px;
}


/************************************************************************************
 * COMMENTS
 */
div#comments h2 {
	border-top:1px dotted #bfbfbf;
	margin-top:1em;
	padding-top:0.5em;
	width:30em;
}
div#comments h4 {
	margin:0 0 0 3em;
	border-top:1px dotted #bfbfbf;
	width:30em;
}
div#thecomments h4:first-child {
	border-top:0px dotted #bfbfbf;
}
div#comments h4 span {
	font-size:smaller;
	font-weight:normal;
	float:right;
	margin-left:3em;
}
div#comments p {
	margin:0 20em 1em 5em;
}
#snaps div#comments p {
	margin:0 0 1em 5em;
	text-align:center;
	font-size:12px;
}


/************************************************************************************
 * COMMENT FORM
 */
#commentform h2 {
	border-top:1px dotted #bfbfbf;
	margin-top:1em;
	padding-top:0.5em;
	width:30em;
	font-size: 16px;
}
#commentform form input.input_text {
	color: #BFBFBF;
	font-family: Corbel,Tahoma,Verdana;
	font-size: 1.2em;
	background-color:#4c4c4c;
	border: 1px solid #262626;
	width: 400px;
}
#commentform form input.input_text_short {
	color: #BFBFBF;
	font-family: Corbel,Tahoma,Verdana;
	font-size: 1.2em;
	background-color:#4c4c4c;
	border: 1px solid #262626;
	width: 150px;
}
#commentform form label {
	float: left;
	width: 8em;
	text-align: right;
	margin-right: 0.5em;
	display: block;
	margin-top: 0.35em;
}
#commentform form textarea {
	font-family: Corbel,Tahoma,Verdana;
	font-size: 1em;
	color: #BFBFBF;
	height: 100px;
	background-color:#4c4c4c;
	border: 1px solid #262626;
	width: 400px;
}
#snaps #commentform {
	text-align:center;
	font-size:1em;
}
#snaps #commentform form label {
	display:inline;
	float:none;
}


/************************************************************************************
 * MAP
 */
div#mapcontainer {
	margin:0 auto;
	width: 900px;
	height: 600px;
	border: 1px solid gray;
	z-index:0;
}


/************************************************************************************
 * GALLERY THUMBNAILS
 */
div#thumbnails {
	margin: 0 auto;
	width:700px;
}
div#thumbnails h1 {
	background-color:#bfbfbf;
	color:black;
	margin-bottom:0;
	text-align:center;
	padding:0.25em;
}
div#thumbnails h3 {
	border-top:1px dotted #bfbfbf;
	margin-top:0;
	padding-top:0.5em;
}
div#thumbnails img {
	margin: 0;
	border:0;
	width:100px;
	height:100px;
}


/************************************************************************************
 * SNAP THUMBNAILS
 */
p.crumbs {
	font-size:13px;
}
div#thumbnails p.snapthumb {
	display:inline;
	text-align:center;
	margin:0 10px;
}
div#thumbnails p.snapthumb img {
	margin-top: 20px;
	border:3px solid #bfbfbf; 
	}
div#thumbnails p.snapthumb a {
	text-decoration:none;
}
div#thumbnails p.snapthumb a:hover {
	color:white;
}
div#thumbnails p.snapthumb span {
	font-size:16px;
	display:inline-block;
	margin:0 5px 0;
	vertical-align:top;
	width:200px;
}
div#thumbnails p.snapthumb span.description {
	font-size:12px;
}


/************************************************************************************
 * SNAP PHOTOS
 */
div#snapshot {
	width:800px;
	margin: 0 auto;
}
div#snapshot img {
	display:block;
	margin: 0 auto;
}


/************************************************************************************
 * ABOUT
 */
body#about
{
	background-color: #E0E0E0;
	color: #383838;
}
#about div#content {
	margin: 0 auto;
	width:714px;
	font-size:14px;
	margin-bottom:2em;
}
#about div#content img {
	float:left; 
	margin: 0 2em 32em 0;
	border: 3px solid #bfbfbf;
}
#about div#content h3 {
	margin-top:2em;
}
#about div#content ul {
	list-style-position:inside;
	list-style-type:none;
}

/************************************************************************************
 * SOFTWARE
 */
body#softwares
{
	background-color: #E0E0E0;
	color: #383838;
}
#softwares div#content {
	margin: 0 auto;
	width:714px;
	font-size:16px;
	margin-bottom:6em;
}
#softwares div#content img {
	float:left;
	margin: 1em;
	border: 0;
	
}
#softwares div#content h3 {
	margin-top:2em;
}
#softwares div#content ul {
	list-style-position:outside;
	list-style-type:disc;
}
#softwares #content a {
	color:blue;
}

/************************************************************************************
 * NAVIGATION BAR
 */
ul.nav, .nav ul {
	font-size:13px;
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
	display: inline;
	z-index:200;
	
}

ul.nav li.l1 {
	display: table-cell;
	position: relative;
	padding: 2px 8px;
}
ul.nav ul.subnav {
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	max-width: 40ex;
	margin-left: -8px;
	margin-top: 0;
}
ul.nav li:hover ul.subnav {
/*When hovered, make them appear*/
	display : block;
}
.nav ul li a {
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
}
ul.nav,
.nav ul,
.nav ul li a {
	background-color: transparent;
	color: #bfbfbf;
}
ul.nav li span.disabled { visibility: hidden; }
ul.nav li:hover,
.nav ul li a:hover {
	background-color: #808080;
	color: white;
}
ul.nav li:active,
.nav ul li a:active{
	background-color: #808080;
	color: white;
}
.nav ul {
	border: 1px solid #808080;
	background-color:#808080;
}
.nav a {
	text-decoration: none;
	color: #bfbfbf;
}
ul.nav span {
	visibility:hidden;
}
.nav li.divider {
	margin-top:5px;
	border-top:1px solid #bfbfbf;
}

/************************************************************************************
 * DIALOGS
 */
.info_dialog em {
	margin-right: 2em;
	font-family: monospace;
	font-style: normal;
	font-weight: bold;
}
div#info_dialog,div#shortcuts_dialog {display:none;}
div#facebox .body h3.info_dialog { color:black; font-size:14px;}
div#facebox .body ul.info_dialog { list-style-type: none; color:black; font-size:13px;}
div#facebox .body { background-color: white; }
div#facebox .body p { color: #404040; font-size:13px; }