/* -----------------------------------
    Styles for the "Raftery" layout 
   ----------------------------------- */

* {box-sizing: border-box;}

/* text */

body{
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	line-height:1.4em; 
	font-weight:normal;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.45em 0;
	padding:0;
} 


/* links */

nav .ts-menu {border:3px solid #050;}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
    list-style-position:inside;
	padding:0;
	margin:0;
}

a:visited,
a:active,
a:hover{color:#0099ff;}
a:hover{ text-decoration:none;}

li.ts-alist > a:first-child:after {
    content: " ▼";
}

/* images */
img {max-width:100%;height:auto;}
img.floatright {float:right;}
img.floatleft {float:left;margin:0 2vw 1vw 0;}
img.middle {display:block;margin:0 auto;}
img.border {outline:1px solid black;}
  
/* structure */   
.wrapper, #ts-content{
	width: 92%; 
	margin: 0 auto;
	display:block;
}

header{
	padding:15px 0;
}

header img{
	border:3px solid #050;
	border-radius:10px;
}

#banner{ 
	text-align:center;
}
	
#page-header{
	background:#f3f3f3;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	padding:20px 0;
}

#content {  
	margin:40px 0;
}

aside { 
	margin:30px 0 20px 0;
}

p{ margin:0 0 1.5em;}


/*MAIN MENU*/
.menu-toggle{
	display:block;
	padding:10px;
	margin:20px 0 0;
	background:#666;
	color:#fff;
	cursor:pointer;
	text-transform:uppercase;
	font-size:20px;
}
.menu-toggle.toggled-on{
	background:#0099ff;
}
.ts-menu{
	display:none;
}	
.ts-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
}

.ts-menu{
	clear:both;
	margin-bottom:60px;
	
}
.ts-menu li a {
	background:#dadada;
	display:block;
	margin:1px 0; 
	padding:10px;
	text-decoration:none;
}
.ts-menu li a:hover{
	background:#0099ff;
	color:#fff;
}
.ts-menu li li a {
	background:#e8e8e8;
	padding-left:40px;
}
.ts-menu li li li a {
	background:#efefef;
	padding-left:80px;
}

/*SECONDARY MENU*/
#secondary-navigation{
	margin-bottom:60px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#0099ff;
	color:#fff;
}

/* footer */
footer{  
	clear:both;
	font-size:80%;
	padding:20px 10px;
}
footer ul{
	margin:0;
	padding:0;
}

/*colors and backgrounds*/
body{
	background:#090;
}
h1, h2, h3, h4, h5, h6{
	color:#333; 
}

footer{ 
	background:#333;
	color:#ccc;
}
footer h1, footer h2, footer h3, footer h4{ 
	color:#CCC; 
	margin-bottom:10px;
}
footer ul{
	margin:0 0 0 8%;
}

a.buttonlink{ 
	background:#0099ff; 
	border-radius:7px; 
	color:#fff;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:10px;
	text-decoration:none;
}
a.buttonlink:hover{
	background:#8dbc01;
}
.greenelement{
	background:#5ec79e;
	color:#fff;
}
.violetelement{
	background:#887dc2;
	color:#fff;
}



/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}


/* Mobiles */

@media only screen and (min-width: 481px) {
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:28px; /*this depends on the height of the logo*/
	float:right;
}

} 

/* Tablets */
@media only screen and (min-width: 920px) {

.wrapper{
	max-width: 1200px; 
	margin: .75em auto;
}

#banner{ 
	float:left; 
	text-align:left;
	margin-bottom:0px;
}
header{
	padding:0;
}
#content {  
	float:left;
	width:65%;
}
#content.wide-content{
	float:none;
	width:100%;
}

aside { 
	float:right;
	width:30%;
}

/* Menus and other essentials */
.menu-toggle{display:none;}
.ts-menu {display:block;}

.ts-menu, .ts-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.ts-menu ul {
	position:		absolute;
	display:none;
	width:			12em; /* left offset of submenus need to match (see below) */
}
.ts-menu ul li {
	width:			100%;
}
.ts-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.ts-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;
}
.ts-menu li li {
	margin-left:0px;
}
.ts-menu a {
	display:		block;
	position:		relative;
}
.ts-menu li:hover ul  {
	display:block;
	left:			0;
	top:			45px; /* match top ul list item height */
	z-index:		99;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.ts-menu li:hover li ul,
ul.ts-menu li.sfHover li ul {
	top:			-999em;
}
ul.ts-menu li li:hover ul,
ul.ts-menu li li.sfHover ul {
	left:			12em; /* match ul width */
	top:			0;
}
ul.ts-menu li li:hover li ul,
ul.ts-menu li li.sfHover li ul {
	top:			-999em;
}
ul.ts-menu li li li:hover ul,
ul.ts-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/* Menus */
#ts-nav, .ts-menu {
	float:right;
	margin: .35em 0 0 0;
}
.ts-menu a {
	text-decoration:none;
}
.ts-menu li a {
	background:#fff;
	margin:0; 
	padding:10px 20px;
	height:45px;
}
.ts-menu a, .ts-menu a:visited  {
	color:	#0099ff;	
}
.ts-menu li li a {
		border-top:		1px solid rgba(255,255,255,.2);
		background:		#333; /*fallback for old IE*/
		background:rgba(0,0,0,.6);
		color:	#fff;
		padding-left:20px;
		height:auto;
}
.ts-menu li li a:visited{color:#fff;}
.ts-menu li li li a,
.ts-menu li.ts-current-section * li a{
	padding-left:20px;
	background:rgba(0,0,0,.6);
}

.ts-menu li:hover > a,
.ts-menu li.ts-current-section a{ 
	color:#fff;
	background:#0099ff;
}
.ts-menu li li:hover > a{
	color:#fff;
	background:#0099ff;
}

nav ul {
    list-style: none;
    list-style-image: none;
	padding:0;
	margin:0;
}



.rightfloat{float:right;}