body {

	font-family: Arial, Helvetica, sans-serif;

}


* {
	padding: 0;
	margin: 0;
	border: 0;
}



#tideChart {





}


#tideChartImg {



}



/* styles for drags */

#dragContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	
	visibility: hidden;
	
	cursor: hand;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

#dragContainer li.page1 {

	background-image: url("/images/panel5.jpg");
	
	background-size:   cover;             
	background-repeat: no-repeat;
	background-position: center center; 
	background-color: white;

     
}

#dragContainer li.page2 {


    background: url("http://gizmoware.net/tides/chart/tidal.png");
    background-repeat: no-repeat;
    background-color: #111111;
    padding: 0;
    margin: 0;

	background-position:100% 100%;  /* Sets reference point to scale from */
	background-size:contain; 



}

#dragContainer li.page3{

    background: url("http://gizmoware.net/tides/chart/graphics/tidal1a.png");
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;

	background-position:100% 100%;  /* Sets reference point to scale from */
	background-size:contain; 




}


#dragContainer li.page4{

	background-image: url("/images/sand2.jpg");
	
	background-size:   cover;             
	background-repeat: no-repeat;
	background-position: center center; 
	background-color: white;

}



 /* page 1 */





#windCircle {


	font-family: Arial, Helvetica, sans-serif;

	font-weight: bold;

	width: 200px; /* should be the width of the windCircleGraphic image */


	margin-left: auto;
	margin-right: auto;


}



	
#windCircleSpeed {

	text-align: center;

	margin-top: -135px;


	font-size: 62px;


}




#windCircleSummary {

	text-align: center;

	font-size: 32px;

	font-weight: normal;

	color: #787979;

	margin-top: 70px;
}




#windHigh {


	text-align: center;

	font-size: 22px;

	font-weight: normal;

	color: #787979;

	margin-top: 70px;
}


.alert {

	color: red;

}






/* page 2 */

#wind2 {

	line-height: 150%;


	margin-top: 0px;
	text-align: center;
	font-size:2.5em;
	color: gray;

	font-weight: bold;

}


#stats2 {


	line-height: 150%;


	margin-top: 0px;
	text-align: center;
	font-size:2em;
	color: gray;

	font-weight: bold;

}



/* page 3 */



#temperatureContainer {

	/* move things over a little, so it's centered even with the deg F */
	margin-left: 50px;

}

#temperature3 {


	font-size: 4em;
	color: #ff8833;

}



#temperatureLabel3 {

	vertical-align: top;
	font-size: 2em;
	color: #ff8833;


}



#tempStats3 {

	margin-top: 40px;

	font-size: 1.5em;
	color: #787979;

	line-height: 140%;

}


#icon3 {

	margin-top: 50px;

}



.highlight {

	font-weight: bold;
	color: black;

}



.highlight2 {

	font-weight: bold;
	color: grey;


}


.highlight3 {

	font-weight: bold;
	color: black;


}



#webcamContainer {


/*

    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg);
*/
}

#webcam{

	width: 100%;



}




#icon {


	text-align: center;

	margin-top: 0px;  /* move the cloud over the periods so we get a bit of an animated icon. Ha. */

}


#dots {

	margin-left: -115px;


}



.center {

	text-align: center;

}