/*
Theme Name: CujoJP Version 2.0
Theme URI: http://cujo.jp/
Description: .
Version: 1.0.1
Author: Kaleb White
Author URI: http://cujo.jp/

	CujoJPv2
	The design of the year!
*/
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, font, img, ins, kbd, q, s, samp,
small, strike, 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;
}
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Avenir LT Std, Avenir, AvenirLight, arial, sans-serif;
	background: #050505 url('../images/background_00.jpg') no-repeat scroll 0 0;
	color: #fff;
}
p {
   font: .8em/1.7 Arial, Helvetica, sans-serif;
}
html > body {
	font-size: 1.2em;
}
a {
	color:#adadad;
	text-decoration:none;
}
a:hover {
	color:#df4273;
}
ol, ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
h4 a {
color: #fff;
}
h4 a:hover{
color: #202020;
}

/**Page layout @group1 **/
#wrapper {
	width: 950px;
	margin: 0 auto;
	padding:0 0 0 10px;
}
#roothead {
	margin: 0 0 1em;
	width:950px;
	height:85px;
	border-bottom:1px solid #df4273;
}

#logo {
	float: left;
	width: 151px;
	height: 55px;
	padding-top:14px;
	line-height: 55px;
}

#logo a{
	text-indent: -999em;
	height: 55px;
	width: 141px;
	display: block;
	background: url('../images/logoTop_00.png') 0 0 no-repeat;
}
#nav {
	list-style:none;
	margin: 0;
	width: 291px;
	float: right;
	height: 60px;
	margin:2em 0 0 0;
	line-height: 40px;
}
#nav li {
	padding: 0;
	margin: 0;
	line-height: 40px;
	display: block;
	float: left;
}
#nav li a {
	display:block;
	height:60px;
	overflow:hidden;
	position:relative;
}
#nav li a strong {
	left:-9000em;
	position:absolute;
	top:-9000em;
}
#nav li a.home {
	width:65px;
	background: url('../images/nav_00.png') -5px 0 no-repeat;
	height:33px;
	cursor:pointer;
}
#nav li a.home:hover{
	background: url('../images/nav_00.png') -5px -34px no-repeat;
}
#nav li a.myWork {
	width:88px;
	background: url('../images/nav_00.png') -62px 0 no-repeat;
	height:33px;
	cursor:pointer;
}
#nav li a.myWork:hover{
	background: url('../images/nav_00.png') -62px -34px no-repeat;
}
#nav li a.aboutMe {
	width:88px;
	background: url('../images/nav_00.png') -147px 0 no-repeat;
	height:33px;
	cursor:pointer;
}
#nav li a.aboutMe:hover{
	background: url('../images/nav_00.png') -147px -34px no-repeat;
}
#nav li a.contact {
	width:50px;
	background: url('../images/nav_00.png') -237px 0 no-repeat;
	height:33px;
	cursor:pointer;
}
#nav li a.contact:hover{
	background: url('../images/nav_00.png') -237px -34px no-repeat;
}
/*************Page header title***************/
.page_header {
	width:950px;
	padding: .5em 0;
}
.page_header span.homehead{
	font-size:2.3em;
	letter-spacing:-.04em;
	line-height:1em;
}
.page_header span.homehead a {
	color:#DF4273;
}
.page_header span.homehead a:hover {
	color:#ff8fb2;
}

/*************Rotating Headlines *************/
.rotatingImages {
	width:950px;
	height:315px;
	margin:25px 0 0 0;
	border:1px solid #df4273;
	background:#df4273;
	overflow: hidden;
}
#rotatingNavigationBar{
	background-color:#df4273;
	font-size:.75em;
	font-weight:bold;
	padding:3px 5px;
	float:right;
	height:22px;
	position:relative;
	top:-28px;
	width:400px;
	z-index:1000;
}
.clientTitleFade {
	width:300px;
	float:left;
}
#rotatingNavigationBar a{
	color:#fff;
	width:365px;
}
#rotatingNavigation {
	width:100px;
	float: right;
}
#rotatingNavigation a{
	color:#DF4273;
	background:#202020 none repeat scroll 0 0;
	display:block;
	float:left;
	height:14px;
	margin:0 0 0 4px;
	padding:2px 3px 2px 6px;
	width:12px;
}
#rotatingNavigation a.activeSlide { 
	color:#fff; 
}

/***Home Content Area****/
#contentArea {
   float: left;
   margin: 1em 0 1.5em;
   padding: 5px 0 0 0;
   width: 960px;
}

/******* Left Side ***************/
#contentArea #leftSide {
   width:625px;
   margin: 0 25px 0 0;
   float: left;
}
#contentArea #leftSide #quickBlurb h2{
   font-size:2.0em;
   font-weight:bold;
   letter-spacing:.02em;
   margin-bottom:5px;
}
#contentArea #leftSide #quickBlurb h2 span{
   color:#df4273;
}
#contentArea #leftSide h3 a{
	float: right;
	margin: .7em 0 0;
	font-size: .6em;
}
#contentArea #leftSide #theFlickr{
	width: 300px;
	float: left;
	margin: 235px 0 0;
}
#contentArea #leftSide #theTwitter{
	width: 300px;
	min-height: 350px;
	overflow: hidden;
	float: left;
	margin: 235px 0 0 1em;
}
#contentArea #leftSide #theTwitter .twitterHref{
	display: block;
}
#contentArea #leftSide #theTwitter #theTweet{
	font-size: 1.9em;
	line-height: 25px;
	font-weight: bold;
	letter-spacing: -.05em;
}
#contentArea #leftSide #theTwitter #theTweet .twitterStatus, .twitter-timestamp {
	font-size: .4em; 
	clear: both;
}
#contentArea #leftSide #theFlickr h4{
	background: #df4273;
	line-height: 1.2em;
	padding: .4em .2em;
	position: absolute;
	margin: 12em 0 0;
}



/********** right side *************/
#contentArea #rightSide {
	width:300px;
	height: 500px;
	float: left;
}
#contentArea h3{
	font-size:1.2em;
	margin-bottom:0.5em;
	padding-top:0.5em;
}
#contentArea h3 span{
   color:#df4273;
}
#contentArea #rightSide h4{
	background: #df4273;
	line-height: 1.2em;
	padding: .4em .2em;
	position: absolute;
	margin: 11em 0 0;
}
#quickContact {
	margin: 1.7em 0 0;
	width: 300px;
}
#quickContact li {
	list-style: none;
}
#quickContact .indent {
	margin: 0 0 0 1.4em;
}
#quickContact .contactBox {
	font: .8em/1.2 Arial, Helvetica, sans-serif;
	color: #fff;
	padding: .2em .2em .5em;
	background: #DF4273;
}
#quickContact .contactBox a{
	color: #202020;
}
#quickContact .contactBox a:hover{
	color: #fff;
}

/******** PORTFOLIO STYLING @page2*******/
#portfolio #whatsNew {
	margin: 1em 0 0;
}
#portfolio h3 {
	font-size:1.2em;
	margin-bottom:0.5em;
	padding-top:0.5em;
}
#portfolio #seeMoar {
	margin-bottom:0.5em;
	padding-top: 1.8em;
}
#portfolio h3 span {
	color: #DF4273;
}
#portfolio .topThree{
	display: inline;
	float: left;
	height: 320px;
	margin: 0 .8em 0 0;
	width: 300px;
}
#portfolio .topThree h4{
	background:#DF4273;
	position: absolute;
	margin: 12em 0 0;
	padding: 0 .5em;
}
#portfolio #moreGoods {
	width: 615px;
	height: 650px;
	clear: both;
	float: left;
	margin: 1em 0 0;
}
#portfolio .client {
	font: .7em/1.7 Arial, Helvetica, sans-serif;
	margin:0 0 2em;
	height: 150px;
	overflow: hidden;
}
#portfolio .client .stick{
	margin-right: 1em;
	height:150px;
	position:absolute;
}
#portfolio .client .info{
	width: 300px;
	position:absolute;
	margin: 4.5em 0 0 23.5em;
}
#portfolio .client .info dd{
	color:#fff;
}
#portfolio #moreGoods .view li, dt{
	padding:0 .5em 0 0;
	display: block;
	float: left;
}
#portfolio .portPage {
	margin-bottom: 2em;
}

/******** CASE STUDY STYLING *******/

#caseContent {
	clear:both;
	float:left;
	margin:1em 0 1.5em;
	width:615px;
}

#moarPictures h3{
	font-size:1.2em;
	padding: 0;
	margin-bottom:0.5em;
	width: 100%;
	border-bottom:1px solid #df4273;
}
#moarPictures {
	clear:both;
	float:left;
	margin:1em 0 1.5em;
	width:960px;
}
#mpLeft {
	clear:both;
	margin-right: 1em;
	width:300px;
}
#mpRight {
	float:left;
	width:640px;
}
#mpRight img{
	padding: 0 1em 1em 0;
}
#caseContent #caseTopImage{
	height: 314px;
	width: 615px;
	overflow: hidden;
}
#caseContent p {
	font: .8em/1.2 Arial, Helvetica, sans-serif;
}
#caseSummary {
	float:left;
	margin:1em 0 1em 1em;
	width:300px;
}
#caseSummary #breadcrumbs {
	height: 245px;
}
#caseSummary #breadcrumbs ul li {
	display:inline;
	float:left;
	font: .7em Arial, Helvetica, sans-serif;
	margin-right:5px;
}
#caseSummary #breadcrumbs ul li span{
	margin-left: 5px;
}
#caseSummary #summary {
	font: .7em Arial, Helvetica, sans-serif;
	margin-right:5px;
}
#caseSummary #summary dd{
	color: #fff;
}
.study_block {
	width: 960px;
	margin: 0 0 1.5em;
	max-height: 600px;
	overflow: hidden;
	float: left;
}
.study_block .study_description {
	float: left;
	margin-right:1em;
	width:300px;
	min-height: 1.8em;
	font: .8em/1.2 Arial, Helvetica, sans-serif;
	color: #fff;
}
.study_block .study_image {
	float: left;
	margin-right:1em;
	width:600px;
}

/******** CONTACT PAGE (holla) STYLING @page4*******/
#contact #contactFormBox label{
	font-size:1.2em;
}
#contact #contactFormBox .buttons{
	background: url('../images/submitButton.png') 0 0 no-repeat;
	border: none;
	float:right;
	height:25px;
	width: 68px;
}
#contact #contactFormBox .buttons:hover {
	background: url('../images/submitButton.png') 0 -25px no-repeat;
	cursor: pointer;
}
#contact h3 {
	font-size:1.2em;
	margin-bottom:0.5em;
}
#contact h3 span{
   color:#df4273;
}
#contact h3 a {
	float:right;
	font-size:0.6em;
	margin:0.7em 0 0;
}
#contact #contactContainer{
	margin: 2em 0 3em;
	height: 650px;
}
#contact #contactFormBox {
	clear:both;
	float:left;
	width:300px;
	overflow: hidden;
}
#contact #contactFormBox label span{
	color:#df4273;
}
#contact #contactFormBox .inputTop{
	background: url('../images/input_top.png') 0 0 no-repeat;
	height: 16px;
	width: 18px;
	margin: 0 0 0 2em;
}
#contact #contactFormBox input.contact, textarea.contact{
	width: 300px;
	font: .9em/1 Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: .2em .5em;
	margin:0 0 .8em;
	background:#df4273;
	border: none;
}
#contact #quickContact {
	margin: 0 1.3em 0;
	float: left;
	width: 300px;
	color: #ffffff;
}
#contact #quickContact .contactBox, .contactBox2 {
	font: .8em/1.2 Arial, Helvetica, sans-serif;
	background: none;
	padding: 0;
	margin: 0 0 2em;
}
#contact .contactBox a{
	color: #ADADAD;
}
#contact .contactBox a:hover{
	color: #DF4273;
}
#contact .contactBox2 a{
	color: #ADADAD;
}
#contact .contactBox2 a:hover{
	color: #DF4273;
}
#contact #theTwitter{
	width: 300px;
	min-height: 350px;
	overflow: hidden;
	float: left;
}
#contact #theTwitter .twitterHref{
	display: block;
}
#contact #theTwitter #theTweet{
	font-size: 1.9em;
	line-height: 1em;
	font-weight: bold;
	letter-spacing: -.05em;
}
#contact #theTwitter #theTweet .twitterStatus, .twitter-timestamp {
	font-size: .4em; 
	clear: both;
}
#contact #pithyComments {
	margin: 1em 0 1.5em;
	width: 960px;
	clear: both;
	float: left;
}
#contact #theComments {
	width: 600px;
	margin: 1em 2.5em 0 0;
	float: left;
}
#contact #pithyComments ul {
	list-style: none;
	font: 1.4em/.95 Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#contact #pithyComments li {
	margin: 1em 0 0;
	clear: both;
}
#contact #pithyComments li a.commentUserName{
	font-size: .8em;
	margin: 0 5em 1em;
	float: right;
}
#contact #theCommentForm{
	width: 300px;
	float: left;
	margin: 1em 0 0;
}
#contact #theCommentForm form{
	margin: 1.4em 0 0;
}
#contact #theCommentForm label span.wordCount{
	color:#df4273;
	float:right;
	font: .6em/1 Arial, Helvetica, sans-serif;
	margin:.5em 0 0;
}
#contact #theCommentForm span.inputTop{
	background: url('../images/input_top.png') 0 0 no-repeat;
	height: 16px;
	width: 18px;
	margin: 0 0 0 2em;
	float: left;
}
#contact #theCommentForm input.inputField, textarea.inputField{
	width: 285px;
	font: .9em/2 Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: .2em .5em;
	margin:0 0 .8em;
	background:#df4273;
	border: none;
}

/******** RESUME STYLING *******/
body#resume {
	font-size:1.1em;
}
#resume #resumeContent {
	width: 920px;
	margin-bottom: 1em;
	min-height: 740px;
}
#resume h3{
	font-size:1.2em;
	padding-top:0.5em;
}
#resume h3 span{
   color:#df4273;
}
#resume .resumeTitle {
	width: 300px;
	margin-bottom: 200px;
	float: left;
	border-bottom:1px solid #df4273;
	margin-right:1em;
}
#resume .aboutEntry {
	width: 300px;
	float: left;
	margin: 1.5em 1em 0 0;
}
#resume .summaryEntry p{
	width: 300px;
	float: left;
}
#resume .summaryEntry {
	width: 600px;
	float: left;
	margin: 1em 0;
}
#resume .summaryEntry h2 {
	color:#df4273;
	font: .8em/2 Arial, Helvetica, sans-serif;
}
#resume .workEntry {
	width: 600px;
	float: left;
	margin: 1em 0;
}
#resume .workEntry h2 {
	color:#df4273;
	width: 300px;
	float: left;
	font: .8em/2 Arial, Helvetica, sans-serif;
}
#resume .workEntry em {
	color:#adadad;
	float:left;
	font: .6em Arial, Helvetica, sans-serif;
	margin:1em 0 0;
}
#resume .workEntry p{
	width: 300px;
	margin: 0 0 1em;
}
#resume .projectEntry p{
	width: 300px;
	float: left;
}
#resume .projectEntry div{
	width: 300px;
	float: left;
	margin: 1em 0;
}
#resume .projectEntry h2 {
	color:#df4273;
	font: .8em/2 Arial, Helvetica, sans-serif;
}

/******** ABOUT STYLING *******/
#about #aboutContent {
	width: 640px;
	margin-bottom: 1em;
	min-height: 740px;
}
#about h3{
	font-size:1.2em;
	padding-top:0.5em;
}
#about h3 span{
   color:#df4273;
}
#about .aboutTitle {
	width: 300px;
	float: left;
	border-bottom:1px solid #df4273;
	margin-right:1em;
}
#about .aboutEntry {
	width: 300px;
	float: left;
	margin: 1.5em 1em 0 0;
}

/******* 404 STYLING *******/
.uglyPageHeader {
	width:950px;
	margin: 8em 0 0;
}
.uglyPageHeader span.homehead{
	font-size:3em;
	letter-spacing:.02em;
}
#uglyPageContent {
	height:475px;
	margin:0.5em 0 8em;
	width:640px;
}
#uglyPageContent h3{
	font-size:1.2em;
	margin: 0;
	padding-top:0.5em;
}
#uglyPageContent h3 span{
	color: #DF4273;
}
#uglyPageContent p {
	font: .8em/1.4 Arial, Helvetica, sans-serif;
}
#uglyPageContent p span{
	color: #DF4273;
}
#uglyPageContent .uglyPageTitle {
	width: 300px;
	float: left;
	border-bottom:1px solid #df4273;
	margin-right:1em;
}
#uglyPageContent .uglyPageEntry {
	width: 320px;
	float: left;
	margin: 1.5em 0 2em;
}
#errorNav {
	list-style:none;
	height: 60px;
	line-height: 40px;
	clear: both;
}
#errorNav li {
	padding: 0;
	width: 160px;
	line-height: 40px;
	display: block;
	float: left;
}
#errorNav li a{
	color: #fff;
}
#errorNav li a:hover{
	color: #DF4273;
	text-decoration: underline;
}
/******** SIDEBAR STYLING *******/
#sidebar {
	width: 300px;
	float: left;
	margin: 1em 0 1em 1em;
}
#sidebar .sidebarLink {
	font: .7em/1.7 Arial, Helvetica, sans-serif;
}
#sidebar .sidebarLink span{
	color:#DF4273;
}
#sidebar #pithyList{
	list-style: none;
	max-height: 450px;
	letter-spacing: -.1em;
	line-height: 1em;
	font-size: 1.9em;
	font-weight: bold;
}
#sidebar #pithyList a{
	letter-spacing: 0;
	font-size: .65em;
}
/**sidebar contact sections**/
#sidebar #quickContact {
	margin: 0.7em 0 0;
	width: 300px;
}
#sidebar #quickContact .contactBox {
	background: none;
}
#sidebar #quickContact .contactBox a{
	color: #ADADAD;
}
#sidebar #quickContact .contactBox a:hover{
	color: #DF4273;
}

/******** FOOTER STYLING *******/
#footer {
	font: .7em/1.7 Arial, Helvetica, sans-serif;
	width: 100%;
	clear:both;
	margin: 2.5em 0 0;
	background: #DF4273;
	color: #202020;
	padding-top:0.5em;
}
#footer a {
	color: #202020;
}
#footer a:hover {
	color: #fff;
}
#footer #sosumi {
	width: 950px;
	min-height: 55px;
	margin: 0 auto;
}
#footer #sosumi #footerNav li  {
	float:left;
	list-style: none;
}
#footer #sosumi #footerNav li span{
	margin:0 .9em;
}
#footer #sosumi #logoBottom{
	text-indent: -999em;
	height: 51px;
	width: 125px;
	margin: 0;
	float: right;
	background: url('../images/logoBot_00.gif') 0 0 no-repeat;
}

/** IE6 navigation ***/
* html #rotatingNavigation a{
	margin:1px 0 0 2px;
}