/***********************************************/
/* tapif.css                                   */
/***********************************************/

/***********************************************/
/* Fonts                                       */
/***********************************************/

@font-face {
      font-family: "Austin Bold";
      src: url("../../common/fonts/austin/Austin-Bold.otf");
}   
@font-face {
      font-family: "Austin Extra Bold";
      src: url("../../common/fonts/austin/Austin-Extrabold.otf");
}
@font-face {
      font-family: "Austin Light";
      src: url("../../common/fonts/austin/Austin-Light.otf");
}
@font-face {
      font-family: "Austin Bold Web";
      src: url("../../common/fonts/austin/Austin-Bold-Web.woff2");
}
@font-face {
      font-family: "Akkurat Bold";
      src: url("../../common/fonts/Akkurat/AkkuratStd-Bold.otf");
}
@font-face {
      font-family: "Akkurat Bold Italic";
      src: url("../../common/fonts/Akkurat/AkkuratStd-BoldItalic.otf");
}
@font-face {
      font-family: "Akkurat Italic";
      src: url("../../common/fonts/Akkurat/AkkuratStd-Italic.otf");
}
@font-face {
      font-family: "Akkurat Light";
      src: url("../../common/fonts/Akkurat/AkkuratStd-Light.otf");
}
@font-face {
      font-family: "Akkurat Light Italic";
      src: url("../../common/fonts/Akkurat/AkkuratStd-LightItalic.otf");
}
@font-face {
      font-family: "Akkurat Regular";
      src: url("../../common/fonts/Akkurat/AkkuratStd-Regular.otf");
}

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

	
body{
	font-family:"Akkurat Regular", "Times New Roman", Times, serif;
	color: #333333;
	line-height: 1.166;
	margin: 0px;
	font-size: 100%;	
}

a:link, a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #0055A4;
	text-decoration: none;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
	font-family:"Akkurat Regular", "Times New Roman", Times, serif;
	font-size: 120%;
	color: #334d55;
}

h2{
 font-size: 160%;
 color: #003399;
}

h3{
 font-size: 100%;
 color: #003399;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}

h5{
 font-size: 100%;
 color: #334d55;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-family:"Akkurat Regular", "Times New Roman", Times, serif;
 color: #333333;
}

.page_title{
	font-size:36pt; 
	font-family: "Akkurat Regular", "Times New Roman", Times, serif;
	padding-left: 25px;
	padding-right:20px;
}

.section_title{
	font-size:16pt; 
	font-family: "Akkurat Regular", "Times New Roman", Times, serif;
	border-bottom: thin solid #CCCCCC; 
	padding-top:20px;
	padding-bottom:20px;
}

.main_table{
	padding-left:10px; 
	padding-right:20px; 
	vertical-align:top;
}

.splash_message{
	color:#EF4135; 
	font-size:16pt; 
	font-family: "Akkurat Regular", "Times New Roman", Times, serif;
}

.response{
	color: #EF4135; 
	font-size: 14pt; 
	font-family: "Akkurat Regular", "Times New Roman", Times, serif;
}

.global_header{
	color: #000; 
	font-size:48pt; 
	font-family:'Austin Light','Times New Roman', Times, serif; 
	vertical-align:middle; 
	letter-spacing: 0px;
}

.menu_bar_elements{
	border-top:thin solid #CCC; 
	width:20%; 
	padding-top: 10px; 
	vertical-align:middle; 
	text-align:center; 
	white-space:nowrap; 
	font-size:12pt; 
	font-family:"Akkurat Light","Times New Roman", Times, serif;	
}

.footer_menu_bar_elements{
	border-top:thin solid #CCC; 
	width:19%; 
	padding-top: 20px; 
	padding-bottom: 20px; 
	vertical-align:middle; 
	text-align:center; 
	white-space:nowrap; 
	font-size:12pt; 
	font-family:"Akkurat Light","Times New Roman", Times, serif;	
}

.footer_logo{
	border-top:thin solid #CCC;
	width:24%; 
	padding-top: 20px; 
	padding-bottom: 20px; 
	
	text-align:left; 
	font-size:10pt; 
	font-family:"Akkurat Regular", "Times New Roman", Times, serif; 
	line-height:5px;
}

.form_label{
	color: #000; 
	font-size:16pt;
	font-family:"Akkurat Regular", "Times New Roman", Times, serif; 
}

.instructions_titles {
	color: #0055A4;
	font-size: 16pt;
	font-weight: bold;
}

.instructions {
	font-size: 14pt;
}

.motivation{
	font-size:10pt; 
	font-family:"Akkurat Regular", "Times New Roman", Times, serif; 
}

.counter{
	font-size: 80%;
	font-family:"Akkurat Regular", "Times New Roman", Times, serif; 
	font-weight: bold;
	color: #EF4135;
}

/***********************************************/
/* Tabs                                        */
/***********************************************/

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
	
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
	font-size:24px; 
	font-family:"Austin Bold Web","Times New Roman", Times, serif;}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
	font-size:16px; 
	font-family:"Akkurat Regular","Times New Roman", Times, serif;
}

/***********************************************/
/* Scroll Back to Top                          */
/***********************************************/

#scrollBackToTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #BBB; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    font-size: 16pt; /* Increase font size */
	padding: 10px; 
	opacity: 0.7;
	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

#scrollBackToTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
				
/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
	
}

#masthead a:link{
	color: #000;
}

#masthead a:visited{
	color: #000;
}

#masthead a:hover{
	color: #0055A4;
}

#menu{
	
}

#navBar{
	float: left;
	padding-left: 5%;
	padding-top: 4%;
	background-color: #FFF;
	width: 15%;
	display:block;
	vertical-align: top;
}

#content{
  	float:right;
  	width:80%;
	padding-top: 4%;
	display:block;
	vertical-align: top;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}


/*************** #pageName styles **************/

#pageName{
	/*padding: 0px 10px 10px 10px;*/
	color:000;
}


/************* #globalNav styles **************/

#globalNav{
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	white-space: nowrap;
	background-color: #000066;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 100%;
	padding: 0px 4px 0px 0px; 
}


/************* #breadCrumb styles *************/

#breadCrumb{
	font-size: 80%;
	padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 14pt;
	font-family:"Akkurat Light", "Times New Roman", Times, serif;
	
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 100%;
	font-family:"Akkurat Regular", "Times New Roman", Times, serif;
}

.story p{
	padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #737991;
	padding: 2px 2px 2px 2px;
	margin-top: 0px;
	background-color: #000066;
	bottom: 0px;
	width: 100%;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
	the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
	padding: 4px 4px 4px 4px;
	vertical-align: middle;
}


/************* #search styles ***************/

#search{
	padding: 5px 0px 5px 10px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
	display: block;
	margin: 0px;
	padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {
	display: block;
	
}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {

}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 10pt;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
	width: auto;
	voice-family: "\"}\"";
	voice-family:inherit;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color:#000;
	font-size:12pt; 
	font-family:"Akkurat Light","Times New Roman", Times, serif;	
}

#sectionLinks a:visited{
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color:#000;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #0055A4;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color:#FFF;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	border-top: 1px solid #cccccc;
	color:#000;
}

#advert img{
	display: block;
}


/************** #headlines styles **************/

#headlines{
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 80%;
}

#headlines p{
	padding: 5px 0px 5px 0px;
}

.displayed {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.coloredborder {
	border-left-style:inset;
	border-left-color: #003399;
	border-left-width: medium;
}

/*************** button *************************/

.btn { 
	display: inline; 
	position: relative; 
	background: #222; 
	padding: 10px; 
	color: #fff; 
	text-decoration: none; 
	cursor: pointer; 
	letter-spacing:1px; 
	font-family: "Austin Bold Web", Verdana, Arial, Helvetica, sans-serif; 
	font-size:24pt; 
	font-weight:bold;
	border: none;
}

.btn * { 
	font-style: normal; 
	background-image: url(images/btn2.png); 
	background-repeat: no-repeat; 
	display: block; 
	position: relative;
}

.btn i { 
	background-position: top left; 
	position: absolute; 
	margin-bottom: -5px; 
	top: 0; 
	left: 0; 
	width: 5px; 
	height: 5px; 
}

.btn span { 
	background-position: bottom left; 
	left: -5px; 
	padding: 0 0 5px 10px; 
	margin-bottom: -5px; 
}

.btn span i { 
	background-position: bottom right; 
	margin-bottom: 0; 
	position: absolute; 
	left: 100%; 
	width: 10px; 
	height: 100%; 
	top: 0; 
}

.btn span span { 
	background-position: top right; 
	position: absolute; 
	right: -10px; 
	margin-left: 10px; 
	top: -5px; 
	height: 0;
}

* html .btn span, * html .btn i { 
	float: left; 
	width: auto; 
	background-image: none; 
	cursor: pointer;
}

.btn.blue { background: #2ae; }
.btn.green { background: #9d4; }
.btn.pink { background: #e1a; }
.btn:hover { background-color: #0055A4; }
.btn:active { background-color: #2AE; }
.btn[class] { background-image: url(images/shade.png); background-position: bottom; }


/********************* tip ***********************/

.tip {
    color: #000;
    background:#DDD;
    display:none; /*--Hides by default--*/
    padding:20px;
    position:absolute;    
	z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	border: 2px solid;

	
}