/* width = 640px  */

@media (max-width: 980px){

	#slideshow, 
	#main #image-area .steps li, 
	#wisdom-footer, 
	#main #checklist-button .click-here, 
	#main #checklist-button h3 { display: none; }
	
	html, body { background: #ffffff; min-width: 640px; }
	
	#main, #content, #footer-content { width: 640px; padding: 0; margin: 0; }
	#wrap { background: #ffffff; }
	header, #content, footer { width: 640px; margin: 0 auto; padding: 0px; }
	header { height: 94px; border-bottom: 4px; }
	header h2 { margin: 0 auto; left: 0; top: 10px; }
	
	#main-heading { background: transparent url(../img/mobile/main-heading.png) 0 0 no-repeat; position: relative; margin: 0 auto; left: 0; top: 0; width: 640px; height: 109px; }
	
	#main { background: none; z-index: 999999; }
	#container { height: auto; }

	/* image area */
	#main #image-area {	
	   	width: 640px; height: auto;    	
		background: transparent url(../resize.php/hills-with-office.png?width=640&image=/img/silhouettes/hills-with-office.jpg) 0 bottom no-repeat;	        
		margin: 0px; margin-top: 52px;
		-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
		-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;	
	}
	
	#main #image-area .blue-area { position: relative; top: 0; width: 510px; min-height: 0px; padding: 20px; }
	
	#step-1 #main #image-area .blue-area h1 { margin: 0 0 10px 0; line-height: 30px; }

	#image-area [href^="tel:"], #image-area [href^="tel:"]:link, #image-area [href^="tel:"]:visited, #image-area [href^="tel:"]:active {
		background: #F9C268; color: #313131 !important; display: inline-block; text-decoration: none; padding: .2em .4em; font-size: 1.2em;
		-moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em;	
	}

	#main #image-area .start-button, #main #image-area #next-button {
		background: transparent url(../resize.php/next-button.png?width=60&image=/img/mobile/next-button.png) 0 0 no-repeat;	
		top: auto; bottom: 12px; left: 238px; width: 60px; height: 60px; z-index: 999999;
	}
	
	#main #image-area .start-button:hover, #main #image-area .start-button:active,
	#main #image-area #next-button:hover, #main #image-area #next-button:active {
		background: transparent url(../resize.php/next-button.png?width=60&image=/img/mobile/next-button-over.png) 0 0 no-repeat !important;
	}
	
	#main #image-area #next-button { top: -61px; bottom: auto; right: 0px; left: auto; }
	
	#main #image-area #back-button {
		background: transparent url(../resize.php/back-button.png?width=60&image=/img/mobile/back-button.png) 0 0 no-repeat;	
		top: auto; bottom: 12px; left: 238px; width: 60px; height: 60px; z-index: 999999;
	}
	
	#main #image-area #back-button:hover, #main #image-area #back-button:active {
		background: transparent url(../resize.php/back-button.png?width=60&image=/img/mobile/back-button-over.png) 0 0 no-repeat !important;
	}
	
	#main #image-area #back-button { top: -61px; bottom: auto; left: 6px; auto: auto; }
	#step-1 #main #image-area .blue-area input { height: 20px; font-size: 11px; }
	
	#main .add-contact-info-box, #main .info-box { 
		position: relative; right: auto; left: auto; top: auto; bottom: auto; background: none;  margin: 20px auto; padding: 20px; width: 570px; display: block; 
	}
	
	
	#main #checklist-button {
		background: transparent url(../img/mobile/orange-clipboard.png) 0 0 no-repeat;
		float: none; text-indent: -99999999px; width: 593px; height: 138px; margin: 0 auto; display: block;
	}	
	
	
	
	footer { height: 254px; padding-bottom: 20px; }
	footer ul { margin: 75px auto 0; width: 565px; }
	#footer-content { background-position: 50% 125px; padding-top: 20px; }
	#footer-content p { float: none; margin: 0 auto; }
	#footer-content #footer-nsw-gov { left: 122px; }
	
	/* steps */
	#main #image-area .steps { top: -52px; background: transparent url(../img/mobile/step-bg.png) 0 0 repeat-x; height: 52px; }
	
	#main #image-area .steps .active { display: block; }
	#main #image-area .steps .active a,
	#main #image-area .steps .active .step-13 { background: none; width: 640px; text-transform: uppercase; color: #434343; font-size: 25px; border-radius: none; padding: 3px 0 0 0; }
	#main #image-area .steps .active a:after { content: " OF 14"; }
	#main #image-area .nav-button { top: 0px; }
	
	#step-1 #main #image-area,	
	#step-8 #main #image-area,
	#step-9 #main #image-area,
	#step-11 #main #image-area,
	#step-12 #main #image-area,
	#step-13 #main #image-area,
	#step-14 #main #image-area,
	#step-15 #main #image-area { background: none; height: auto; }
	
	#step-4 #main #image-area { padding-top: 0; }
	
	#step-1b #image-area .extra-text,
	#step-2b #image-area .extra-text,
	#step-4b #image-area .extra-text,
	#step-7 #image-area .extra-text,
	#step-8 #image-area .extra-text,
	#step-11 #image-area .extra-text,
	#step-13 #image-area .extra-text { padding: 20px; }
	
	#step-5b #image-area .extra-text { padding: 20px 150px 20px 20px; }
	#step-5b .extra-text p { width: auto; }
	#step-5b #main #image-area .blue-area {
		padding-right: 163px; width: 457px; background-position: 507px 32px;
	}
	
	#step-2b #image-area .blue-area h1, #step-4b #image-area .blue-area h1 { margin-top: 7px; }
	
	#step-12 #image-area .blue-area { background-position: 491px 31px; }
	
	#main #image-area .ses-number-large { position: relative; display: block; top: auto; }
	
	#main #image-area #large-phone {
		 background: transparent url(../resize.php/large-phone.gif?width=77&image=/img/large-phone.gif) 0 bottom no-repeat;
		 width: 77px; height: 88px; top: 68px;
	}	
	
	#main #image-area #orange-people { display: block; left: 0; margin: 20px auto; position: relative; top: 0; }
	
	/* triggers, evacuate, contacts */
	#contacts { position: relative; display: block; top: auto; left: auto; }

	/*
	#step-6 .info-box,
	#step-9 .info-box,
	#step-10 .info-box { background: #ffffff; height: 91px; position: absolute; top: 30px; width: 229px; right: 0px; }
	*/
	
	#step-6 #contacts #add-contact-info,
	#step-9 #contacts #add-contact-info,
	#step-10 #contacts #add-contact-info { right: auto; left: 100px; }
	.contact-second-row { height: auto !important; }
	
	#step-6 .add-contact-info-box,
	#step-9 .add-contact-info-box,
	#step-10 .add-contact-info-box { float: right; width: 50px; display: none; background: #ffffff; margin: 0 auto; }
	#contacts-footer-info { position: relative; display: block; bottom: auto; left: auto; margin-top: 20px; }
	#contacts .contact { width: 112px; }	
	
	#step-6 #main #image-area,
	#step-9 #main #image-area,
	#step-10 #main #image-area { background: #ffffff; }
	
	
	/* sillhouettes */
	
	#step-2 #main #image-area.coast #coast,
	#step-4 #main #image-area.coast #coast {
		background: transparent url(../resize.php/coast.png?width=187&image=/img/silhouettes/coast.png) 0 bottom no-repeat;
		width: 187px; height: 61px;
	}
	
	#step-2 #main #image-area.creeks #creeks, 
	#step-4 #main #image-area.creeks #creeks {
		background: transparent url(../resize.php/creeks.png?width=287&image=/img/silhouettes/creeks.png) 0 bottom no-repeat;
		width: 287px; height: 67px;
	}
	
	#step-2 #main #image-area.tropical #tropical,
	#step-4 #main #image-area.tropical #tropical {
		background: transparent url(../resize.php/tropical.png?width=640&image=/img/silhouettes/tropical.png) 0 bottom no-repeat;
		width: 640px; height: 172px;	
	}
	
	#step-2 #main #image-area.bush #bush,
	#step-4 #main #image-area.bush #bush {
		background: transparent url(../resize.php/bush.png?width=288&image=/img/silhouettes/bush.png) 0 bottom no-repeat;
		width: 288px; height: 157px; left: 102px;
	}
		
	#step-4 #main #image-area.vision #vision {
		background: transparent url(../resize.php/vision.png?height=65&image=/img/silhouettes/vision.png) 0 bottom no-repeat;
		width: 58px; height: 65px;
	}

	#step-4 #main #image-area.hearing #hearing {
		background: transparent url(../resize.php/hearing.png?width=58&image=/img/silhouettes/hearing.png) 0 bottom no-repeat;
		width: 58px; height: 80px;
	}
	
	#step-4 #main #image-area.mobility #mobility {
		background: transparent url(../resize.php/mobility.png?width=55&image=/img/silhouettes/mobility.png) 0 bottom no-repeat;
		width: 55px; height: 62px;
	}
		
	#step-4 #main #image-area.otherdisability #otherdisability {
		background: transparent url(../resize.php/other.png?width=55&image=/img/silhouettes/other.png) 0 bottom no-repeat;
		width: 55px; height: 83px;
	}
		
	#step-4 #main #image-area.medication #medication {
		background: transparent url(../resize.php/medication.png?width=50&image=/img/silhouettes/medication.png) 0 bottom no-repeat;
		width: 50px; height: 95px;
	}
			
	#step-4 #main #image-area.aged #aged {
		background: transparent url(../resize.php/aged.png?width=40&image=/img/silhouettes/aged.png) 0 bottom no-repeat;
		width: 40px; height: 79px;
	}
		
	#step-4 #main #image-area.infants #infants {
		background: transparent url(../resize.php/infants.png?width=59&image=/img/silhouettes/infants.png) 0 bottom no-repeat;
		width: 59px; height: 60px;
	}
	
	#step-4 #main #image-area.schoolage #schoolage {
		background: transparent url(../resize.php/schoolage.png?width=30&image=/img/silhouettes/schoolage.png) 0 bottom no-repeat;
		width: 30px; height: 64px;
	}
		
	#step-4 #main #image-area.children #children {
		background: transparent url(../resize.php/schoolage.png?width=50&image=/img/silhouettes/children.png) 0 bottom no-repeat;
		width: 50px; height: 50px;
	}
		
	#step-4 #main #image-area.translation #translation {
		background: transparent url(../resize.php/translation.png?width=65&image=/img/silhouettes/translation.png) 0 bottom no-repeat;
		width: 65px; height: 99px;
	}
				
	#step-4 #main #image-area.pets #pets {
		background: transparent url(../resize.php/pets.png?width=65&image=/img/silhouettes/pets.png) 0 bottom no-repeat;
		width: 65px; height: 54px;
	}
	
	/* silhouette positions */
	#image-area .sil-1 {
		left: 300px !important;
		bottom: 20px !important;
	}
	
	#image-area .sil-2 {
		left: 241px !important;
		bottom: 30px !important;
	}
	
	#image-area .sil-3 {
		left: 362px !important;
		bottom: 30px !important;
	}
	
	#image-area .sil-4 {
		left: 432px !important;
		bottom: 48px !important;
	}
	
	#image-area .sil-5 {
		left: 172px !important;
		bottom: 37px !important;
	}
	
	#image-area .sil-6 {
		left: 283px !important;
		bottom: 76px !important;
	}
	
	#image-area .sil-7 {
		left: 142px !important;
		bottom: 44px !important;
	}
	
	#image-area .sil-8 {
		left: 454px !important;
		bottom: 22px !important;
	}
	
	#image-area .sil-9 {
		left: 543px !important;
		bottom: 54px !important;
	}
	
	#image-area .sil-10 {
		left: 538px !important;
		bottom: 114px !important;
	}
	
	#image-area .sil-11 {
		left: 122px !important;
		bottom: 55px !important;
	}
	
	.secondary-nav { display: block; }
	#step-1 .secondary-nav { display: none; }
	#main { padding-bottom: 65px; }
	
	header h6 { display: none; }
	
	
	
	/* updates */
	
	/* step-1 */	
	#main #image-area .blue-area { border-radius: 0; width: 600px; }	
	#step-1 #main #image-area { min-height: 0; }			
	#main #image-area .start-button { left: 554px; }	
	#how-to-use-button { position: relative; top: auto; right: auto; display: block; margin: 20px auto 0; }	
	#step-1 #main { padding-bottom: 0; }
	
	/* step-3 - calculator */	
	#step-3 #image-area .blue-area { background-position: 420px 44px; }	
	#step-3 #image-area .blue-area p { width: 385px; }	
	#step-3 #calculator-total { top: 71px; right: 41px; }	
	#step-3 label { font-size: 16px; margin-left: 14px; }	
	#step-3 .extra-text { padding: 20px; }
	#step-3 .extra-text .right-padding { padding-right: 0; }	
	#step-3 .extra-text p { width: 565px; }	
	#step-3 .extra-text .info-box { margin-top: 0; }		
	#step-3 .push-down .total-button { margin-top: 0; }		
	#step-3 input, #step-3 input:focus, #step-3 .extra-text div.total { width: 60px; margin-bottom: 20px; }
	
	
	
	/* step-7 */	
	#step-6 #image-area .blue-area { background-position: 440px 50px; }		
	#step-6 #image-area .blue-area p { width: 400px; }	
	#step-6 #image-area .extra-text { padding: 15px; background-position: 335px 138px; }
	#step-6 #image-area .extra-text p { width: 300px; }
		
	
	
	
	/* step-9 */
	#step-9 .step-9-content { padding: 15px; }		
	#step-9 .box { width: 125px; height: 140px; margin: 0 4px 4px 0; }	
	#step-9 .box:nth-child(4), #step-9 .box:nth-child(8) { margin-right: 0; }		
	#step-9 .box .title { font-size: 19px; line-height: 19px; margin-top: 5px; }	
	#step-9 .box .icon { margin: 9px auto 0; }	
	#step-9 .box.tourism .icon { margin: 8px 0 0; }	
	#step-9 .box .more-info-button { background-image: url(../img/more-info-button.png); width: 26px; height: 30px; }
		
	#step-9 .box.tourism .icon { background-image: url(../resize.php/tourism.png?height=66&image=/img/step-9/tourism.png); }
	
	#step-9 .box.technology .icon { 
		background-image: url(../resize.php/technology.png?height=59&image=/img/step-9/technology.png); 
		width: 83px;
	}
	
	#step-9 .box.other .icon { 
		background-image: url(../resize.php/other.png?height=75&image=/img/step-9/other.png); 
		width: 89px;
	}	
	
	/* step 9 - wider select box for tablets */
	#step-9 #select-box { width: 435px; margin-left: 17px; }
	#step-9 #select-box .select { 
		background: transparent url(../img/select-bg.png) 0 0 repeat-y; width: 435px; padding: 0 9px; margin-top: 34px;  
	}
	#step-9 #select-box .select-top { 
		background: transparent url(../img/select-bg-top.png) 0 bottom no-repeat; 
	}
	#step-9 #select-box .select .multi-option, 
	#step-9 #select-box .select .option, 
	#step-9 #select-box .select .parent-option { width: 383px; }
	
	#step-9 #select-box .select .multi-option { width: 383px; }
	
	#step-9 #select-box .select .multi-option:hover { width: 380px; }
	
	#step-9 #select-box .select .option:hover { width: 380px; }
	
	#step-9 #select-box .select-bottom {
		background: transparent url(../img/select-bg-bottom.png) 0 0 no-repeat; 
		width: 420px; bottom: -9px;
	}
	
	#step-9 #select-box .long { font-size: 17px; }
	
	
	/* step-5 */
		
	#step-5b #main #image-area .blue-area.other { background-position: 495px 13px; }	
	#step-5b #main #image-area .blue-area.tourism-hospitality { background-position: 490px 32px; }	
	#step-5b #main #image-area .blue-area.education { background-position: 476px 32px; }		
	
	#step-5b #image-area .extra-text { padding: 15px; background-position: 335px 84px; }	
	#step-5b #image-area .extra-text p { width: 300px; }
		
	#step-11 #image-area .blue-area { width: 390px; padding: 20px 230px 20px 20px; background-position: 424px 37px; }
	
	
	#step-13 #image-area .blue-area p { width: 400px; }
	#step-13 #image-area .blue-area { background-position: 424px 20px; }
	
	#step-14 #image-area .blue-area { background-position: 484px 31px; }
	
	
	header .wrapper { width: 640px; }
	
	header h2 { position: relative; top: 20px; }
		
	header { height: 133px; }
	
	header #login-buttons { position: absolute; top: 0; right: 0; width: 640px; height: 133px; }
	
	header #login-buttons #login-button, 
	header #login-buttons #logout-button { position: absolute; top: 20px; right: 20px; }
	
	header #login-buttons #profile-button { position: absolute; top: 69px; right: 20px; }
	
	header #login-buttons #user-name { position: absolute; bottom: 4px; left: 0; width: 100%; text-align: center; padding: 0; }
	
	
	
	#step-5 .box:nth-child(3), #step-5 .box:nth-child(6), #step-5 .box:nth-child(9) { margin-right: 4px; }	
	#step-5 .box:nth-child(2), #step-5 .box:nth-child(4), #step-5 .box:nth-child(6), #step-5 .box:nth-child(8) { margin-right: 0; }
	
	
	#step-3 #image-area .blue-area h1 { font-size: 35px; }
	
	
	#step-6 .info-text, #step-9 .info-text, #step-10 .info-text { padding: 20px; }	
	#step-6 #contacts { top: auto; }
	
	
}