5/* strips-mobile.css */
	
/*** pixel values may get scaled ***/	
	.container{
		position:absolute;
		width:100%;
		top:0px;
		left:0px;
/*		height:765px;    height of the strip image - same for all devices */
		height:10%;
		margin:0px;
		padding:0px;
		background: #fffff0;			
	}

	.topbanner {			/*the alligator header picture*/
		display:none;
	}

	#top-image {		/* (identical to stripcontainer) */
		position:absolute;
		top: -80px;
		left: 250px;
		width:760px;
		height:253px;

		margin:0px;
		padding:0px;
		background: #fffff0; 
		z-index:4;
	}

	#category-title {
		position:fixed;
		top:0px;
		left:2px; 
		width:100vw;
		height:28px;
		padding:5px;
		font-family:calibri,verdana;
		font-size:16px;
		z-index: 17; 
		background: #fffff0; 
		display:block;
	}	

#loading-message {
	position:absolute;
	top:25vh;
	left:15vw;
	width:60vw;
	height:25px;
}
#load-message {
	position:relative;
	top:0px;
	left:0px;
	height:12px;
	font-family:Forte;
	font-size:25px;
	text-align:center;
}	


/*	
	#start-button-div {
		position:absolute;
		margin:0px;
		padding:0px;
		top:350px;	
		left:350px; 	
		width:45px;
		height:130px;
	}	

	#start-button {
		position:relative;
		margin:0px;
		padding:0px;
		top:40px;
		left:-35px; 
		width:110px;
		height:36px;
		font-family:calibri,verdana;
		font-size:28px;
		}
*/
	.hormenu2 {		/*used in About and Resources*/
		position:relative;
		top:10px;
		margin-left:auto;
		margin-right:auto;
		width:80px;	
		height:31px; 
		background: #f4f4f4;	
		padding:0px;
		z-index:12;
	}

	#banner-container-large {
		display: none;
	}
	#banner-image-large {
		display: none;
	}

	#banner-container-mobile {
display:none;
		position:relative;
	top:0px;
	left:0px;

		width:750px;
		height:253px; 	

		overflow:hidden;	/*hide the part of the image that scrolls outside the div*/
/*border: 1px solid green;*/
	}

	#banner-image-mobile {
		position:relative;
		top:0px;
		left:0px;
	}	
/*	
	#creatorg {
display:none;
		position:absolute;
		top:15px;			
		left:90px;
		height:113px;
		width:120px;
		background-image:url(floss_120_R.png);
	}

	#titletext {
display:none;
		position:absolute;
		top:100px;
		left:70px;
		height:410px;
		width:150px;
		background-image:url(TitleText_R.png);
	}
*/
	#icon-set {
		display:none;
	}

	#control-bar {
		position:fixed;
		
	transform: rotate(90deg);
	transform-origin: 0% 0%;
		top:8%;
		left:94vw;
		
		width:770px;
		height:45px; 

		padding:0px;
		margin:0px;
		background: #fffff0; 
		z-index:16;  /*was 4*/
/*border:1px solid blue;*/
	}
	
.category-strips-mobile{
	position:absolute; 

	top:60px;
	left:0px;	
	width:77vw;    /*was 292px*/
/*	height:884px;*/
	margin:0px;
	padding:0px;
	display:block;
}

#strip-image {
/*	position:fixed;*/
	position:absolute;
	transform: rotate(90deg);
	transform-origin: 0% 0%;

	top:13vw;		/*was 60px */
	left:78vw;	
	height:75vw;
display:block;
}

.strip-class {
	position:absolute;  
	top:0px;
	left:0px;
	width:632px;
	height:292px;
	display:none;
}	
	
.category-strips {				/*rotated*/
	position:fixed;
	transform: rotate(90deg);
	transform-origin: 0% 0%;

	top:13vw;		/*was 60px */
	left:78vw;	
/*	
	width:77vw;  
	height:884px;
	height:77vh;

	width:632px;
	height:292px; 
*/
	height:75vw;

/*overflow-x:scroll;*/
overflow:scroll;

	padding:0px;
	margin:0px;

display:block;
/*border:1px solid blue;*/
}

.stripimg {					/*the image is vertical*/
	position:relative; 
	left:0px;
	top:0px;
	height:100%;
	margin:0px;
	padding:0px;
	
	display:none;
/*border:1px solid red;*/
}	

.stripimgnew {	
	position:relative; 
/*	transform: rotate(90deg);
	transform-origin: 0% 0%;
	top:60px;
	left:70vw;	
*/
	top:0px;
	left:0px;
	
width:765px;
height:253px; 

		padding:0px;
		margin:0px;
	/*? background: #fffff0; */
/*border:1px solid red;*/
/*overflow-y:scroll;*/
/*overflow:scroll;*/

}	


/*
	#Start {
		position:fixed;
		top:18px;
		left:5%; 
		width:30%;
		height:25px;
		padding:5px;
		font-family:calibri,verdana;
		font-size:14px;
		z-index: 17; 
	}	

	#startbtn {
		position:absolute;
		top:4px; 
		left:100px;
		width:50px;
		height:22px;
		margin-top: 0px;
		margin-bottom:10px;
	}
*/		

	#Brev {
		position:absolute;
		top:-16%;			 
		left:6%;		
		width:60px;
		height:40px;
		margin-top: 10px;
		margin-bottom:10px;
		font-size:15px;
		font-weight:bold;
	}

	#Bfor {
		position:absolute;
		top:-16%;	 
		left:23%;
		width:60px;
		height:40px;
		margin-top: 10px;
		margin-bottom:10px;
		font-size:15px;
		font-weight:bold;
	}

	#strip-number {
		position:absolute;
		top:29%; 		
		left:16%;		
		width:40px;
		height:28px;
/*border: 1px solid green;*/
	}
	

	#last-number {
		display:none;
	`}	

	#CGnumb-mobile {			/*the number box*/
		position:absolute;
		top:-16%; 			
		left:41%;			
		width:40px; 
		height:30px;
		text-align:center;
		padding-top:5px;
		margin-top: 10px;
		margin-bottom:10px;
		font-family:calibri,verdana;
		font-size:16px;  /* has no effect */
		background: white;
	}

	#goto-button {
		position:absolute;
		top:23%; 		
		left:48.5%;		
		width:20px;
		height:20px;
		border: 1px solid gray;
	}

	#menu-strip {
		position:absolute;
		top:10%;		/* -165px */ 
		left:55%;	/*was 390px */
		width:400px;
		height:30px;
		font-family:calibri,verdana;
		font-size:1.4em;		/*was 1.5em*/
	}	

	#menu-strip-large {
		display:none;
	}
	
#progress-bar {
	position:relative;
	top:16px;
	left:15%;
	width:5%;
	height:12px;
	background-color:blue;
}	

	#imageL {
		position: relative;
		top:0px; 
		left:0px;
		width:100%;
/*		height:112%;*/
		padding:0px;
		margin:0px;
		border-style:none;
		z-index:3;
	}

/*no longer needed?
	.rotate {
		display:inline-block;
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
*/
	#categories {
		position:relative;
		top:6px;
		left:2%;
		width:114px;	
	}
	
	#slidenum {	display:none; }
	#strip-id2 { display:none; }
	#B-reverse { display:none; }
	#B-forward { display:none; }
	#B-first { display:none; }
	#B-last { display:none; }
	
	#First {
		position:absolute;
		top:15%; 		
		left:0.8%;		
		border: 1px solid gray;
	}
	#Last {
		position:absolute;
		top:15%;		
		left:32%;		
		border: 1px solid gray;
	}

	#strip-buttons-large {
		display:none;
	}
	
	#strip-id {
		display:none;
	}
	#footer {
		display:none;
	}

	.cat-nav-btn {
		position:absolute;
		top:4px; 
		width:60px;
		height:29px;
		margin-top: 0px;
		margin-bottom:10px;
		font-size:16px;
	}
	.cat-nav-name {
		position:absolute;
/*		top:6px; */
	top:3vw;
		width:150px;
		height:29px;
		margin-top: 5px;
		margin-bottom:5px;
		font-size:16px;
		color:blue;
	}
	
	#Prevcat {
		left:4%;		/*was 38% */
		top:10px;
	}
	#cattitle {
		left:27%;
	}
	#Nextcat {
		left:60%;
		top:10px;
	}
	
	
	#hiddendiv {
		left: 88%;
		display:none;
	}
	#debug {
		position:absolute;
		top:4px; 
		width:60px;
		height:29px;
		left:25%;
	}
	
	#CGnumb {
		display:none;
	}
	
	#CGgo {
		display:none;
	}

	#gotoLarge {
		display:none;
	}
	
	#goto-button-large {
		display:none;
	}
	
	#show-on-load {
		display:none;
	}
	
	#CGtag {					 
		display:none;
	}

.aboutmessage {
	position:relative;
	width: 80%;
	top: 30px;
/*	left:180px;*/
	margin-left:auto;
	margin-right:auto;
}

	.promptmessage {
		display:none;
	}
	#coverdiv {
		position:fixed;
		top:4px;
		left:36%;
		width:60%;
		height: 25px;
		padding:0px;
		margin:0px;
		background: #e6ffe6; 
		color: #d0f470; 	/*hide the text*/
		z-index:16;
	display:none;
	}

	.sideitem {		/*used in Blog.html */
		font-family:arial;
		font-size:16px;
	}
	.sideitem2 {		/*used in Blog.html */
		top:14vh;
		font-family:arial;
		font-size:18px;
		line-height:2.2;
	}

	#invite {
		display:none;
	}

#facebook-buttons {	
	position:fixed;
/*	top: 600px; */
	top:92%;
	left:73%;
	height:80px;
	width:80px;
}

/* don't show the Go button for very small devices like iPhone 4 */	
@media only screen and (max-width: 240px)  { 
	.stripcontainer {
		height:133%;	/*handle the small Samsung*/
	}
	
	#CGnumb-mobile {
		display:none;
	}
	#CGgo-mobile {
		display:none;
	}
}