/* fonts */
body{
font-family:Verdana, Arial, Sans-Serif;
font-size:12px;
background-color:#ebebeb;
}
@media only screen and (max-width: 799px){
body {
font-size:13px;
}
}

/* Headings & text styles */
p{
line-height:18px;
}
h1{
font-size:18px;
font-weight:bold;
}
h2{
font-size:16px;
font-weight:bold;
}
h3{
font-size:14px;
font-weight:bold;
margin:0px 0px 10px 0px;
}
.underline{
text-decoration:underline;
}
.italic{
font-style:italic;
}
.bold{
font-weight:bold;
}
.small{
font-size:10px;
}
.alert{
color:red;
}
.details div{
padding-top:5px;
}  
div.spacer{
padding-bottom:20px;
}
li{
margin-bottom:10px;
}

/* links */
a{
border:0px;
text-decoration:none;
font-weight:bold;
color:#3533CC;
}
a img{
border:0 none;
}

/* Lists */
ul.links, ul#mainnav{
list-style:none;
}
ul.links{
list-style:none;
}
ul.links{
padding-left:30px;
line-height:200%;
}
ul#mainnav{
margin:0px;
padding:0px;
}
ul#mainnav li{
margin:5px 5px 0px 5px;
}
@media only screen and (max-width: 799px){
ul#mainnav li{
margin:7px 5px 0px 5px;
}
}
ul li ul{
line-height:150%;
padding-bottom:10px;
}
ul.nobullet, #helplines ul{
list-style: none;
}

/* for email addresses */
.email span:after{
content:"@";
}

/* Tables */
.timeslot {
width:150px;
}
table.itinerary > tbody > tr > td{
vertical-align:top;
padding-bottom:15px;
}

/* main sheet */
.centerpage {
background-color:#fff;
width:765px;
margin:10px auto;
text-align:center;
border:solid 1px #bebebe;
border-radius:7px;
padding:10px;
}
@media only screen and (max-width: 479px){
.centerpage {
margin:10px auto;
width:274px;
padding:10px;
background-color:#fff;
border:1px solid #bebebe;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
}
@media only screen and (min-width:480px) and (max-width: 599px){
.centerpage {
margin:10px auto;
width:371px;
padding:10px;
background-color:#fff;
border:1px solid #bebebe;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
}
@media only screen and (min-width: 600px) and (max-width: 767px){
.centerpage {
margin:10px auto;
width:409px;
padding:10px;
background-color:#fff;
border:1px solid #bebebe;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
}
@media only screen and (min-width: 768px) and (max-width: 799px){
.centerpage {
margin:10px auto;
width:451px;
padding:10px;
background-color:#fff;
border:1px solid #bebebe;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
}

/* header banner */
.top{
text-align:left;
margin-bottom:10px;
position:relative;
}
@media only screen and (max-width: 599px){
.top {
margin:5px 5px 8px 5px;
position:relative;
}
}
@media only screen and (min-width:600px) and (max-width: 799px){
.top {
margin:5px 5px 10px 5px;
position:relative;
}
}
.top-image{
background-image:url("/images/DAA-banner-desktop.png");
background-repeat:no-repeat;
height:158px;
width:765px;
}
@media only screen and (max-width: 479px){
.top-image {
background-image:url("/images/DAA-banner-320px.png");
background-repeat:no-repeat;
width:264px;
height:148px;
}
}
@media only screen and (min-width:480px) and (max-width: 599px){
.top-image {
background-image:url("/images/DAA-banner-480px.png");
background-repeat:no-repeat;
width:361px;
height:148px;
}
}
@media only screen and (min-width:600px) and (max-width: 767px){
.top-image {
background-image:url("/images/DAA-banner-600px.png");
background-repeat:no-repeat;
width:399px;
height:148px;
}
}
@media only screen and (min-width:768px) and (max-width: 799px){
.top-image {
background-image:url("/images/DAA-banner-768px.png");
background-repeat:no-repeat;
width:441px;
height:148px;
}
}

/* header banner linkable */
.top-image a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

/* menu container */
.left{
float:left;
width:160px;
text-align:left;
background-color:#ebebeb;
padding-bottom:5px;
margin-bottom:10px;
}
@media only screen and (max-width: 799px){
.left {
background-color:#fff;
width:100%;
margin-left:auto;
margin-right:auto;
}
}

/* ############# LEFT NAV MENU ############### */
/* ################# BURGER MENU #################### */
@media only screen and (min-width: 800px){
.burger-container {
	display: none;
}
}

@media only screen and (max-width: 799px){
.burger-container {
	float: right;
	display: none;
    cursor: pointer;
    padding: 5px;
   
    }
}
/* ################# END OF BURGER MENU #################### */

	#mainnav li {
		width:150px;
	}

	#mainnav a , #mainnav button {
		display:block;
		font-weight:bold;
		color:#fff;
		background-color:#260e8c;
		text-align:center;
		padding:8px 0px;
		text-decoration:none;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border: 3px solid #260e8c;
	}
	#mainnav button {
			width: 100%;
	}
	#daa-members-submenu {
		list-style: none;
		padding-left: 10px;
	}
	#submenu {
		background: none;
		cursor: pointer;
		padding: 0px;
	}

	#mainnav a.item-active, #mainnav button.item-active{
		color:#260e8c;
		background-color:#febe00;
		border: 3px solid #febe00;
	}

	#mainnav a:hover, #mainnav a:focus, #mainnav button:hover, #mainnav button:focus{
		border: 3px solid #febe00;
	}

	@media only screen and (max-width: 799px){
	#mainnav li {
		width:100%;
	}

	#mainnav a {
		padding:10px 0px;
	}

}


/* ############ MAIN CONTENT ############# */
.main{
float:left;
width:580px;
text-align:left;
height:100%;
padding:0px 0px 0px 15px; 
}
@media only screen and (max-width: 799px){
.main {
padding:5px;
margin:0px;
float:none;
width:auto;
}
}

/* footer */
.bottom{
clear:both;
background-color:#aaa;
font-size:10px;
margin:0px;
padding:5px;
}
@media only screen and (max-width: 799px){
.bottom {
background-color:#aaa;
color:#fff;
font-size:14px;
margin:5px;
padding:5px;
text-align:center;
}
}

/********************
*** PAGE SPECIFIC ***
********************/

/* homepage helpline & news announcements */
.helplinelink {
font-size:20pt;
margin:30px 0;
text-align: center;
}
.helplinelink a {
border-radius:5px;
border:2px solid;
padding:0px 10px 2px 10px;
}
.phone-icon {
width:27px;
height:21px;
border:0px;
margin:1px 5px 0px 0px;
}
@media only screen and (max-width: 799px){
#latestnews {
margin:0px 0px 5px 0px;
}
}
.meeting{
width:100%;
margin-bottom:10px;
background-color:#EAEBD6;
padding:5px;
}
@media only screen and (max-width: 799px){
.meeting{
margin-bottom:10px;
background-color:#EAEBD6;
width:100%;
padding:5px;
}
}
.newsitem{
width:100%;
margin-bottom:10px;
background-color:#EAEBD6;
}
@media only screen and (max-width: 799px){
.newsitem {
margin-bottom:10px;
background-color:#EAEBD6;
width:auto;
}
}
.newsitem{
padding:5px;
}
@media only screen and (max-width: 799px){
.newsitem{
padding:7px;
}
}
.newsitemheadline{
float:left;
color:orange;
}
@media only screen and (max-width: 799px){
.newsitemheadline {
padding-bottom:5px;
color:orange;
float:none;
}
}
.lastupdated{
float:right;
font-size:8pt;
font-style:italic;
}
@media only screen and (max-width: 799px){
.lastupdated {
font-size:8pt;
font-style:italic;
float:none;
}
}
.newsitembody{
clear:both;
padding-top:5px;
}
@media only screen and (max-width: 799px){
.newsitembody {
padding-top:5px;
float:none;
}
}

/* Meeting details pages */
#printthis {
float:right;
vertical-align:text-top;
margin-bottom:5px;
}
@media only screen and (max-width: 799px){
#printthis {
float:none !important;
margin:30px 0 !important;
}
}
div.meeting-times{
float:left;
width:25%;
}
div.meetings{
float:left;
width:75%
}
.meeting td{
vertical-align:top;
}
.mtg-time{
width:120px;
}

/* am I addict page */
.bubbles{
margin:10px 0px 0px 5px;
}
@media only screen and (max-width: 799px){
.bubbles{
display:none;
}
}

/* ####### PERSONAL STORIES PAGE  ########## */
#shares table {
	table-layout: fixed;
	width: 100%;
}

/* Style the list */
#personal-stories ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  border-bottom: none;
}

/* Float the list items side by side */
#personal-stories ul.tab li {
display: inline-block;
float: left;
margin: 0px;
width: 50%;
background: #ccc;
border: 0px solid #ccc;
text-align: center;
}

/* Style the links inside the list items */
#personal-stories ul.tab li a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 14px;
  display: block;  /* to get it to fill the li parent */
}

/* Change background color of links on hover  TODO CHANGE THIS TO JUST A BORDER COLOR? */
#personal-stories ul.tab li a:hover {background-color: #febe00;}

#personal-stories ul.tab li.active {
background: #fff;
}

/* Remove hover styling on the active tab (but keep it on inactive tabs) */
#personal-stories ul.tab li.active > a:hover {
	background: #fff;
	cursor: initial;
}

/* Add text decoration accessibility focus on the tabs */
#personal-stories ul.tab li > a:focus {
	text-decoration: underline;
	outline: none;
}

/* Style the tab content */
#personal-stories .tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#written-shares p{
	font-family: 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', sans-serif;
	font-size: 14px;
	line-height: 1.6;
}

.collapsible-heading {
	border: none;
	text-align: left;
	font-weight: bold;
	display: block;
	line-height: 150%;
	font-family: Verdana, Arial, Sans-Serif;
}

.collapsible-heading.audiolink  {
	line-height: 100%;
	font-weight: normal;
}


/* pi page */
.bookletlink {
height:100px;
vertical-align:middle;
margin:0px 20px; 	
}
.pi-booklet{
float:left;
}
@media only screen and (max-width: 799px){
.pi-booklet{
float:none;
}
}
.pi-container{
clear:left;
}
.pi-textlink{
padding-top:45px;
height:55px;
}
@media only screen and (max-width: 799px){
.pi-textlink{
padding-top:12px;
height:auto;
}
}

/* literature page */
.booklet-container{
	min-height: 100px;
	clear:left;
	margin:10px 0px;
}
.booklet{
	float:left;
}
@media only screen and (max-width: 799px){
.booklet{
	float:none;
}
}
.booklet-textlink{
	padding-top:10px;
}
@media only screen and (max-width: 799px){
.booklet-textlink{
	padding-top:12px;
	height:auto;
}
}
.bookletlink {
	/*height:100px; */
	vertical-align:middle;
	margin:0px 20px;
}

.pdf-explainer {
	margin: 20px 0px;
	font-style: italic;
	font-weight: lighter;
	font-size: 10px;
}


/* start meeting page */
.subsectionnavlinks li{
list-style:none;
list-style-type:none;
display:inline;
margin:0;
padding:0;
padding-left:0;
}
.subsectionnavlinks li:after{
content:" | ";
}
.subsectionnavlinks li:last-child:after{
content:"";
}
ul.subsectionnavlinks{
padding-left:0;
}
ul.subsections li{
margin-bottom:5px;
}
ul.subsections li ul li{
margin-bottom:0px;
}
.essential{
background-color:#FFA48C;}     
.desirable{
background-color:#FFE16A;}     
.whenyoucan{
background-color:#9DFF9D;}     
.essential, .desirable, .whenyoucan{
padding:10px;
margin-bottom:10px;}
.subsection{
margin-top:30px;
}
.subsection h2{
display:inline;
}
.toplink{
float:right;
font-size:8pt;
}
@media only screen and (max-width: 799px){
.toplink{
display:none;
}
}
.toplink-bottom{
display:none;
}
@media only screen and (max-width: 799px){
.toplink-bottom{
float:right;
display:inline;
margin-bottom:20px;
}
}
.toplink-bottom-shares{
display:none;
}
@media only screen and (min-width: 480px) and (max-width: 799px){
.toplink-bottom-shares{
float:right;
display:inline;
margin-bottom:20px;
}
}
@media only screen and (max-width: 479px){
.toplink-bottom-shares{
display:none;
}
}

/* Events Page */
#eventsUpcoming .event img{
width:270px;
}
@media only screen and (max-width: 479px){
#eventsUpcoming .event img{
width:263px;
margin-bottom:10px;
}
}
@media only screen and (min-width:480px) and (max-width: 799px){
#eventsUpcoming .event img{
margin-bottom:10px;
}
}
#eventsUpcoming .event-details{
width:290px;
}
@media only screen and (max-width: 799px){
#eventsUpcoming .event-details{
width:100%;
}
}
#eventsUpcoming .flyer{
margin-left:10px;
}
#eventsUpcoming .event-details td.title{
font-size:16px;
	padding-bottom:10px;
}
#eventsUpcoming .event-details td.location{
padding-top:20px;
}
#eventsUpcoming .description{
padding-top:20px;
}
#previousEvents .event img, #archivedEvents .event img{
width:120px;
}
@media only screen and (max-width: 799px){
#previousEvents .event img, #archivedEvents .event img{
width:120px;
margin-bottom:10px;
}
}
.event-details, .flyer{
	float: left;
}
.flyer{
	margin-left:20px;
}

@media only screen and (max-width: 799px){
.event-details, .flyer{
float: none;
margin-left:0px;
}
}
@media only screen and (max-width: 479px){
#eventsUpcoming .event-details{
width:263px;
}
}
.event-details{
width:400px;
}
@media only screen and (max-width: 799px){
.event-details{
width:100%;
}
}
.event-details td.title{
font-weight:bold;
}
#intro{
margin-bottom:30px;
}

/* Contact Us page */
.region-phone{
margin-top:5px;
}
@media only screen and (max-width: 799px){
li.region-phone{
font-size:13px;
}
}
#helplines {
width:auto;
}
#helplines .number {
float:none;
padding-left:10px;
}
.number a{
color:orange;
}
#helplines #regions{
font-style:italic;	
}
#helplines ul li *{
font-style:normal;
}
@media only screen and (max-width: 799px){
#helplines ul li *{
font-size:13px;
}
}

/* FAQ page */
#faq h2{
	font-weight:bold;
	padding-top:15px;
	padding-bottom:5px;
	font-size: 12px;
}

/* global daa page */
/* all country flag icons in public_html/images/FLAGS_PACK */
/* new website (mobile friendly) flags in public_html/images/flags_new */
#countryLinks{
margin-left:10%;
margin-top:30px;
}
@media only screen and (max-width: 599px){
#countryLinks{
margin-left:0px;
margin-top:0px;
}
}
@media only screen and (min-width: 599px) and (max-width: 799px){
#countryLinks{
margin-left:20px;
margin-top:0px;
}
}
.flag{
margin-right:10px;
border-radius:3px;
vertical-align:middle;
height:40px;
width:60px;
}
@media only screen and (max-width: 799px){
.flag{
margin:0px 10px 5px 0px;
border-radius:3px;
vertical-align:middle;
height:40px;
width:60px;
}
}
.country-name
{
text-decoration:none;
font-weight:bold;
color:#000000;
font-size:18px;
padding-right:15px;
}
.country-container{
clear:both;
}
.country{
margin-bottom:15px;
float:left;
}
.textlink{
padding:11px 0px 0px 0px;
}
@media only screen and (max-width: 799px){
.country{
margin:30px 0px 0px 0px;
float:none;
}
}
@media only screen and (max-width: 799px){
.textlink{
padding:0px;
}
}