/*************************************************

ROCKETDOG.ORG				 
APRIL 2009								

Welcome to the RocketDog CSS.

Each page has a class and id attached to the BODY.
The class identifies the template, the ID identifies 
page.

***************************************************
	LET'S BEGIN!
	
	*/

HTML {
	font: 62.5%/160% Helvetica, "Helvetica", Arial, sans-serif;   
	background:#5e5f5e;
	color: #636466;
	}
	
BODY {
	margin: 0px;
	padding: 0px;
	text-align: center;	
	}
	
/***************************************************
	WRAPPER (various bkgs per template)
	
	 */

#wrapper {
	width:100%;	
	text-align:center;
	background:#FAFAF8;
	}
	
.three-col #wrapper,
.two-col #wrapper{
	background:#FAFAF8 url(../images/content-bkg.jpg) repeat-x;
	}
	
.one-col #wrapper{
	background:#FAFAF8 url(../images/one-col-bkg.gif) repeat-x;
	}
	
.homepage #wrapper{
	background:#FAFAF8 url(../images/content-bkg-home.jpg) repeat-x;
	}	
	
#content-wrapper {
	text-align:left;
	width:992px;
	margin: 0px auto;
	}
	
#content {
	font-size:120%;
	}	
	
/***************************************************
	HEADER
	
	*/
	
#header {padding:15px 0 0 0; height:40px;}
	
.logo {
	display:block;
	text-indent:-999em;
	margin:0 0 0 82px;
	padding:0;
	}
	
.logo A {
	display:block;
	background:url(../images/logo.gif) no-repeat;
	width:197px;
	height:38px;
	}
	
/***************************************************
	STRUCTURE (AKA THE TEMPLATES)
	
	We float everything left to preserve the order
	of the source code (SEO benefits)
	
	Though standard logic says to pad the columns;
	to make things work easily with IE6, no padding
	is used. Only margins. (box model - yuck)
	
	And the design didnt match the columns...so, 
	thats why its done this way. There are cleaner
	ways to do it, if the columns were more consistent
	
	*/
	
#leftcolumn,#rightcolumn,#centrecolumn{float:left;}

/***************************************************
	HOMEPAGE STRUCTURE
	
	*/	
	
.homepage #leftcolumn {
	float:left;
	width:340px;
	margin:0 36px 0 80px;
	}

.homepage #rightcolumn {
	float:left;
	width:176px;
	margin:0 30px;
	}
	
.homepage #centrecolumn {
	width:227px;
	float:left;
	margin:0 20px 0 20px;
	}
	
.homepage #content {
	margin:30px 0 65px 0;
	background:url(../images/homepage-faux-cols.gif) repeat-y;
	}
	
.homepage #introFlash {
	width:993px;
	height:396px;
}
	
/***************************************************
	TWO COLUMN STRUCTURE
	
	*/		
	
.two-col #leftcolumn{	
	margin:0 54px 0 90px;
	width:390px;
	}
	
.two-col #rightcolumn {
	width:400px;
	}
	
.two-col #content {
	margin:55px 0 65px 0;
	background:url(../images/two-col-faux-cols.gif) repeat-y;
	}
	
/***************************************************
	THREE COLUMN STRUCTURE
	
	*/		
	
.three-col #leftcolumn{	
	margin:0 35px 0 90px;
	width:151px;
	}
	
.three-col #centrecolumn{	
	margin:0 70px 0 0;
	width:282px;
	}

.three-col #rightcolumn {
	width:300px;
	}
	
.three-col #content {
	margin:40px 0 65px 0;
	background:url(../images/three-col-faux-cols.gif) repeat-y;
	}	
	
/***************************************************
	MAIN MENU
	
	*/

#topmenu {
	margin:12px 67px 2px 0;
	padding:0;
	background:url(../images/topmenu.gif) no-repeat;
	float:right;
	height:28px
	}

#topmenu LI  {
	list-style:none;
	float:left;
	width:auto;
	}
	
#topmenu A {
	display:block;
	height:28px;
	text-indent:-999em;
	padding:0;
	margin:0;
	text-decoration:none;
	margin:0 13px 0 0;
	}
	
#topmenu #nav-portfolio {width:89px;}
#topmenu #nav-services {width:81px;}
#topmenu #nav-about {width:68px;}
#topmenu #nav-blog {width:60px;}
#topmenu #nav-contact {width:80px; margin:0}
	
#topmenu #nav-portfolio:hover,#topmenu #nav-portfolio.selected {background:url(../images/topmenu.gif) 0 -50px no-repeat;}
#topmenu #nav-services:hover,#topmenu #nav-services.selected {background:url(../images/topmenu.gif) -102px -50px no-repeat;}
#topmenu #nav-about:hover,#topmenu #nav-about.selected {background:url(../images/topmenu.gif) -196px -50px no-repeat;}
#topmenu #nav-blog:hover,#topmenu #nav-blog.selected {background:url(../images/topmenu.gif) -277px -50px no-repeat;}
#topmenu #nav-contact:hover,#topmenu #nav-contact.selected {background:url(../images/topmenu.gif) -350px -50px no-repeat;}

/***************************************************
	HOMEPAGE » NEWSFEED
	
	*/
	
.homepage #centrecolumn H3{margin-left:15px;}/*the newsfeed title */

#newsfeed {
	list-style:none;
	margin:0;
	padding:0;
	}
	
#newsfeed LI {
	margin:0 0 15px 0;
	}
	
#newsfeed H4 {
	background:#ededed url(../images/notch.gif) right center no-repeat;
	color:#e77832;
	margin:0 0 3px 0;
	font-size:12px;
	line-height:12px;
	padding:3px 0 3px 15px;
	}
	
#newsfeed P,
#newsfeed SMALL {
	margin:0 0 0 15px;
	}
	
#newsfeed SMALL {
	color:#aeafaf;
	font-size:80%;
	}
	
/***************************************************
	HOMEPAGE » CLIENT LOGIN
	
	*/
#client-login INPUT {
	margin:0 0 7px 0;
	}
	
#client-login .text {
	font-size:90%;
	padding:3px;
	width:170px
	}
	
#client-login .submit {
	background:url(../images/login-btn.gif) no-repeat;
	display:block;
	width:60px;
	height:20px;
	line-height:10px;
	text-indent:-999em;
	border:none;
	}
	
#client-login .submit:hover {
	background:url(../images/login-btn.gif) bottom left no-repeat;
	}
	
#client-login A {
	float:right;
	margin:3px 0 0 0;
	font-size:80%;	
	color:#aeafaf;
	text-decoration:none;
	}
	
#client-login A:hover {
	color:#e77832;
	}
	
/***************************************************
	CONTACT » CONTACT INFO
	
	these styles are also used on .text-block
	
	*/
	 
#contact-info {
	list-style:none;
	margin:0;
	padding:0;
	}
	
#contact-info LI {
	border:solid 1px #dededd;
	background:#f0f0ec;
	padding:10px 15px;
	margin:0 0 15px 0;
	}
	
#contact-info H5 {
	margin:0;
	}
	
/***************************************************
	CONTACT » CONTACT FORM
	
	*/	
	 
#contact-form INPUT, #newsletter-form INPUT, 
#contact-form TEXTAREA{
	width:100%;
	margin:0 0 5px 0;
	}
	
#contact-form TEXTAREA {
	height:80px;
	}
	
#contact-form .submit {
	width:67px;
	height:20px;
	text-indent:-999em;
	display:block;
	background:url(../images/launch-btn.gif) no-repeat;
	border:none;
	line-height:13px;
	}
	
#contact-form .submit:hover {
	background:url(../images/launch-btn.gif) bottom left no-repeat;
	}
	
#newsletter-form .submit {
	width:68px;
	height:20px;
	text-indent:-999em;
	display:block;
	background:url(../images/signup-btn.gif) no-repeat;
	border:none;
	line-height:13px;
	}
	
#newsletter-form .submit:hover {
	background:url(../images/signup-btn.gif) bottom left no-repeat;
	}
	
/***************************************************
	SERVICES 
	
	the service list has an overhang that causes this method.
	it could become an issue if lots of different tags
	get used. Its ok for now - but if content changes
	it would be wise to reconsider this code. This is 
	the same "issue" as the newsfeed homepage.
	
	*/
	 
#services #rightcolumn P,
#services #rightcolumn H2{
	margin-left:25px;
	}
	
#services #rightcolumn H2 {
	margin-bottom:10px;
	}
	
#services #rightcolumn P{
	margin-bottom:3px;
	}
	
/***************************************************
	SERVICES » SERVICE LIST
	
	*/	
	
 .service-list {
	background:#ededed url(../images/notch.gif) center right no-repeat;
	margin:0 0 25px 0;
	padding:3px 6px 3px 25px;
	list-style:none;
	}
	
.service-list LI {
	float:left;
	width:170px;
	background:url(../images/bullet.gif) left center no-repeat;
	padding:0 0 0 10px;
	line-height:18px;
	}
	
#services #rightcolumn p {
	padding-bottom:12px;
}	
/***************************************************
	PORTFOLIO LIST » PORTFOLIO MENU
	
	 */	
	 
#portfolio-menu { /*wraps everything - necessary? */
	margin:33px 33px 33px 51px;
	height:34px;
	}
	
#client-list { /*that happy little link to the right */
	float:right;
	background:url(../images/vertical-dash.gif) top right repeat-y;
	font-size:120%;
	margin:0;
	padding:8px 22px;
	color:#b7b7b5;
	}
	
#client-list:hover {color:#e77832;}

#client-list EM {
	font-style:normal;
	background:url(../images/double-bullet.gif) left center no-repeat;
	padding:0 0 0 18px;
	}
	
#portfolio-title { /* title "PORTFOLIO" that sits left of the menu - z-indexed for js scroll */
	background:url(../images/portfolio.gif) no-repeat;
	height:33px;
	width:127px;
	text-indent:-999em;
	float:left;
	margin:0;
	padding:0;
	display:block;
	position:absolute;
	z-index:2;
	}
	
#menu-wrapper{	/* WRAPPER FOR JS SCROLL */
	width:782px;	
	margin:0;
	padding:0;
	position:relative;
	height:34px;
	overflow:hidden;
	}
	
#menu-wrapper UL { /*move this bad boy around for fancy js scroll action */
	height:33px;
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	z-index:1;
	top:0px;
	width:688px; 	
	/*left:127px; /*menu OPEN */
	left:-397px; /* menu with 1 sticking out */
	}
	
#portfolio-list #menu-wrapper UL, #portfolio-item #menu-wrapper UL {
	/*left:-528px;/*menu closed */
	background:url(../images/sortby.gif) top right no-repeat;
	}
	
#menu-wrapper LI {
	float:left;
	}
	
#menu-wrapper A {
	width:131px;
	height:33px;
	display:block;
	text-indent:-999em;
	}
	
#menu-wrapper .selected SPAN {
   background:url(../images/port-notchy.gif) right center no-repeat;
   display:block;
   height:34px;
   }
 
 #menu-wrapper .selected SPAN:HOVER {
 	background:none;
 }

#menu-wrapper .nav-case-studies{background:url(../images/portfolio-menu.gif) 0 -0px no-repeat;}
#menu-wrapper .nav-branding{background:url(../images/portfolio-menu.gif) -131px -0px no-repeat;}
#menu-wrapper .nav-interactive {background:url(../images/portfolio-menu.gif) -262px -0px no-repeat;}
#menu-wrapper .nav-print{background:url(../images/portfolio-menu.gif) -393px -0px no-repeat;}
#menu-wrapper .nav-recent-work{background:url(../images/portfolio-menu.gif) -524px -0px no-repeat;}
	
#menu-wrapper .nav-case-studies:hover,#menu-wrapper .selected .nav-case-studies {background:url(../images/portfolio-menu.gif) 0 -34px no-repeat;}
#menu-wrapper .nav-branding:hover,#menu-wrapper .selected .nav-branding{background:url(../images/portfolio-menu.gif) -131px -34px no-repeat;}
#menu-wrapper .nav-interactive:hover,#menu-wrapper .selected .nav-interactive {background:url(../images/portfolio-menu.gif) -262px -34px no-repeat;}
#menu-wrapper .nav-print:hover,#menu-wrapper .selected .nav-print {background:url(../images/portfolio-menu.gif) -393px -34px no-repeat;}
#menu-wrapper .nav-recent-work:hover,#menu-wrapper .selected .nav-recent-work{background:url(../images/portfolio-menu.gif) -524px -34px no-repeat;}




/*
#menu-wrapper #nav-case-studies:hover,#menu-wrapper #nav-case-studies.selected {background:url(../images/portfolio-menu.gif) 0 -34px no-repeat;}
#menu-wrapper #nav-branding:hover,#menu-wrapper #nav-branding.selected{background:url(../images/portfolio-menu.gif) -131px -34px no-repeat;}
#menu-wrapper #nav-interactive:hover,#menu-wrapper #nav-interactive.selected {background:url(../images/portfolio-menu.gif) -262px -34px no-repeat;}
#menu-wrapper #nav-print:hover,#menu-wrapper #nav-print.selected {background:url(../images/portfolio-menu.gif) -393px -34px no-repeat;}
#menu-wrapper #nav-recent-work:hover,#menu-wrapper #nav-recent-work.selected{background:url(../images/portfolio-menu.gif) -524px -34px no-repeat;}
*/
	

/***************************************************
	CLIENTLIST PAGE
	
	 */	

#clientlist UL.clientlist-ul {
	list-style:none;
	margin:0;
	padding:0;
}
#clientlist #rightcolumn UL.clientlist-ul {
	margin-top:37px;
}

#clientlist UL.clientlist-ul LI {
	border-bottom:solid 1px #dededd;
	padding:5px 0 5px 0;
}

/***************************************************
	FEATURE
	
	 */	
	 
.homepage #feature {margin:0;}
#feature {margin:0 0 0 22px;}
#feature-item, #viewer {
	float:left;
	}	
.left-arrow {
	width:19px;
	height:33px;
	text-indent:-999em;
	display:block;
	background:url(../images/arrows.gif) no-repeat;
	float:left;
	margin:197px 10px 0 0;
	}
	
.left-arrow:hover{background:url(../images/arrows.gif) bottom left no-repeat;}

.right-arrow {
	width:19px;
	height:33px;
	text-indent:-999em;
	display:block;
	background:url(../images/arrows.gif) top right no-repeat;
	float:left;
	margin:197px 0px 0 10px;
	}
	
.right-arrow:hover{background:url(../images/arrows.gif) bottom right no-repeat;}

/***************************************************
	PORTFOLIO ITEM » TEXT BLOCK
	
	 */	
	 
.text-block {
	float:left;
	width:185px;
	margin:0 10px 0 0px;
	border:solid 1px #dededd;
	background:#f0f0ec;
	padding:10px 15px;
	height:63px;
	color:#c3c3c3;
	}
	
.text-block H5{
	margin:6px 0 3px;
	}
	
/***************************************************
	PORTFOLIO ITEM » SMALL LIST
	
	*/	
	 
#portfolio-thumb-sml {
	list-style:none;
	float:left;
	margin:0;
	padding:0;	
	}

#portfolio-thumb-sml LI {
	float:left;
	width:92px;
	height:68px;
	background:url(../images/thumbnail-sml.jpg) no-repeat;
	padding:11px;
	}
	
#portfolio-thumb-sml LI.last {
	width:85px;
	}
	
/* the similar-list is basically just the container
for the thumbnails. But its used to allow for proper
spacing/border */	

#portfolio-list #similar-list {
	clear:both;
	border:none;
	margin:0px 0 20px 55px;
	padding:10px 0;
	}
	
#similar-list {
	padding:20px 0;
	border-top:solid 1px #dededd;
	margin:20px 33px 20px 55px;
	}
	
/***************************************************
	PORTFOLIO LIST » THUMBNAILS LARGE
	
	Basically the same as sml - just sized differently
	
	*/

#portfolio-thumb-lrg {
	list-style:none;
	float:left;
	margin:0 0 0 55px;
	padding:0;
	position:relative;
	}
	
#portfolio-thumb-lrg LI A { 
	position:absolute; 
	background:url(../images/port-rounds.png) no-repeat; 
	top:11px; 
	width:208px; 
	display:block; 
	text-indent:-999em; 
	height:163px; 
	}

#portfolio-thumb-lrg LI {
	float:left;
	width:208px;
	height:163px;
	background:url(../images/thumbnail-lrg.png) no-repeat;
	padding:11px;
	position:relative;
	
	}
	
/***************************************************
	BUTTONS (placed randomly throughout the site)
		
	*/
#i-want-rocketdog {
	width:187px;
	height:20px;
	display:block;
	text-indent:-999em;
	background:url(../images/i-want-rocketdog.gif) top right no-repeat;
	}
	
#i-want-rocketdog:hover {background:url(../images/i-want-rocketdog.gif) bottom right no-repeat;}

#google-map {
	width:147px;
	height:20px;
	margin:10px 0 20px;
	display:block;
	text-indent:-999em;
	background:url(../images/google-maps.gif) top right no-repeat;
	}
	
#google-map:hover {background:url(../images/google-maps.gif) bottom right no-repeat;}
a.hiring {
color:#9fa0a0;

}
.experience-brave-new-design {line-height:12px;color:#9fa0a0;text-decoration:none;background:url(../images/double-bullet.gif) left center no-repeat; padding:0 0 0 18px;font-size:12px;}
.experience-brave-new-design:hover, a.hiring:hover {color:#e77832;}


#client-login {
	margin-bottom:24px;
}

/***************************************************
	HEADERS (text replacement)
	
	Considered cufon/sifr/typeface.js - but didnt know
	the limitations of the site. So, images it is.
		
	*/	
#image-header{
	width:995px;
	height:186px;
}
.txt {
	display:block;
	text-indent:-999em;
	}
	
.clientlist-txt{height:21px;background:url(../images/txt/clientlist.gif) no-repeat;}
.contact-txt{height:21px;background:url(../images/txt/contact.gif) no-repeat;}
.about-txt{height:21px;background:url(../images/txt/about.gif) no-repeat;}
.headquarters-txt {height:18px;background:url(../images/txt/rocket-dog-headquarters.gif) no-repeat; margin:0 0 10px}
.newsletter-txt {height:18px;background:url(../images/txt/newsletter.gif) no-repeat; margin:0 0 10px}
.why-choose-rocketdog-txt{height:21px;background:url(../images/txt/why-choose-rocketdog.gif) no-repeat;}
.client-access-txt{height:21px;background:url(../images/txt/client-access.gif) no-repeat;}
.news-and-events-txt{height:21px;background:url(../images/txt/news-and-events.gif) no-repeat;}
.services-txt{height:21px;background:url(../images/txt/services.gif) no-repeat;}
.development-txt{height:21px;background:url(../images/txt/development.gif) no-repeat;}
.creative-solutions-txt{height:21px;background:url(../images/txt/creative-solutions.gif) no-repeat;}
.productlaunches-txt{height:21px;background:url(../images/txt/productlaunches.gif) no-repeat;}
.strategic-planning-txt{height:21px;background:url(../images/txt/strategic-planning.gif) no-repeat;}
.rdog-is-hiring-txt{height:18px;background:url(../images/rdog_is_hiring.gif) no-repeat;}
.phone-txt{height:15px;background:url(../images/txt/phone.gif) no-repeat;}
.fax-txt{height:15px;background:url(../images/txt/fax.gif) no-repeat;}
.email-txt{height:15px;background:url(../images/txt/email.gif) no-repeat;}
.similar-txt{height:15px;background:url(../images/txt/similar.gif) no-repeat;}

/***************************************************
	FOOTER
	
	*/
#spaceship-btn {
	display:block;
	width:133px;
	height:65px;
	float:left;
	text-indent:-999em;
	background:url(../images/transparent.gif); /*ie7 */
	}
	
#footer-wrapper {
	clear:both;
	text-align:left;
	width:992px;
	margin:20px auto 20px auto;
	background:url(../images/footer-spaceship.gif) no-repeat;
	}	
	
#footer {
	vertical-align:center;
	margin:0 33px 20px 33px;
	padding:32px;
	color:#a4a6a6;
	background:url(../images/footer-dash.gif) top right repeat-y;
	}
	
#footer UL {
	margin:-10px 0;/* CHEATING */
	padding:0;
	float:right;
	}
	
#footer LI {
	display:inline;	
	list-style:none;
	}
	
#footer A {
	color:#939595;
	text-decoration:none;
	background:url(../images/footer-div.gif) right center no-repeat;
	margin:0 0 0 7px;
	padding:0 14px 0 0;
	}
	
#footer A.last {
	background:none;
	margin-right:15px;
	}
	
#footer A:hover {
	color:#FFF;
	}
	
/* Newsletter */

#newsletter {
	margin-top:30px;	
}