/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	
	
	Modified and customized by David Carson - http://davidtcarson.com/
	
	*/

	



/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a { color: #3C619E; }
a:hover { color: #163d7d; }

a img { border: 0; }



/*	Typography presets
	------------------	*/

h1 {
	font-size: 7.25em;
	line-height: 1.2em;
	letter-spacing: .0625%;
	font-family: "proxima-nova-1","proxima-nova-2", Helvetica, Arial, sans-serif;
	font-weight: 800; 
	text-align: center; 
	
	text-transform: uppercase; 

}

h1#title { 
	width: 100%; 
	text-shadow: 0.01em 0.01em 0 #AAA, 0.02em 0.02em 0 #AAA, 0.03em 0.03em 0 #AAA, 0.04em 0.04em 0 #AAA, 0.05em 0.05em 0 #AAA, 0.06em 0.06em 0 #AAA, 0.07em 0.07em 0 #AAA, 0.08em 0.08em 0 #AAA;
	-webkit-transition: all 0.2s ease-out;
   	-moz-transition: all 0.2s ease-out;
   	-o-transition: all 0.2s ease-out;
   		border-bottom: 1px solid #CCCCCC;
	-moz-box-shadow:  0 1px 0 white;
  	-webkit-box-shadow:  0 1px 0 white;
  	box-shadow:  0 1px 0 white;	
   	
	}
	
h1#title:hover {
	color: #000; 
	text-shadow: none; 
	}

.large, h2 {
	font-size: 42px;
	line-height: 48px;
}

.bigger, h3 {
	font-size: 26px;
	line-height: 36px;
	text-shadow: 0 1px #FFFFFF;
}

.big, h4 {
	font-size: 22px;
	line-height: 30px;
}

body {
	font: 1em/1.5em "proxima-nova-1","proxima-nova-2",'Droid Sans',arial,sans-serif;
	text-shadow: 0 1px #FFFFFF;
}

.small, small {
	font-size: 13px;
	line-height: 18px;
}

ul li {
	text-align: left; 
	}
	
	p { font-size: .875em; }

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width: 896px;
	padding: 72px 48px 84px;
	color: #3C3C3C;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	margin: 0 auto; 
	text-align: center; 
	 background: #E8E8E8;
	 
	 }

ul {
	width: 100%; 
	list-style-type: none; 
	float: left; 
}

ul li {
	float: left; 
	width: 23%; 
	margin: 1%; 
	position: relative; 
}

ul li img {
	width: 100%; 
	}
	
#tagline {  background-color: #E8E8E8;
    display: inline-block;
	font-size: 1.3em; 
    font-style: italic;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    top: -13px; 
     }
    
.charA {
    margin-right: -5px; 
    }
    
p#colophon {
	float: left; 
	width: 100%; 
	text-align: center; 
	border-top: 1px solid #FFF;
	-moz-box-shadow:  0 -1px 0 #CCC;
  	-webkit-box-shadow:  0 -1px 0 #CCC;
  	box-shadow:  0 -1px 0 #CCC;
	margin-top: 1.6em; 
	padding-top: 1em; 
	padding-bottom: 1em; 
	color: #999; 
	font-size: .8em; 
}

p#colophon a {
	color: #666; 
	font-weight: bold; 
	text-decoration: none; 
	}
	
p#colophon a:hover {
	text-decoration: underline; 
	color: #555; 
	}
     
#login {
    overflow: hidden;
    position: fixed;
    right: 3px;
    top: 3px;
    z-index: 997;
}

.login-link {
    color: white;
    display: block;
    float: left;
    height: 30px;
    margin-left: 3px;
    width: 30px;
    background: url("i/login.png") no-repeat scroll left top transparent;
}


.login-link:hover {
    background-position: left bottom;
}





/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		width: 712px;
		padding: 48px 28px 60px;
		margin: 0 auto; 
	}
	
	ul li {
	width: 46%; 
	margin: 2%; 
	padding-bottom: 2em; 
	}
	
	 h1 {
	font-size: 6.25em;
}

 .charA {
    	margin-right: -5px; 
    }
    
 p { font-size: 1em; }
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {
		width: 252px;
		padding: 48px 34px 60px;
		margin: 0;
	}
	
	
	 h1 {
		font-size: 3.25em;
	}

	ul li {
		width: 96%; 
		margin: 2%; 
		padding-bottom: 2em; 
	}
	
	
	 .charA {
    	margin-right: -2px; 
    }
    
    #tagline {
    	font-size: .9em; 
    	top: -3px; 
	}
	
	h1#title {
		border-bottom: none; 
		-moz-box-shadow:  none;
  	-webkit-box-shadow:  none;
  	box-shadow: none;	
	} 
	

}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		width: 436px;
		padding: 36px 22px 48px;
		margin: 0; 
	}
	
	ul li {
		width: 46%; 
		margin: 2%; 
	}
	
	h1 {
		font-size: 4.25em;
}

 	.charA {
    	margin-right: -2px; 
    }
    
   #tagline {
    	font-size: 1em; 
     	top: -12px; 
	}
	
	h1#title {
	
		padding-bottom: 10px;
		border-bottom: 1px solid #CCCCCC;
	-moz-box-shadow:  0 1px 0 white;
  	-webkit-box-shadow:  0 1px 0 white;
  	box-shadow:  0 1px 0 white;	 
	  
	} 
	
	
	
	

}




/* Map Marks - This effect and all code below was created by Coda (Transmit) http://www.panic.com/transmit/ */


#location {
    position: absolute;
    left: 17%;
    top: 4%;
    width: 20px;
    height: 20px;   
    cursor: pointer;
    opacity: 1;
    
    -moz-transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    z-index: 100;
    background: none; 
    
}


#location {
	
	-moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    
}

#location:hover {
	-moz-transform: scale(1);
    -webkit-transform: scale(1);
}

#location .mapMarkShape { /* Inner shape */
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 2px #000;
    -moz-box-shadow: 0 0 2px #000;
    box-shadow: 0 0 2px #000;
    /* background: #ee2200 -webkit-gradient(radial, 5 3, 0, 5 5, 5, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));            */
    background: #ff2400;
}


#location .mapMarkGlow { /* Outer glow */
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;   
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 5px solid red;
    opacity: 0;
    
   
    
    -webkit-animation-name: 'blip';
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    
    -moz-animation-name: blip;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    
    
}

#location.visited .mapMarkShape {
    background-color: #936760;
}
#location.visited .mapMarkGlow {
	
    -webkit-animation-name: 'blip2';
    border-color: transparent;
}



@-webkit-keyframes 'blip'
{       
    0% {
        -webkit-transform: scale(.1);   
        opacity: 0;
    }
    1% {
        -webkit-transform: scale(.1);   
        opacity: .6;
    }
    60% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
}



@-moz-keyframes blip
{       
    from {
        -moz-transform: scale(.1);   
        opacity: 0;
    }
    1% {
        -moz-transform: scale(.1);   
        opacity: .6;
    }
    60% {
        opacity: 0;
        -moz-transform: scale(1);
    }
    to {
        opacity: 0;
        -moz-transform: scale(1);
    }
}







@-webkit-keyframes 'blip2'
{       
    0% {
        opacity: 0;
        -webkit-transform: scale(.1);
    }
    1% {
        opacity: .6;
        -webkit-transform: scale(.1);
    }
    60% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
}   


@-moz-keyframes blip2
{       
    0% {
        -moz-transform: scale(.1);   
        opacity: 0;
    }
    1% {
        -moz-transform: scale(.1);   
        opacity: .6;
    }
    60% {
        opacity: 0;
        -moz-transform: scale(1);
    }
    100% {
        opacity: 0;
        -moz-transform: scale(1);
    }
}