/* ------------------------
   -- for ipad/tablet -- 
------------------------ */
@media only screen and (min-width: 768px) {

/*--NAVIGATION--*/

#mainmenu { display: block; }
#mainmenubottom { display: block; }
#mainmenumobile { display: none; }

.navbar {
width:94%;
margin-bottom: 20px;
}

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-default .navbar-nav > li > a {
font-size:0.9em;
}

.navbar-inner {
    text-align:center;
}

.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
margin-left: -50px;
}

/*-- STATIC LOGOS--*/
.navbar-fixed-top {
top:20px; 
left:20px;
right:20px;
height:95px !important;
background:#e6e6e6;
}

#logo { width:350px; margin: 35px auto; }

.logo {display:block; }
.logo-mobile {display:none;}
.logo-retina {display:none;}

#pagelogo { width:350px; }

.pagelogo {display:inline; margin-left: 35px; }
.pagelogo-mobile {display:none;}
.pagelogo-retina {display:none;}

.gridbuttonmobile { display:none; }
.gridbutton { float:right; display:inline; }

#diarylogo { width:350px; }
#diary { margin-top: 35px; }

.diarylogo {display:inline; margin-left:-50px; }
.diarylogo-mobile {display:none;}
.diarylogo-retina {display:none;}

.gridbuttonmobile { display:none; }
.gridbutton { float:right; display:inline; margin-right: 35px; margin-top:30px; }

/*-- CONTENT --*/
#wrapper { max-width:700px; margin: 30px auto 0 auto; }

.pages { margin-top:-50px; }

#pagenav .row {margin-top:35px; margin-bottom:35px; }

.type-content { padding-top:7%; padding-bottom: 7%; }

.diary-image { margin-top:250px; }

.storylist { margin-top: 35px; }
.storytitle { margin-top:0; }
.storytitle ul { margin-left:-5px; }
.storytitle ul li { display: inline-block; padding: 20px 5px;}
}

/* --------------------------------------
 -- for anything bigger than tablet -- 
-------------------------------------- */

@media only screen and (min-width: 1025px) {

/*--WHITE BODY BORDERS--*/

html{ min-height: 100%; border: solid 35px #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-bottom:none }
body { background: #e6e6e6; padding-top: 90px; }
.border { position:fixed; width:100%; height:35px; background:#fff; left:0; bottom:0; z-index:9999; }
.border-top { position:fixed; width:100%; height:35px; background:#fff; left:0; top:0; z-index:9999; }
.border-right { position:fixed; width:35px; height:100%; background:#fff; right:0; top:0; z-index:9999; }


/*--NAVIGATION--*/

#mainmenu { display: block; }
#mainmenubottom { display: block; }
#mainmenumobile { display: none; }

.navbar {
width:90%;
margin-bottom: 35px;
}

.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-default .navbar-nav > li > a {
font-size:0.9em;
}

.navbar-inner {
    text-align:center;
}

.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
margin-left: -50px;
}

/*-- STATIC LOGOS--*/
.navbar-fixed-top {
top:35px; 
left:35px;
right:35px;
height:95px !important;
background:#e6e6e6;
}

#logo { width:350px; margin: 35px auto; }

.logo {display:block; }
.logo-mobile {display:none;}
.logo-retina {display:none;}

#pagelogo { width:350px; }

.pagelogo {display:inline; margin-left: 35px; }
.pagelogo-mobile {display:none;}
.pagelogo-retina {display:none;}

#diarylogo { width:350px; }

.diarylogo {display:inline; margin-left:-50px; }
.diarylogo-mobile {display:none;}
.diarylogo-retina {display:none;}

.gridbuttonmobile { display:none; }
.gridbutton { float:right; display:inline; margin-right: 35px; margin-top:30px; }

/* -- CONTENT -- */

.pages { margin-top:-90px; }

#pagenav .row {margin-top:35px; margin-bottom:35px; }

.type-content { padding-top:7%; padding-bottom: 7%; }

.diary-image { margin-top:250px; }
.diarycontent { padding:0 130px; }
#diary { margin-top: 0; }

.storylist { margin-top: 0; }
.storytitle ul { margin-left:5px; }
.storytitle ul li { display: inline-block; padding: 20px 5px; font-size:1em;}
}

#wrapper { max-width:900px; margin: 0 auto; }

/* ------------------------- 
  -- for retina screens -- 
------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo-mobile { display:none; }
.logo { display:none; }
.logo-retina { display:inline; }

.pagelogo {display:none;}
.pagelogo-mobile {display:none;}
.pagelogo-retina {display:inline;}

.diarylogo {display:none; }
.diarylogo-mobile {display:none;}
.diarylogo-retina {display:inline;}
}

/* orientation and other media queries */

@media only screen and (max-width: 767px) {
.diarycontent h1 { font-size:1.5em; font-weight:bold;}
.diarycontent h3 { font-weight:700;}
}

/* -- mobile landscape orientation -- */
@media only screen and (max-width: 767px) and (orientation: landscape) {
body { padding-top:0; }
.pages { padding-top:50px; }
#mainmenu { display: none; }
#mainmenumobile { display: none; }
#menumobhoriz { display: block; }
#menumobhoriz { margin-bottom: 0; }
#logomobile .logo-mobile { margin: 14px auto; }
.gridbuttonmobile { margin-right:20px; margin-top: 10px;}
.leftmenu > section button { margin-left:20px; }
.navbar-toggle { margin-left:-20px; margin-right:0; }

#diary { margin-top: -20px; }

.storytitle { margin-top:0;}
.storytitle ul{ margin-left: -5px; }
.storytitle ul li { display: inline-block; padding: 20px 5px 30px 5px;}
}

/* -- mobile portrait orientation -- */
@media only screen and (max-width: 767px) and (orientation: portrait) {
#mainmenu { display: none; }
#mainmenumobile { display: block; }
#menumobhoriz { display: none; }
.navbar-toggle { margin-left:5px; }
#logomobile .logo-retina { margin-top: 15px; margin-right: 20px; }
.leftmenu > section button { margin-left:15px; }
.gridbuttonmobile { margin-right:10px; margin-top: 10px; }
.diary-image { margin-top:50px; }
#diary { margin-top: 0; }
#wrapper { margin-top:25%; margin-bottom:25%; }
.holdimage img { width: 100%; margin-top: 35px; }
}

/* -- tablet portrait orientation -- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.gridbutton { margin-right:35px; }
.diary-image { margin-top:80px; }
#wrapper { margin: 160px auto 0 auto; }
}