/* Browser reset
-------------------------------------------------------*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse:collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

cite,
code,
em,
strong,
th {
  font-style: normal;
  font-weight: normal;
}

code {
  color: #9df;
  font-size: 0.95em ! important;
}

ol,
ul {
  list-style:none;
}

th{
  text-align:left;
}
h1,
h2,
h3,
h4 {
  font-size:100%;
}

q:before,
q:after {
  content:'';
}

body{
  font:13px Verdana, sans-serif;*font-size:small;*font:x-small;
}

table {
  font-size: inherit;
  font: 100%;
}

select,
input,
textarea {
  font:99% Verdana, sans-serif;
}

pre,
code {
  font:115% monospace;*font-size:100%;
}

body* {
  line-height:1.8em;
}

/* Generics
-------------------------------------------------------*/

body {
  padding: 0;
  margin: 0 0 0 16px;
  font-family: Verdana, Arial, Sans-serif;
  background: url("../images/back.gif") black repeat-x fixed;
  color: white;
}

#wrapper {
  /* BG Image on 0f0e19 */
  line-height: 1.8em;
  background-repeat: no-repeat;
  background-position: 16px 94px;
  background-attachment: fixed;
  padding: 0 0 0 22px;
  width: 678px;
  font-size: 0.85em;
}

* html #wrapper {
  background-position: 0 94px;  
}

#main_column {
  width: 422px; /* with padding/MSIE BM 460 */
  /* Use BG to avoid using border in turn avoid MSIE Box Model */
  background: #28383b url("../images/main_column_background.gif") repeat-y; 
  padding: 0 19px 16px 19px;
  float: left;
}

#header {
  height: 94px;
  margin: 0 -16px 16px -16px;
  background: url("../images/heading_background.gif") repeat-x;
}

#header hr,
#header h2,
#header h6 {
  display: none;
}

#sub_column {
  margin: 90px 0 0 0;
  float: right;
  width: 218px;
  border-top: #173d44 4px solid;
  background: #0f3944 repeat-x bottom url("../images/sub_column_background.gif");
}

#sub_column .top {
  background: #0c3139 repeat-x bottom url("../images/sub_column_top_background.gif");
}

#sub_column .bottom,
#sub_column .top {
  padding: 16px;
  border-bottom: 1px solid #000;
}

h3 {
  font-size: 1.15em;
  color: #3bba95;
  margin: 8px 0;
}

h4 {
  color: #fe0;
  border-bottom: 1px dotted #fea;
  margin: 4px 0;
  font-weight: bold;
}

img.web_preview {
  border: 3px solid black;
}

ul {
  margin-bottom: 0.8em;
}

ul ul {
  margin-bottom: 0 ! important;
}

p {
  margin-bottom: 1.8em;
}

#main_column ul {
  margin-left: 24px;
  color: #ffb;
  list-style: circle;
}

#main_column ul strong {
  color: #fe0;
}

strong {
  font-weight: bold;
}

/* Links
-------------------------------------------------------*/

#main_column a:link,
#main_column a:visited {
  font-weight: bold;
}

a:link,
a:visited {
  color: #b7f9f2;
  text-decoration: none;
}

a:hover,
a:active {
  color: #6befe3;
  border-bottom: 1px solid #555;
}

#sub_column a:link,
#sub_column a:visited {
  color: #56c3b5;
}

#sub_column a:hover,
#sub_column a:active {
  color: #5bf3e0;
}


#portfolio a:link,
#portfolio a:visited {
  color: #e7c7ff;
}

#portfolio a:hover {
  color: #d49cff;
  border-bottom: 1px dotted #530485;
}

#blog_summary small {
  color: #5995b2;
  font-weight: bold;
}

#blog_summary li a:link,
#blog_summary li a:visited {
  color: white;
}

#blog_summary li a:hover,
#blog_summary li a:active {
  color: #def;
  border-bottom: 1px dotted black;
}

/* Baseline Image Replacement
-------------------------------------------------------*/

/* All image replacement use this style */

h1,
h2 { 
  line-height: 1em;
  margin: 0;
  height: 0;
  overflow: hidden;
  background-repeat: no-repeat;
}

#main_column h1 {
  margin: 16px 0;
  padding: 28px 0 0 0;
  border-bottom: 1px solid #41565a;
  height: 0px !important; /* for most browsers */
  height /**/:28px;       /* for IE5.5's bad box model */
}

h2 {
  margin: 12px 0 0 0;
  padding: 28px 0 0 0;
  height: 0px !important; /* for most browsers */
  height /**/:28px;       /* for IE5.5's bad box model */
}

#sub_column h2 {
  margin: 0 0 12px 0;
}

#header h1 {
  background-image: url("../images/page_title.gif");
  /* Generic */
  margin: 0 ! important;
  border: 0;
  padding: 89px 0 0 0;
  background-position: 16px 24px;
  height: 0px !important; /* for most browsers */
  height /**/:89px;       /* for IE5.5's bad box model */
}

hr {
  height: 0;
  border: 0 none;
  border-bottom: 1px dotted #567;
}

/* Column clearing
-------------------------------------------------------*/

hr:after,
.clear:after,
#wrapper:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

hr,
.clear,
#wrapper {
	display: table; /* Was inline-table */
}

/* Hides from IE-mac \*/
* html hr,
* html .clear,
* html #outer {
	height: 1%;
}

hr,
.clear,
#wrapper {
	display: block;
}
/* End hide from IE-mac */

/* Content Related
-------------------------------------------------------*/

.portfolio .illustration,
.portfolio .website,
.portfolio .project,
.portfolio .game {
  display: block;
  height: 27px;
  padding-left: 24px;
}


.portfolio .game {
  background: url("../images/icons/game.gif") no-repeat left 30%;
}

.portfolio .website {
  background: url("../images/icons/website.gif") no-repeat left 30%;
}

.portfolio .project {
  background: url("../images/icons/project.gif") no-repeat left 30%;
}

.portfolio .illustration {
  background: url("../images/icons/illustration.gif") no-repeat left 30%;
}

#main_column p {
  text-align: justify;
}

.printable_image img {
  display: none;
}

.printable_image {
  margin: 8px 0;
}

.printable_image a {
  width: 416px;
  border: 0 none ! important;
  display: block;
}

.printable_image,
img.web_preview {
  border-width: 3px;
  border-style: solid;
}

.print_screen,
.printed_only {
  display: none;
}

img.web_preview {
  margin: 16px 0 0 0;
}

.external,
.download {
  font-weight: bold;
  color: #dcff73;
}

.dark {
  border-color: black;
}

.light {
  border-color: white;
}

.listening {
  padding-left: 24px;
  background: url("../images/icons/audio.gif") no-repeat 0 4px;
  color: #c6e9e4;
  height: 24px;
}

.listening a {
  font-weight: normal ! important;
}

.listening .genre a {
  font-weight: bold ! important;
}

/* Page Specific
-------------------------------------------------------*/

.wrapped_thumbnail {
  border-width: 3px;
  border-style: solid; 
  border-color: white;
  margin: 0 0 8px 16px;
  float: right;
  
}

/* Code pieces
-------------------------------------------------------*/

.CodeRay .code pre {
  width: 392px;
}

.CodeRay .line_numbers, .CodeRay .no {
  background-color: #ddd;
}

.CodeRay {
  font-size: 0.85em;
  background-color: white;
  border: 1px solid black;
  color: black;
  margin-bottom: 12px;
}