@charset "UTF-8";
img, object, embed, video {
    max-width: 100%;
}

/*
	Fluid Grid Properties
	---------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:		12;
	dw-gutter-percentage:	20;
*/

/* Mobile Layout: 480px and below. */
.gridContainer {
    width: 100%;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
}

#NavTop {
    clear: both;
    margin-left: 0;
    position: absolute;
    top: 0;
    padding-top: 0;
    width: 100%;
    display: block;
    background-color: #002A3F;
    border-bottom: 2px solid #FFFFFF;
}

.NavWrap {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}

#NavBox {
    margin-left: 0;
    background-color: #002A3F;
    border-bottom: 2px solid #FFFFFF;
}

.NavBtn {
    border-top: 2px solid #FFFFFF;
}

.Btns {
    font-size: 18px;
    height: 25px;
    padding-left: 32px;
    padding-top: 0;
    padding-bottom: 6px;
}

.Btns:hover, .Btns:active, .Btns:focus {
    color: #FFFFFF;
}

.mainTbl {
    width: 100%;
    margin-top: 60px;
}

.main {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
}

.main h1 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.main h2 {
    font-size: 18px;
}

.main p a, .main p a:visited {
    color: #4C4C4C;
    font-size: 16px;
    text-decoration: none;
}

.main p a:hover, .main p a:active, .main p a:focus {
    font-style: italic;
    color: #20008D;
    text-decoration: underline;
}

.txtFull {
    padding-bottom: 25px;
    padding-top: 10px;
}

.footer {
    clear: both;
    float: left;
    display: block;
    margin-left: 0;
    width: 100%;
}

#credits {
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-top: 3px;
    padding-bottom: 25px;
    color: #9BA2AC;
    font-size: 12px;
}

.creditTxt {
    padding-left: 12px;
}

#credits a, #credits a:visited {
    color: #4C4C4C;
    font-size: 13px;
    text-decoration: none;
}

#credits a:hover, #credits a:active, #credits a:focus {
    font-style: italic;
    color: #20008D;
    text-decoration: underline;
}

.page-wrap {
    clear: both;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#Name {
    font-family: Federo;
    font-size: 40px;
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 34px;
}

#photoBox {
    width: 300px;
}
#story_videoBox {
    padding: 0 0 15px 0;
}

#player {
    width: 300px;
}

.mejs-ted .mejs-controls {
    background: #eee;
    height: 65px;
    width: 300px;
}

.side_P {
    visibility: hidden;
    height: 0;
}

.txtSound {
    padding-top: 25px;
}

.textArea {
    visibility: hidden;
}

/* Blog Required */
.ph_hide {
    visibility: hidden;
    height: 0;
    width: 0;
}

.InfoBox {
    height: 15px;
    visibility: hidden;
}

.DarkBox {
    border-top: 2px solid #243E4C;
    border-bottom: 2px solid #243E4C;
    border-left: 2px solid #243E4C;
    border-right: 2px solid #243E4C;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #234556;
    color: #FFFFFF;
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 5px;
}

.DarkBox p {
    margin-bottom: 15px;
}

.LinkDesc {
    padding-top: 15px;
}

.LinkText {
    margin-top: 15px;
    padding-top: 15px;
    width: 300px;
    border-top: 2px solid #243E4C;
}

.LinkText h3 {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 18px;
    color: #457792;
}

.LinkText A:link, .LinkText A:visited {
    color: #1F3E4C;
}

.LinkText A:active, .LinkText A:hover, .LinkText A:focus {
    color: #1F3E4C;
    font-style: italic;
}

#archive {
    margin-top: 25px;
    margin-bottom: 15px;
}

#archive h3 {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 18px;
    color: #457792;
}

#archive h3 A:link, #archive h3 A:visited {
    color: #457792;
}

#archive h3 A:active, #archive h3 A:hover, #archive h3 A:focus {
    color: #1F3E4C;
    font-style: italic;
}

#audioBox {
    margin-top: 50px;
    width: 100%;
    height: 20px;
}

.News_Small {
    margin-top: 15px;
}

.News_Large {
    display: none;
}

/* Tablet Layout: 550px to 768px (-227) */

@media only screen and (min-width: 550px) {
    .gridContainer {
        width: 100%;
        margin: auto;
    }

    body {
        background-color: #121111;
    }

    .BkgImg2 {
        visibility: hidden;
    }

    #NavTop {
        position: relative;
        width: auto;
        display: block;
        background-color: transparent;
        border-bottom: none;
    }

    .NavWrap {
        clear: both;
        float: left;
        width: 100%;
        position: absolute;
        top: 20px;
        display: block;
    }

    #NavBox {
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
        padding-left: 5px;
        width: 740px;
        height: 30px;
        background-color: transparent;
        border-bottom: none;
    }

    .NavBtn {
        clear: none;
        float: left;
        border-top: none;
    }

    .Btns {
        font-size: 16px;
        height: 25px;
        padding-left: 27px;
        padding-right: 18px;
        padding-top: 2px;
        padding-bottom: 0;
    }

    .Btns:hover, .Btns:active, .Btns:focus {
        color: #F8EACA;
    }

    .BtnPad {
        visibility: hidden;
        padding-left: 0;
        padding-right: 0;
        width: 0;
    }

    .mainTbl {
        margin-top: 75px;
        background: #e5eef6;
        border-top: 2px solid #CCC;
        border-bottom: 2px solid #CCC;
    }

    .main {
        min-width: 740px;
        font-size: 14px;
        padding-left: 0;
        padding-right: 0;
    }

    .main p a, .main p a:visited {
        color: #4C4C4C;
        font-size: 14px;
        text-decoration: none;
    }

    .main p a:hover, .main p a:active, .main p a:focus {
        font-style: italic;
        color: #20008D;
        text-decoration: underline;
    }

    #photoBox {
        clear: both;
        float: right;
        display: block;
        margin-top: 0;
        margin-right: 25px;
        width: 285px;
    }

    .photo {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        border-left: 1px solid #333;
        border-right: 1px solid #333;
    }

    .story_img {
        width: 283px;
        height: 214px;
    }
    #story_videoBox {
        float: right;
        padding: 0 4px 10px 8px;
    }
    .story_video{
        width: 285px;
        height: 164px;
    }

    .mejs-ted .mejs-controls {
        background: #e5eef6;
        width: 285px;
        margin-bottom: 5px;
    }

    .txtBox {
        clear: none;
        float: left;
        display: block;
        margin-top: 15px;
        padding-left: 15px;
        width: 400px;
    }

    .txtFull {
        clear: none;
        float: left;
        display: block;
        padding-top: 0;
        padding-left: 15px;
        padding-right: 20px;
        min-width: 705px;
        min-height: 500px;
    }

    .main h1 {
        font-size: 30px;
        line-height: 34px;
        margin-bottom: 20px;
        margin-top: 0;
    }

    .main h2 {
        font-size: 17px;
    }

    .main ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .main ul li {
        background: transparent url(../images/bullets.png) 0% 4px no-repeat;
        margin: 5px 0 0 2px;
        padding: 0 0 0 30px;
    }

    .main hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

    .main img.right {
        border: 1px solid #000;
        padding: 0;
        margin-left: 15px;
        margin-right: 5px;
        margin-bottom: 10px;
        width: 283px;
    }

    .main img.left {
        border: 1px solid #ccc;
        padding: 5px;
    }

    #credits {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        min-width: 740px;
        padding-top: 13px;
        padding-bottom: 20px;
        font-size: 12px;
    }

    #credits a, #credits a:visited {
        color: #4C4C4C;
    }

    #credits a:hover, #credits a:active, #credits a:focus {
        color: #FFF;
    }

    .creditTxt {
        padding-left: 5px;
        width: 300px;
    }

    #Name {
        margin-left: 15px;
        line-height: 45px;
        letter-spacing: 1.5pt;
    }

    .side_P {
        padding-top: 10px;
        visibility: visible;
        height: auto;
    }

    .side_P h2 {
        font-size: 16px;
    }

    .txtSound {
        padding-top: 70px;
    }

    .textArea {
        visibility: visible;
        width: 100%;
        min-width: 740px;
        height: 850px;
    }

    /* Blog Required */
    .ph_only {
        visibility: hidden;
        height: 0;
    }

    .ph_hide {
        visibility: visible;
        height: auto;
        width: auto;
    }

    .InfoBox {
        padding-left: 15px;
        padding-right: 10px;
        padding-top: 15px;
        padding-bottom: 2px;
        margin-top: 0;
        margin-bottom: 10px;
        width: 260px;
        height: auto;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #8ad0f3;
        visibility: visible;
    }

    .InfoBox h2 {
        font-family: Arial, Helvetica, sans-serif;
    }

    .LinkThumb {
        clear: both;
        float: left;
        display: block;
        margin-left: 0;
        width: 110px;
    }

    .LinkDesc {
        clear: none;
        float: left;
        display: block;
        padding-top: 0;
    }

    .LinkText {
        clear: both;
        float: left;
        margin-left: 0;
        margin-top: 15px;
        padding-top: 15px;
        display: block;
        width: 670px;
    }

    .LinkText h3 {
        font-size: 18px;
    }

    #archive {
        clear: both;
        float: left;
        display: block;
        margin-left: 0;
        margin-top: 25px;
        margin-bottom: 15px;
    }

    #archive h3 {
        font-size: 18px;
    }

    .DarkBox {
        padding-top: 8px;
        padding-left: 12px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
}

@media only screen and (min-width: 769px) {
    .gridContainer {
        width: 100%;
        margin: auto;
    }

    .BkgImg2 {
        background-image: none;
        position: absolute;
        top: 355px;
        left: 30px;
    }

    #NavBox {
        width: 980px;
        padding-left: 5px;
    }

    .Btns {
        padding-left: 27px;
        padding-right: 20px;
    }

    .BtnPad {
        visibility: visible;
        padding-left: 32px;
        padding-right: 20px;
        width: auto;
    }

    .main {
        margin-left: auto;
        margin-right: auto;
        width: 1000px;
    }

    .main img.right {
        margin-right: 0;
        width: 418px;
    }

    #Name {
        margin-left: 25px;
        font-size: 43px;
        line-height: 43px;
    }

    #credits {
        margin-left: auto;
        margin-right: auto;
        width: 1000px;
    }

    #photoBox {
        margin-top: -40px;
        margin-right: 25px;
        width: 420px;
    }

    #audioBox {
        clear: both;
        float: right;
        display: block;
        margin-top: 0;
        margin-right: 0;
        width: 420px;
        height: 40px;
    }

    .story_img {
        width: 418px;
        height: 314px;
    }
    #story_videoBox {
        padding: 0 0 10px 8px;
    }
    .story_video{
        width: 420px;
        height: 241px;
    }

    .mejs-ted .mejs-controls {
        width: 420px;
    }

    .txtBox {
        padding-left: 25px;
        width: 510px;
    }

    .txtFull {
        padding-left: 25px;
        padding-right: 25px;
        width: 950px;
    }

    .side_P, .side_P .InfoBox, .side_P h2 {
        padding-top: 0;
        visibility: hidden;
        height: 0;
    }

    .txtSound {
        padding-top: 50px;
    }

    .textArea {
        visibility: visible;
        width: 1000px;
        height: 800px;
    }

    /* Blog Required */
    .InfoBox {
        width: 395px;
    }

    .News_Small {
        display: none;
    }

    .News_Large {
        display: block;
        margin-top: 15px;
    }
}