h2 {text-align: center; margin: 10px;}
			#questionSpace {
				border: solid grey 1px;
				width: 400px; height: 100px;}
			#answerSpace {
				border: solid grey 1px;
				width: 400px; height: 170px;}
			#vikingPic {
				position: relative;
				top: -170px;
				left: 110px;
				visibility: hidden;
				}
			#successMessage {
				color: blue;
				font-weight: bold;
				visibility: hidden;
				}
			#hintMessage {
				color: blue;
				font-weight: bold;
				visibility: hidden;
				}
			#imageSpace {
				position: relative;
				top: -274px;
				left: 402px;
				border: solid grey 1px;
				width: 272px; height: 272px;
				}
			#imageSpace img {width: 270px; height: 270px;}
			#finalAnswer {visibility: hidden;}
			#nextQuestion {visibility: hidden;}
			#startOver {visibility: hidden;}
			
			.selector {text-align:center; border: solid grey 2px; height: 16px; width: 16px; border-radius: 5px; position: relative; margin: 0 0 0 0; top: 3px;}
			.answer {position: relative; top: -15px;left: 24px; height: 16px; }
			
		/*  This div class is the container for our menu.
    It defines attributes for everything inside. */
			.wrapper {
				font-family: "Helvetica";
				font-size: 14px;
				width: 400px;
				}
				
/*  This ul class defines how your menu options
    will be arranged and also gives us a nice 
    dividing line between the menu and the content. */
			.tabs {
				/*text-align: center;*/
				list-style: none;
				position: relative;
				left: 10px;
				margin: 0px;
				padding: 0;
				line-height: 26px;
				color: #0088CC;
				border-bottom: 1px solid #DDDDDD;
				}

/*  This defines the look of the individual tabs of your menu when they are contained in a tabs class ul */
			.tabs li {
				text-align: center;
				width: 50px;
				margin-bottom: -1px;
				padding: 3px 10px 0 10px;
				border: 1px solid #DDDDDD;
				background: #EFEFEF;
					/*  inline-block tells the browser to arrange the list elements in a line rather than each element on its own line. */
				display: inline-block;
					/* The attributes here round the top left and right corners of the tabs. */
				border-top-left-radius: 6px; 
				border-top-right-radius: 6px;
				border-bottom-right-radius: 6px;
				border-bottom-left-radius: 6px;
				}
				
/* This defines what a tab should look like when selected */
			.tabs li.selected {
				background: #FFF;
				border-bottom-color: transparent;
				}
/* This defines what a tab should look like when completed */
			.tabs li.completed {
				background: #FF4;
				border-bottom-color: transparent;
				}
/* This defines how a tab looks when your mouse hovers above it 
			.tabs li:hover {
				color: #333333;
				cursor: pointer;
				background: #FFFFFF;
				}	*/

/*  This centers all of the text within a page element */
			.page {
				text-align: center;
				display: none;
				}
				
/*  This overrides the text centering we defined above if
    the text is within a list and also tells your browser
    not to put bullet points next to the text. */
			.page li {
				text-align: left;
				list-style-type: none;
				height: 25px;
				}
/*  This creates a class for */				
			.shown {
				display: block;
				}