@charset "utf-8";

*{   /* Universal Acceptor */
    margin:0;
    padding:0;
    border:0;
    outline: none;
}

body {
    color:#2e2e2e;
    font-size:14px;
    font-family: Arial, Geneva, sans-serif;
    background-image: url(/assets/images/bg.jpg);
}

.whitebg { background-image: url(/assets/images/bg-white.jpg);  }
.hidden { display:none }

a.glossary{ text-decoration:underline; font-style:italic; color:#666666 }

#audio.play {
    background: url("/assets/images/controls.play.jpg");
    height: 50px;
    width: 50px;
}
#audio.play:hover {
    background: url("/assets/images/controls.play.hover.jpg");
    height: 50px;
    width: 50px;
}

#audio.pause {
    background: url("/assets/images/controls.pause.jpg");
    height: 50px;
    width: 50px;
}
#audio.pause:hover {
    background: url("/assets/images/controls.pause.hover.jpg");
    height: 50px;
    width: 50px;
}

div.audiopop {
    float: right;
    background-color: #f2fbe6;
    padding-right: 29px;
    /*width: 440px;*/
}

#tooltip {
    position: absolute;
    z-index: 3000;
    border:1px solid #fff;
    background-color: #587584;
    color:#FFF;
    padding: 8px;
    opacity: 0.98;
}
#tooltip h3, #tooltip div { margin: 0; color:#FFF; width:300px; font-size:14px}

#slideshow {
    position: relative;
    text-align:right;
    bottom:0;
    right: 0;
    height: 478px;
}

#slideshow img {
    position:absolute;
    bottom:0;
    right:0;
    z-index:8;

}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

#login-note {
    top: 0;
    right: 0;
    position: relative;
    height: 190px;
    max-width: 320px;
    background-color: #442363;
    color: #FFF;
    z-index: 300;
    font-size: 11px;
    font-family: 'Arial', sans-serif;
    line-height: 1.4;
    overflow: hidden;
    border-bottom-left-radius:10px;
    -moz-border-radius-bottomleft: 10px
}
#login-note a { text-decoration: underline; color: #FFF; }

#login-note.pad { padding: 15px 20px; }

.login-submit { margin-left: 40px; }

/*reset*/
#reset { width:520px }
#reset label {
    font-size:11px;
    color:#525252;
    width:100px;
    display:block;
    float:left;
    padding-top: 6px;
}

#reset-password
{
  font: bold 12px;
  text-decoration: none;
  background-color: #196aa2;
  color: #fff;
  padding: 6px 12px 8px;
}

.reset-submit { margin-left: 144px; }

.reset-submitted {
    margin-bottom: 15px;
    color: #08a305;
}


.login-error, .reset-error {
    margin-top: 15px;
    color: #C30;
}

.lg-margin { margin-bottom: 20px; }

#exercisebox .option { padding-left:5px; font-family: 'PT Serif', serif;
                       font-style: normal;
                       font-weight: 400;
                       font-size: 16px;
                       text-transform: none;
                       text-decoration: none;
                       letter-spacing: 0em;
                       word-spacing: 0em;
                       line-height: 1.4;
                       color:#68923D }

#exercisebox p { margin-top:2px; margin-bottom:0px;  }

/* LAYOUT */
#wrapper {
    width: 938px;
    margin: 0 auto;
    position:relative;
    top:20px;
}
#container {
    width: 880px;
    background: #FFF;
    margin: 0 auto;
    min-height:480px;
    -moz-box-shadow: 0 6px 6px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 6px 6px rgba(0,0,0,0.6);
    box-shadow: 0 6px 6px rgba(0,0,0,0.6);
}
#header {
    width: 880px;
    margin: 0 auto;
    color:#fff;
    font-weight:bold;
}
#header a { color:#fff;
            font-size:12px;
            letter-spacing:1px;
            font-weight:bold; }
#menu {
    width: 880px;
    background-image: url(/assets/images/YANA.nav-bar-middle.png);
    background-color:#FFFFFF;
    height: 96px;
    margin-bottom:20px;
    float:left
}

.menuitem {
/*
    background-position: center top;
    height: 56px;
    float:left;
    margin-right: 10px;
    background-repeat: no-repeat;
*/
	float: left;
    color: #6eb43f;
    font-weight: bold;
}
.menuitem:hover, .menuactive {
	/* background-position: center bottom; cursor:pointer*/
	color: #d6e03d;
}
@media (min-width: 768px){
	#actual_nav a{
		max-width: 200px;
		text-align: center;
	}
}
@media (max-width: 767px){
	#actual_nav a, #actual_nav li {
		display: block;
		clear: both;
	}
}
/*
.menu1 {

    background-image: url(/assets/images/YANA2.main-nav-01-REACTIONS.png);
    width: 80px;
}
.menu2 {
    background-image: url(/assets/images/YANA2.main-nav-02-DIAGNOSIS.png);
    width: 165px;
}
.menu3 {
    background-image: url(/assets/images/YANA2.main-nav-03-WHO.png);
    width: 150px;
}
.menu4 {
    background-image: url(/assets/images/YANA2.main-nav-04-STRATEGIES.png);
    width: 150px;
}
.menu5 {
    background-image: url(/assets/images/YANA2.main-nav-05-FORWARD.png);
    width: 150px;
}
.menu6 {
    background-image: url(/assets/images/YANA2.main-nav-06-FRIENDS.png);
    width: 85px;
    margin-right:0px;
}
*/
.narrow { width:190px; }
.wide { width:640px; }

.content {
    padding: 30px 20px;
    line-height:20px;
    background-color:#FFF; !important
    z-index:1000 !important
}
.footer {
    background: #CCC49F;
    height:100px;
}

.footerfont {
    text-align:right;
    color:#fff;
    text-transform:uppercase;
    font-size:10px;
    padding-top:6px;
}


.footercontent {
    height:50px;
    margin: 0 auto;
    position:relative;
    top:35px;
    background-repeat: no-repeat;
    background-position: left top;
}

.footercontent a { text-decoration:none; color:#fff; padding:0px 6px }

.padded { padding:25px }

.line { border-bottom:1px solid #CCC; height:5px; margin:20px 0; }

.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
p { margin-top:8px; margin-bottom:8px }
ul, ol {
    margin-left:20px;
    margin-top:10px;
}
ul.nolist { margin-left:0px }
ul.nolist li { list-style:none; padding-bottom:5px }

.clear { clear:both; }
.left { float:left }
.right { float:right }
.centered { margin-left:auto; margin-right:auto }



/*TEXT*/
.green { color: #68923D }
.blue { color:#006EB9; }
.lighter { color:#767676 }

a.lato.small { font-size:16px; }

.lato { font-family: 'Lato', sans-serif; font-size:18px; font-weight:300 }

H1 {
    font-family: 'PT Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 35px;
    color:#68923D;
    margin-bottom:10px;
}

H2 {
    font-family: 'PT Serif', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 25px;
    color:#68923D;
    margin:22px 0 8px 0;
}

H3 {
    font-family: 'PT Serif', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 1.4;
    color:#68923D;
    margin-top:16px;
}

a {
    text-decoration:none;
    color:#006EB9;
}
a:hover {
    text-decoration:underline;
    cursor:pointer;
}

input.blue  { background-color:#196aa2; color:#fff; padding:6px 12px; font-size:12px }
input.blue:hover  { background-color:#0066CC; cursor:pointer }
input.login {
    border:1px solid #A4A4A4;
    padding:4px;
    font-size:14px;
    color:#797979;
    margin-bottom:10px;
    background-color:#EAEAEA;
    clear:right;
    width: 220px;
}

.size15 { font-size:15px; line-height:18px; color:#333333 }
.size14 { font-size:14px; line-height:18px; color:#333333 }
.flashdata { padding:10px 0; font-size:14px; font-weight:bold; color:#3E2F08 }
.homebox { width:380px; font-size:12px; line-height:14px }
.homebox li {  }
.execlist { padding:10px 5px }
.execlist li.morelink { padding-top:6px; list-style:none }

/*login */
#login { width:520px }
#login label {
    font-size:11px;
    color:#525252;
    width:100px;
    display:block;
    float:left;
    padding-top: 6px;
}



/*STARTUP*/
#start li.steps { margin-left:-10px;  float:left; list-style:none; width:91px; height:28px }
#start li.steps.steps1 { margin-left:0px}
#start li.steps:hover, #start li.steps.active { background-position:bottom; }
#start li.steps1 { background-image:url(/assets/images/YANA.next-button-step1.png); }
#start li.steps2 { background-image:url(/assets/images/YANA.next-button-step2.png); }
#start li.steps3 { background-image:url(/assets/images/YANA.next-button-step3.png); }

#tailoroptions li:last-child { margin-top:15px }

/*#start li.steps {
        font-size: 13px;
        list-style:none;
        line-height: 24px;
        text-align: center;
        float: left;
        width: 90px;
        text-transform: uppercase;
        color: #CCC;
        font-weight: bold;
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-top-style: solid;
        border-bottom-style: solid;
        letter-spacing: 1px;
        border-top-color: #D5D5D5;
        border-bottom-color: #D5D5D5;
}*/
#start li.left { border-left:2px solid #D5D5D5 }
#start li.right { border-right:2px solid #D5D5D5 }
#start li.green { color: #68923D; border: 2px solid #68923D; background-color:#e6edc3 }
#start li.progress { border-left: 0 }

.pointer { cursor:pointer; }

/*sidemenu*/
#catmenu { width:180px; font-size:13px; margin-bottom:20px; }
#catmenu .articlelist { padding-bottom:10px; }
#catmenu a { color:#4E4E4E }


/*USER PROFILE */
#resources {
    width:180px;
    min-height:500px;
    background-color:#E0E9ED;
    color: #626262;
    font-size:15px
}
#resources strong { font-size:16px }
#resources a { color:#626262; text-decoration:none }
#resources a:hover { color:#006EB9 }
#resources li { padding-bottom:15px; }




/* Glossary */
#glossary {
    width:250px;
    min-height:500px;
    background-color:#E0E9ED;
    color: #626262;
    font-size:15px
}
#glossary strong { font-size:16px }
#glossary a { color:#626262; text-decoration:none }
#glossary a:hover { color:#006EB9 }
#glossary li { padding-bottom:15px; }



.whitebox {
    background-image: url(/assets/images/YANA.content-box-bg.png);
    background-position: bottom;
    max-width: 100%;
    height:auto;
    border: 1px solid #BABABA;
    margin:15px 0;
    background-color: #FFF;
    background-repeat: repeat-x;
    moz-box-shadow: 0 6px 6px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 6px 6px rgba(0,0,0,0.6);
    box-shadow: 0 6px 6px rgba(0,0,0,0.6);
}


.whitebox h1 { margin-bottom:5px; line-height:24px; padding-top: 5px; }

.whitebox h2 { margin: 5px 0px 8px 0px; }

.whitebox hr { margin-top: 5px; margin-bottom: 5px; }

.caring_guide_report_intro { margin-bottom: 15px; }

#retake {
    position: fixed;
    right: 0;
    top: 0;
    display: block;
	background-color: #587584;
	padding: 5px 10px;
}
#retake a{
	color: white;
}

#retake:hover { background-position: bottom; }

/*THEMES*/
#theme1 { /* theme1 - trees */
    background-image: url(/assets/images/background-forest.jpg);
    background-repeat: no-repeat;
    background-position: top;
    padding-top:60px;
}
.theme1 .footer { background-color:#3E2F08 }

.videopop { margin-bottom:15px; }
.videopop img { border:0; margin-right:10px; vertical-align:middle }

.audiopop { margin-bottom:15px; }
.audiopop img { border:0; margin-right:10px; vertical-align:middle }

.crumbs { margin-bottom:10px; font-size:14px }

#exercisebox  {	width: 750px; background: #FFF;	margin: 0px auto; line-height:20px }
#exercisebox input.blue { margin-right:4px }

.section { padding:8px 0 }
.footnote { font-size:12px }
.freeform {  height:280px; font-size:20px; padding:8px; border:1px solid #ccc; background-color:#F8F8F8; color:#333 }


#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%; background-color:#222}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{ }
#colorbox{}
#cboxContent{margin-top:30px; overflow:visible;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{ padding:1px;}
#cboxLoadingGraphic{background:url(/assets/images/loader.gif) no-repeat center center;}
#cboxLoadingOverlay{ background:#fff; }
#cboxTitle{position:absolute; top:-25px; left:0; color:#fff; }
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(/assets/images/controls.png) no-repeat 0 0;}
#cboxPrevious{background-position:0px 0px; right:44px;}
#cboxPrevious:hover{background-position:0px -25px;}
#cboxNext{background-position:-25px 0px; right:22px;}
#cboxNext:hover{background-position:-25px -25px;}
#cboxClose{background-position:-50px 0px; left:0;}
#cboxClose:hover{background-position:-50px -25px;}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

@media print {
    .noprint, input.blue {
        display:none;
    }
}

#cboxWrapper.test- {
    left: 0 !important;
    width: inherit !important;
}

@media only screen and (max-width: 576px) {
	.audiopop {
    margin-bottom: 15px;
    float: left !important;
    margin-top: 0px !important;
    margin-bottom: 30px !important;
    margin-right: 100%;
    margin-left: 20px;
}
}

@media (max-width: 1200px) and (min-width: 768px){
	#actual_nav li{
		height: 65px;
	}
}

#comments_box{
	width: 825px;
}
@media (max-width: 940px){
	#comments_box{
		width: calc(100% - 15px);
	}
	.page_list #title{
		width: 100%;
	}
	.page_list select[name="category"]{
		width: 100%;
	}
	.page_list #comment{
		width: 100%;
	}
	.discussion #menu{
		display: none;
	}
	.discussion .menuwing{
		display: none;
	}
	.discussion #wrapper, .discussion #container{
		width: 100%;
	}
	.discussion #header{
		background-color: #2A421F;
		width: 100%;
	}
	.discussion .uppernav{
		padding-right: 1em;
		padding-left: 1em;
	}
	.discussion .page_list .topics li{
		height: auto;
		float: left;
		display: inline;
		width: 100%;
	}
	.discussion .page_list .topics .topics_inner_border_sticky{
		height: auto;
		float: left;
		display: inline;
		width: 100%;
	}
	.page_list .topics .container{
		width: auto;
	}
	.page_list .topics .commented{
		margin-right: 100px;
	}
}
@media (max-width: 690px){
	.discussion .uppernav{
		padding-bottom: 1em;
	}
}
@media(max-width: 630px){
	.discussion .footercontent{
		padding-top: 30px;
	}
	.discussion .footercontent a{
		font-size: 9px;
	}
}


/* Video Modal */
 /* The Modal (background) */
.modal {
  overflow: hidden !important;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 660px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

button#video {
    background-color: #FFF;
    color: blue;
}