/*---------------------------------------------
Global Style Sheet v.A
Version:	2.0
Site: www.johanndizon.com
-----------------------------------------------*/


html, body {
	font-family: HelveticaNeue, "Helvetica Neue", helvetica, arial;
	background: url("http://johanndizon.com/img//bg.gif") repeat;
     /* background: #4b8bcf;*/
       text-shadow: 0 0 0 #000;
}

.clear { clear: both; }
.anchor { visibility: hidden; height: 1px; }

p {
	margin: 0 0 20px;
	line-height: 20px;
	font-size: 13px;
	color: #999;
     /* color:  #e7eef7;*/
}


/*  Layout
 ------------------------------------------------------------------------ */
 
#wrapper {
	width: 960px; 
	margin: 0px auto;
	padding: 30px 0 0 10px;
}
#masthead {
	height: 66px;
	width: 940px;
	border-top: 1px solid #2e2e2e;
	border-bottom: 1px solid #2e2e2e;
       /* border-bottom: 1px solid #e7eef7;*/
}
#logo img {
	float: right;
	width: 166px;
	height: 66px;
	/*opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;*/
}


/*  Info Navigation 
 ------------------------------------------------------------------------ */

#nav ul { 
	list-style-type: none;
	float: left;
}
#nav li { 
	display: block;
	height: 66px; 
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px; 
	line-height: 66px; 
	color: #00aeef; 
	text-align: right;
	float: left;
}
#nav li a:link, li a:active, li a:visited  {
	width: 105px;
	display: block;
	background: url("http://johanndizon.com/img//nav-line2.gif") no-repeat right top;
	color: #444;
	padding: 0 15px 0 0;
	float: left;
	text-decoration: none;
}
#nav li a:hover {
	display: block;
	color: #666;
	float: left;
	text-decoration: none;
}

#nav li a.selected { background: transparent url("http://johanndizon.com/img/nav-line-hover2.gif") no-repeat; font-weight:bold; color: #666; color: #b3b3b3;}

/* Selection 
 ------------------------------------------------------------------------ */

#selection {
	width: 940px;
	height: 105px;
	background: url("http://johanndizon.com/img/selection-arrow2.gif") no-repeat left top;
	border-bottom: 1px solid #2e2e2e;
        /*border-bottom: 1px solid #e7eef7;*/
}
.section {
	float: left;
	padding: 28px 0 0 20px;
	font-weight: bold;
	font-size:42px;
	letter-spacing: -2px; 
	color: #666;
        color: #999;
        color: #b3b3b3;
}

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

#cwrapper { width: 940px; }

#lcol {
	height: 100%;
	width: 640px;
	float: left;
	margin: 0 20px 0 0;
}

.c1, .works {
	margin: 10px 10px 0 0;
	width: 640px;
	height: 100%;
	float: left;
}
.c1 h3, .works h3 { 
	text-transform: uppercase;
	font-weight: bold;
	font-size:18px;
	letter-spacing: 1px;
	padding: 0px 0 10px 15px;
	/*background: #fff;*/
	color: #555;
        color: #888;
	border-bottom: 1px solid #2e2e2e;
       /* border-bottom: 1px solid #e7eef7;*/
}

.c1 p, .works p  { font-style: italic; margin: 5px 15px 10px 15px; color: #666; }
.c1 img { margin: 0 0 10px 15px; }

.works ul { 
	width: 640px;
	list-style-type: none;
	float: left;
	margin: 0;
	padding: 0;
}
.works li { 
	display: block; 
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px; 
	color: #00aeef; 
	float: left;
}
.works li a:link, .works li a:active, .works li a:visited {
	width: 600px;
	display: block;
	border-bottom: 1px dotted #2e2e2e;
       /* border-bottom: 1px solid #e7eef7;*/
	color: #444; 
	padding: 10px 25px 10px 15px;
	float: left;
	text-decoration: none;
	background: transparent;
}
.works li a:hover {
        opacity: 0.2; filter: alpha(opacity=20); -moz-opacity: 0.2;
	color: #fff;
	background: #444;
	float: left;
	text-decoration: none;
	}
.works p {
	color: #666;
	margin: 5px 15px 15px 15px;
}

#rcol { width: 280px; float: left; }

.sample {
	margin: 8px 20px 0 0;
	width: 640px;
	height: 100%;
	background: #303030;
       /*background: #282828;*/
       opacity: 0.9; filter: alpha(opacity=90); -moz-opacity: 0.9;
}

.sample img { margin: 16px; }

/* Portfolio Navigation 
 ------------------------------------------------------------------------ */

a span.two {	color:#069; color: #999; cursor:pointer; }

#sidebar {
	float: left;
	width: 280px;
	padding: 0 10px 0 0;
}
#sidebar .port-nav dd a, #portfolio .all-proj a:link, #portfolio .all-proj a:visited {
	color: #444;
	display: block;
	text-decoration: none;
}
#sidebar .port-nav dd a:hover {
	color: #3a4248;
	color: #80C8E5;
	}
#sidebar .port-nav dd {
	border-left: 1px solid #2e2e2e;
	border-bottom: 1px dotted #2e2e2e;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 10px 5px 10px 12px;
}
#sidebar .port-nav .cur {
	color: #999;
	background: url("http://johanndizon.com/img/rcol-arrow4b.gif") no-repeat left top;
	display: block;
	font-weight: bold;
	border-left: none;
}
.proj-title { 
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Verdana, Arial, sans-serif;
	text-transform: uppercase;
	padding: 12px 0 10px 12px;
	width: 268px;
	float: left;
	color: #555;
        color: #b3b3b3;
	border-bottom: 1px solid #2e2e2e;
       /*  border-bottom: 1px solid #e7eef7;*/
	background: url("http://johanndizon.com/img/rcol-arrow3b.gif") no-repeat right top;
}

/* Portfolio
 ------------------------------------------------------------------------ */

#proj-info {
	float: left;
	background: #222;
	width: 640px;
	/*border-top: 1px solid #393939;*/
	/*border-bottom: 1px solid #393939;*/
        opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;
}
#proj-info p {
	margin: 0 0 10px 5px;
	font-size: 11px;
	line-height: 14px;
}
#proj-info span {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #3a4248;
        color: #666;
	font-weight: bold;
}
.proj-info-pri {
	float: left;
	width: 310px;
	padding: 10px 10px 0;
	
}
.proj-info-sec {
        border-left: 1px solid #393939;
	float: left;
	width: 280px;
	padding: 10px 10px 0 15px;
	margin-left: -1px;
	/*background: #fff url("http://johanndizon.com/img/detail-arrow2.gif") no-repeat left top;*/
}

/* Portfolio Pointers */
.where { float: left; margin: 45px 0 0 15px; }
.prev { 	opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; }
.prev:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }
.next { opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; padding-left: 10px; }
.next:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; padding-left: 10px; }

/* Footer
 ------------------------------------------------------------------------ */
#footer {
	width: 100%;
	background: #111;
	height: 270px;
        height: 300px;
	margin: 30px 0 0 0;
        background: url("http://johanndizon.com/img//footerbg.gif") no-repeat center -1px;
	opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;
}
#footer_inner {
	color: #666;
	width: 960px;
	margin: 0px auto;
	padding: 15px 0 0 0;
}
.footer_links {
	float: left;
	width: 450px;
	border-right: 1px solid #333;
	height: 200px;
}
.footer_network {
	float: left;
	width: 194px;
	width: 205px;
	height: 202px;
	margin: 0 0 0 2px;
}
.footer_copy {
	float: left;
	width: 940px;
	border-top: 2px solid #333;
}
.footer_copy p {
	padding: 15px 0 15px 5px;
	font-size: 75%;
}
 .footer_copy a {
	text-decoration: none;
	color: #fff;
	padding: 0 5px 0 5px;
}
.footer_about {
	height: 200px;
	float: right;
	width: 280px;
	border-left: 1px solid #333;
	margin: 0 17px 0 0;
}
.footer_about h3, .footer_links h3, .footer_network h3 {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px; 
	color: #999;
	border-bottom: 1px solid #222;
	padding: 15px 0 15px 15px;
}
.footer_about h3 {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px; 
	color: #999;
	border-bottom: 1px solid #222;
	padding: 15px 0 15px 15px;
}
.footer_about p {
	padding: 15px 10px 15px 15px;
	font-size: 75%;
}
.footer_network ul { 
	width: 170px;
	list-style-type: none;
	float: left;
}
.footer_network li { 
	display: block; 
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px; 
	color: #00aeef; 
	float: left; 
}
.footer_network li a:link, .footer_network li a:active, .footer_network li a:visited {
	width: 164px;
	display: block;
	border-bottom: 1px solid#222;
	color: #666; 
	padding: 10px 15px 10px 15px;
	float: left;
	text-decoration: none;
       background: transparent;
}
.footer_network li a:hover {
	color: #CCC;
}
.footer_links ul { 
	width: 418px;
	list-style-type: none;
	float: left;
}
.footer_links li { 
	display: block; 
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px; 
	color: #00aeef; 
	float: left; 
}
.footer_links li a:link, .footer_links li a:active, .footer_links li a:visited {
	width: 418px;
	display: block;
	border-bottom: 1px solid #222;
	color: #666; 
	padding: 10px 15px 10px 15px;
	float: left;
	text-decoration: none;
        background: transparent;
}
.footer_links li a:hover { color: #CCC; }


/* Misc
 ------------------------------------------------------------------------ */
.rline { 
    width: 280px;
	float: left;
	height: 30px;
	border-right: 1px dotted #d6d6d6;
	}

p.folio { margin: 0; padding: 10px 0 0 15px; }
.folio span { font-weight: bold; color: #666; }

/* The Word - Blog
 ------------------------------------------------------------------------ */
.entry {
	margin: 0 0 10px 0px;
	padding: 0 0 10px 0px;
}
.entry p { font-style: normal; color: #b0b4b8 color: #666; }
.entry h3 { padding: 5px 5px 10px 15px; text-transform: none; border-bottom: 1px dotted #393939; }
.entry  h3 a:link, .entry h3 a:active, .entry h3 a:visited  {
	color: #989b9f;
        color: #555;
        color: #777;
	text-decoration: none;
}
.entry h3 a:hover { color: #888; color: #b3b3b3; }

.entry a, .posted a, .paginate a { 
	color: #666; 
	text-decoration: none; 
	background: inherit;
	}
	
.entry a:hover, .posted a:hover, .rss_atom a:hover, .paginate a:hover , .comment_body a:hover { 
	text-decoration: underline; 
	}

.posted {
	color: #989b9f;
        color: #DDD;
	background: #393939;
	padding: 5px 5px 5px 15px;
	font-size: 75%;
        opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;
}

.posted_full {
	color: #bbb;
	padding: 5px 5px 10px 15px;
	font-size: 75%;
}

.paginate { padding: 0 0 0 15px; font-weight: bold; color: #3a4248; font-size: 75%; }

.comment_form {
        background: #333;
	padding: 10px 0 10px 0;
	width: 640px;
        opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;
	}
 textarea  { border: none; background: #666; width: 607px; }
.comment_textbox { border: none; background: #666; width: 605px;  }
.comment_body { padding: 5px 0 5px 0; }

.comment_body a { 
color: #BBB; 
	text-decoration: none; 
	background: inherit;
 }

/* Search */

#search {
	float: left;
	clear:both;
	width:280px;
	margin: 15px 0 10px 0; 
	padding: 0;
	height: 35px;
	border-top: 1px solid #2e2e2e;
	border-bottom: 1px solid #2e2e2e;
	}
#searchfields {
	border-left: 1px solid #2e2e2e;
	border-right: 1px solid #2e2e2e;
	margin:0; 
	padding: 8px;
	height: 19px;
	} 
	
#searchfields input {
	float: left;
	border:1px solid #393939;
	height: 17px;
	margin: 0;
	padding: 0;
	background: #2e2e2e;
        opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;
	width: 188px;
	}

#submitsearch, input#submitsearch{
	border:0px;
	width:68px;
	height: 19px;
	margin: 0;
	padding: 0;
	}

p.results, p.results2  { font-size: 85%; color: #999;  }
p.results2 { font-style: normal; }

/* Contact Styles */
#selection span { color: #80C8E5; }
.quote {
     width:640px;
     background-color: #393939;
      opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 0.3;
     float:left;
     /*border: 1px solid #333;*/
     padding:12px 0px;
margin-bottom:10px;"
}

a.quote2 {
      text-decoration: none;
      border-bottom: 1px dotted #666;
      color: #ccc;
}

/* Tool Tip */
#tooltip {
	position:absolute;
	/*border:1px solid #999;*/
	background:#f7f5d1;
        background: #222;
	padding:3px 5px;
	color:#fff;
	display:none;
        max-width: 400px;
        opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;
	}	
#screenshot {
	position:absolute;
	/*border:1px solid #999;*/
	background:#222;
	padding:10px 10px 5px 10px;
	display:none;
	color:#fff;
        opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8;
	}
/* RSS / ATOM */

.rss_atom { 
       list-style-type: none;
        width: 280px;
	float: left;
        /*margin: 8px 0 0 0;*/
	/*border-top: 1px solid #d6d6d6;*/
        border-bottom: 1px solid #d6d6d6;
	}

.atom {
	float: left;
	padding: 10px 20px;
	padding-left: 35px;
	background: url(http://johanndizon.com/img/rss_atom.png) no-repeat 0 11px;
	margin-left: 15px;
}
.rss {
	float: left;
	padding: 10px 15px;
	padding-left: 20px;
	border-left: 1px solid #d6d6d6;
}

.rss_atom a { 
	color: #666; 
	text-decoration: none; 
	}