/* First, reset the CSS styles... */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, 
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td  {  
    margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; 
}

ol, ul          { list-style: none; }
table           { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
:focus          { outline: 0; }

/* The following style can be used to "hide" objects */
.skip {
	display: block;
	font-size: 1%;
	text-indent: -9999px;
}

a {
    color: #849694;
}

strong, b {
	font-weight: normal;
}

em, i {
	font-style: italic;
}

blockquote {
	color: #888;
	margin: 0 15px;
}

#content ul {
	list-style: disc;
	padding-left: 15px;
}

#content ol {
	list-style: decimal;
	padding-left: 2em;
}

#content ol li {
	margin-bottom: 1.25em;
}

#container {
    width: 960px;
    margin: 25px auto 0;
    font: 62.5%/1.5 "Andale Mono",Helvetica,Arial,san-serif;
}

h1 {
    margin: 60px 0 1em 145px;
    font-size: 240%;
	display: none;
}

h1 a, #nav-menu li a {
    color: gray;
    text-decoration: none;
}

h2 {
	font-size: 140%;
}

p, ul {
	margin: 0 30px 1.5em 0;
}

#content {
    width: 900px;
    float: left;
    padding-top: 20px;
	margin-bottom: 2em;
    overflow: hidden;
	color: #555;
	font-size: 110%;
}

#works #content, #index #content {
	padding-top: 0;
}

#index #container, #index #content {
    margin: 0 auto; 
}

#index img {
    margin: 0 auto;
}


#content ul li {
	margin-bottom: 0.25em;
}

#nav-menu {
    width: 1em;
    float: left;
    text-align: right;
    font-size: 200%;
	padding-top: 20px;
}

#nav-menu a {
	color: #999;
}

#content #home-portfolio img {
	margin-top: 25px;
	margin-bottom: 1em;
	display: block;
}

#content #home-portfolio img:hover {
	cursor: pointer;
}

#content #home-portfolio ul, #content #home-portfolio ul li,
#content #portfolio, #content #portfolio li, .caption {
    list-style: none;
    margin-left: 0; padding-left: 0;
	font:   italic 100% "Helvetica Neue",Helvetica,Arial,san-serif;
	color: #989898;
}

#content #portfolio li {
	margin: 0 15px 15px 0;
}

#portfolio ul {
	margin-left: 0; padding-left: 0;
}

#portfolio li {
	float: left;
}

#portfolio li img {
    margin-left: 0px !important;
    margin-top: 0px !important;
	border: 1px solid transparent;
}

#portfolio li img:hover {
	border: 1px solid #bbb !important;
	cursor: pointer;
}

#works-pagination-nav {
    color: #ccc;
    margin-left: -0.5em;
}

#works-pagination-nav span {
    font-size: 120%;
    padding-right: 0.5em;
    margin-left: 0.5em;
    color: #aaa;
}

#works-pagination-nav .current {
    font-weight: normal;
    color: #666;
}

#works-pagination-nav span:hover {
    color: #333;
    cursor: pointer;
}

#works-pagination-nav span.current:hover {
    cursor: auto;
}

#works-portfolio-nav {
	display: none;
	padding: 0.25em 0;
	margin-bottom: 0.5em;
}

#works-portfolio-nav strong {
	position: absolute;
	left: -9999px;
}

#works-portfolio-nav-prev, #works-portfolio-nav-next {
	text-decoration: none;
	font-size: 120%;
	float: left;
	color: #aaa;
	font-weight: normal;
	width: 50%;
}

#works-portfolio-nav-next {
	float: right;
	text-align: right;
}

#works-portfolio-nav-prev:hover, #works-portfolio-nav-next:hover {
	color: #666;
}

#footer { 
	padding-left: 55px;
    clear: both;
    color: #ccc;
}.red {
	color: #FF0909;
}
.blue {
	color: #0006FF;
}
.yellow {
	color: #FFDC01;
}