/*
Theme Name: NNBox
Theme URI: http://NNBox.ca
Description: Wordpress theme modified from Starker
Version: 0.2
Author: Cheryl Chung
Author URI: http://NNBox.ca
Tags: NNBox, Cheryl, nightning
*/

@import "style/css/reset.css";
/* @import "style/css/typography.css"; */
/* @import "style/css/layout.css"; */

/*
Cheryl Chung
NNBoxDesign portfolio site global stylesheet
*/

/* site global - constant elements on every page */
body {
	font-family: Times, 'Times New Roman', serif;
	text-align: center; /* IE 6 fix for center container */
}
h1, h2, h3 , h4 {
	font-family: Helvetica, Arial, san-serif;
	font-weight: bold;
	text-transform: uppercase;
}
p {
	margin: 1em 0;
	font-size: 0.9em;
	line-height: 1.2em;
}
a {
	color: #FA5D70;
	font-family: Helvetica, Arial, san-serif;
	font-size: 0.8em;
	text-transform: uppercase;
	text-decoration: none;
}
a:hover {
	color: #FAC6CC;
	background-color: #FA5D70;
}

#outercontain { /* 960px layout box */
	width: 960px;
	margin: 0px auto;
	text-align: left;
}	
#header {
	height: 120px;
	margin: 0 10px 0px 10px; /* sets left & right gutter */
	background-color: #777;
	}
#header h1 {
	width: 310px;
	height: 120px;
	float: left;
	background: url('images/NNboxlogo.gif') no-repeat; /* Site logo */
	text-indent: -9999px; /* hide header text! */
	overflow: hidden; /* make sure header text doesn't cause scroll bars */
}

.menu {
	width: 620px;
	height: 42px;
	padding: 70px 0 2em 0; /* pushes nav link down */
	float: right;
}
.menu li {
	float: left;
	padding: 0px 10px; /* link spacer */
}
.menu li a {
	font-size: 1.2em;
	font-weight: bold;
	color: black;
	display: block;
	padding: 3px 10px;
}

.menu .current_page_item a{
	color: #fff;
	height: 40px;
	background-color: #FA5D70;
	padding: 3px 20px 7px;
}


#maincol {
	width: 640px;
	margin: 0 10px; /* left & right gutter */
	float: left;
}
#maincol h2 {
	font-size: 1.8em;
	letter-spacing: 0.4em;
	padding: 5px 0 5px 0; /* spacing for vertical flow */
}	

#sidecol {
	clear: right; /* top align maincol & sidecol */
	width: 280px;
	margin: 0 10px 0 670px; /* push content to right, 670 = 10+640+10+10 */
}
#sidecol h2 {
	font-size: 1.4em;
	letter-spacing: 0.2em;
	padding: 0.75em 0 0.5em 5px; /* vertical flow */
	margin: 0 0 0.5em 0;
	background-color: black;
	color: silver;
	text-align: center;
}
.sidecontent, .widget { /* widget for wp sidebar widget */
	background-color: silver;
	margin: 0 0 20px 0; /* spacer between sidecol boxes */
	padding-bottom: 0.5em;
}
.sidecontent p, .sidecontent h2, .sidecontent h3, .sidecontent h4, .sidecontent span{
	padding: 0 15px; /* sidecol content left & right gutter indent */
}
.sidecontent p {
	margin: 0 0 1.5em 0; /* vertical flow */
}

#footer {
	margin: 2.5em 10px 0 10px; /* 10px left & right gutter */
	padding: 1em 0 2.5em 0;
	clear: both;
	background-color: #777;
	overflow: hidden;
}
#footer hr {
	clear: both;
	background: transparent url('images/NNboxdivider.gif') no-repeat center center;
	border: 0;
	margin-bottom: 2em;
	height: 27px; /* height of divider img */
}

#footer h2 {
	font-size: 1.4em;
	letter-spacing: 0.2em;
	padding: 5px 0 5px 0; /* vertical flow */
}
#footer a {
	color: #FAC6CC;
}
#footer>div { /* select divs which are direct child of #footer */
	padding-top: 1em;
	padding: 0 10px; /* mini column left & right gutter */
}
#mydesc {
	width: 310px; /* 310 = (460 - 20)/2 */
	float: left;
	margin-right: 10px; /* extra space on right only */
}
#mycontact {
	width: 300px; /* 10px removed for right gutter */
	float: left;
	margin: 0 10px; /* extra space on left & right */
}
#footnote {
	width: 250px; /* align with sidcol */
	text-align: center;
	margin: 0 10px 0 660px; /* push to right 10px right gutter, 660 = 640+10+10 (footer has 10px left margin) */
}

/* home */

#featurebox {
	padding: 265px 10px 2em 10px; /* 220px feature image + 10px + 35px padding top & bottom of image = 265px*/
	background: #ddd;
	position: relative; /* for positioning featurebox img */
}

#featurebox img {
	width: 677px;
	height: 251px;
	position: absolute; /* take image out of pageflow for popout effect */
	margin: -285px 5px 1em -33px; /* top & left negative margins to push image beyond box bg area */
	display: block;
}
#maincol #post-8 #featurebox h2 {
	font-size: 3.8em;
	letter-spacing: -0.05em;
	line-height: 0.8em;
	display: inline;
}
#featurebox p {
	font-size: 2em;
	letter-spacing: -0.03em;
	margin: 0;
	display: inline;
}

#scontain {
	margin: 1em 0 0 0;
}
#scontain h2 {
	padding: 0.5em 0 0.5em 10px;
}

.stype {
	margin: 0.5em 0 1em 0;
	width: 310px; /* temp */
	float: left;
	background-color: silver;
	padding-top: 230px; /* take up 220px height of .stype img boxes + 10px margin */
	position: relative; /* for positioning .stype img */
}
#sdesign {
	margin-right: 10px;
}
#sdev {
	margin-left: 10px;
}
.stype img {
	display: block;
	width: 290px;
	height: 220px;
	margin: 0.5em 10px 0 10px;
}
#sdesign img {
	width: 346px;
	height: 232px;
	position: absolute; /* take image out of flow for popup effect */
	margin: -232px 0 0 -28px; /* top & left negative margin to push image */
}

#sdev img {
	width: 309px;
	height: 244px;
	position: absolute; /* popup effect */
	margin: -244px 0 0 10px; /* top negative & left position margin to push image */
}

.stype h3 {
	padding: 10px 0;
	letter-spacing: 0.2em;
	text-align: center;
	font-size: 1.6em;
}

#blog {
	width: 310px; /* 310 = (460 - 20)/2 */
	float: left;
	margin-right: 10px; /* extra space on right only */
}
#twitter {
	width: 300px; /* 10px removed for right gutter */
	float: left;
	margin: 0 10px; /* extra space on left & right */
}
#twitter h2 a {
	color: #000;
	font-size: default;
	font-size: 1em;
}

.blogentry h4 {
	color: #FAC6CC;
	font-size: 1.176em;
}

#blog .blogentry, #twitter .tweetentry {
padding-top: 1em;
}

.blogpostdate, .postfrom {
	color: #000;
	font-size: 0.85em;
	font-style: italic;
	font-weight: normal;
	padding: 0;
	margin: 0;
}
.blogentry p, .tweetentry {
	font-size: 0.85em;
}

/* about (post-15)*/


#post-15 .content {
	font-size: 1.25em;
	background: #ddd;
	padding: 0.5em 70px 2em 70px;
	margin: 10px 0 20px 0;
}
#post-15 .content h2 {
	margin: 1em 0 0 0;
	letter-spacing: -0.0005em;
	font-size: 1.6em;
}
#post-15 .content p {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 0.8em;
}
#post-15 .content h3 {
	margin: 1.5em 0 0 0;
}
#post-15 .content ul {
	margin: 0.5em 0;
}
#post-15 .content li {
	font-size: 0.8em;
	margin-bottom: 1em;
}
li em {
	text-transform: uppercase;
}


/* design (post-31), dev */



#maincol.fullspread { /* takes up full 960px */
	width: 940px;
}
#maincol .title {
	font-size: 3.8em;
	letter-spacing: -0.05em;
	line-height: 0.8em;
	margin: 4px 5px 0.25em 5px;
}

.folioentry {
	clear: both;
	padding: 0.5em 5px 1.5em 5px;
	margin-bottom: 20px;
	background-color: #ddd;
	overflow: hidden;
}
.folioentry a {
	width: 224px;
	height: 163px;
	margin: 1em 30px 0.5em 70px;
	display: block;
	float: left;
}
#post-31 .folioentry img { /* currently design page only, remove when dev page gallery is complete */
	width: 224px;
	height: 163px;
	border: 0;
	visibility: hidden;
}
#dev .folioentry img { /* remove when page's complete */
	width: 224px;
	height: 163px;
	margin: 0.75em 30px 0.5em 70px;
	display: block;
	float: left;
}
#foliobox .odd {
	background-color: #FAC6CC;
}
.folioentry table {
	font-size: 0.9em;
	margin: 0 80px 1em 0px;
}
.folioentry th {
	text-align: left;
}
.folioentry td {
	padding-left: 20px;
	line-height: 1.25em;
}
.entrytitle {
font-size: 2em;
	letter-spacing: -0.005em;
	padding: 10px 0 5px 0; /* vertical flow */
	text-transform: uppercase;
	font-family: Helvetica, Arial, san-serif;
	font-weight: bold;
}
.tabledate {
	font-style: italic;
}

/* design gallery image rollovers */
#doodlery a {
	background: url('../../uploads/2010/01/doodlerythumb.jpg') no-repeat 0px 0px;
}
#crick a {
	background: url('../../uploads/2010/01/crickthumb.jpg') no-repeat 0px 0px;
}
#dream a {
	background: url('../../uploads/2010/01/dreamthumb.jpg') no-repeat 0px 0px;
}
#life a {
	background: url('../../uploads/2010/01/lifethumb.jpg') no-repeat 0px 0px;
}

#doodlery a:hover, #crick a:hover, #dream a:hover, #life a:hover {
	background-position: 0px -163px;
}


/* blog styles*/
.post { 
	padding: 1em 25px 1.5em 25px;
	margin-bottom: 20px;
	background-color: #ddd;
}
#post-8, #post-31, #post-15 { /* reset for home, about, design */
	padding: 0;
	margin: 0;
	background: none;
}

#maincol .odd {
	background-color: #FAC6CC;
}
#maincol .post h2 {
	font-size: 2em;
	letter-spacing: 0.025em;
	padding: 10px 0 5px 0; /* vertical flow */
}
.widget ul, #searchform {
	padding: 0 10px 10px 1.5em;
}
#searchform label {
	font-size: 0.85em;
}
#searchform #s {
	width: 100px;
}