/* CSS Document */

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Typography
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

a {
	color: #B0081F;
	text-decoration: none;
	}
	
.redoverride {
	color: #b0081f;
	}

a:hover {
	color: #561011;
	text-decoration: none;
	}

.linkwhite {
	color: #FFFFFF;
	}

img {
	text-decoration: none;
	border: none;
	}

h1, h2, h3 {
	margin-top: 0;
	margin-bottom: 0;
	color: #696969;
	font-family: Georgia, "Times New Roman", Times, serif; 	/*Needs font size*/
	font-weight:100;
	}

.lead {
	font-size: 30px;
	/*Use special formatting here*/
	}

.secondary {
	font-size:30px;
	}

.third {
	font-size: 20px;
	}

.hi {
	background: url(../images/serifa_hi.gif) top left no-repeat;
	height: 48px;
	margin-top: 8px;
	padding-bottom: 8px;
	}

.mainblogtitle { 											/*For blog titles in the "Trollspeak" section of the main page*/
	width: 350px;
	color: #b0081f;
	font-family: bold Tahoma, Helvetica, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin-left: 15px;
	margin-top: 12px;
	margin-bottom: 0;
	}

.top {
	margin-top: -2px;
	}

.mainsmalltype {											/*For main page blog dates and project names*/
	display: block;
	color: #696969;
	font-family: Tahoma, Helvetica, Geneva, sans-serif;
	font-size: 10px;
	font-weight: 400;
	}

.musiclist p {
	background: url(..images/blog/icon_cd.png) left top no-repeat;
	height: 15px;
	width: 15px;
	}

.nudge {
	/*width: 350px;*/
	margin-top: -1px;
	margin-left: 15px;
	}

.bottommargin {
	margin-bottom: 20px;
	}

.block {
	width: 350px;
	}

.blocklist {
	width: 130px;
	clear: both;
	}


.footer_nav {												/*For light gray footer navigation*/
	margin-top: 100px;
	margin-bottom: 0;
	font-size: 12px;
	color: #e3e3e3;
	font-family: Tahoma, Helvetica, Geneva, sans-serif;
	text-align: center;
	}

.nospace {
	margin-top: 20px;
	}

.footer_jargon {											/*For footer legal jargon and such*/
	color: #9c2839;
	font-family: Tahoma, Helvetica, Geneva, sans-serif;
	font-size: 10px;
	padding: 0;
	margin: 1.5em 0 0 0;
	text-align: center;
	}

.cc_style {
	color: #9c2839;
	font-family: Tahoma, Helvetica, Geneva, sans-serif;
	font-size: 10px;
	text-align: right;
	}

.redtext {
	color: #b0081f;
	}
	
.ital {
	font-style: italic;
	}

.redbold {
	font-weight:bold;
	color: #b0081f;
	}

.margintop {
	margin-bottom: 5px;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Blog Styling
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Creative Commons Elements
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

#cc {
	height: 15px;
	width: 80px;
	position: absolute;
	right: 5%;
	bottom: 1%;
	}

#cc_contact {
	height: 15px;
	width: 80px;
	position: absolute;
	right: 5%;
	top: 95%;
	}

#cc_about {
	height: 15px;
	width: 80px;
	position: absolute;
	right: 5%;
	top: 95%;
	}

#cc_friends {
	height: 15px;
	width: 80px;
	position: absolute;
	right: 5%;
	top: 96%;
	}

#cc_projects {
	height: 15px;
	width: 80px;
	position: absolute;
	right: 5%;
	top: 97%;
	}

#cclink {
	background:transparent none repeat scroll 0 0;
	border: none;
	float:right;
	}

.spacer {		/*These are the 1px-tall lines to separate list items*/
	height: 1px;
	width: 126px;
	background: url(../images/contact/spacer.png) no-repeat;
	}

.space {		/*This is just a clearing element*/
	clear: both;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Main Layout and Positioning
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

body {
	background: #880114 url(../images/UpperBar03.jpg) top repeat-x;
	margin: 0;
	padding: 0;
	}
	
html {
	margin: 0;
	padding: 0;
	}

#container {
	/*height: 167px;*/
	width: 978px;
	margin: 0 auto;	/*This "auto" tag is the only thing centering everything on the page! Delete it, and everything shifts left. */
	padding: 0;
	position: relative;			
	}

#subcontainer {
	width: 978px;
	margin: 0;
	padding: 0;
	background: transparent url(../images/background_fullwidth.png) repeat-y scroll 0 0;
	}

#header {
	height: 85px;
	width: 978px;
	margin: 0;
	padding: 0;
	/*background: url(../images/JTroll_logoblock.jpg) top no-repeat;
	background-position: left top;*/
	}

#headerlink {
	background:transparent none repeat scroll 0 0;
	border: 0 none;
	padding: 0;
	height: 0;
	}

#headerlink img {
	display: block;
	margin: 0 0 6px 46px;
	}

#navbar {	
	height: 42px;
	width: 978px;
	margin-top: 1px;
	padding: 0;
	position:relative;

	}

#maincontent {   /*Don't add padding to this.... Add any padding to a subdiv.*/
	height: 625px;
	width: 978px;
	margin: 0 auto;
	margin-top: 6px;
	padding: 0;
	/*position: relative;  How do I position the main content window to be 5px below the navbar?*/
	background: #FFFFFF url(../images/main_top.png) top no-repeat;
	}
	
#maincontent_alt { /*For use with project alt layouts*/
	/*height: 1525px;*/			/*Commented out; this was the specific height of the NVIDIA Project page*/
	width: 700px;
	margin: 0;
	margin-top: 0; /*Was 1px*/
	padding: 0;
	float: left;
	/*position: relative;*/
	background: #FFFFFF url(../images/main_alt_top.png) top no-repeat;
	}
	
#maincontentbox {
	margin-top: -8px;
	float: left;
	padding: 40px 0 0 80px;
	width: 821px;
	}

#maincontentbox_alt { /*For use with alt layouts, such as blog, archives, individual projects*/
	width: 675px; /*changed from 650px*/
	margin-top: 10px;
	float: left;
	/*padding: 30px 0 0 15px;*/
	margin-left: 15px; /*changed from 10px*/
	display: inline;
	}

.featurebox {
	float: left;
	margin-left: -15px; /*should be 65px*/
	margin-top: 65px;
	height: 262px;
	width: 380px; /*Could be 379*/
	
	}

.right {
	float: right;
	margin-right: 15px;
	width: 350px;
	}

#mainbottom {
	height: 90px;
	width: 978px;
	margin: 0 auto;
	margin-top: 0;
	padding: 0;
	position: relative;
	background: url(../images/bottombar.png) top no-repeat;
	}

#bottom_alt {
	height: 16px;
	width: 978px;
	margin: 0;
	margin-top: 35px;
	float: left; /*Should probably take out... this is just for testing purposes, to see if I can get the right-hand hashes to flow underneath the bottom_alt with the hidden property*/
	position:inherit;
	background: url(../images/bottom_alt.png) scroll left bottom no-repeat;
	clear: both;
	z-index: 100;
	}

hr {
	clear: both;
	visibility: hidden;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Featured Project Block
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/	

#featuredprojects {
	margin: 0;
	height: 80px;
	width: 380px;
	background: url(../images/bar_featuredprojects.png) top no-repeat;
	}

#featuredprojectslist {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	}

#featuredprojectslist li {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	overflow: hidden;
	}

#featuredprojectslist li a {	
	display: block;
	height: 0;
	padding-top: 65px;
	padding-bottom: 0;
	background: none;
	overflow: hidden;
	border: 0;
	}

/*STANDARD BUTTONS*/
#featuredprojectslist li a#NVIDIA {
	margin-top: -10px;
	padding: 0;
	width: 380px;
	height: 80px;
	background: url(../images/NVM15_06-07.png) top no-repeat;
	}
	
#featuredprojectslist li a#PRS {
	margin-top: -10px;
	padding: 0;
	width: 380px;
	height: 80px;
	background: url(../images/PRS_36-37_FTour.png) top no-repeat;
	}

#featuredprojectslist li a#futureus {
	margin-top: -10px;
	padding: 0;
	width: 380px;
	height: 80px;
	background: url(../images/index_futureus.png) top no-repeat;
	}

#featuredprojectslist li a#three {
	margin-top: -10px;
	padding: 0;
	width: 380px;
	height: 80px;
	background: url(../images/index_three.png) top no-repeat;
	}

#featuredprojectslist li a#wattbot {
	margin-top: -10px;
	padding: 0;
	width: 380px;
	height: 80px;
	background: url(../images/index_wattbot.png) top no-repeat;
	}

/*HOVER BUTTONS*/
#featuredprojectslist li a#NVIDIA:hover {
	background: url(../images/NVM15_06-07.png) no-repeat 0 -80px;
	}

#featuredprojectslist li a#PRS:hover {
	background: url(../images/PRS_36-37_FTour.png) no-repeat 0 -80px;
	}

#featuredprojectslist li a#futureus:hover {
	background: url(../images/index_futureus.png) no-repeat 0 -80px;
	}

#featuredprojectslist li a#three:hover {
	background: url(../images/index_three.png) no-repeat 0 -80px;
	}

#featuredprojectslist li a#wattbot:hover {
	background: url(../images/index_wattbot.png) no-repeat 0 -80px;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Trollspeak Block
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/	

#trollspeak {
	margin: 0;
	height: 70px;
	width: 380px;
	background: url(../images/bar_trollspeak.png) top no-repeat;
	}
#trollspeaklist {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	}

#trollspeaklist li {
	display: block;
	background: none;
	overflow: hidden;
	}

#trollspeaklist li a {	
	display: block;
	background: none;
	overflow: hidden;
	border: 0;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Projects headings for logo design
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/	

.header_logofinal {
	background: url(../images/header_logofinal.png) top left no-repeat;
	margin: 30px 0 10px 10px;
	height: 30px;
	}

.header_logoearlierdesigns {
	background: url(../images/header_logoearlierdesigns.png) top left no-repeat;
	margin: 30px 0 10px 10px;
	height: 30px;
	}

.header_brandguidelineexamples {
	background: url(../images/header_brandguidelineexamples.png) top left no-repeat;
	margin: 30px 0 10px 10px;
	height: 30px;
	}

.header_analyzethat {
	background: url(../images/header_analyzethat.png) top left no-repeat;
	margin: 30px 0 10px 10px;
	height: 30px;
	}

.header_additionalpages {
	background: url(../images/header_additionalpages.png) top left no-repeat;
	margin: 30px 0 10px 10px;
	height: 30px;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Navigation Menu
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

#navigation {
	display: block;
	list-style: none;
	margin: 0px 0px 0 0;
	padding: 0;
	overflow: hidden;
	height: 43px;
	}

#navigation li {
	display: block;
	float: left;
	height: 65px;
	margin: 0;
	padding: 0;
	background: none;
	overflow: hidden;
	}

#navigation li a {	
	display: block;
	height: 0;
	padding-top: 65px;
	padding-bottom: 0;
	background: none;
	overflow: hidden;
	border: 0;
	}

/*STANDARD BUTTONS*/
#navigation li a#menu_trollblog {
	width: 174px;
	/*height: 43px;*/
	background: url(../images/toolbar/menu_trollblog.png) no-repeat;
	background-position:top;
	}

#navigation li a#menu_projects {
	width: 374px;
	background: url(../images/toolbar/menu_projects.png) no-repeat;
	}

#navigation li a#menu_archives {
	width: 112px;
	background: url(../images/toolbar/menu_archives.png) no-repeat;
	}

#navigation li a#menu_friends {
	width: 103px;
	background: url(../images/toolbar/menu_friends.png) no-repeat;
	}
	
#navigation li a#menu_about {
	width: 98px;
	background: url(../images/toolbar/menu_about.png) no-repeat;
	}

#navigation li a#menu_contact {
	width: 117px;
	background: url(../images/toolbar/menu_contact.png) no-repeat;
	}

/*HOVER BUTTONS*/
#navigation li a#menu_trollblog:hover {
	background: url(../images/toolbar/menu_trollblog.png) no-repeat 0 -42px;
	}

#navigation li a#menu_projects:hover {
	background: url(../images/toolbar/menu_projects.png) no-repeat 0 -42px;
	}

#navigation li a#menu_archives:hover {
	background: url(../images/toolbar/menu_archives.png) no-repeat 0 -42px;
	}

#navigation li a#menu_friends:hover {
	background: url(../images/toolbar/menu_friends.png) no-repeat 0 -42px;
	}
	
#navigation li a#menu_about:hover {
	background: url(../images/toolbar/menu_about.png) no-repeat 0 -42px;
	}

#navigation li a#menu_contact:hover {
	background: url(../images/toolbar/menu_contact.png) no-repeat 0 -42px;
	}

/*SELECTED BUTTONS*/
body#page_blog ul#navigation li a#menu_trollblog {
	background: url(../images/toolbar/menu_trollblog.png) no-repeat 0 -83px;
	}

body#page_projects ul#navigation li a#menu_projects {
	background: url(../images/toolbar/menu_projects.png) no-repeat 0 -83px;
	}

body#page_archives ul#navigation li a#menu_archives {
	background: url(../images/toolbar/menu_archives.png) no-repeat 0 -83px;
	}

body#page_friends ul#navigation li a#menu_friends {
	background: url(../images/toolbar/menu_friends.png) no-repeat 0 -83px;
	}

body#page_about ul#navigation li a#menu_about {
	background: url(../images/toolbar/menu_about.png) no-repeat 0 -83px;
	}
	
body#page_contact ul#navigation li a#menu_contact {
	background: url(../images/toolbar/menu_contact.png) no-repeat 0 -83px;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Sidebars
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/		

#sidebar {
	width: 278px;
	}


.sidebar_featuredprojects {
	width: 278px;
	height: 72px;
	float: left;
	margin: 0;
	padding: 0;
	background: url(../images/sidebars/sidebar_featuredprojects2.png) top no-repeat;
	}

.sidebar_whatitis {
	width: 278px;
	height: 61px;
	float: left;
	margin: 0;
	padding: 0;
	background: url(../images/sidebars/sidebar_whatitis.png) top no-repeat;
	}

.sidebar_box {
	width: 278px;
	/*height: 171px;*/	/*Took out the height because it's just the height of Featured Projects*/
	margin: 0;
	float: left;
	background: #FFFFFF url(../images/sidebar_crease.png) top left repeat-y;
	}

.sidebar_content {
	padding-left: 35px;
	padding-right: 35px;
	margin-top: 10px;
	}

.sidebar_stripes {
	width: 278px;
	/*height: 49em;*/
	float: left;
	margin: 0;
	background: url(../images/sidebars/sidebar_stripes.png) top left repeat-y;
	}

.sidebar_bottom {
	width: 278px;
	height: 12px;
	margin: 0;
	padding: 0;
	float: left;
	background: url(../images/sidebar_bottom2.png) bottom left no-repeat;
	}

.sidebar_floatleft {
	float: left;
	}

.sidebar_bottomlight {
	width: 278px;
	height: 13px;
	margin: 0;
	padding: 0;
	float: left;
	background: url(../images/sidebar_bottomlight.png) bottom left no-repeat;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Back Button
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

#back_nav {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 72px;
	/*width: 278px;*/
	}

#back_nav li {
	display: block;
	float: left;
	width:auto;
	margin: 0;
	padding: 0;
	background: none;
	overflow: hidden;
	}

#back_nav li a {	
	display: block;
	height: 0;
	background: none;
	overflow: hidden;
	border: 0;
	}

/*STANDARD BUTTONS*/
#back_nav li a#back {
	width: 278px;
	height: 72px;
	background: url(../images/sidebars/sidebar_back_all.png) top no-repeat;
	}

/*HOVER BUTTONS*/
#back_nav li a#back:hover {
	background: url(../images/sidebars/sidebar_back_all.png) no-repeat 0 -72px;
	}

/*-----------------------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////////////////
	Right Project Nav Menu
/////////////////////////////////////////////////////////////////////////////////////
-----------------------------------------------------------------------------------*/

#right_nav {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 61px;
	}

#right_nav li {
	display: block;
	float: left;
	width:auto;
	margin: 0;
	padding: 0;
	background: none;
	overflow: hidden;
	}

#right_nav li a {	
	display: block;
	height: 0;
	background: none;
	overflow: hidden;
	border: 0;
	}

/*STANDARD BUTTONS*/
#right_nav li a#prev {
	width: 139px;
	height: 61px;
	background: url(../images/sidebars/sidebar_prev_all.png) top no-repeat;
	}
	
#right_nav li a#next {
	width: 139px;
	height: 61px;
	background: url(../images/sidebars/sidebar_next_all.png) top no-repeat;
	}


/*HOVER BUTTONS*/
#right_nav li a#prev:hover {
	background: url(../images/sidebars//sidebar_prev_all.png) no-repeat 0 -61px;
	}
	
#right_nav li a#next:hover {
	background: url(../images/sidebars/sidebar_next_all.png) no-repeat 0 -61px;
	}




.actiontest {       /*This is a test, taken from some OkCupid code, which makes a centered paragraph class that has a rounded-corner, beveled box around it. It's pretty keen! It works especially well on a slightly gray background (since the bottom stroke is white).*/
	-moz-border-radius:5px 5px 5px 5px;
	background:none repeat scroll 0 0 #E8F2E0;
	border-color:#CBE0BB #E8F2E0 #FFFFFF;
	border-left:1px solid #E8F2E0;
	border-right:1px solid #E8F2E0;
	border-style:solid;
	border-width:1px;
	color:#539722;
	font-size:14px;
	line-height:16px;
	margin:0 15px 30px;
	padding:13px 17px;
	text-align:center;
	width:auto;
	}