/* JL: NOTE - readyanimator_main.css & readyanimator_explorer.css are identical
readyanimator_main.css differs from readyanimator_iphone.css and readyanimator_android.css in these ways: 
1) h1 - h4 & p: font sizes, etc
2) style3
3) allbox-medium
4) subpage-banner
5) subpage
6) text-link
7) nav, nav-home etc   

search for uncomment to find where replacement must me made  */

/* JL 3 digit hexadecimal colors - 
aqua - 0FF - 'aqua'
red - F00 - 'red'
blue - 00F - 'blue'
fuschia - F0F - 'fuchsia'
kelly green - 008 - 'green'
lime - 0F0 - 'lime'
purple - 800 - 'purple'
orange - F90
pink - E2F
teal - 5FF
yellow - FF0 - 'yellow'
violet - B3F
white - FFF

our standard rANI muted blue - #5A98DC
*/

/* CSS reset begin  - fm NickLemmon.com*/
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
		margin:0;
		padding:0;
	}
	table {
		border-collapse:collapse;
		border-spacing:0;
	}
	fieldset,img { 
		border:0;
	}
	address,caption,cite,code,dfn,em,strong,th,var {
		font-style:normal;
		font-weight:normal;
	}
	ol,ul,li {
		list-style:none;
	}
	caption,th {
		text-align:left;
	}
	h1,h2,h3,h4,h5,h6 {
		font-size:100%;
		font-weight:normal;
	}
	q:before,q:after {
		content:'';
	}
	abbr,acronym { border:0;
	}
	/* JL - added a [to delete underline]  */
	a{
		text-decoration:none;
	}
/*CSS reset end */

body {
	background-color: #141414;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

/* Hide dotted image outline from Firefox and Netscape */ 
a {
	outline:none; /* JL - was none, which din't work for IE  */
}
 
h1, h2, h3, h4, h5, h6, h7, .style1 {
	font-family: Arial,sans-serif;
	font-weight:bolder;
	margin: 0px;
	padding: 0px;
	color: #F0F0F0; /* #F0F0F0 is off white  */
}

h1{ /* JL- for headlines */
 /*font-family: Arial, Helvetica, sans-serif; no uncomment, but change font: desktop 20/mobile 30  */
 font-size: 20px;
}

h2{  /* JL added - only use for text inside nav divs; desktop 17/mobile 40  */
 	/*font-family: Arial, Helvetica, sans-serif; */
 	font-size: 17px;
	margin: 0px 0px 0px 10px; /* JL: works to align text  */
	padding: 10px 4px 4px 10px; /* top, right, bottom, left - so clockwise  */
	/*for iphone, uncomment line below and delete margin & padding lines above, and change font size */
	/* padding: 24px 0px 20px 36px; /* top, right, bottom, left - so clockwise  */
}

h3{ /* JL - only for use as headline in text-link divs;  desktop 16/mobile 26  */
 /*font-family: Arial, Helvetica, sans-serif;  */
 font-size: 16px;
 padding: 0px 0px 10px 0px; /* top, right, bottom, left - so clockwise  */
 /* for iphone, nothing to uncomment, but delete padding line above and change font size above  */
}

h4{ /* JL - desktop 13/mobile 18  */
 /*font-family: Arial, Helvetica, sans-serif;  */
  /* for iphone, nothing to uncomment, but change font size above  */
 font-size: 13px;
}

h5{ /* JL - desktop 12/mobile 16  */
 /*font-family: Arial, Helvetica, sans-serif;  */
 font-size: 12px;
}

h6{ /* JL - desktop 9/mobile 14  */
 /*font-family: Arial, Helvetica, sans-serif;  */
 font-size: 9px;
}

 /* the heading below is for italics  */
h7{
 font-size: 9px;
}
 
p { /* JL - used for captions under videos and for link text in text-link/* JL - desktop 16/mobile 22  */
 font-family: Arial,sans-serif;
 color: #F0F0F0; /* JL - off white  */
 font-size: 16px;
 /* for iphone, nothing to uncomment, just change font size */
}

a:link {
	color: #5A98DC;
}
a:visited {
	color: #5A98DC;
}

/* styles */
.style1 { /* JL: makes Nav text italic & ReadyANIMATOR orange  */
	color: #EB5324;
	font-style: italic;
}

.style2 { /* JL - for 'R'- registered trademark */
 font-size: 13px;
}

.style3{ /* JL - for space between h3 and p; desktop=2px, iphone=10px */
/* nothing to uncomment, but change font-size below */
 font-size: 2px;
}

.style4{ /* JL - for space above text in text-link-small (for social media); desktop=6px, iphone=4px */
/* nothing to uncomment, but change font-size below */
 font-size: 6px;
}

/******** added by JPL ************/
/* JPL added subpage-banner and nav  */
/* wrappers fm Nick  */
.allbox {
	position:relative;
	width: 980px;
	height: 2000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	/*border: 2px dotted aqua;   /* */
}

.subpage-banner {  /* JL - created a class called subpage-banner, this is the container that holds the image  */
	margin-top: 10px;
	width: 100%;
	height: 97px;
	background: url(../images/subpage_banner.jpg);
	/* for iphone, uncomment lines below and delete lines above except margin-top;  */
	/*width: 100%;
	height: 151px;
	background: url(../images/subpage_banner_900w.jpg) center;
	*/
}

/* fm Galleria [.content .cred #galleria] - JL moved this from head of html files that used the galleria slideshow  */
.content{ /* JL - content includes the Galleria credit at bottom; content sets the width at 620px  */
	color:#fff; /* JL - was #777; changes nothing when I change to #fff */
	font:12px/1.4 "helvetica neue",arial,sans-serif;
	width:620px;
	margin:20px auto;
	border:inherit;
} 
 
.content-headline{ /* JL - the headline for a Galleria slideshow  */
	padding: 20px 0px 0px 12px;
	border:inherit;
}
           
.cred{ /* JL - for Galleria credit */
	margin-top:70px;
	margin-left:470px; /* was 250 */
	font-size:13px;
}
			
#galleria{ /* This rule is read by Galleria to define the gallery height: */
	height:440px;
}

/* JL - I created several classes to hold content other than galleria slideshows */
.homepage,
.subpage{ 
	position:relative; /* JL - relative doesnt make subpage box to slide when you change width of browser window */
	/* JL - for iphone - nothing to uncomment, but delete the line below [left:] */
	left:30px; /* JL - adds 30px to the 180px that margin:auto creates, so 210ox total on L */
	width:620px;
	margin:20px auto;  /* JL - results in 180px on L and R of box */
	border:inherit;
}

.homepage-headline{ /* JL - headline for homepage */
	padding: 20px 0px 0px 0px;
	border:inherit;
}

.subpage-headline{ /* JL - the headline for a subpage  */
	padding: 20px 0px 0px 6px;
	border:inherit;
}

.homepage-text{
	width: 620px;
	margin:15px auto;
}

.homepage-image{
	margin:15px 0px 0px 0px;
	overflow:hidden;
	/*border:2px dotted blue;   /* */
}

.caption { /* JL - to contain text under an image; in HTML, put this div within homepage image div or image-medium div etc */
	position: relative;
	padding:5px;
	margin:auto;
	/*border:2px solid lime; /* */	  
}

.caption-side-by-side{ /* JL - to contain text under an image; in HTML, put this div within homepage image div or image-medium div etc */
	position: relative;
	width:280px;
	padding:5px;
	margin:auto;
	overflow:hidden;
	/*border:2px solid lime; /* */	  
}

.image-box-side-by-side{
	width:600px;
	margin:15px 0px 0px 0px;
	overflow:hidden;
	/*border:2px dashed red; /* */
}

.image-medium-left{ /* JL tip - this lets me resize pic; use with various width text boxes */
	margin:15px 0px 0px 0px;
	float:left; 
	/*border:2px dotted yellow; /* */
}

.image-medium-right{
	margin:15px 0px 0px 0px;
	float:right; 
	/*border:2px dotted yellow;  /* */
}

.text-left-in-box-side-by-side{ /* JL - text on L in image-box-side-by-side box  */
	display: block; /* JL - this MUST exist so entire box is clickable */
	width: 50%; /* JL - narrower text */
	margin:15px 0px 0px 0px;
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	/*border:2px dashed blue; /* */
}

.text-left-in-box-side-by-side-small-pic{ /* JL - text on L in image-box-side-by-side box for small image  */
	display: block; /* JL - this MUST exist so entire box is clickable */
	width: 60%; /* JL - wider text */
	margin:15px 0px 0px 0px;
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	/*border:2px dashed blue; /* */
}

.text-right-in-box-side-by-side{ /* JL - text on R in image-box-side-by-side box  */
	display: block; /* JL - this MUST exist so entire box is clickable */
	width: 36%;
	margin:15px 0px 0px 0px;
	padding:0px 0px 0px 15px;	
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	/*border:2px dashed blue; /* */
}

.text-right-in-box-side-by-side-medium-image{ /* JL - text on R in image-box-side-by-side box with image-medium-left  */
	display: block; /* JL - this MUST exist so entire box is clickable */
	width: 45%;
	margin:15px 0px 0px 0px; /* JL - gives some space between image and text */
	padding:0px 0px 0px 25px;	
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	/*border:2px dashed blue; /* */
}

.subpage-main-headline{ /* JL - the headline for a subpage-main page  */
	padding: 20px 0px 15px 0px;
	border:inherit;
}

.subpage-links{ /* JL - when a subpage just links to sub-subpages, for example how to. This box holds multiple subpage-onelink boxes  */
	/* JL - temp border  */
	/*border:2px solid blue; /* */
}

.subpage-onelink{ /* JL - one individual link - with a photo, text and chevron  */
	width: 100%;
	margin-top: 45px;
	height: 130px;
	/* for iphone, uncomment line below and delete height above  */
	/*height: 150px; /* taller than main css, since font is bigger  */
}

.subpage-onelink:hover{
	background: #444;
}

.subpage-onelink-image{ /*JL - the image within the link; this div is nested within the subpage-onelink div  */
	width: 120px; 
	height: 120px; 
	padding:1%;
	float: left; /* JL - float:left; floats the image box to the left with surrounding content flowing to the right  */
	border:inherit;  
}

.text-link {  /* JL - fm Nick. In the HTML file, this class declared in-line so this entire box will be a clickable link. You MUST have display:block for the entire box to be clickable, otherwise just the text is  */
	display: block; /* JL - this MUST exist so entire box is clickable */
	width: 70%;
	height: 90px;
	padding:3% 4% 3.5% 3%;
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	background: url(../images/chevron_orangeR.png) no-repeat right;
	border:inherit;	  
}

.text-link:hover {
	background: #444 url(../images/chevron_whiteR.png) no-repeat right;
}

.subpage-onelink-small{ /* JL - one individual link - small - with photo, text, chevron  */
	width: 100%;
	margin-top: 5px;
	height: 90px;
}

.subpage-onelink-small:hover{
	background: #444;
}

.subpage-onelink-image-small{ /*JL - the image within the link; this div is nested within the subpage-onelink div  */
	width: 64px; 
	height: 64px; 
	margin-top: 7px;	
	padding:1%;
	float: left; /* JL - float:left; floats the image box to the left with surrounding content flowing to the right  */
	border:inherit;  
}

.text-link-small {  /* JL - fm Nick. In the HTML file, this class declared in-line so this entire box will be a clickable link. You MUST have display:block for the entire box to be clickable, otherwise just the text is  */
	display: block; /* JL - this MUST exist so entire box is clickable */
	width: 80%;
	height: 64px;
	padding:0% 4% 4% 2%; 
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	background: url(../images/chevron_orangeR.png) no-repeat right;
	border:inherit;	  
}

.text-link-small:hover {
	background: #444 url(../images/chevron_whiteR.png) no-repeat right;
}

.text-link-simple { /* JL - I created this for in-line text that doesnt need a chevron */
	display: block; /* JL - this MUST exist so entire box is clickable */
	overflow:hidden; /* JL - without overflow:hidden, layout is way off */
	border:inherit;	  
}

.text-link-simple:hover {
	background: #444;
}

.subpage-main { /* JL - when a subpage has actual content, like images and text or video and text  */
	position:relative; /* JL - relative doesnt make subpage box to slide when you change width of browser window */
	/* JL - for iphone - nothing to uncomment, but delete the line below [left:] */
	left:20px; /* JL - adds 30px to the 180px that margin:auto creates, so 210ox total on L */
	width:425px;
	margin:20px auto;  /* JL - results in 180px on L and R of box */
	/*border:2px dotted red; /* */
}

.subpage-main-image{ /*JL - the image for subpage main pages  */
	width: 425px;
	margin:15px auto;
	border:inherit;  
}

.subpage-main-text-narrow {
	width: 425px;
	margin:15px auto;
}

.subpage-main-text {
	width: 600px;
	margin:15px auto;
}

.videobox { /* JL - to contain a video */
	width:425px;
	margin:auto;
	margin-top:15px;
	margin-bottom: 20px;
	border:inherit;	  
}

.videocaption { /* JL - to contain text under a video */
	position: relative;
	padding:20px;
	/*text-align:justify; */
	margin:auto;  /* JL - results in 180px on L and R of box */
	border:inherit;	  
}

.contact-image{
	/* JL - for iphone, uncomment the lines below and delete the lines above  */
	width: 600px;
	height: 99px; 
	margin:15px auto;	
	background: url(../images/JLF_contact_info.png) no-repeat;
	border: inherit;
	/* JL - for iPhone, uncomment the lines below and delete the lines above except width */
	/*
	height: 139px; 
	margin:15px auto;		
	background: url(../images/JLF_contact_info_big.png) no-repeat;
	border: inherit;
	*/
}

.fineprint-text{
	margin:15px auto;
}

.nav {  /* JL - created a class called nav */
	position: absolute;
	top: 192px; /* JL added top to force nav to top, was 186px  */	
	background: #141414;
	width: 165px;
	height: 400px;
	/* JL - for iphone, uncomment the lines below and delete width & height and top above  */
	/*width: 970px; /* JL - 970px works; oddly 620px results in wider buttons than 970px  */
	/*height: 800px;
	margin: 20px 0px 0px 0px;
	padding: 20px 0px 0px 0px;  /* JL - if position is relative, padding doesnt work  */	
}

.nav-home, 
.nav-products,
.nav-clips,
.nav-price,
.nav-how,
.nav-news,
.nav-contact{
	width: 165px;
	height: 40px; 
	margin: 0px 0px 8px 0px;
	padding: 0px 0px 0px 15px; /* JL - pushes nav text to right */
	background:url(../images/navbtn_notext.png) no-repeat; /* JPL - works to display image! */ 
	/* JL - for iphone, uncomment the lines below and delete the lines above  */
	/*width: 60%;
	height: 100px; 
	margin-left: 20%;
	margin-right: 20%;
	background: #141414 url(../images/chevron_orangeR.png) no-repeat right;
	border: 1px solid #888;	
	*/
}

/* JL - for iphone, uncomment the lines below; code for next 2 divs rounds corners in Safari and Chrome - fm stark - */
	/*
.nav-home{ 
	-webkit-border-top-left-radius: 20px; 
    -webkit-border-top-right-radius: 20px;	
}

.nav-contact{
	-webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
}
	*/

.nav-home:hover, 
.nav-products:hover,
.nav-clips:hover,
.nav-price:hover,
.nav-how:hover,
.nav-news:hover,
.nav-contact:hover{ 
	background:url(../images/navbtn_notext_orange.png) no-repeat; /* JPL - works to display image! */ 
	/* for iphone, uncomment the line below and delete the line above  */
	/*background: #444 url(../images/chevron_whiteR.png) no-repeat right;  
	*/
}