/*
 * IAT381 The Subrion Inquisition Stylesheet
 * by Hasiba Arshad & Kim Yamasaki
 *
*/


/* ========================================================================
 * General styles
 * ========================================================================
*/
body{
	background-image:url('../img/blackbg.png');
	background-repeat:repeat;
	margin:0;
	padding:0;
	font-family:"Arial", sans-serif;
	font-size:12px;
	color:#545D43;
}

a:link, a:visited, a:active
{
	color:#E67575;
	text-decoration:none; /* Remove default underline */

}

a:hover
{
	color:#A65A5A;

}


/* ========================================================================
 * Header & Nav styles
 * ========================================================================
*/


header
{
	background-image:url('../img/content/headerbg.png');
	background-repeat:repeat-x; /* repeats the background along the x-axis */
	height:363px;
	width:100%; /* makes sure the bg extends with the full browser width */
	min-width:900px; /* when making browser window smaller, keep the minimum width at at least 900px wide*/
	color:#495235;
}

header.home /* Use a different header bg image for the landing page (index.html) */
{
	background-image:url('../img/home/headerbg.png');
	background-repeat:repeat-x;
	height:380px;
}

.clear /* Used to clear floats */
{ 
	clear:both;
}

.logo /* The main logo/title on the top left of the page */
{
	background-image:url('../img/logo.png');
	width:339px;
	height:310px;
	float:left;
	background-repeat:no-repeat;
	border:0; /* Since it's a link, make sure it doesn't get an ugly border */
}

.logo:hover /* Change color of logo to yellow on hover */
{	
	background-image:url('../img/logob.png');
	background-repeat:no-repeat;
}


.caption /* Formatting for the text under the logo */
{
	width:280px;
	margin-left:35px;
	margin-top:250px;
	font-size:17px;
	color:#495235;
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif; /* GreyscaleBasic is embedded in fonts.css */
}

.caption a
{
	text-decoration:none;
}

.dino1 /* For intro page's dino */
{
	background-image:url('../img/dinohome.png');
	background-repeat:no-repeat;
	width:222px;
	height:215px;
	position:relative; /* Allows movement based on the html element's  original position */
	top:90px;
	left:15px;
	float:left;
		
}

.dino2  /* For audience page's dino */
{ 
	background-image:url('../img/dinoaudience.png');
	background-repeat:no-repeat;
	width:222px;
	height:205px;
	position:relative;
	top:98px;
	left:10px;
	float:left;
		
}
.dino3  /* For test page's dino */
{
	background-image:url('../img/dinotest.png');
	background-repeat:no-repeat;
	width:222px;
	height:191px;
	position:relative;
	top:115px;
	left:10px;
	float:left;
		
}
.dino4  /* For conclusion page's dino */
{
	background-image:url('../img/dinoresults.png');
	background-repeat:no-repeat;
	width:222px;
	height:201px;
	position:relative;
	top:115px;
	left:15px;
	float:left;
		
}

.dino5 /* For landing page's dino */
{
	background-image:url('../img/dinointro.png');
	background-repeat:no-repeat;
	width:222px;
	height:185px;
	position:relative;
	top:122px;
	left:15px;
	float:left;
		
}


.containerheader  /* Specifies a fixed width for the header's contents */
{
	height:363px;
	width:900px;
	margin: 0 auto;
	border:0;
	text-decoration:none;
}

.container, footer  /* Specifies a fixed width for general content */
{
	margin:0 auto;
	width:900px;
	font-family:"Arial", sans-serif;
	font-size:12px;
	
}

nav ul li
{
	list-style:none; /* Makes the li elements be on a single line */
	padding:0;
	margin:0;
	text-align:center;

}

nav /* The main navigation in the header */
{
	position:relative;
	margin:0;
	padding:0;
	top:87px;
	left:25px;
	width:294px;
	height: 100px;
	float:left;
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;		
}

ul
{
	margin:0;
	padding:0;	
	height:inherit;
}

.nav1  /* Introducing link */
{
	background-image:url('../img/nav1.png');
	background-repeat:no-repeat;
	height:59px;
	width:294px;
}

.nav1 a
{
	position:relative;
	top:17px;
}

.nav1:hover
{
	background-image:url('../img/nav1b.png');
	background-repeat:no-repeat;
}



.nav2  /* Audience link */
{
	background-image:url('../img/nav2.png');
	background-repeat:no-repeat;
	height:51px;
	width:294px;

}

.nav2 a
{
	position:relative;
	top:10px;
}

.nav2:hover
{
	background-image:url('../img/nav2b.png');
	background-repeat:no-repeat;
}

.nav3  /* Tests link */
{
	background-image:url('../img/nav3.png');
	background-repeat:no-repeat;
	height:54px;
	width:294px;

}

.nav3 a
{
	position:relative;
	top:13px;
}

.nav3:hover
{
	background-image:url('../img/nav3b.png');
	background-repeat:no-repeat;
}

.nav4  /* Conclusion link */
{
	background-image:url('../img/nav4.png');
	background-repeat:no-repeat;
	height:55px;
	width:294px;
}	

.nav4 a
{
	position:relative;
	top:14px;
}

.nav4:hover
{
	background-image:url('../img/nav4b.png');
	background-repeat:no-repeat;
}

nav ul li a:link, nav ul li a:visited, nav ul li a:hover, nav ul li a:active /* Keep text color the same green color in the nav links */
{
	text-decoration:none;
	color: #495235;
	font-size: 20px;
	display:block;
	
}

.h1BG /* Repeating horizontal background for the big page heading */
{
	background-image:url('../img/content/h1bg.png');
	background-repeat:repeat-x;
	position:relative;
	height:101px;
	width:100%; /* makes sure the bg extends with the full browser width */
	min-width:900px;
	margin:0;
	padding:0;
}


h1 /* Big page heading formatting */
{
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;
	width:900px;
	margin: 0 auto;
	position:relative;
	color:#C42727;
	font-size:48px;
	padding-top:15px;
}

/* ========================================================================
 * Content styles
 * ========================================================================
*/

.content /* Main container for all content */
{
	background-image:url('../img/content/contentbg.png');
	width:100%;
	min-width:900px;
	margin-top:-30px; /* Must have the white underneath h1bg's transparent shadow */
	padding-top:55px;
	padding-bottom:25px;

}

.contentCenterAlign /* centers the content & gives it a fixed width */
{
	margin:0 auto;
	width:900px;
}

h2 /* The headings on the left side of the site */
{
	width:170px;
	margin:0;
	padding:0;
	float:left;
	color:#C42727;
	font-family: "GreyscaleBasicBold", "Arial", sans-serif;
	font-size:22px;
	padding-top:9px;
}

h3,h4,h5
{
	margin:0;
	padding:0;
	color:#C42727;
	font-weight:100;
	font-size:15px;
	margin-bottom:5px;
}

.contentText /* The text corresponding to h3 headers */
{
	width:650px;
	margin-left:210px;
	padding-top:10px;
	color:#545D43;
}

p
{
	margin-top:0;
	padding-top:0;
	margin-bottom:20px;
	line-height:1.3;
	font-size:14px;
}

/* ========================================================================
 * Test page styles
 * ========================================================================
*/
.testLeftButton 
{
	background-image:url('../img/content/testlink1.png');
	background-repeat:no-repeat;
}

.testRightButton
{
	background-image:url('../img/content/testlink2.png'); 
	background-repeat:no-repeat;
	margin-left:10px;
}

.testRightButton, .testLeftButton
{
	float:left;
	margin-top:-10px;
	text-align:center;
	padding-top:10px;
	width:210px;
	height:40px;
	display:block; /* Make the current element a block element to allow for margins etc */
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;
	font-size:15px;
}

/* Ensure the text stays green */
.testRightButton:link, .testRightButton:hover, .testRightButton:active, .testRightButton:visited,
.testLeftButton:link, .testLeftButton:hover, .testLeftButton:active, .testLeftButton:visited
{
	color:#495235;
}

.testRightButton:hover  /* Yellow BG on hover */
{
	background-image:url('../img/content/testlink2b.png'); 
}

.testLeftButton:hover  /* Yellow BG on hover */
{
	background-image:url('../img/content/testlink1b.png'); 
}

.testThumb /* Floated thumbnail style */
{
	float:left; 
	margin-right:20px;
	margin-bottom:40px;
	width:200px;
	height:150px;
}

.widePic  /* For large images that should take up the full width of available space */
{
	width:650px;
	height:400px;
	margin:10px 0;
}

ol  /* Used on the Task Flow pages. Edits the numbers only */
{
	margin:0;
	padding:0;
	color:#93C425;
	font-size:30px;
	font-weight:100;
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;
	margin-top:10px;
}

ol img
{
	vertical-align:text-top; /* Make the numbers appear aligned to the top of the large image */
	margin-bottom:15px;
	margin-top:-25px; /* For lining up the number with the image properly */
	height:400px;
	width:650px;
}

ol p /* Edits the content of the ol */
{
	color:#545D43;
	font-family:"Arial", sans-serif;
}

ol li /* Have each li end with a divider line */
{
	border-bottom:1px dotted #aaa;
	margin-bottom:40px;
}

.linkgroup /* Container for the group of links on each Tests page */
{
	margin-top:20px;
	margin-left:210px;
	width:650px;
	margin-bottom:20px;
}

.noBorder  /* Remove any borders */
{
	border:none;
}

.testFade  /* Give non-current links a slightly different look */
{
	opacity:0.7;
}

.dividerSmall /* Generic divider with a fixed width */
{
	border-bottom:1px dotted #aaa;
	width:650px;
	margin-left:210px;
	margin-top:20px;
	margin-bottom:30px;
}

.dividerBig /* Generic divder with a flexible width */
{
	border-bottom:1px dotted #aaa;
	margin-bottom:30px;
}

/* ========================================================================
 * Footer styles
 * ========================================================================
*/

.footerBorder /* The horizontal line separating content from footer */
{
	background-image:url('../img/content/footerborder.png');
	background-repeat:repeat-x;
	height:36px;
	width:100%;
	min-width:900px;
}

.contact /* For the footer title */
{
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;
	color:#DAEAC0;
	font-size:24px;
	padding-top:15px;
}

.footerText /* For dark green footer text */
{
	padding-top:15px;
	color:#4C5834;
	font-size:12px;
	position:relative;
	float:left;
	width:380px;
	padding-bottom:30px;
}

.footerText p /* For copyright */
{
	margin-top:15px;
	font-size:12px;
}

.footerHasiba /* Hasiba's name */
{
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;
	font-size:15px;
	position:relative;
	float:left;
	width:200px;
	top:16px;
	left:175px;
	color:#DAEAC0;

}

.footerHasibaEmail /* Hasiba's email */
{
	font-family:"Arial", sans-serif;
	width:200px;
	color:#4C5834;
	font-size:12px;
	margin-top:5px;
}

.footerKim /* Kim's name */
{
	font-family:"GreyscaleBasicRegular", "Arial", sans-serif;
	font-size:15px;
	position:relative;
	float:left;
	top:16px;
	left:180px;
	color:#DAEAC0;

}

.footerKimEmail  /* Kim's email */
{
	font-family:"Arial", sans-serif;
	font-size:12px;
	margin-top:5px;
	color:#4C5834;
}