/* pub: 201204261010 */

@media screen and (max-width: 767px) {

	/* RESET */
	/* http://meyerweb.com/eric/tools/css/reset/
	   v2.0 | 20110126
	   License: none (public domain)
	*/
	/*html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}*/

	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
	    padding-left: 15px;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.mobile-text-break { word-break: break-all; }

	/* ----- START ----- */
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	body.mobile-page .mobile-only {
	    display:inline-block;
    }

	body.mobile-page {
		/*min-height: 100%;*/
	    height: auto !important;
		margin: 0;
		padding: 0;
		/*font: normal 62.5% Arial, sans-serif;*/	/* base font = 10px */
		font-family: Arial, sans-serif;
		font-size:normal;
		background: #fff;
		min-width:inherit;
	}

    body.mobile-page h1,
	body.mobile-page .h1 {
	   font-size:2.6em;
	}

    body.mobile-page h2,
	body.mobile-page .h2 {
	   font-size:2.4em;
	}

	body.mobile-page h3,
	body.mobile-page .h3 {
	   font-size:1.8em;
	}

	body.mobile-page h4,
	body.mobile-page .h4 {
	   font-size:1.5em;
	}

    body.mobile-page .home p,
    body.mobile-page .home q,
    .pod p,
    .pod q {
        font-size: 1.5em;
        line-height: 1.429em;
    }

	body.mobile-page strong {
		font-weight: bold;
	}
	.mobile-only {
		display: block;
	}

	div[id$="help"] p {
		color: red !important;
	}

	/* ----- Cookie warning ----- */
	body.mobile-page #cookie-warning {
        padding:1em;
    }

    body.mobile-page #cookie-warning p {
        font-size:1.2em;
        background:none;
        padding:0;
        float:none;
        width:100%;
    }

    body.mobile-page #hide-cookie-warning {
        margin:0;
        clear:both;
        margin:1.5em auto 0 auto;
        float:none;
        display:block;
    }

	/* ----- stuff that gets HIDDEN ----- */

	.mobile-hidden,
	body.mobile-page #cse-search-box,
	body.mobile-page .global-small-menu,
    body.mobile-page .global-small-nav,
	body.mobile-page .portal-login .shadow,
	body.mobile-page .global-sub-logo,
	body.mobile-page #nav,
	body.mobile-page #homeBannerCycle,
	body.mobile-page .home-mid .pod-outdent,
	body.mobile-page .home-banner-nav,
	body.mobile-page .home-blood-stocks,
	body.mobile-page .home-news,
	body.mobile-page .facebook-pod,
	body.mobile-page .footer-parter-links,
	body.mobile-page .footer-social-links,
	body.mobile-page .pod-did-you-know  {
	    display: none !important;
	}


	/* ----- remove padding and margins and force to full width ----- */

	body.mobile-page .container,
	body.mobile-page .header-container,
	body.mobile-page .pod-group,
	body.mobile-page .home-banner-pod,
	body.mobile-page .c1,
	body.mobile-page .c2 {
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0;
	}

	body.mobile-page .globalnav_holder {
        border-bottom: 0;
        margin-bottom: 0;
        padding: 0;
        position:relative;
        letter-spacing:0;
        top:0;
        width:100%;
        margin-bottom: -60px;
    }
    
    body.mobile-page .globalnav_holder > .container > .fr {
        float:none;;
    }

    body.mobile-page .maintitle {
        margin: 7px 0 9px 12px;
    }

    body.mobile-page .portal-login {
        padding: 0;
        margin:0;
    }

    body.mobile-page .portal-login > a {
        height:60px;
        line-height:60px;
        font-size:1.36em;
    }

     body.mobile-page .portal-login.usr-Pnl > a {
        font-weight:bold;
        padding-left:45px;
        border-left:1px solid #ccc;
        color:#333;
        background:#fff url("../../images/mobile/icon-open-nav.png") 13px 24px no-repeat;
    }

    body.mobile-page .portal-login a i {
        left:20px;
        top:20px;
        width: 20px;
        height: 20px;
        background-position: -310px -182px;
    }
    
   body.mobile-page .portal-login a.sign-in {
        border-top: 0;
        margin-left: 0;
    }

    /* ----- session finder ----- */

    body.mobile-page .home-banner {
    margin: 0 0 2em 0 ;
    position: relative;
    top:0;
    }

    body.mobile-page .home-banner-pod .pod {
        border-top:0;
    }

    body.mobile-page .pod-session-find input[type="text"] {
        font-size: 1.5em;
        padding: 0 11% 0 4%;
        height:36px;
        margin-top:10px;
    }

    body.mobile-page .pod-session-find input[type="submit"] {
        margin: 22px 0 0 -30px;
    }


   /* ----- how your blood can save lives pod ----- */

    body.mobile-page .pod-round-wrap {
       border-radius:0;
    }

    body.mobile-page .home-mid .pod-group .pod {
        width: 100%;
    }

    body.mobile-page .pod > .media-ob {
        margin-right:20px
    }

   body.mobile-page .home-mid h2 {
       font-size:2.6em;
   }

   body.mobile-page .home-mid h2 span {
        background-color: #D81E05;
        color: #FFFFFF;
        display: inline-block;
        font-weight: bold;
        margin-bottom: 3px;
        padding: 3px 8px;
        clear:left;
        display:inline-block;
    }

    body.mobile-page .arrow-btn {
       display:inline-block!important;
       margin-bottom:20px;
       font-size:1.4em;
    }


    /* ----- need help pod ----- */

    body.mobile-page .home-btm > div {
        border-left: 0;
        padding: 2em 2em 3em 2em;
        margin-left: 0;
        width: 100%;
        background-color:#f5f5f5
    }

    body.mobile-page .home-help .h2 {
        font-size:2.6em;
        font-weight:bold;
        margin-bottom:5px;
    }

    body.mobile-page .home-help .btn {
        font-size:2.3em;
        margin-top:1em;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto;
    }

    body.mobile-page .home-help ul {
        width:90%;
    }

    /* ----- carousel ----- */

    body.mobile-page .home-carousel {
        background-color: #fff;
        border-bottom: 0;
        border-top: 0;
        margin: 0 0 2em 0;
    }

    body.mobile-page .home-carousel-item {
        float: left;
        min-height: 200px;
        padding: 35px 40px 0 50px;
        background-color:#fff;
    }

    /* ----- footer ----- */

    body.mobile-page .footer_holder {
        padding:0;
        background-image:none;
        background-color:#fff;
        background-color: #d02600;
        margin:0;
    }

    body.mobile-page .footer-links {
         border-bottom:0;
         width:100%;
         padding:0;
         margin:0;
         display:table;
    }

    body.mobile-page .footer-links li {
        background-color: #d02600;
        padding:2em 0;
        margin:0;
        display:table-cell;
    }

    body.mobile-page .footer-links li+li {
        border-left:1px solid #fff;
    }

   body.mobile-page .footer-links a,
   body.mobile-page .footer-links a:hover {
        color: #fff;
        font-size: 1.2em;
        font-weight:bold;
        text-decoration: none;
        text-transform:uppercase;
    }



    /* ----- how to use this site ----- */
       

    body.mobile-page .header-container {
        border-bottom:1px solid #dcdcdc;
    }

    body.mobile-page .mobile-wrapper {
        width:90%;
        margin:2em auto 0 auto;
        overflow:hidden;
    }

    body.mobile-page .video-player  {
        width:100%;
    }

    body.mobile-page .video-menu-panel  {
        height:auto;
        float:none;
        width:auto;
    }

    body.mobile-page .video-menu {
       position:relative;
     }

    body.mobile-page .video-menu a {
        background-color:#f9f9f9;
        font-size: 1.5em;
    }

    body.mobile-page iframe {
        width:100%!important;
    }

    body.mobile-page .list-icons-grid {
        margin-top:0;
        margin-bottom:1em;
    }

    body.mobile-page .list-icons-grid ul {
        border:0;
        padding:0;
    }
    
    
    
    /*----sapient styles ---*/


    body.mobile-page .maintitle a {
        background: url("../../images/mobile/logo-mobile.png") repeat scroll 0 0 transparent;
        height: 45px;
        margin-right: 0;
        position: absolute;
        text-indent: -99999px;
        width: 168px;
    }

    body.mobile-page .usr-Pnl {
        height: 60px;
        line-height: 60px;
        margin-left: 74px;
        margin-top: 0;
        float:left;
        position: inherit;
        color: #666666;
        font-size: 1.2em;
        z-index: 1000;
    }

    body.mobile-page .usr-Pnl ul {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: none repeat scroll 0 0 #FFFFFF;
        border-color: #CCCCCC #CCCCCC -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 1px 0;
        display: none;
        position: absolute;
        right: 0;
        top: 47px;
        width: 100%;
        background-color: #fff;
        z-index: 999;
    }
    
     body.mobile-page .usr-Pnl ul li {
        width:100%;
        overflow:hidden;
     }

    body.mobile-page .usr-Pnl li a {
        color: #333333;
        display: block;
        background: none repeat scroll 0 center transparent;
        font-weight:bold;
        /*padding-left:5%;*/
        width:100%;
        padding-left:0;
        text-indent:5%;
        position:relative;
    }

    body.mobile-page .usr-Pnl li a:hover {
        color: #D91F04;
    }

    body.mobile-page .usr-Pnl .additionalinfo {
        color: #D91F04;
        /*font-size: 2.0em;*/
        font-size:24px!important;
        font-weight: bold;
        /*padding-right: 5%;*/
        position: absolute;
        right: 5%;
        top:7px;
        text-indent: 0;
    }
    
   body.mobile-page .usr-Pnl > a span {
       display:none;
   }

/*
body.mobile-page  ul.new-usr-Pnl .close-Usr-Pnl a {
    background: url("../../mobileimages/cross.png") no-repeat scroll right center transparent;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    margin-right: 5%;
    padding-right: 5%;
    text-align: right;
    width: 95%;
}

body.mobile-page .portal-login .sign-in {
    font-size: 1em;
    height: 69px;
    line-height: 69px;
    padding: 0 25px 0 55px;
}

body.mobile-page .portal-login a i {
    top: 23px;
}

body.mobile-page .usr-Pnl a, body.mobile-page  .donorSignIn a {
    border-left: 1px solid #CCCCCC;
    color: #FFFFFF;
    display: inline-block;
    font-size: 1.197em;
    font-weight: bold;
    padding: 0 7px 0 11px;
}

body.mobile-page  .usr-Pnl {
    position: inherit;
}

body.mobile-page  .usr-Pnl > a.close-Usr-Pnl {
    background: none repeat scroll 0 0 #890304;
    color: #FFFFFF;
    position: absolute;
    top: 0;
    z-index: 1;
}
body.mobile-page .usr-Pnl li a {
    background: none repeat scroll 0 center transparent;
    height: 30px;
    line-height: 30px;
}

body.mobile-page .usr-Pnl.right {
    float: left;
}

body.mobile-page .new-usr-Pnl {
    display: none;
}

body.mobile-page .usr-Pnl > a {
    color: #333333;
    display: block;
    font-size: 0.85em;
    height: 60px;
    overflow: hidden;
    padding-left: 45px;
    padding-right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 105px;
}

body.mobile-page .donorSignIn {
    height: 60px;
    line-height: 60px;
    margin-left: 75px;
    margin-top: 0;
}

body.mobile-page .usr-Pnl > a span {
    background: none repeat scroll 0 center transparent;
}

body.mobile-page  .usr-Pnl > a.close-Usr-Pnl > span {
    background: url("../../mobileimages/close-menu.png") no-repeat scroll 0 0 transparent;
    left: 26px;
    top: 23px;
}

*/

/* MOBILE MENU */
	#mobile-menu-wrap {
		/*min-width: 320px;*/
		position: relative;
		display: block;
		z-index: 2;
	}
	
	body.js #mobile-menu-wrap {
		margin-top: 3px;
	}
	
/* mobile menu */

    #mobile-menu {
        padding: 1em 3%;
        color: #333;
    }

    html.no-js #mobile-menu {
        display: block;
    }
    
    #mobile-menu .menu-wrap 
    {
        background: #efefef;
        border: 1px solid #aaa;
        border-radius: 8px;
    }
    
    #mobile-menu label {
        display: block;
        padding: 0.4em 1em;
        font-size:1.4em;
    }
    
    #mobile-menu li {
        padding: 0.5em 0;
    }
    
    #mobile-menu select {
        width: 96%;
        height: 35px;
        line-height: 35px;
        margin-left: 2%;
        border: 0;
        background: #efefef;
        font-size:1.4em;
    }
    
    body.iphone #mobile-menu .menu-wrap {
        background: none;
        border-radius: 0px;
        border: 0px solid #fff;   
    }
    
    body.iphone #mobile-menu select {
        border: 1px solid #aaa;
    }	
    
    
/* ----- mobile CSS for The Donor magazine section  ----- */ 

    /* hide */
    .mobileHidden,
    .header_background,
    .breadcrumb,
    .c2,
    .slideshow,
    .maincontent_dividerx,
    .footer_divider {
        display: none;
    }

    /* show */
    .mobileOnly,
    .content-caption {
        display: block;
    }

    /* override widths - layout */
    /*.container,*/
    .c1,
    .the-donor .mag-column,
    .top-image, 
    .top-image img,
    .the-donor .mag-image,
    .the-donor .mag-image img,
    .the-donor .mag-image-full,
    .the-donor .mag-image-full img,
    .the-donor .mag-footer,
    .the-donor .letter-feature {
        width:100%;
        max-width: 100% !important;
        height: auto !important;
        float: none;
        display: block;
        margin: 0 auto !important;
    }
    
   .the-donor .container {
        padding: 0 1%!important;
        width: 98%!important;
        z-index: 1;
    }

    .the-donor .mag-image-full {
        margin-bottom: 1em !important;
    }

    .container {
        /*min-width: 320px;*/
    }

    .the-donor .mag-boxout,
    .top-image, .col-fix {
        margin: 0 0 1em;
        width: 100%;
    }

    .the-donor .mag-feature {
        margin: 0;
        width: 96%;
        /*padding: 10px 5% 10px 0;*/
        padding:1.4em;  
    }

    .the-donor .mag-feature h2 {
        /*margin-left: 1em;*/
        font-size:2.1em;
    }
    
    .the-donor .mag-image {
        display: block;
        margin-bottom: 1em;
    }

    .the-donor .mag-feature .mag-image {
        margin-left: auto;
    }
    
    .the-donor .mag-feature ul li {
        margin: 1em !important;
    }

    .the-donor dl .left-indent {
        margin-left: 0;
	    clear: left;
    }

    .top-image {
        margin-bottom: 1em !important;
    }
    
    .top-image img {
        height: auto !important;
    }

    .c1 {
        margin-right: 0;
    }

    .patient-donor--phoebe {
    float: none;
    padding: 0; 
}

    /* mobile menu */
    #mobile-menu {
        padding: 1em 3%;
        color: #333;
    }

    html.no-js #mobile-menu {
        display: block;
    }
    
    #mobile-menu .menu-wrap {
        background: #efefef;
        border: 1px solid #aaa;
        border-radius: 8px;
    }
    
    #mobile-menu label {
        display: block;
        padding: 0.4em 1em;
    }
    
    #mobile-menu li {
        padding: 0.5em 0;
    }
    
    #mobile-menu select {
        width: 96%;
        height: 35px;
        line-height: 35px;
        margin-left: 2%;
        border: 0;
        background: #efefef;
    }
    
    body.iphone #mobile-menu .menu-wrap {
        background: none;
        border-radius: 0px;
        border: 0px solid #fff;   
    }
    
    body.iphone #mobile-menu select {
        border: 1px solid #aaa;
    }

    /* mobile header */
    #mobile-header a {
        display: block;
        padding: 0.6em 0.5em;
    }
    
    #bloodcouk {
        float: left;
    }
    
    #nhsbt {
        float: right;
    }
    
    #donor-logo {
        clear: both;
        background: #ed2d22;
        text-align: center;
    }

    /* content */
    .the-donor h1 {
        font-size: 2.2em;
        line-height: 1.1em;
    }
    
    .mag-content ul {
        padding-left: 0;
        list-style-position: inside;
    }
    
    .share-this-wrap {
        padding-left: 3%;
    }
    
    .the-donor .mag-blockquote {
        display: block;
        float: none;
        margin: 0 0 1.4em;
        padding: 1.4em 0;
        width: 100%;
    }
    
    .the-donor .mag-blockquote blockquote {
        width: 80%;
        margin: 0 1em;
    }
    
    .mag-content p,
    .mag-content h2 {
        clear: both;
    }

    .mag-content,
    h1, .intro {
        padding: 0 3%;
        max-width: 100%;
    }
    
    .the-donor p.intro {
        line-height: 1.2em;
    }

    h2.bitter {
        margin-top: 0.5em;
    }

    .red-banner {
        text-align: center;
    }
    
    .red-banner img {
        max-width: 98%;
    }

    .the-donor .letter-feature-inner {
        width: 100%;
        padding: 0 1em;
        background-image: none;
    }
    
    .the-donor .letter-feature .leftCol, 
    .the-donor .letter-feature .rightCol {
        width: 92%;
        margin: 0;
        padding: 0;
        display: block;
        float: none;
    }
    
    /* footer */
    #mobile-follow-wrap {
        padding: 0 3%;
        width: 53%;
        float: left;
        overflow: hidden;
    }
    
    #mobile-follow-wrap h2 {
        color: #666;
        float: left;
        line-height: 1.8em;
        font-size:1.75em;
    }
    
    #mobile-follow-wrap ul {
        list-style: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    #mobile-follow-wrap li {
        float: left;
        text-indent: -9999px;
    }
    
    #mobile-follow-wrap li a  {
        display: block;
        height: 50px;
        width: 40px;
    }
    
    #mobile-follow-wrap li a  {
        background: url(/images/mobile/twitter.gif) no-repeat center top;
    }
    
    #mobile-follow-wrap li:first-child a {
        background: url(/images/mobile/fb.gif) no-repeat center top;
    }
    
    ul.footer {
        width: 40%;
        float: right;
    }
    
    ul.footer li {
        width: 100%;
    }
    
    ul.footer a  {
        display: block;
        padding-right: 0.4em;
        text-align: right;
        color: #666;
        text-decoration: none;
        font-size: 1.68em;
        line-height: 1.8em;
    }
    
    ul.footer a:after {
        content: " ^";
        font-size: 1.0em;
    }    

    
    /* ----- end mobile css for The Donor magazine section ----- */
    


} /* ----- end @media screen and (max-width: 767px) ----- */