@import url('https://fonts.googleapis.com');

*, *:after, *:before{
}

html
{
	height: 100%;
}

body
{
	/*background-image:url("/images/hrt-concrete-wall back seam.png");*/
	/*background-image:url("/images/cloudbackground.png");
	background-repeat:repeat; */
	/* #e3e2e1 */
	/*background-color:#edeceb;*/
	background-color:white;
	color:black;
	font-family: 'Source Sans 3',Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	/*letter-spacing:1px;*/
	margin:0px;
	height:100%;

display: flex;
    /*min-height: 100vh;*/
    flex-direction: column;
}

h1
{
	font-family: 'Source Sans 3',Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	font-weight: 600;
	letter-spacing: 0.05em;
}

h2
{
	font-family: 'Source Sans 3',Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.05em;
}


h3
{
	font-family: 'Source Sans 3',Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.05em;
}

h4
{
	font-family: 'Source Sans 3',Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	font-size:150%;
	font-weight: 600;
	letter-spacing: 0.05em;
}

a
{
	/*text-decoration:none;*/
}

small
{
	font-size:50%;
}

.loadinglogo
{
	padding:0px;
	text-shadow: 2px 2px 3px rgba(80,80,80,0.8);
	font-weight: 400;
	font-size:100%;
}

.logo
{
	padding:0px;
	text-shadow: 2px 2px 4px rgba(80,80,80,0.8);
	font-weight: 400;
	font-size:1em;
	vertical-align: text-bottom;
	margin-left: 0px;
	margin-right: 1em;
}

.soundbetter
{
	text-align: center;
}

.soundcloud
{
    width: 100%;
    border: none;
}

#chimelogo
{
	height: 3em;
}

#toppanel
{
	/*background-color:#232f4a;*/
	background-color: #0f284d;
	/*background-image: linear-gradient(#1d2840, #232f4a 10%, #232f4a 90%, #1d2840);*/
	/*overflow: hidden;*/
	width:100%;
	/*box-shadow: 2px 2px 9px rgba(0,0,0,.5);*/
}

#header
{
	font-family: "Cinzel",Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	color:white;
	float:right;
	padding: 1em;
}

#smallprint
{
	font-size: 0.75em;
}

.mainphoto
{
	/*float:left;*/
	border: 2px solid black;
	/*margin: 1em;*/
	/*width: 50%;*/
	width:100%;
}

.sideimageleft
{
    width: 40%;
    float: left;
}

.sideimageright
{
    width: 40%;
    float: right;
}

.blackborder 
{
    border-color: black;
    border-width: medium;
    border-style: solid;
}

.marginleftright 
{
    margin-left: 30px;
    margin-right: 30px;
}

#buttons
{
	line-height: 10px;
}

#homebuttons
{
	line-height: 10px;
	background:red;
	float:left;
	display:inline-block;
}

#twitterlogo
{
	float:right;
	height:3em;
}

#soundcloudlogo
{
	float:right;
	height:3em;
}

#facebooklogo
{
	float:right;
	height:3em;
}


#mainnav 
	{	
		display: inline-block;
    	line-height: 3em;
    	vertical-align: middle;
	}

#breadcrumb
{
	padding:0px;
	/*width:120px;*/
	float:left;
	/*display:block;*/
	color:white;
	vertical-align: text-top;
}

#breadcrumb h3
{
	display:inline;
	margin:0;
}

#maintext
{
	
}

#mainpage
{
	/*display:inline-block;*/
	float:none;
	/*background-image:url("/images/revivedseamback.png");
	background-color:white;*/
	width:70%;
	max-width:70%;
	min-width:751px;
	/*min-height:100%;
	height:100%;*/
	text-align:center;
	margin-left: auto;
  	margin-right: auto;
	/*-webkit-border-radius:1ex;
	-moz-border-radius:1ex;*/
	margin-top:0px;
	margin-bottom: 0px;
	padding:0px;
}

article
{	
	text-align: left;
}

article h1
{
	text-align:center;
}

#left
{
	display:block;
	float:left;
	width:40px;
	height:100%;
	min-height:100%;
	/*background-color:#232f4a;*/
	background-image: linear-gradient(to right, #1d2840, #232f4a 10%, #232f4a 90%, #1d2840);
	box-shadow: 2px 2px 9px rgba(0,0,0,.5);
}

#right
{
	/*background:url('http://www.londonguitarist.co.uk/images/damaskcolours.gif') repeat;*/
	display:block;
	float:right;
	width:15%;
	text-align:center;
}

#ad
{
	height: 600px;
	width: 160px;
	background: url('http://www.londonguitarist.co.uk/images/LondonGuitaristAd2.gif');
}

#ad1
{
	min-height: calc(30vh - 6em);
	max-height:450px;
	height: 30%;
	margin: 0px;
	padding: 0px;
}

#ad2 h2
{
	display: inline;
}

#ad2
{
	min-height: 40%;
	height:40%;
	margin: 0px;
	padding: 0px;
   	color:white;
}
#ad3
{
	background:url('http://www.londonguitarist.co.uk/images/adbottom.gif');
	background-size:cover;
	background-position: center top;
	min-height: calc(30vh - 6em);
	max-height:450px;
	height: 30%;
	margin: 0px;
	padding: 0px;
}

#wrapper
{
	/*display:table;  
	min-height: 100%;
	min-height: calc(100vh - 6em);
	height:calc(100vh - 6em);*/
	margin-bottom: 0px;
	width:100%;
	/*background-image:url("/images/damask.png");*/
	/*background-image:url("/images/cloudbackground.png");
    background-size: cover;*/
	/*background-color:white;*/
	flex: 1 0 auto;
}

footer
{
	display:block;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	/* min-height: 3em; */
}

#footerwrapper
{
	font-family: "Cinzel",Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
   	background-color:black;
   	color:white;
	width:100%;
 	/* min-height: 3em; */
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	padding:0px
}


#footertext
{
	font-family: "Bellefair",Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
   	background-color:black;
   	color:white;
	font-size:80%;
	line-height:3em;
	vertical-align: middle;
}

#projectlist
{
	list-style-type: none;
	padding:0;
}

#lyriclist
{
	list-style-type: none;
	padding:0;
}

#tracklisting
{
	list-style-type: none;
	padding:0;
}

#tracklist
{
	display: inline-block;
}

#myGallery
{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width: 400px;
}

#mc_embed_signup
{
	font:14px Helvetica,Arial,sans-serif;
	width:100%;
}

#mc_embed_signup input.email
{
	width:150px;
}

#newsfeed
{
	text-align:left;
}

#historyfeed
{
	clear:both;
	text-align:left;
}

#rootscd
{
	width:400px;
}

#rootsblurb
{
	width:600px;
	float:right;
}

#rootcover400
{
	float:left;
}

#musichistorylogo
{
	float:left;
	height:10em;
}

#footericons
{
	float:left;
}

#chargedalbum
{
	display:inline-block;
}
#chargedradio
{
	display:inline-block;
}

.fileicon
{
	border: 1px solid #404040;
	box-shadow: 4px 4px 5px #aaa;
}

.noborder
{
	border: 0;
}	

.sideimage
{
	width:40%;
	float:right;
}

.soundcloudplayer
{
	width: 100%;
	height: 350px; 
	border: 0px;
	overflow: hidden;
	/*scrolling: no;
	frameborder: no;*/
}

.soundcloudleft
{
    width:300px;
    height:600px;
    float:left;
}

.fbblue
{
	height: 3em;
	vertical-align:bottom;
}

.twblue
{
	height: 3em;
	vertical-align:bottom;
}

.scgold
{
	height: 3em;
	vertical-align:bottom;
}

.ytred
{
	height: 3em;
	vertical-align:bottom;
}

.inpink
{
	height: 2em;
	vertical-align:middle;
	margin-left: 5px;
}

.css-slideshow{
   position: relative;
   max-width: 751px;
   height: 500px;
   margin: auto auto;
}
.css-slideshow figure{
   margin: 0;
   position: absolute;
}
.css-slideshow figcaption{
   position: absolute;
   top: 0;
   color: #fff;
   background: rgba(0,0,0, .3);
   font-size: .8em;
   padding: 8px 12px;
   opacity: 0;
   transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
   transition: opacity .5s;
   opacity: 1;
}
.css-slideshow figure{
   opacity:0;
}

figure:nth-child(1) {
   animation: xfade 9s 3s infinite;
}
figure:nth-child(2) {
   animation: xfade 9s 6s infinite;
}
figure:nth-child(3) {
   animation: xfade 9s 0s infinite;
}

@keyframes xfade{
   0%{
      opacity: 1;
   }
   25% {
      opacity:1;
   }
   33%{
      opacity: 0;
   }
   98% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}

.fb-like
{
	vertical-align: top;
	margin-top: 0px;
}

.twitter-follow-button
{
	vertical-align: text-top;
	margin-top: 0px;	
}

.navli
{
	display:inline;
}

.navli:before
{
	content: "|"; 
	color:white;
}

.divider:before
{
	content: "|"; 
	color:white;
}

.footerli
{
	display:inline;
}

.footerli:before
{
	content: " | "; 
	color:white;
}

div.side:before
{
	content: " | "; 
	color:white;
}

div.side
{
    display: inline-block;
}

ul.side
{
    display:inline-block;
	line-height:1em;
	vertical-align:middle;
	padding-inline-start: 0px;
}

a:link {color:#261088;}      /* unvisited link */
a:visited {color:#261088;}   /* visited link */
a:hover {color:#503AB5; background-color: transparent;}    /* mouse over link */
a:active {color:#FFFFFF;} 	/* selected link */

a.side
{
	font-family: "Arcon","Bellefair",Calibri,Trebuchet MS,Helvetica,Arial,sans-serif;
	font-size:100%;
}
a.side:link {color:#AA9439;}      /* unvisited link */
a.side:visited {color:#AA9439;}   /* visited link */
a.side:hover {color:#837B5C; background-color: transparent;}    /* mouse over link */
a.side:active {color:#FFFFFF;} 	/* selected link */

@media handheld and (orientation: landscape), screen and (max-width: 1200px) /*Used to be 900 */
{
    .logo
    {
        margin-left: 0px;
	    margin-right: 0px;
    }
    
    body
    {
       /* display:block;*/
    }

    #toppanel
	{
		display:block;
		overflow: visible;
		padding-bottom: 1em;
	}
	#header
	{
		display:inline;
		width:100%;
		/*background-color:#232f4a;*/
		padding: 0px;
	}
	#mainpage
	{
		display:inline;
		width:100%;
		min-width:100%;
		max-width:100%;
	}
		
	#wrapper
	{
		display:inline;
		width:100%;
		min-width:100%;
		max-width:100%;
	}	
	
	#buttons
	{
	    vertical-align:middle;
	}
	
	#left
	{
		display:inline;
		float:left;
		width:100%;
		height:0px;
	    min-height:0px;
	}
	
	#right
	{
		display:inline;
		float:left;
		height:auto;
		width:100%;
		background:url('http://www.londonguitarist.co.uk/images/damaskcolours.gif') repeat;
	}

	.sideimageleft
	{
    	width: 100%;
    	float: none;
	}

	.sideimageright
	{
    	width: 100%;
    	float: none;
	}

	.marginleftright
	{
		margin-left: 0px;
		margin-right: 0px;
	}

	.blackborder 
	{
		border-left: 0px;
		border-right: 0px;
	}
	
	#ad
	{
		height: 100px;
		width:100%;
		background: url('http://www.londonguitarist.co.uk/images/LondonGuitaristAd300.png');
		background-position: center;
		background-repeat: no-repeat;
	}
	
	#ad1
	{
		float:left;
		height:1em;
		width:20%
	}
	#ad2
	{
		float:left;
		min-height:100%;
		width:60%
	}
	#ad3
	{
		background:none;
		float:left;
		height:1em;
		width:20%
	}
	
	#mainnav 
	{	
		display:inline;			
		margin: 0 auto;
		text-align:center;
		padding:0px;
	}
	
	#londonguitaristprofile
	{
		max-width:100%;
	}	
	
	.slidefigure
	{
		max-width: 100%;
		height: auto;
		width:auto;
	}
	
	.css-slideshow
	{	
   		max-width: 100%;
		height: auto;
		width:auto;
	}
	.css-slideshow figure
	{
   		max-width: 100%;
		height: auto;
		width: auto;
	}
	
	li.navli:before
	{	
		content: none; 
	}

	li.footerli:before
	{	
		content: none; 
	}

	span.divider:before
	{
		content: none; 
	}
	
	a.side
	{
		display:block;
		line-height:1em;
		/*border-style: none none solid none;*/
		border-width: 1px;
	}
	
	a.side:hover {color:white; background-color: #AA9439;}
	
	.logo
	{
		
	}
}