/*

Theme Name: Bad Hippo Design
Theme URI: http://badhippodesign.com
Description: theme used for badhippodesign.com
Version: 1.0
Author: Josh Kephart
Author URI: http://badhippodesign.com

*/ 

/* site globals */
.clear { clear: both; }
.justified { text-align: justify; }
.smalltext {font-size: 12px; }
img { border-style: none; }
a, a:visited { text-decoration: none; color: #999; }
a:hover { text-decoration: none; color:#333; }
.preload { display: none; } /* class used to preload images and not display them */

/* site layout and container specific typography and/or style overrides */
#site-container { width: 1080px; margin: auto; font-family: sans-serif; min-height: 875px; } /* centered container for the whole site */
	#site-header { } /* header div which holds the logo and navigation */
		#site-logo { width: 341px; height: 133px; float: left; } /* container div for the site logo */
			#logo-hippo { width: 112px; height: 81px; position: relative; left: 105px; background-image: url(images/logo-hippo.png); background-repeat: no-repeat; }
			#logo-text { width: 341px; height: 52px; background-image: url(images/logo-text.png); background-repeat: no-repeat; }
			#logo-text:hover { background-image: url(images/logo-text-rollover.png); }
		#site-nav { position: relative; top: 95px; float: right; width: 450; padding-right: 15px; } /* container for the site navigation links */
			.nav-link { position: relative; float: left; padding-left: 30px; } /* class for the navigation link divs */
			#site-nav-sub { position: relative; float: left;} /* container for the site navigation sub links */
				.nav-link-sub { position: absolute; padding-top: 5px; } /*class for the navigation sub link divs */
				.sub-portfolio { left: 23px; width: 144px; }
				.sub-services { left: 170px; width: 144px; }
				.sub-about { left: 300px; width: 153px; }
					.nav-link-sub-wrapper { display: none; }
					.nav-link-sub-image { padding-right: 10px; }
	#site-content {margin: auto; position: relative; top: 30px; } /* container for the content in between the header and footer */
		#front-page-content { float: left; width: 50%; color: #222222; } /* container for the front page text */
		#recent-status { float: left; width: 440px; height: 96px; margin-left: 40px; padding-left: 10px; padding-right: 10px; padding-top: 10px; background-image: url(images/recent-status.png); background-repeat: no-repeat; color: #CCCCCC; } /* container for the front page status box */
			.avatar-60 { float: right; margin-left: 8px; margin-top: 8px; border: 1px solid #DDDDDD; }
		#current-projects { position: relative; float: right; width: 511px; height: 534px; background-image: url(images/current-projects.png); background-repeat: no-repeat; } /* container for the current projects box */
			.current-project-image-border { position: absolute; top: 50px; left: 18px; z-index: 2; padding-top: 3px; padding-left: 3px; width: 474px; height: 388px; background-image: url(images/project-border.png); background-repeat: no-repeat; } /* class for the div that contains the project image */
			.current-project-image-wrapper { position: relative; top: 50px; left: 21px; padding-top: 3px; padding-left: 3px; width: 465px; height: 388px; overflow: hidden; } /* class for the div that contains the project image */
				.current-project-image { position: absolute; left: 0px; z-index: 1; width: 2100px; opacity: 1; } /* class used by the javascript functions to adjust opacity on page load and the left property to slide the images into view */
			/* the current-project arrow classes set the background and rollovers for both of the current project arrows */
			.current-project-left-arrow { position: relative; bottom: -60px; left: 15px; float: left; width: 55px; height: 61px; background-image: url(images/left-arrow.png); }
			.current-project-left-arrow:hover { background-image: url(images/left-arrow-rollover.png); }
			.current-project-left-arrow-disabled, .current-project-left-arrow-disabled:hover { background-image: url(images/left-arrow-disabled.png); } /* class used to disable the arrow when the project slider is all the way to the left */
			.current-project-caption-wrapper { position: relative; bottom: -63px; float: left; left: 20px; width: 360px; height: 55px; overflow: hidden; color: #CCCCCC; font-size: 12px; }
				.current-project-caption { position: relative; top: 0px; }
				.current-project-caption-block { height: 55px; font-size: 11px; }
			.current-project-right-arrow { position: relative; bottom: -60px; right: 15px; float: right; width: 55px; height: 61px; background-image: url(images/right-arrow.png); }
			.current-project-right-arrow:hover { background-image: url(images/right-arrow-rollover.png); }
			.current-project-right-arrow-disabled, .current-project-right-arrow-disabled:hover { background-image: url(images/right-arrow-disabled.png); } /* class used to disable the arrow when the project slider is all the way to the right */
	#site-footer { margin: auto; position: relative; top: 50px; } /*container for the left and right footers */
		#left-footer { float: left; width: 50%; }
		#right-footer { float: right; width: 50% }
			#right-footer-nav { position: relative; left: 190px; }
				.right-footer-nav-link { float: left; padding-right: 40px; }
				#right-footer-sub { position: relative; float: left; }
					.footer-nav-link-sub { position: absolute; padding-top: 15px; }
					.sub-resources { left: -50px; width: 210px; }
					.sub-contact { left: 20px; width: 280px; text-align: center; }
						.footer-nav-link-sub-wrapper { height: 100px; display: none; }
						.footer-nav-link-sub-image { float: left; padding-right: 10px; }