/* ======================================================================

   WEIGHTSHIFT.COM
   work@weightshift.com
   (c) 2000-2010 Weightshift LLC, All Rights Reserved.

======================================================================== */

* { padding: 0; margin: 0; }


/*----------------------------------------------------------------------- 
   Standard styles
 ------------------------------------------------------------------------ */

body {
	color:			#333;
	background:		#373c3f url(../_gfx/bg.jpg);
	font-family: 	"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	text-shadow:	rgba(255, 255, 255, .01) 0px -1px 1px;
	-webkit-font-smoothing: antialiased;
	font-size: 		14px;
	line-height:	22px;
	border:			0;
	margin:			0;	
}

a:link { color: #688690; text-decoration: none; -webkit-transition: color .3s linear; }
a:visited { color: #688690; text-decoration: none; }
a:hover { color: #3e565e; text-decoration: none; }
a:active { color: #688690; text-decoration: none; }


/* image handling & styles for MEMO */

img { border: none;	}

img.left { float: left; padding-top: 5px; margin: 0px 12px 0px 0px; }
img.widescreen { width: 900px; margin-left: -180px; }
img.norm { width: 540px; }
img.span-wide { width: 940px; margin-left: -200px; }
#design img.span-wide { width: 940px; margin-left: -20px; }
img.span-sides-100 { width: 940px; margin-bottom: -100px; margin-left: -200px; }
img.span-sides-200 { width: 940px; margin-bottom: -200px; margin-left: -200px; }
img.span-sides-300 { width: 940px; margin-bottom: -300px; margin-left: -200px; }
img.span-sides-400 { width: 940px; margin-bottom: -400px; margin-left: -200px; }
p.none { margin: 0 !important; padding: 0 !important; }

.caption-left { float:left; clear:right; margin-left: -180px; width:165px; padding-right: 15px; text-align: left; color:#666; font: 11px arial; line-height: 14px; }
.caption-right { float:right; clear:right; margin-right: -180px; width: 165px; padding-left: 15px; text-align:left; color:#666; font: 11px arial; line-height: 14px; }


h1 { 
	font-family: 	Garamond, Georgia, serif; 
	text-shadow:	rgba(255, 255, 255, .01) 0px -1px 1px;
	font-weight: 	normal;
	font-size: 		30px;
	line-height: 	30px;
	margin-bottom: 	22px; 
}


h2 { 
	font-family: 	"proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial; 
	text-shadow:	rgba(255, 255, 255, .01) 0px -1px 1px;
	font-weight: 	bold;
	font-size: 		20px;
	line-height: 	22px;
	margin-bottom:	22px; 
}

h3 {
	font-family: 	"proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial;
	font-weight: 	bold;
	text-transform: uppercase;
	letter-spacing: 1px; 
	font-size: 		12px;
	line-height: 	22px;
}

h4 {
	font-family: 	"proxima-nova-1","proxima-nova-2", "Proxima Nova", Arial, sans;
	font-size:		11px;
	font-weight: 	bold;
	text-transform: uppercase;
	line-height: 	22px;
}

p { margin-bottom:	22px; }

ol, ul { padding: 0 0 0px 20px; }

ol li, ul li { line-height: 22px; padding: 0px 0px 22px 0px; }

blockquote {
	padding: 0px 30px 0px 30px;
}

blockquote p { font-size: 12px; line-height: 22px; }

.group:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
} 



/*----------------------------------------------------------------------- 
   Layout
 ------------------------------------------------------------------------ */

#dashed {
width: 			100%;
height:			1px; 
background:		url(../_gfx/rule_dashed.gif) repeat-x;
margin:			20px 0 0 0;
} 

#core {
width: 				940px;
margin: 			0 auto 0 auto;
}

#masthead {
margin:				30px 0 30px 0;
}

#index #masthead {
margin:				30px 0 31px 0;
}

#content {
width:				920px;
background-color:	#fff;
padding:			0 10px 0 10px; 
}

.col-two {
float:				left;
width:				150px;
padding:			0 10px 0 10px;
}

.col-three {
float:				left;
width:				245px;
padding:			0 10px 0 10px;
margin-right: 		10px;
}

.col-four {
float:				left;
width:				340px;
padding:			0 10px 0 10px;
margin:				0 10px 0 10px;
}

.col-four-end {
float:				left;
width:				340px;
padding:			0 10px 0 10px;
margin-left:		10px;
}

.col-five { 
float:				left;
width:				435px;
padding:			0 10px 0 10px;
margin:				0;
}

.col-seven {
float:				left;
width:				640px;
}

.col-six {
float:				left;
width:				540px;
padding:			0 10px 0 10px;
margin:				0 10px 0 10px;
}

.col-eight {
float:				left;
width:				730px;
padding:			0 10px 0 10px;
}

.col-ten-header {
float:				left;
width:				900px;
padding:			10px 10px 10px 10px;
margin:				0 0px 20px 0px;
border-bottom:		3px solid #c90;
}

.col-ten-header h1 { margin-bottom: 0; }

.col-ten-desc {
float:				left;
width:				920px;
padding:			0px 0px 15px 0px;
margin:				0 0px 20px 0px;
border-bottom:		3px solid #c90;
}

.col-ten-desc .col-six { color: #666; font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial;  line-height: 24px; }

/* inline content footer */

.footer {
color:				#666; 
font-family: 		"Proxima Nova";
font-size:			12px;
line-height: 		22px !important;
text-align: 		center;
text-transform: 	uppercase;
padding:			20px 10px 5px 10px;
border-top:			3px solid #c90;
clear: 				both;
}

.up { opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; -webkit-transition: opacity .3s linear; }
.up:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }

/* main template footer */

#footer { 
font-family: 		"proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial;
font-size:			12px;
line-height: 		22px;
background: 		url(../_gfx/bg_footer.png) top no-repeat; 
padding:			18px 0 0 0;
margin:				0 0 0px 0; 
}

#footer a { color: #333; font-weight: bold; }
#footer a:hover { color: #688690; }

/* button styles */

.btn { 
font-family: 		"proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial !important;
font-size:			11px !important;
font-weight: 		bold !important;
letter-spacing: 	1px;
text-shadow:		rgba(255, 255, 255, .01) 0px -1px 1px;
color:				#fff;
background-color: 	#688690;
text-transform: 	uppercase;
padding: 			4px;
margin:				0;
border:				0 !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

.btn:hover { 
cursor:				pointer;
background-color: 	#3e565e;
}

#client-login a,
#twitter a {
float:				left;
width:				140px;
background-color: 	#fff;
padding:			16px 20px 14px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#mail-list {
float:				left;
width:				530px;
background-color: 	#fff;
padding:			16px 10px 14px 20px;
margin:				0 10px 0 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

input.maillist { color: #999; width: 150px; font: 11px Helvetica; border: 0; border-bottom: 1px solid #888; margin: 0 5px 0 5px; }

.client-login { background: url(../_gfx/icon_client_login.png) 0 50% no-repeat; padding: 10px 0 10px 14px; opacity: 0.5; -webkit-transition: opacity .3s linear; }
.twitter { background: url(../_gfx/icon_twitter.png) 0 50% no-repeat; padding: 10px 0 10px 20px; opacity: 0.5; -webkit-transition: opacity .3s linear; }
.twitter:hover, .client-login:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }

#copyright { color: #888; font-family: "proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial; font-size: 10px; text-transform: uppercase; padding: 0px 10px 0px 10px; margin: 10px 0 20px 0; }

.copyright { font-weight: bold; background: url(../_gfx/icon_copyright.png) 0 50% no-repeat; padding-left: 20px; }


/*----------------------------------------------------------------------- 
   Homepage
 ------------------------------------------------------------------------ */

#slideshow {
position: relative;
text-align: center;
width: 900px;
height: 403px;
margin: 0;
clear: both;
}

#slideshow img {
position: absolute;
left: 0;
top: 0;
}

.slideshow-prev, .slideshow-next { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; -webkit-transition: opacity .2s linear; }
.slideshow-prev:hover, .slideshow-next:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }

#work-display { 
padding: 0 10px 0px 10px;
}

.display { border-bottom: 3px solid #333; z-index: 1; }
.display-none { display: none; }

#work-display .col-three {
float:				left;
width:				205px;
font-family: 		"Proxima Nova";
font-size:			14px;
line-height: 		22px;
padding:			20px 20px 0 20px;
z-index:			2;
}

.work-display-info { 
position:			relative;
float:				left;
width:				330px;
height:				170px;
padding:			20px;
color:				#fff;
background-color: 	rgba(204,153,0,0.9);
margin:				-90px 0 20px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
z-index:			10;
}

.work-display-info h5 { font-family: "Proxima Nova"; font-size: 12px; line-height: 20px; text-transform: uppercase; font-weight: bold; }

.work-display-info p { font-size: 30px; line-height: 30px; padding-top: 55px; }

.work-display-info a { color: #fff; }

.work-display-info .prev-next { float: right; }

.call-out { font-size: 11px; text-transform: uppercase; font-weight: bold; }


/*----------------------------------------------------------------------- 
   Shop
 ------------------------------------------------------------------------ */

#shop h1 a:link, #shop h1 a:visited, #shop h1 a:active { color: #333; border-bottom: none; }
#shop h1 a:hover { color: #333; border-bottom: 1px solid #333; }

#shop .col-four { 
float:				left;
width:				340px;
padding:			0 10px 0 10px;
margin:				0 10px 0 0;
}

#shop .col-six { 
float:				left;
width:				540px;
padding:			0;
}

h1.price { margin-bottom: 10px; }
h1.price em { font-size: 16px; }
h3.option { border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 10px; }

.select-wide { width: 330px; }

.player { margin-top: -40px; }

/*----------------------------------------------------------------------- 
   Design
 ------------------------------------------------------------------------ */
 
.header-left {
float: left;
width: 700px;
}

.header-right {
float: right;
width: 200px;
text-align: right;
padding-top: 0px; 
}

#design h1 a:link, #design h1 a:visited, #design h1 a:active { color: #333; border-bottom: none; }
#design h1 a:hover { color: #333; border-bottom: 1px solid #333; }

.selected-work { margin: 0px 0 10px 0; }

.work-item h2 { 
font-weight: normal;
font-size: 13px;
padding: 5px 10px 10px 10px;
margin-bottom: 0px;
}

a.work-item {
float: left;
width: 228px;
text-align: center;
padding: 9px 0 0 0; 
background-color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: background-color .3s linear;
}

a:hover.work-item {
color: #fff; 
float: left;
width: 228px;
text-decoration: none;
text-align: center;
background-color: #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

a.work-item img { border: 1px solid transparent; }
a:hover.work-item img {  border: 1px solid #fff; }

.work-item h2:hover { color: #fff; }

#design .col-ten { padding: 0 10px 0 10px; }
#design .col-six, #shop .col-six { margin: 0 10px 0 0; }
#design .credits { font-size: 13px; line-height: 22px; }
#design .services { font-size: 12px; line-height: 22px; }
#design .services a { font-family: "Helvetica Neue", "Helvetica", Arial; }

.footer .prev { float: right; padding: 0 0 0 10px; }
.footer .next { float: right; padding: 0 0 0 10px; }
.grid { float: left; margin-right: 34px; opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; padding: 0; -webkit-transition: opacity .3s linear; }
.grid:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }

.prev { opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; padding: 8px 0 0 0; -webkit-transition: opacity .3s linear; }
.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; -webkit-transition: opacity .3s linear; }
.next:hover {  opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; padding-left: 10px; }


/*----------------------------------------------------------------------- 
   Memo
 ------------------------------------------------------------------------ */

#memo .col-ten-header { margin-bottom: 40px; }

.subnav {
float: left;
font-family: "proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial; 
font-size: 12px; 
line-height: 22px;
text-transform: uppercase; 
}

.sub-1 { width: 150px; margin-right: 10px; padding: 0px 10px 5px 0px;  }
.sub-2 { width: 160px; margin-right: 200px; padding: 0px 10px 5px 10px; }
.sub-3 { width: 160px; margin-right: 10px; padding: 0px 10px 5px 10px; }
.sub-4 { width: 150px; margin: 0; padding: 0px 0px 5px 10px;  }

input.search { color: #999; width: 100px; font: 11px Helvetica; border: 0; border-bottom: 1px solid #888; margin: 0 5px 0 0; }

.post h1 a:link, .post h1 a:visited, .post h1 a:active { color: #333; border-bottom: none; }
.post h1 a:hover { border-bottom: 1px solid #333; }
.post h2 { margin-top: 40px; margin-bottom: 2px; }
.post h3 { font-size: 14px;  }

.post a:link { color: #111; text-decoration: none; border-bottom: 1px solid #ccc; }
.post a:visited { color: #111; text-decoration: none; border-bottom: 1px solid #ccc; }
.post a:hover { color: #3e565e; }
.post a:active { color: #111; text-decoration: none; outline: none; border-bottom: 1px solid #ccc; }
.post table { border: 1px solid #ccc; border-collapse: collapse; margin-bottom: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.post table td, .post table th { text-align: center; padding: 10px; border: 1px solid #ccc; }
.post table th { background-color: #e9e9e9; }

.post { border-bottom: 1px solid #e9e9e9; padding: 20px 0 20px 0; margin: 0 0 20px 0; }

#memo .col-two h1 { color: #999; font-weight: normal; line-height: 30px; }
#memo .col-two, .continue, .tags { 
color: #666; 
font-family: "proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial; 
font-size: 12px; 
line-height: 12px;
text-transform: uppercase; 
}

.byline { padding-top: 3px; }

#memo h2 a:link, #memo h2 a:visited, #memo h2 a:active { color: #333; border-bottom: none; }
#memo h2 a:hover { color: #333; border-bottom: 1px solid #333; }

#memo .footer { margin-top: -21px; }

#memo .up { margin-right: -48px; }

.continue a { color: #333; border: 0 !important; font-weight: bold; }

.tags { background: url(../_gfx/rule_dashed_memo.gif) top repeat-x; padding: 10px 0 0 0; /*border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 10px 0 10px 0;*/ }
.tags a { color: #999 !important; font-family: Helvetica, Arial; border: 0 !important; text-transform: lowercase; }
.tags a:hover { color: #3e565e !important; }

.footnote { font-size: 12px; }

.archive .col-ten-header { margin-bottom: 20px !important; }
.archive h2.title { color: #333; }
.archive h2 { color: #999; font-weight: normal; padding-bottom: 20px; border-bottom: 1px solid #ccc; }
.archive h2 a { font-weight: bold; }
.archive-tags { font: 13px Helvetica; line-height: 22px;  }

/* comments */

.comment { border-bottom: 1px solid #e9e9e9; line-height: 20px; margin-bottom: 20px; }

.comment .col-two { font-size: 13px; line-height: 20px; margin-top: -1px; }

#comment-form { font-size: 12px; font-family: "Helvetica Neue", HelveticaNeue, Arial; line-height: 20px; }

#comment-form input { font-size: 12px; font-family: Georgia, serif; padding: 2px;  }

#comment-form td {
padding: 1px 10px 15px 0px; 
}

.comment_name_input, .comment_email_input, .comment_web_input { width: 400px; }

.txpCommentInputMessage { width: 410px; height: 150px; margin-bottom: 20px; }


/*----------------------------------------------------------------------- 
   About
 ------------------------------------------------------------------------ */
 
#about .col-two { font-size: 12px; font-family: "Helvetica Neue", HelveticaNeue, Arial; line-height: 22px; }

#about h3 { color: #999; }

#about h2.name { margin: 0px; }


/*----------------------------------------------------------------------- 
   Contact
 ------------------------------------------------------------------------ */

/*#contact #content { padding-bottom: 20px; }*/

#contact table {
width: 				440px;
font-size: 			13px;
line-height: 		22px;
border-collapse:    collapse;
}

#contact tr {  /*border-top: 1px solid #e9e9e9;*/ }

#contact td { vertical-align: top; text-align: left; padding: 10px 0px 10px 5px; background: url(../_gfx/rule_dashed_memo.gif) top repeat-x; }

.download a { 
display: block; 
height: 24px;
background-color: transparent;
font-family: "proxima-nova-1","proxima-nova-2", "Proxima Nova", "Helvetica Neue", HelveticaNeue, Helvetica, Arial; 
font-size: 12px; 
line-height: 18px; 
font-weight: bold; 
text-transform: uppercase;
padding: 18px 10px 10px 10px;
border-top: 1px solid #e9e9e9; 
border-bottom: 1px solid #e9e9e9;  
-webkit-transition: background-color .3s linear; 
}

.download a img { margin: -12px 10px 0 0; }

.download a:hover  { 
color: #fff; 
background-color: #688690; 
border-top: 1px solid transparent; 
border-bottom: 1px solid transparent; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px;    
}

.phone, .email, .address { font-size: 11px; text-transform: uppercase; padding: 5px 0px 5px 20px; }

.phone {  background: url(../_gfx/icon_phone.png) 0 50% no-repeat; }
.email { background: url(../_gfx/icon_email.png) 0 50% no-repeat; }
.address { background: url(../_gfx/icon_address.png) 0 50% no-repeat; }



/*----------------------------------------------------------------------- 
   Misc.
 ------------------------------------------------------------------------ */

.caps { font-size: 0.9em; line-height: 22px; text-transform: uppercase; letter-spacing: 1px; }
.180 { width: 280px; }
.right { text-align: right; }
em.grey { color: #999; }
.code-text { font: 12px courier; }
.sans { font: 12px Helvetica, arial; }
.pad-right { margin-right: 10px; }
.left-neg { margin-left: -60px; }

.alert {
width: 100%;
position: fixed;
top: 0;
text-align: center;
padding: 12px; 
margin: 0 auto 0 auto;
color: #fff;
font: 14px Helvetica;
}

.success { background-color: rgba(102,153,0,0.6); }
.error { background-color: rgba(204,51,0,0.6); }

/*----------------------------------------------------------------------- 
   Extranet
 ------------------------------------------------------------------------ */
 
#extranet h2 {
color: #555;
font: 11px Arial;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #ccc; 
padding: 6px 10px 6px 0px;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
margin-bottom: 20px; 
box-shadow: 0.2em 0.2em #CCC;

}

#extranet h2 em { 
color: #999;
font-style: normal;
background-color: #e9e9e9; 
padding: 6px 10px 6px 10px;
margin-right: 8px; 
-moz-border-radius-topleft: 3px; 
-webkit-border-top-left-radius: 3px;
-moz-border-radius-bottomleft: 3px; 
-webkit-border-bottom-left-radius: 3px;
}

#extranet .col-seven p { padding: 0px 10px 30px 10px; }

#extranet .col-seven ol { margin-bottom: 30px; }
#extranet .col-seven ol li { margin: 0 0 -8px 10px !important; }


/*----------------------------------------------------------------------- 
   Nav
 ------------------------------------------------------------------------ */

#nav {
width: 			940px;
height: 		56px;
background: 	url(../_gfx/nav.png);
margin: 		0 auto 0 auto;
padding: 		0;
position: 		relative;
top: 			0px;
}

#nav span { display: none; }

#nav li { margin: 0px; padding: 0px; list-style: none; position: absolute; top: 0px; }

#nav li, #nav a { height: 56px; display: block; }
#nav1 { left: 0px; width: 185px; }
#nav2 { left: 185px; width: 190px; }
#nav3 { left: 375px; width: 190px; }
#nav4 { left: 565px; width: 190px; }
#nav5 { left: 755px; width: 185px; }

#nav1 a:hover { background: transparent url(../_gfx/nav.png) 0px -112px no-repeat; }
#nav2 a:hover { background: transparent url(../_gfx/nav.png) -185px -112px no-repeat; }
#nav3 a:hover { background: transparent url(../_gfx/nav.png) -375px -112px no-repeat; }
#nav4 a:hover { background: transparent url(../_gfx/nav.png) -565px -112px no-repeat; }
#nav5 a:hover { background: transparent url(../_gfx/nav.png) -755px -112px no-repeat; }

#design #nav1 { background: transparent url(../_gfx/nav.png) 0px -56px no-repeat; }
#shop #nav2 { background: transparent url(../_gfx/nav.png) -185px -56px no-repeat; }
#memo #nav3  { background: transparent url(../_gfx/nav.png) -375px -56px no-repeat; }
#about #nav4  { background: transparent url(../_gfx/nav.png) -565px -56px no-repeat; } 
#contact #nav5  { background: transparent url(../_gfx/nav.png) -755px -56px no-repeat; } 

#design #nav1 a:hover { background: transparent url(../_gfx/nav.png) 0px -56px no-repeat; }
#shop #nav2 a:hover { background: transparent url(../_gfx/nav.png) -185px -56px no-repeat; }
#memo #nav3 a:hover { background: transparent url(../_gfx/nav.png) -375px -56px no-repeat; }
#about #nav4 a:hover { background: transparent url(../_gfx/nav.png) -565px -56px no-repeat; } 
#contact #nav5 a:hover { background: transparent url(../_gfx/nav.png) -755px -56px no-repeat; }