/*
Theme Name: Hoshimo Ver. 2
Theme URI: http://www.hoshimo.com
Description: A new theme for Hoshimo.com integrating the blog and portfolio
Version: 1.0
Author: Matthew Chan
Author URI: http://www.seasoninfinity.com/
*/

/*  Body styling */
html, body {
	height: 100%;
}

body {
	background-color: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/content-top-background.jpg');
	background-repeat: repeat-x;
	color: #ccc;
}

body p, ul {
	line-height: 140%;
}
a {
	color: #c3c3c3;
	}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -180px;
}

.push {
	height: 180px;
}

.clearfix {
	clear: both;
}

/*  Header styling */
#header {
	height: 100px;

}

#headerwrapper {
	width: 980px;
	position: relative;
}

#headerlogo {
	width: 250px;
	float: left;
}

#headernavbar {
	width: 650px;
float: right;
padding-right: 45px;
}

#logo {
	padding-top:18px;
	padding-left:42px;
	z-index:1;
}

#logolink {
	position: relative;
}

#logobackground {
	position: absolute;
	top: 0px;
	left: -50px;
}

#glowingbackground {
	position: absolute;
	top: -1px;
	left: 30px;
	z-index: 0;
}

ul#navbar {
	padding-top: 50px;
	list-style-type: none;
}

ul#navbar  li {
}

ul#navbar li a {
text-decoration: none;
float: right;
outline: none;
padding-left: 10px;
}

#buttonhome {
	display: block;
	width: 70px;
	height: 27px;
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/button-home.png") no-repeat 0 0;
}

#buttonhome:hover {
	background-position: 0 -27px;
}

#buttonhome span {
	display: none;
}

#buttonportfolio {
	display: block;
	width: 105px;
	height: 27px;
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/button-portfolio.png") no-repeat 0 0;
}

#buttonportfolio:hover {
	background-position: 0 -27px;
}

#buttonportfolio span {
	display: none;
}

#buttonabout {
	display: block;
	width: 77px;
	height: 27px;
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/button-about.png") no-repeat 0 0;
}

#buttonabout:hover {
	background-position: 0 -27px;
}

#buttonabout span {
	display: none;
}

#buttonblog {
	display: block;
	width: 71px;
	height: 27px;
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/button-blog.png") no-repeat 0 0;
}

#buttonblog:hover {
	background-position: 0 -27px;
}

#buttonblog span {
	display: none;
}

#buttoncontact {
	display: block;
	width: 90px;
	height: 27px;
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/button-contact.png") no-repeat 0 0;
}

#buttoncontact:hover {
	background-position: 0 -27px;
}

#buttoncontact span {
	display: none;
}


/* Splash styling */

#splash {
	background-color: white;
	height: 400px;
	position: relative;
	margin-top: 1px; /* Fix for Firefox */
	margin-left: -20px;
}

#frontsplash { /* Separate splash id for the front page which doesn't have the image carousel */
	background-color: white;
	height: 400px;
	position: relative;
	margin-top: 1px; /* Fix for Firefox */
}

#splashtext {
	position: absolute;
	top: 125px;
	left: 100px;
	width: 450px;
	color: #827777;
}

#splashicons {
	position: absolute;
	top: 210px;
	left: 97px;
}

/* Pagename styling */

#pagename {
	height: 57px;
	padding-left: 40px;
}
#pagenameright.grid_8 {
	width: 565px;
}

h2.sectionname {
	padding-top: 20px;
  font-weight: 400;	
}

h2.sectionnamescoot {
	padding-left: 5px;
}
/* Content styling */

#content { 
	background-color: #332e2b;
	padding-left:40px;
	position: relative;
	margin-top: 1px;
}

#excerptcontainer {
	padding: 27px 5px 15px 0px;
	margin-left: 0px;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/borderbackground.jpg');
	background-repeat: repeat-y;
	background-position: right top;
	width: 579px;
}

#excerptcontainer h3 a {
	text-decoration: none;
	color: #ccc;
}

.excerpt {
	height: 123px;
	width: 559px;
	margin-bottom: 14px;
	display: block;
	z-index: 2;
}

.excerpt a {
	text-decoration: none;
	position: relative;
}
.excerpt p {
	line-height: 120%;
}

.excerpttext {
	float: left;
	width: 375px;
	margin-left: 25px;
	vertical-align: top;
	position: relative;
}

.excerpttext a{
	color: #ccc;
}

.excerpttext h2 {
	margin: -5px 0 5px 0;
}

.excerpttext h4 {
	padding: 5px 0 0 0;
}

.excerpttext p {
	margin: 0px;
}

#blogcontainer .excerpt {
	height: 125px;
	width: 560px;
	border-bottom: solid 1px #827777;
	padding-bottom: 15px;
}

#blogcontainer h2 a{
	text-decoration: none;
	color: #ccc;
	position: relative;
}

#blogcontainer h4 a{
	text-decoration: none;
	color: #ccc;
}

#blogcontainer h4 {
	font-size: 0.8em;
	position: relative;
}

#excerptcontainer h4 {
	font-size: 0.8em;
	position: relative;
}

.excerpt img {
	float: left;
}

#blogcontainer .excerpttext {
	float: left;
	width: 375px;
	margin-left: 25px;
}

#blogcontainer .entry img { /* Fix for the gradient overlay */
	position: relative;
}

#blogcontainer .entry p { 
	padding-right: 30px;
	line-height: 120%;
	position: relative;
}

#blognav {
  padding-bottom: 20px;
}

#blognav a {
	text-decoration: none;
	color: #ccc;
}

hr {
	width: 96%;
}
.pan_wrap
{
	float: left;
	position: relative;
	width: 120px;
	height: 108px;
	border: solid 7px #c3c3c3;
  	-webkit-transition: opacity 0.2s linear;
  	-o-transition: opacity 0.2s linear;
}
.pan_wrap:hover{
 	opacity: 0.7;
  	-webkit-transition: opacity 0.2s linear;
  	-o-transition: opacity 0.2s linear;
}
.opacity{
  	-webkit-transition: opacity 0.2s linear;
  	-o-transition: opacity 0.2s linear;
}
.opacity:hover{
	opacity: 0.7;
  	-webkit-transition: opacity 0.2s linear;
  	-o-transition: opacity 0.2s linear;
}
.opacity2{
	opacity: 0.8;
	-webkit-transition: opacity 0.4s linear;
  	-o-transition: opacity 0.4s linear;
}
.opacity2:hover{
opacity: 1;
  	-webkit-transition: opacity 0.2s linear;
  	-o-transition: opacity 0.2s linear;
}

  
  /* Styling for the png transparent frames around the thumbnails (matt's old code) 

.pan_wrap
{
	float: left;
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/pan_checks.gif") repeat;
	position: relative;
	width: 120px;
	height: 108px;
}

.pan_frame
{
	background: url("http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/pan_frame.png") no-repeat;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 108px;
}


  End of transparent frame code */

#portfoliocontainerfront {
	padding-top: 20px;
	margin-left: -10px;

}

#portfoliocontainer {
	padding: 20px 30px 0px 0px;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/borderbackground.jpg');
	background-repeat: repeat-y;
	background-position: right top;
	margin-right: -17px;
	margin-left: -5px;
  min-height: 250px;
}

.portfolioitem {
	float: left;
	position: relative;
	display: block;
	padding: 0px;
	margin: 7px;
}

.portfolioitem a {
	text-decoration: none;
}

#portfolionav {
  padding: 20px 0;
}

#portfolionav a {
	text-decoration: none;
	color: #ccc;
}

.oldernav {
	display: block;
	float: left;
}

.newernav {
	display: block;
	float: right;
	margin-right: 40px;
}

img.newitemflag {
	position: absolute;
	left: -12px;
	top: -12px;
}

.excerpt img.newitemflag {
	left: -12px;
	top: -12px;
}
.grid_about{
	width: 520px;
}
#aboutcontainer {
	padding: 20px 25px 0px 0px;
	margin-right: -17px;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/borderbackground.jpg');
	background-repeat: repeat-y;
	background-position: right top;
}

.icon {
padding-right: 10px;
margin-top: 5px;
margin-left: -27px;

}

#aboutcontainer p {
	padding-right: 30px;
	position: relative;
}


ul.leftaward {
	width: 14em;
	float: left;
	list-style: none;
}
#aboutcontent ul {
	list-style: none;
	padding: 0; 
	margin-left: -30px;
}

.navigation a {
	text-decoration: none;
	color: #ccc;
	padding: 10px;
}

#blogcontainer {
	padding: 20px 25px 0px 0px;
	margin-right: -17px;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/borderbackground.jpg');
	background-repeat: repeat-y;
	background-position: right top;
	min-height: 850px;
}

#blogcontainer .sociable{
	display: block;
	width: 560px;
	padding: 10px 20px 30px 0px;
	border-top: solid #777 1px;
	border-bottom: solid #777 1px;
}

#blogcontainer .sociable .sociable_tagline {
	width: 135px;
	height: 20px;
	float: left;
}

#blogcontainer .sociable ul {
	display: block;
	float: left;
	width: 400px;
	height: 20px;
}

#blogcontainer #relatedposts{
	display: block;
	width: 560px;
	padding: 5px 20px 10px 0px;
	margin-bottom: 20px;
	border-bottom: solid #777 1px;
}


#blogcontainer #relatedposts ul{
	margin-top: -10px;
}

#blogcontainer #relatedposts li{
	padding: 2px 0;
	margin-left: 10px;
	list-style-type: none;
}

#contactcontainer {
	padding: 20px 25px 0px 0px;
	margin-right: -17px;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/borderbackground.jpg');
	background-repeat: repeat-y;
	background-position: right top;
}

#contactcontainer p {
	padding-right: 30px;
	position: relative;
}


#contactcontainer hr {
	text-align: left;/*this will align it for IE*/
	margin: 20px auto 30px 0; /*this will align it left for Mozilla*/
	border: solid 1px #827777;
}

/* !cform ---------------------------------------------------*/


.cform {
	float: left;
	position: relative;
}

.cform ol {
	margin-left: -30px;
}

.cform label {
	display: none;
}

.cform li {
	list-style-type: none;
	
}

.cform textarea {
	width: 390px;
	height: 112px;
}

input#cf2_field_1 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
	color: #888;
}

input#cf2_field_2 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
		color: #888;
	}

input#cf2_field_3 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground2.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
		color: #888;
	}

textarea#cf2_field_4 {
	position: absolute;
	top: 0px;
	left: 195px;
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/textfieldbackground2.jpg');
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-left: 5px;
	height: 83px;
		color: #888;
	}

/*  Second form */

input#cf3_field_1 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
		color: #888;
	}

input#cf3_field_2 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
		color: #888;
	}

input#cf3_field_3 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
		color: #888;
	}

input#cf3_field_4 {
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/inputfieldbackground2.jpg');
	background-repeat: no-repeat;
	height: 26px;
	width: 17em;
	padding: 5px 0 0 5px;
		color: #888;
	}

textarea#cf3_field_5 {
	position: absolute;
	top: 0px;
	left: 195px;
	border: solid 0 #332e2b;
	background: #332e2b;
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/textfieldbackground.jpg');
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-left: 5px;
		color: #888;
	}

#sendbutton2 {

	border: none;
	background: url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/sendbutton.png') no-repeat top left;
	height: 30px;
	width: 66px;
	text-indent: -1000em;
	cursor: pointer;
	position: absolute;
	top: -40px;
	right: -395px;
}


#sendbutton3 {
	border: none;
	background: url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/sendbutton.png') no-repeat top left;
	height: 30px;
	width: 66px;
	text-indent: -1000em;
	cursor: pointer;
	position: absolute;
	top: -40px;
	right: -395px;
}

.linklove {
	display: none;
}

/* !cform ---------------------------------------------------*/


ul#commentlist {
	
}



#commentlist li {
	list-style-type: none;
	margin-left: 0px;
}

#commentlist li img {
	float: left;
	margin: 0px 5px;
}

#commentlist li p {
	padding: 5px;
}

.commentwrapper {
	height: 100px;
	width: 580px;
	margin-bottom: 20px;
}

.commentitem {
	height: 50px;
	width: 180px;
	float: left;
}

.commenttext {
	width: 380px;
	float: left;
}

.comment-childs {
	background: #332e2b !important;
	margin-bottom: 40px !important;
}

.comment-childs .comment-childs {
	background: #332e2b !important;
	margin-bottom: 10px !important;
}

#commentlist hr {
	width: 580px;
	text-align: left;/*this will align it for IE*/
	margin: 20px auto 30px 0; /*this will align it left for Mozilla*/
	border: solid 1px #827777;
}

/* Sidenav styling */

#sidenav {
	padding-top: 25px;
	margin-left: -10px;
	padding-left: 10px;
}

#sidenav li {
	list-style-type: none;
	margin-left: 10px;
}

#sidenav a{
	display: block;
	text-decoration: none;
	color: #ccc;
	padding: 5px;
}
.sidenavicon {
	padding-left: 15px;
	padding-right: 10px;
}

#testimonybox {
	position: relative;
	margin-bottom: 20px;
	margin-left: 15px;
}

#testimonybox .fadeThis p{
	position: absolute;
	left: 13px;
	top: 15px;
	width: 145px;
	height: 180px;
	color: #332e2b;
	font-size: 9pt;
}

#testimonyclientname {
	position: absolute;
	left: 39px;
	top: 204px;
	width: 140px;
}

#usertweet {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 145px;
	height: 180px;
	color: #332e2b;
}

#usertweet a {
	color: #756e54;
	padding: 10px 0px 4px 0px;
}

#usertweet { /* Code to wordwrap those long urls */
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}

ul.tweet_list {
	width: 145px;
}

ul.tweet_list li{
	margin: 0px;
}

#sidenav h4 {
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/sideredarrow2.png');
	background-repeat: no-repeat;
	background-position: 0px;
	margin-left: -10px;
	padding-left: 25px;
}

#sidenav h4 a {
	padding: 0px;
	display: inline;
}

#sidenav ul li {
	padding: 5px 0;
}

#sidenav ul li.curr {
	background-image:url('http://www.hoshimo.com/blog/wp-content/themes/layout-02/images/sideredarrow2.png');
	background-repeat: no-repeat;
	background-position: 0px;
	margin-left: -10px;
	padding-left: 20px;
}

#sidenav li {
		margin-bottom: 5px;
}

#sidenav li a {
	display: inline;
	padding: 0px;
}

#sidenav #aboutservices {
	padding: 0 0 0 10px;
	margin-top: -10px;
	margin-bottom: 10px;
	width: 70px;
}


#sidenav #searchform {
	padding-left: 15px;
}

#sidenav ul#moreaboutme li {
	margin-left: 20px;
}

#sidenav ul#sidenavarchives li {
	margin-left: 20px;
	padding: 0px;
}

#sidenav #sidenavfollow {
	margin-left: 10px;
}

#sidenav #sidenavfollow a{
	display: inline;
}

#sidenav div {
	margin-bottom: 20px;
}



#sidenav .full div {
margin-top: -10px;
padding-left: 10px;	
margin-bottom: 20px;
}

#sidenav .full ul {
padding: 0 0 10px 5px;
margin-bottom: 20px;
}

#sidenav .full li {
padding: 0px;
}

/* Footer styling */

#footer {
  	height: 175px;
  	text-align: center;
  	background-color: #1a1a1a;
	padding-top: 15px;
	border-top: solid 1px #827777;
}

#footerwrapper {
	margin: 0 auto;
	width: 980px;
	text-align: left;
}

.footeritem {
	border-right: 1px dashed #444;
	padding-right: 16px;
}

#footer h3 {
	font-size: 1.3em;
	margin: 0px;
	padding: 0px;
}

#credits {
	width: 136px;
	height: 145px;
	margin-left: 55px;
	float: left;
}

#credits p{
	font-size: 0.8em;
	padding-left: 8px;
}

#credits a{
	text-decoration: none;
	color: #ccc;
}

#contactinfo {
	width: 165px;
	height: 130px;
	padding-top: 15px;
	padding-left: 25px;
	float: left;
}

.footercontactitem img {
	padding-right: 10px;
}

#aboutme {
	width: 220px;
	height: 130px;
	padding-top: 15px;
	padding-left: 25px;
	float: left;
}


#aboutme img {
	padding: 5px 5px 5px 0px;
}

#startproject {
	height: 130px;
	padding-top: 15px;
	padding-left: 25px;
	float: left;
}
#startproject img{
	padding: 3px 5px 0px 0px;
}


/*  Styles for Entries */

.entry a {
	color: #ccc;
}

.entry h2 a{
	text-decoration: none;
}

.entry h4 {
	font-size: 0.8em;
}

.entry h4 a{
	text-decoration: none;
}

.bottomnav {
	width: 580px;

}

.bottomnav .leftnav {
	float: left;
}

.bottomnav .rightnav {
	float: right;
	text-align: right;
}

.bottomnav a {
	color: #ccc;
	position: relative;
}