/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ===========================
    ALL: My North East Theme
   ========================== */

body { font: 16px/26px Helvetica, Helvetica Neue, Arial; }

.wrapper { width: 90%; margin: 0 5%; }

.header-container { border-bottom: 0; background: white; }


.footer-container{ 
	background: black; 
	border-top: 3px solid #d2c27e; 
}


/* ==============
    MOBILE:
   ============== */

.main { padding: 2em 0; }
.main article h1 { font-size: 2em;}

.header-container
{
	/*background-image: url('../img/banner/My_North_East-2_edge_mob.png');
	background-repeat: repeat-x;
	*/
	background-color: black;
}

header.ir
{
	background-image: url('../img/banner/My_Scotland_banner_mob.png');
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto;
	width: 261x;
	height: 40px;
}

.footer-container footer { color: white; padding: 20px 0; }

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 {
    padding-top: 20px;
}

/* ==========================================================================
   CUSTOM: My North East
   ========================================================================== */
#plaudits
{
	clear: both;
}

#contributors h1
{
	text-align:center;
	font-family: helvetica, arial, sans-serif;
	font-weight: lighter;
	font-size: 1.3em;
	margin-top: 1em;
	margin-bottom: 0em;
	color: rgb(109,110,113);
}


#contributors ul
{
	clear:both;
	text-align:left;
    -moz-column-width: 10em;
	-moz-column-gap: 1.0em;
	-webkit-column-width: 10em;	
	-webkit-column-gap: 1.0em;
	column-width: 10em;		
	column-gap: 1.0em; 				
}

#contributors li
{
	list-style:none;
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.0em;
	color: rgb(109,110,113);
	margin-top: 0em;
	margin-bottom: 0em;
	border: 2px solid white; 
}

#contributors li:hover
{
	background:black;
	border: 2px solid #d2c27e; 
	color: #d2c27e;
	cursor: pointer;
	font-size: 1.0em;
}

#contributors li.activefoto
{
	border: 2px solid #d2c27e; 
}

.main #bookcover {
	margin-top:1em;
}

.main #coverimage {
	width:100%;
	display: none;
}

.main #backcoverimage {
	width:100%;
}

.main #viewbackcover{
	display: none;
}

#coverbuttons
{
	text-align:center;
}

.coverbutton
{
	width: 40%;
	display: inline-block;
	padding: 0.3em;
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 0.9em;
	#border: 2px solid #d2c27e; 
	border: 1px solid gray; 
	#color: #d2c27e;
	color: #000;	
	text-align:center;
	margin:0.4em auto;	
	text-decoration: none;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
	background: lightblue; 
}

.coverbutton:hover
{
	color: white;
}

#publisherlink
{
	display: block;
	padding: 0.5em;
	margin-left:0; 
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.2em;
	border: 2px solid #d2c27e; 
	color: #d2c27e;
	text-align:center;
	margin-top:0;
	margin-bottom:1.0em;
	background: black; 	
	text-decoration: none;

	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;


	background: #000000; 
}

#publisherlink:hover
{
	color: white;
}

#emailcontact
{
	display:block;
	width:100%;
	margin-top: 0.5em;
	margin-bottom: 0.8em;
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.2em;
	color: rgb(109,110,113);
	text-align:center;
}


#emailcontact:hover
{
	color: #d2c27e;	
}

#emailcontact:focus
{
	outline-style: none;
}

#socialnetworking
{
	width: 100%;
	height: 40px;
	position: relative;
}

#twitter-widget-0
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#youtubelink
{
	position: absolute;
	top: 0px;
	left: 50%;
}

#youtubelink:focus
{
	outline-style: none;
}

#youtubelink img
{
	position: absolute;
	left: -20px;
}

#facebooklike
{	
	position: absolute;
	top: 0px;
	right: 0px;
}


#purchase
{
	margin-bottom: 2em;
}

#purchase h1, #aidheader
{
	/*font-family:'Cinzel',serif;*/
	font-family:helvetica, arial, sans-serif;
	font-weight: normal;
	font-size: 2.0em;		
	margin: 0px;
	/*margin: 0.20em 0px;*/
	color: rgb(109,110,113);
	
}

#samplepages h2, #inthepress h2,  #twitterfeedarticle h2
{
	/*font-family:'Cinzel',serif;*/
	font-family:helvetica, arial, sans-serif;
	font-weight: normal;
	font-size: 1.5em;		
	margin: 0px;
	margin: 0.20em 0px;
	color: rgb(109,110,113);
	text-align: center;
	padding-bottom: 10px;
	
}

#samplepagethumbs {
    text-align: justify;
}
#samplepagethumbs > div {
    width: 200px; 
    display: inline-block;
    vertical-align: top;
	margin-bottom: 15px;
}
#samplepagethumbs:after {
    content: "";
    width: 100%;
    display: inline-block;
}

#presspagethumbs {
    text-align: justify;
}
#presspagethumbs > div {
    width: 150px; 
    display: inline-block;
    vertical-align: top;
	margin-bottom: 15px;
}

#presspagethumbs > div.widethumb {
    width: 240px; 
}

#presspagethumbs > div.extrawidethumb {
    width: 495px; 
}

#presspagethumbs:after {
    content: "";
    width: 100%;
    display: inline-block;
}

#aidheader
{
	font-size: 1.5em;		
}

footer h3
{	
	text-align: center;
	font-size:0.7em;
}

#celebquotes
{
	padding-bottom:2em;
}

#celebquotes ul 
{
	padding-left:0;
}

#celebquotes li 
{
	list-style:none;
	text-align: left;
}

#celebquotes li p.celebquote
{
	font-style: italic;
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.2em;		
}

#celebquotes li p.celebname
{
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.4em;		
}

.plaudits ul 
{
	padding-left:0;
}

.plaudits li 
{
	list-style:none;
	text-align: left;
}

.plaudits li p.plauditquote
{
	font-style: italic;
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.2em;		
}

.plaudits li p span.plauditname
{
	padding-left: 0.5em;
	font-style: normal;
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.1em;
	white-space: nowrap;		
}

.sampleslink
{
	margin-bottom: 15px;
}

#timhealyyoutubelink,
#chroniclelink,
.sampleslink
{
	color: RoyalBlue;	
}

#timhealyyoutubelink:hover,
#chroniclelink:hover,
.sampleslink:hover
{
	color: salmon;	
}

#timhealyyoutubelink:focus,
#chroniclelink:focus,
.sampleslink:focus
{
	outline-style: none;
}

#celebslider
{
	margin-bottom: 1em;
}

#bookinfo, #bookcover p
{
	font-family:'Lora',Arial,serif;
	font-weight: 400;
	font-size: 1.2em;		
}

div.postage table {
	font-size: 0.8em;
}
div.postage table caption {
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid grey;
}

div.postage th, div.postage td {
	line-height: 1.3;
	border-bottom: 1px solid grey;
}

div.postage table tr:first-child{
		border-top: 1px solid grey;
}

div.postage table tr:nth-child(even) {
    background-color: #eee;
}

div.postage table tr:nth-child(odd) {
    background-color: #fff;
}

div.postage table td:nth-child(even) {
	text-align: right;
	padding-left: 10px;
}

div.postage table td:nth-child(odd) {
	text-align: left;
	padding-right: 10px;
}

div.postage table td:nth-child(3n+0) {
	text-align: right;
	padding-top: 8px;	
	padding-bottom: 8px;	
	padding-left: 30px;
}

.postage
{
	/*margin-top: 15px;*/
}

.paypalbranding
{
	width: 180px;
}


.videoYouTubeWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoYouTubeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

img.johnston-press-gallery {
	cursor: pointer;	
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

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

/* ========================
    INTERMEDIATE
   ======================== */

	.header-container
	{
		/*background-image: url('../img/banner/My_North_East-2_edge_med.png');
		background-repeat: repeat-x;*/
	}
	
	header.ir
	{
		background-image: url('../img/banner/My_Scotland_banner_med.png');
   	    background-repeat: no-repeat;
	    background-position: center;
		margin: 0 auto;
		width: 398px;
		height: 61px;
	}

    .main #celebslider {
        float: left;
        width: 19%;
    }

    .main #celebquotes {
        float: right;
        width: 76%;
		text-align:left;
    }

    .main #purchase {		
		clear:both;
        width: 100%;
	}

    .main #bookinfo {
		float:left;
		width: 50%;		
    }

    .main #bookcover {
		float:right;
		width: 44%;		
    }

    .main #sirbobby {
        float:right;
        width: 32%;
    }

    .main #contributors {
		float: left;
        width: 100%;
    }

    .main #celebsarticle {
		float: left;
        width: 100%;
    }

    .main #samplepages, .main #inthepress, .main #twitterfeedarticle {
		float: left;
        width: 100%;
    }

}

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

/* ============
    WIDE
   ============ */

	.header-container
	{
		/*background-image: url('../img/banner/My_North_East-2_edge_wide.png');
		background-repeat: repeat-x;*/
	}
	
	header.ir
	{
		background-image: url('../img/banner/My_Scotland_banner_wide.png');
   	    background-repeat: no-repeat;
	    background-position: center;
		margin: 0 auto;
		width: 698px;
		height: 107px;
	}

    .main #celebslider {
        width: 19%;
		padding-bottom:0;
    }

    .main #celebquotes {
		float:right;
        width: 76%;
		text-align:left;
    }

    .main #purchase {
		clear:none;
		float:right;
        /* width: 62%; CHANGE BACK WHEN SLIDESHOW ADDED */
	}

    .main #bookinfo {
		float:left;
		width: 50%;
		margin-top:0em;
    }

    .main #bookcover {
		float:right;
		width: 45%;
		margin-top:0em;
    }


    .main #sirbobby {
        float:left;
        width: 40%;
		margin-top:0em;
    }


    .main #contributors {
		clear:both;
		float: left;
        width: 100%;
    }

    .main #celebsarticle {
		clear:both;
		float: left;
        width: 100%;
    }

    .main #samplepages, .main #inthepress {
		clear:both;
		float: left;
        width: 100%;
    }

}

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

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }


}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* NavBar */

/* Add a black background color to the top navigation */
.topnav {
  background-color: #000;
  overflow: hidden;
	margin-bottom: 32px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
	border-right: 1px solid #bbb;
  }

 .topnav a.active {
	background-color: #0065bd;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



@media screen and (max-width: 480px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 480px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
     position: absolute;
     right: 0;
     top: 0;
   }
  .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;
 }

}