/* CSS Document */
/* zero out things that cause discrepancies across browsers */

html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, strong, center, ol, ul, li, fieldset, form, label,embed{
	padding:0;
	margin:0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


a{
color:blue;
text-decoration:none;
}

a img{
	border:none;
	padding:0px;
}

body{
	/*font-family: Verdana, Arial, Helvetica, sans-serif;
	font-family: "Courier New", Courier, monospace;
	*/
	font-family: arial, helveticaneue, 'helvetica neue', helvetica, sans-serif; 

 	font-size:.7em;
	letter-spacing:0px;

	   /* background: #323232 url(../images/sheetmusic.jpg) no-repeat center top;
	     min-width: 1000px;*/
	   background: #111; 

	
}


a:hover{
color:#333333;
text-decoration: none;

}


/* h1 a artist's name on nav bar*/

h1 {
	font-size: 190%;
	letter-spacing: 0px;
	text-transform: uppercase;
	font-weight:bold;
	color:#f6454f;
}

h1 em {
font-size:130%;
letter-spacing: 1px;
	
}


h1 span{
color:#999;
}

h1 a{
	font-size: 140%;

	font-weight:bold;
	color:#666666;
	letter-spacing:2px;
		color:#f6454f;
}


/*tag line under grant rogers name DO NOT TOUCH*/ 
h2{
	font-size: 120%;
	letter-spacing: 0px;
	text-transform: uppercase;
	font-weight:bold;
	color:#000;
}	



h3 {
	font-size: 190%;
	letter-spacing: 0px;
	text-transform: uppercase;
	font-weight:bold;
	color:#666;

}


h3 a:hover{
background-color:white;
color:blue
}

h4 {
	font-size:120%;
	color:#000;
	font-weight:normal;
	text-transform:uppercase;
}




h5 {
	font-size: 170%;
	letter-spacing: 0px;
	color:#666;
	font-weight:bold;
	text-transform:uppercase;
}


		
#wrapper {
	position:relative;
	max-width: 1050px;
	/*min-height:700px;*/
	min-height:800px;
	margin: 0 auto 5em auto;
	background-color:#333;
	padding:0 1em 1.8em 1em;
 }
		

strong{
	color: #000000;
	font-weight: bold;
	}
	

.clear{
clear:both;
} 

p{
font-size:140%;
}

p a{
color:blue;
}

/* ---------------------------    N A V B A R  ---------------------- */




#nav_name{
position:relative;
background-color:#fff;
width:38em;
padding:.4em 0 1em .9em;
margin: 2em 0 0 5em;
z-index:100;
}



/*================================= M E N U  =================================*/ 
.header{
margin-left:5em;
margin-top:1em;
position:relative;
z-index:100;
}

.header .menu ul {
  padding: 0;
  margin: 1em 0;
  width:90em; 
}



.header .menu ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0;
margin-right:5.4em;
line-height:3em;
}

.header h1{
background-color:#eee;
width:7em;
padding:.5em 0 .2em .4em;
}


.header .menu ul li a{
line-height:2em;
text-transform:uppercase;
font-size:120%;
color:#000099;
font-weight:bold;
letter-spacing:0px;
background-color:#fff;
padding:.4em .9em .4em .9em;
}

.header .menu ul ul{
margin-bottom:2em;
}

.header .menu ul ul li{
line-height:2.2em;
}

.header .menu ul ul li a{
margin-left:2em;
color:#666;
padding:0;
font-weight:normal;
font-size:90%;
text-transform:lowercase;
background-color:#fff;
line-height:1em;
}

.header .menu li a strong{
text-decoration:underline;
color:black;
}




/*9999999999999999999999999999999 I N D E X   P A G E  99999999999999999999999999999999*/


html.index { 
  background: url(../../uploads_grant/homepage/1.jpg) no-repeat right center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:10;
}

html.index2{
display:none;
}


.homepage_image{
position:relative;
width:95%;
height:auto;
display:block;
clear:both;
margin:2em auto 1em auto;
z-index:10;
}

.homepage_image img{
display:block;
clear:both;
margin:0 auto;
width:95%;
height:auto;
}


.homepage_image_2{
display:block;
clear:both;
margin:2em auto 5em auto;
width:95%;
height:auto;
}

.homepage_image_2 img{
width:100%;
height:auto;
}

#index_image{
display:none;
}

#about{
padding:2em;
clear:both;
margin:0 auto 2em auto;
width:86%;
height:auto;
background-color:#FFF9E4;
}

#about p{
font-size:140%;
}


#geneology_title{
width:95%;
margin:0 auto 5px auto;
background-color:#f6454f;
background-color:#140B6B;
}

#geneology_title h3{
color:#DCCCAD;
text-transform: none;
padding:5px;
letter-spacing:1px;

}


#geneology_title p{
color:#DCCCAD;
font-size:100%;

}

#homepage_image_1{
padding-top:1em;
width:100%;
height:auto;
margin:0 auto 4em auto;
clear:both;
text-align:center;
}


.homepage_image_1 img{
width:100%;
height:auto;
}

.news_box{
padding:1em 2em;
clear:both;
margin:0 auto 2em auto;
width:85%;
height:auto;
background-color:#FFF9E4;
border:red 3px solid;
}


.new_songs{
padding:1em 2em;
margin:0 auto 2em auto;
width:90%;
height:auto;
background-color:#FFF9E4;
border:red 3px solid;
}

.right_side_box{
float:right;
padding-right:5%;
margin-top:26em;
}

#photos_box{
text-align:center;
}

#photos_box .caption{
width:70%;
margin:1em auto 4em auto;
text-align:center;
color:#999;
}




/* ---------------------------- C O N T E N T  ------------------------------ */

#content_box{
position:relative;
margin: 2em 0 5em 5em;
width:84%;
height:auto;
z-index:1;
padding:2em;
background-color:#fff;
background-color:#FFFBF4;
border:gray solid 2px;
}

#content_box p{
font-size:120%;
color:#333;
line-height:1.5em;
padding:4px 0px 0px 0px;
}

#content_box img{
display:block;
/*max-width:65%;*/
height:auto;
float:left;
}


#content_box p a{
font-size:100%;
color:blue;
padding:0px;
}



#content_box a:visited{
color:blue;
}


.event_box{
float:left;
clear:left;
width:90%;
}


.photo_box{
clear:left;
margin:0 auto;
width:100%;
padding-top:5px;
margin-bottom:30px;
}


.image_small{
display:inline-block;
float:left;
padding:2px;
}

.image_small img{
display:inline-block;
padding:2px;
}


iframe {
	width: 70%;
}

/* ----------------------------  BIO  ------------------- */
#bio_box{
position:relative;
margin: 2em 0 5em 5em;
width:84%;
height:auto;
z-index:1;
padding:2em;
background-color:#FFFBF4;
}


#bio_box p{
font-size:120%;
color:#333;
line-height:1.5em;
padding:4px 0px 0px 0px;
}

#bio_box .right img {
    width: 240px;    
    height:auto;
    float: right;
    padding: 10px;
}
 
 
#bio_box .left img {

    width: 240px;
    height:auto;
    float: left;
    padding: 10px;
}
 
#bio_box .center img {
   margin:0 auto;
   width:100%;
    height:auto;  		
}

/* ----------------------------  AUDIO  ------------------- */
 
#audio_box_outer{
position:relative;
margin: 2em 0 5em 5em;
width:89%;
height:auto;
z-index:1;
padding:0 0 10em 0;
background-color:#fff;
background-color:#FFFBF4;
border:gray solid 2px;
}


#audio_box_outer p{
font-size:130%;
}

.audio_box{
padding:10px;
width:45%;
float:left;
margin:17px 11px 17px 11px;
padding-bottom: 3em;
background-color:#fff;
border:#999 2px dotted;
}

.audio_box h4 a{
color:blue;
}




/* ----------------------------  ARCHIVE ------------------- */


#archive_box{
position:relative;
margin: 3em 0 5em 5em;
width:82%;
height:auto;
z-index:1;
padding:1em;
}

#interview_content_box{
position:relative;
margin: 2em 0 5em 5em;
width:68%;
height:auto;
z-index:1;
padding:2em 10em 8em 10em;
background-color:#FFFBF4;
border:gray solid 2px;
}

#interview_content_box p{
font-size:120%;
color:#333;
line-height:1.5em;
padding:4px 0px 0px 0px;
}



/*========================================== C O N T A C T  ===================*/

#contact_box{
position:absolute;
top:150px;
left:280px;
}

#contact_box p{
color:#333333;
}

#contact_box p a{
color:blue;
	text-decoration:none;

}


#contact_box a {
font-size:120%;
margin-left:0px;
text-decoration:none;

}

#contact_box p span{
color:red;
}

#contact_image{
float:left;
}

#contact_image img{
margin:2em 0;

}

#icon_box{
float:left;
margin:50px 0;
} 

/* --------------------------------------- V I D E O ------------------------------- */



#video_box{
    position: relative; 
	margin:0 auto 2em auto; 
	padding:0;
    overflow: hidden;
	width:45em;
	height: 25em;

}



/* ----------------------------  P A G E  w i t h  T H U M B S  ------------------- */
 
 
#page_title{
position:relative;
margin-top:6em;
margin-left:1em;
}

#cat_title a{
text-decoration:underline;
}

#artpage_box{
margin:0 0 5em 35%;
padding-top:8em;
}


.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}


.artpage_thumb_artwork{
text-align:center;
width:20em;
height:20em;
white-space: nowrap;
float:left;
padding-left:0em;
padding-bottom:8em;
}

.artpage_thumb_artwork img{
width:80%;
height:auto;
max-height: 25em;
max-width: 25em;
}


.describe{
padding-left:1em;
}

#describe_box{
width:17em;
float:right;
margin:6em 0 2em 5em;
}

#describe_box p{
font-size:120%;
 
}

/* ----------------------------   P A G I N A T I O N   ------------------- */



#image_box{
position:relative;
margin:10px auto;
width:70%;
z-index:1;
}


#image_box img{
max-width:100%;
height:auto;
display:block;
margin:0 auto;
padding-bottom:1em;
}


#caption_box{
width:100%;
margin:0 auto;
text-align:center;
background-color:#999;
}


.pagination_box{
position:relative;
top:100px;
left:0;
margin:0;
padding:0;
width:100%;
height:30px;
}

#x_box{
position:absolute;
margin-top:-550px;
margin-left:90%;
}

#x_box a{
font-size:300%;
color:red;
}	


   

.previous a{
position:absolute;
top:250px;
left:5%;
font-size:600%;
color:#fff;
font-weight:lighter;
text-decoration:none;
margin:0;
padding:0;
line-height:1;
}

.previous a:hover{
text-decoration:none;
color:#666;
}

.next a{
position:absolute;
font-size:600%;
top:250px;
left:85%;
color:#fff;
font-weight:lighter;
text-decoration:none;
margin:0;
padding:0;
line-height:1;
 }

.next a:hover{
text-decoration:none;
color:#666;
}

/* ----------------------------   S T A T E M E N T   and  M I S C   ------------------- */

 

#statement_box{
clear:left;
float:left;
width:97%;
height:auto;
padding-left:1em;
padding-bottom:6em;
}

#statement_box p{
color:#999;
width:100%;
padding: 0;
margin:0;
}



/*..................................SMALL    D E S K T O P ....................................*/
/*..................................SMALL    D E S K T O P ....................................*/
/*..................................SMALL   D E S K T O P ....................................*/

@media screen and (max-width: 1100px) {
	
	.audio_box{
	width:40%;
	}
	
	#x_box{
	margin-top:-560px;
	margin-left:90%;
	}
}


/*............................................pre - T A B L E T S ....................................*/


@media screen and (max-width: 1160px) {
	
	.header .menu ul li a{
	padding:.4em .6em .4em .6em;
	}
}



@media screen and (max-width: 1040px) {
	
	.header .menu ul li {
	margin-right:4em;
	}
	
}

@media screen and (max-width: 950px) {


	#wrapper {
	max-width: 1000px;
	padding:1em 2em 1.8em 2em;
	}
	
	.header .menu ul {
  	width:70em; 
  	}
  	
  	.header .menu ul li a{
	padding:.4em 1.6em .4em 1.6em;
	line-height:3em;

	}
	
	#nav_name{
	margin: 2em 0 0 4em;
	}
	
	.header{
	margin-left:4em;
	margin-top:1em;
	position:relative;
	z-index:100;
	}
	
	
	
	 #bio_box{
	width:90%;
	margin: 2em 0 5em 4em;
	clear:left;
	padding-top:2em;
	}
 
	#bio_box .left img {
	 width: 240px;
    height:auto;
    float: none;
    padding: 10px;
	}
	
	#content_box iframe {
	width: 100%;
	}
	

	#audio_box_outer{
	margin: 2em 0 5em 4em;
	width: 90%;
	height:auto;
	float:left;
	padding:0;
	}
	
	.audio_box{
	float:none;
	width:60%;
	height:auto;
	margin:1em auto;	
	}
	
	
	#interview_content_box{
	margin: 2em 0 5em 4em;
	width:75%;
	padding:2em 5em 8em 5em;
	}
	
	
	#archive_box{
	margin: 3em 0 5em 4em;
	width:84%;
	}
	
	
	#x_box{
	margin-top:-450px;
	margin-left:90%;
	}
}




/*............................................T A B L E T S ....................................*/
/*............................................T A B L E T S ....................................*/
/*............................................T A B L E T S ....................................*/


@media screen and (max-width: 750px) {

	.header .menu ul {
  	width:60em; 
  	}
  	

	
	
}



@media screen and (max-width: 700px) {

	#wrapper {
	max-width: 860px;
	padding:1em 2em 1.8em 2em;
	}
	
	#nav_name{
	margin: 2em 0 0 2em;
	}
	
  	
	.header{
	margin-top:1em;
	margin-left:2em;
	}
	
	.header .menu ul li a{
	padding:.4em 12%;
	}
	
	#index_image{
	width:100%;
	margin:0 auto;
	height:auto;
	margin-top:-5px;
	margin-bottom:3em;
	}
   
	#index_image img{
	width:100%;
	margin:0 auto;
	height:auto;
	margin-top:15px;
	}
	
	.right_side_box{
	float:none;
	padding-right:0;
	margin-top:2em;
	}
	
	#photos_box img{
	width:70%;
	height: auto;
	}
	
	
	#content_box{
	width:90%;
	margin:1em auto 3em auto;
	clear:left;
	padding-top:2em;
	}
	
	#bio_box{
	width:90%;
	margin: 2em 0 5em 2em;
	clear:left;
	padding-top:2em;
	}
	
	#bio_box .left img {
	width: 200px;
	}
	
	#bio_box .right img {
	width: 200px;
	}
	
	#audio_box_outer{
	margin: 2em 0 5em 2em;
	}
	
	
	#image_box{
	margin:0 auto;
	width:70%;
	}
	
	#image_box img{ 
	max-width:100%;
	height:auto;
	padding:0;
	margin:0 auto;
	}

	#describe_box{
	width:23em;
	float:none;
	margin:1em auto 0 auto;
	}
		
	#caption_box{
	width:95%;
	}
	
	
	#interview_content_box{
	margin: 2em 0 5em 2em;
	width:85%;
	padding:2em 3em 8em 3em;
	}
	
	
	#archive_box{
	margin: 3em 0 5em 2em;
	width:84%;
	}
	
	#x_box{
	margin-top:-350px;
	margin-left:90%;
	}
	
	.previous a{
	top:150px;
	left:5%;
	font-size:400%;
	margin:0;
	padding:0;
	line-height:1;
	}


	.next a{
	font-size:400%;
	top:150px;
	left:86%;
	margin:0;
	padding:0;
	line-height:1;
	}

}

@media screen and (max-width: 680px) {

	#wrapper {
	max-width: 700px;
	}
	
	.header .menu ul {
  	width:100%; 
  	}
	
	#bio_box .left img {
	width: 250px;
	float:left;
	}
	
	#bio_box .right img {
	width: 250px;
	float:left;
	}
	
	#interview_content_box{
	margin: 2em 0 5em 2em;
	width:80%;
	padding:2em 2em 8em 2em;
	}
	
}


/*............................................ P H O N E S ......................................*/
/*............................................ P H O N E S ......................................*/
/*............................................ P H O N E S ......................................*/


@media all and (max-width: 480px) {
		
	
	#wrapper {
	max-width: 480px;
	padding:0;
	}
	
	
	#nav_name{
	max-width:350px;
	margin: 2em auto 0 auto;
	padding:5px;
	}
	
	.header{
	margin-top:.5em;
	}
	
	
	h2{
	font-size:120%;
	}
	
	#photos_box img{
	width:90%;
	}

	.pagination_box{
	padding-left:0;
	}
	
	#image_box{
	position:relative;
	margin:0 auto;
	width:100%;
	padding-left:0;
	}


	#image_box img{
	max-width:95%;
	height:auto;
	display:block;
	margin:0 auto;
	}
	
	#content_box{
	width:80%;
	}
	
	#bio_box{
	width:80%;
	}
	
	#bio_box .left img {
	width: 160px;
	}
	
	#bio_box .right img {
	width: 160px;
	float:right;
	}
	
	.audio_box{
	width:90%;
	}
	
	
	#caption_box{
	width:99%;
	padding-left:0;
	padding-top:10px;
	}
	
	#describe_box{
	width:27em;
	float:left;
	margin:1em 0 0 2em ;
	}
	
	#interview_content_box{
	clear:left;
	margin: 2em auto 5em auto;
	width:80%;
	padding:2em 2em 8em 2em;
	}
	
	
	iframe {
	width: 100%;
	}

	#archive_box{
	padding:0;
	margin: 3em auto;
	float:clear;
	width:75%;
	}
	
	#x_box{
	margin-top:-300px;
	margin-left:95%;
	}
	
	
	.previous a{
	top:100px;
	left:-15%;
	font-size:300%;
	margin:0;
	padding:0;
	line-height:1;
	}


	.next a{
	font-size:300%;
	top:100px;
	left:96%;
	margin:0;
	padding:0;
	line-height:1;
	}
	
	
	
	
}