/* CSS Document */

			/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

			article, aside, figcaption, figure, footer, header, main, nav, section {
			display: block;
			}

			html {
				-ms-text-size-adjust: 100%;
				-webkit-text-size-adjust: 100%;
			}

			body {
				margin: 0;
				line-height: 1.2em;
			}

			a:focus {
				outline: thin dotted;
			}

			a:active,
			a:hover {
				outline: 0;
			}

			small {
				outline: 0;
			}

			img {  
				border:0;
			}

			/* ---- end normalize.css from p 275 Hyslop book ---- */

/*  ==== BEGIN DIANE'S STYLES ==== 
what the heck?*/
/*DESIGNED FOR KOWA TSN-533 REVIEW PAGE*/

body {
	max-width: 800px;
	margin: auto;
	font-family: sans-serif;
	padding: 0 2em;
}

		/*  ==== BEGIN NAV STYLES ====  */
nav{
	background-color:#0568a3;
}

.nav-main li {
	display: inline-block;
}


.nav-main a {
	display: inline-block;
	font-size:  1em;
	font-weight: 500;
	color:#f1ca30;
	padding: .4em 1.55em .4em 1.55em;
	text-decoration: none;	
/*	text-transform: uppercase;*/
}
	
.nav-mobile  {
	background-color: white;
	list-style-type: none;
	margin: 0;
    padding: 0;
	font-size: 1.4em;
}


.nav-mobile a {
	display: inline-block;	
}

	

.mobmenuicon { display: none;
	padding-top: 2em;
	padding-left: 4.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid #434343;
}


		/* end navigation styles*/

h1,
h2{
	font-weight: bold;
	color: #444444;		
}

h1 {
	font-size: 2.2em;
	text-align: center;
	line-height: 1.2em;
}

.mobiletophead {
 font-size: 4em;
}

h2 { /*"subcap" in old website*/
	font-size: 1.2em;
	color:#000095;
	font-weight: 800;
}

h3 { /*smaller, b&w catergory heading inside subcap/h2*/
	font-size: 1em;
	line-height: 20px;
}

p {
	line-height: 1.6em;
}

.byline {
	font-size: 1em;
	font-weight: bold;
	color:#232323;
	text-align: center;
}

.secondline {
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	line-height: 0;
}


.centerlink { /*centered link to store or review*/
	text-align: center;
	font-weight: 500;
	padding-bottom: .8em;
}


/* class for flying cranes logo, responsive*/
.mast {
	width: 100%;
	margin-bottom: -1.3em;
	background-color:#0568a3;
}

/*main product image*/
.imageprimary {
	max-width: 45%;	
}

.imagecorner {
	max-width: 25%
}


.imageright {
	float: right;
	padding-left: 2em;
}

.imageleft {
	float: left;
	padding-right: 2em;
}

.imagefull {
width: 100%;
height: 100%;
}

.centerline {
	text-align: center;
}

/*This would be for a right-hand addition to menu bar for mobile.
.imageright-menu {
	float: right;
	padding-right: 4em;
}*/


/*For a review with a chart below it*/
.meat {
	padding-bottom: 1em;
}

/* BEGIN TABLE FORMATTING*/

/*Tables have serif font and are smaller*/
table {
	font-family: serif;
	font-size: .9em;
	margin: auto;
}

td {
	text-align: center;
	border: 1px solid #000000;
	padding: .3em .62em;
	font-size: 1.2em;
}


/*Formats left column of spec names as left justify*/
td.specs{
	text-align: left;
	font-weight: 700;
}

/*Formats top row, the names, as bold*/
.topline {
	font-weight: 700;
}

/*Bird Brain documentation chart. Does not affect alignment, tho IT SHOULD*/
table.birdbrain {
	width: 100%;
	color:#1B1B1By;
	text-align: left;
	font-family: sans-serif;
	font-size: .8em;	
}


/*This is for a chart in Bird Brain documentaion DOES affect alignment*/
td.chart-body {
	text-align: left;
	font-family: sans-serif;
	font-size: .9em;	
}



.tableimage {
	width: 100px;
	height: auto;
}

div.chart {
/*	color:red;*/
}

/* end table formatting */


/*  ==== MEDIA QUERY FOR MOBILE ====  */

/*FOR MOBIL*/	
/*980 and above work for DPs mobile and iPad*/
/*979 and below do not work for DPs mobil and iPad*/

	 footer {
		 border-top: 1px solid #282828;
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 749px)
 {

	 body {
		 max-width: 100%;
		 padding: 0;
}
	 
	 .mast {
		width: 100%;
		margin-bottom: -1.3em;
		background-color:#0568a3;
}
	 
	 header {
		 width:100%;
		 margin: auto;
		 padding: 0; 
}
	 
	 article {
		 padding: 0 4em;
		 color: black;
}
	 
	 p {
		font-size: 220%;

}
	
	h1 {
		font-size: 4em;
}
	
	
	h2 {
		font-size: 2.3em;
		line-height: 1.3em;
}
	
	h3 {
		font-weight: 600;
		font-size: 220%;
	    line-height: 0;
}
	
	li {
		font-size: 200%;
		line-height: 1.5em;
}
	
	.byline {
		font-size: 2em;
}

    .secondline {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	line-height: 0;
}	 
	 
.imageleft {
	width: 100%;
	height: 100%;
}
	 
.imageright {
	width: 40%;
	height: 100%;
	padding: 0em 0em 1em 2em;
} 
	  
	.nav-main {
		 display: none;
} 
	 
	.nav-mobile li {
		display: inline-block;
}


	.nav-mobile a {
		display: inline-block;
}

	.nav-mobile a {
		display: inline-block;
		font-size:  1em;
		font-weight: 500;
		color: #434343;
		padding: .4em 2em .4em 2em;
		text-decoration: none;
		background-color: white;
}
	 
	.mobmenuicon {
		display: block;
}
	 
footer {
	padding-left: 4.5em; 
	padding-right: 4em;
	border-top: 1px solid #282828;
	font-family: sans-serif;
}

}