body{word-wrap:break-word;-webkit-text-size-adjust:100%}
#mobileOptTrigger {text-align:center;font-size:1.1em;cursor:pointer;float:right}
#mobileOptTrigger:hover,#mobileOptTrigger:active {color: red}

/* BlackBerry */
body.blackberry {width:1000px; background:white}
body.mobile.blackberry {max-width:360px; width:100%}

/* iPad: desktop version */
@media screen and (max-width:980px) {
    body.ios,body.ios #wrapper {margin:0;padding:0;width:100%;-webkit-text-size-adjust:none}
    body.ios #homeMainPanel {padding:5px 2px 15px 4px}
    body.ios #homePanels li {margin-right:16px}
    body.ios h2.journalsboxes-title {width:486px}
}

/* Mobile-optimized */
body.mobile {width:100%;overflow:hidden; background:white;-webkit-text-size-adjust:none}
body.mobile #wrapper {width:100%;padding:0}
body.mobile #footer {height:auto;background-color:#700}
body.mobile #footer ul {background:none}
body.mobile #footer a {float:none}

body.mobile #mainImageCopyright {position:relative;top:auto;left:auto;padding-left:0;right:0;max-width:628px;margin:0 auto 20px auto;width:auto}

body.mobile #strapline {display:none}
body.mobile #social {padding: 10px; width:90%}
body.mobile .addthis_toolbox {width:auto !important}
body.mobile .addthis_button_google_plusone, body.mobile .addthis_pill_style {display:none !important}

body.mobile #onThisDate, body.mobile #Tip-Box {display:none}

body.mobile #homeMainPic, body.mobile #homeMainPic img {width:100%;max-width:628px}

body.mobile #homeMainPic {float:none;margin:0 auto}
body.mobile #homeText {width:100%}
body.mobile #homePanels, body.mobile #essays {display:none}

body.mobile #mainNav {height:315px;background:#790000;/*display:none*/}
body.mobile #homeMainPanel {background:none;border:none}

body.mobile #navLeft, body.mobile #navLeft li, body.mobile #navLeft li a {float:none; text-align:center;display:block; }

body.mobile #navLeft {background:none}
body.mobile #navLeft li {background:url(/images/mobile_menu_item_bg.png) center center repeat-x;}
body.mobile #navLeft li a {background:url(/images/mobile_menu_item_bg_arrow.png) right center no-repeat; margin:0;height:45px;line-height:45px; font-size:1.2em; text-shadow: 0 -1px 1px rgba(0,0,0,0.9);display:block}
body.mobile #navLeft li a:hover {background:#700}

body.mobile #navRight {display:none}
body.mobile .sig {position:relative;top:0;left:0;float:right}

body.mobile #logoZone {padding: 5px}
body.mobile #logoZone a {float:left; margin-right:5px}
body.mobile #logoZone a.pq_logo {padding:0;margin:0}
body.mobile #logoZone a img {max-width:100px}

body.mobile #searchform {width:auto}
body.mobile .mainSearchForm {width: 100%}
body.mobile .groupName {float:none;height:auto;padding-left:0}
body.mobile .inputGroup {padding-left:0}
body.mobile #searchform .inputGroup label, body.mobile #searchform .inputGroup input{float:none;display:inline-block}
body.mobile #searchform a.selectlink {display:block;margin-left:0}
body.mobile .PreviousNext {float:none;}



body.ios ul.top-level li, body.mobile ul.top-level li {margin-top:15px;margin-bottom:15px}

body.mobile .respagelinks a {margin:2px; padding:0}
body.ios .respagelinks a {margin: 2px 8px; padding: 0px}

body.mobile #som, body.mobile #filter-wrapper {float:none; width:auto}

body.mobile .topNav {top:15px;position:relative;float:right;z-index:99;margin-left:15px}
body.mobile #timelineKey {width:100%}
body.mobile #timeContent {height:500px}

body.ios .respagelinks .nxtlink, body.mobile .respagelinks .nxtlink {padding-right:18px}
body.ios .respagelinks .prevlink, body.mobile .respagelinks .prevlink {padding-left:18px} 


@media screen and (max-width:700px) {
	body.mobile button.selectButton {left:auto;position:relative}
	body.mobile .imageHolder160, body.mobile .picture-container {display:none}
	body.mobile .follow {margin-top:10px;}
}

@media screen and (max-width:740px) {
	body.mobile .pages p {width:auto}
	body.mobile #tabTops {height:auto;clear:both}
	body.mobile #tabTops li {float:none}
}


body.mobile #FAQ-Box {position:relative;width:auto;top:0;right:0}
body.mobile #searchform textarea {width:22em}
body.mobile #CommentForm .formButtonline button, body.mobile #QueryForm .formButtonline button {left:7em}




/***********************************************/
body.mobile #BrowseJournals li {margin:0 1px 1px 0}
body.mobile #date-image-set li {float:left;width:42%;height:65px;margin:0 1px 1px 0}
/*47.5*/

body.mobile #date-year-grid-wrap {width:auto;margin-left:0}
/*body.mobile #date-year-grid{max-width:260px}*/
body.mobile #date-year-grid ul {padding:0;float:none}
body.mobile #date-months li, body.mobile #date-days li {float:left}
body.mobile #date-days {float:none;width:auto}

body.mobile #date-months li{padding:1px 0 1px 1px}

body.mobile #date-days ul {display:inline}
body.mobile ul.day-column-1, body.mobile ul.day-column-2 {float:none}

body.mobile #date-year-grid li {width: 50px; height: 50px; line-height: 50px; margin:0 1px 1px 0}
body.mobile #date-image-set-wrap, body.mobile #date-year-grid-wrap, body.mobile #date-months-wrap, body.mobile #date-days {clear:both}

body.mobile .date-hide-element {display:none}

body.mobile #date-image-set li:hover, body.mobile #date-year-grid li:hover, body.mobile #date-months li:hover, body.mobile #date-days li:hover {background-color: #E3E3E3;color:inherit}
body.mobile #date-image-set li.inactive:hover, body.mobile #date-year-grid li.inactive:hover, body.mobile #date-months li.inactive:hover, body.mobile #date-days li.inactive:hover {background-color: #f5f5f5;color:#ccc}
body.mobile #date-image-set li.selected, body.mobile #date-year-grid li.selected, body.mobile #date-months li.selected, body.mobile #date-days li.selected {background-color: #35426F; color:white}


/*versions*/
body.mobile #date-image-set-wrap li {width:23%}						   /*4*/
@media screen and (max-width:610px) {	body.mobile #date-image-set-wrap li {width:42%}	}  /*2*/

/*years & days*/
body.mobile #date-year-grid-wrap {width:1600px}						   /*anything*/
body.mobile #date-days {width:1600px}							   /*full*/
@media screen and (max-width:1600px) {	body.mobile #date-year-grid-wrap, body.mobile #date-days  {width:820px} }  /*16*/
@media screen and (max-width:820px) {	body.mobile #date-year-grid-wrap, body.mobile #date-days  {width:620px}	}  /*12*/
@media screen and (max-width:620px) {	body.mobile #date-year-grid-wrap, body.mobile #date-days  {width:420px}	}  /*8*/
@media screen and (max-width:420px) {	body.mobile #date-year-grid-wrap, body.mobile #date-days  {width:100%}	}  /*less*/

/*months*/
body.mobile #date-months-wrap {width:1300px}						   /*12*/
@media screen and (max-width:1300px) {	body.mobile #date-months-wrap {width:620px}	}  /*6*/
@media screen and (max-width:620px) {	body.mobile #date-months-wrap {width:420px}	}  /*4*/
@media screen and (max-width:420px) {	body.mobile #date-months-wrap {width:300px}  body.mobile #date-months-wrap li {width:82px}	}  /*3*/


.mobileOnly {display:none}
body.mobile .mobileOnly {display:inherit}
body.mobile .desktopOnly {display:none !important}

body.mobile .pages a img {height:80px;border-radius:4px; margin-right: -2px}




/* gazeteer popups */
@media screen and (max-width:980px) {	body.mobile .gazPopup {width:390px} } /*default*/
@media screen and (max-width:640px) {	body.mobile .gazPopup {width:85%;left:10%}}




body.mobile #myContainer {width: 100%}
body.mobile #journalEntryViewer #myContainer {width: 100%;margin-right: 0}
body.mobile #journalEntryViewer #pageTextContainer {display:none}

@media screen and (min-width:740px) {
    body.ios #journalEntryViewer #myContainer,
    body.mobile #journalEntryViewer #myContainer {width:99%}
    
    body.ios #journalEntryViewer.withTranscript #myContainer,
    body.mobile #journalEntryViewer.withTranscript #myContainer {width:64%;margin:0}
    
    body.ios #journalEntryViewer #pageTextContainer,
    body.mobile #journalEntryViewer #pageTextContainer {width:0;display:block}
    
    body.ios #journalEntryViewer.withTranscript #pageTextContainer,
    body.mobile #journalEntryViewer.withTranscript #pageTextContainer {width:35%;float:right}
}