@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

html, body, div { padding: 0; margin: 0; font-size: 100%; }

img {
	max-width: 100%;
}

input {
	margin, padding: 0px;
}

p {
font-size : 1.1em;
font-family : 'PT Sans', verdana, sans-serif;
color : #000000;
letter-spacing: 0.07em;
text-align: left;
padding-left: 20px;
padding-right: 20px;
line-height: 158%;
}

h3 {
font-family : verdana;
color : #ff0080;
text-align : center;
}

h2 {
font-family : verdana;
color : #000000;
text-align : left;
}

h1 {
font-family : verdana;
color : #000000;
text-align : right;
}

a {
text-decoration : none;
color: #000000;
-o-transition:color .2s ease-in-out;
  -ms-transition:color .2s ease-in-out;
  -moz-transition:color .2s ease-in-out;
  -webkit-transition:color .2s; ease-in-out
  /* ...and now override with proper CSS property */
  transition:color .2s ease-in-out;
  
 /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

a.white, a.white:visited {
	color: white;
}

a:visited {
text-decoration : none;
color: #000000;
}

a:hover {
color : #D900D9;
}

a.white:hover {
	color: orange;
}

a.gutlink {
	text-decoration : none;
color: #990099;
	-o-transition:color .2s ease-in-out;
  -ms-transition:color .2s ease-in-out;
  -moz-transition:color .2s ease-in-out;
  -webkit-transition:color .2s ease-in-out;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-in-out;
}

a.gutlink:visited {
text-decoration : none;
color: #990099
}

a.gutlink:hover {
color : #CC33CC;

}

.upper {
font-size: 1.2em;
font-family : 'Hammersmith One', verdana, sans-serif;
color : #000000;
letter-spacing: 0.1em;
padding-left: 10%;
padding-right: 10%;
}

.upperline {
 height:4px;
 background: -webkit-linear-gradient(left, white, #ed2487, #00b3ce, white); /* For Safari */
 background: -o-linear-gradient(right, white, #ed2487, #00b3ce, white); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(right, white, #ed2487, #00b3ce, white); /* For Firefox 3.6 to 15 */
 background: linear-gradient(to right, white, #ed2487, #00b3ce, white); /* Standard syntax (must be last) */
}

#upperline {
 height:4px;
 background: -webkit-linear-gradient(left, white, #ed2487, #00b3ce, white); /* For Safari */
 background: -o-linear-gradient(right, white, #ed2487, #00b3ce, white); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(right, white, #ed2487, #00b3ce, white); /* For Firefox 3.6 to 15 */
 background: linear-gradient(to right, white, #ed2487, #00b3ce, white); /* Standard syntax (must be last) */
}


#upperline2 {
 height:4px;
 background: -webkit-linear-gradient(left, white, #ed2487, #00b3ce, white); /* For Safari */
 background: -o-linear-gradient(right, white, #ed2487, #00b3ce, white); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(right, white, #ed2487, #00b3ce, white); /* For Firefox 3.6 to 15 */
 background: linear-gradient(to right, white, #ed2487, #00b3ce, white); /* Standard syntax (must be last) */
}

.little {
font-size : .7em;
letter-spacing: 0.1em;
padding-left: 0px;
padding-right: 0px;
font-weight: 800;
}

.littletrademark {
	font-size : .7em;
letter-spacing: 0.1em;
padding-left: 0px;
padding-right: 0px;
font-weight: 400;
}

.bookcover {
	max-width: 100%;
}

.date {
font-size : .7em;
letter-spacing: 0.1em;
font-weight: 800;
}

.linkstyle {
font-size: .8em;
letter-spacing: 0.1em;
}



        /* Start of "Micro clearfix" */

        .cf { zoom: 1; }
        .cf:before,
        .cf:after { content: ""; display: table; }
        .cf:after { clear: both; }

        /* End of "Micro clearfix" */

.sectionleft {
	display: inline;
	float: left;
	padding-top: 5%;
	padding-bottom: 5%;
}

.sectionright {
	display: inline;
	float: left;
	padding-top: 5%;
	padding-bottom: 5%;
}

.container {
	margin-left: 20%; margin-right: 20%;
}

.booktitle {
	font-size: 1.5em;
	text-align: center;
	left: 50%;
}

.bookdescription {
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
}

.centeredbooks {
	text-align: center;
	max-height: 100%;
}

.buynowbutton {
    position:relative;
    width: 171px;
    left: 50%;
	padding-top: 5%;
    overflow:visible;
}

#buynowbuttonimage {
    max-width:100%;
    max-height:100%;
    margin-left:-50%;
}

.logoimage {
	position: relative;
	left: 50%;
	max-width: 300px;
	max-height: 100%;
	clear: both;
	padding-top: 5%;
}

#logoimg {
	margin-left: -50%;
}

#backtobooks {
	text-align: center;
}

#trademark_container {
	position: relative;
	left: 50%;
	max-width: 66px;
	max-height: 100%;
}

#trademark_img {
	margin-left: -50%;
}

.buybutton {
	text-align:center;
	background-color: yellow;
	border: 1px dotted black;
	border-radius: 10px;
	padding: 10px;
	font-size: 1.25em;
	clear: both;
	margin-left: 20%;
	margin-right: 20%;
}

.donations {
	text-align:center;
	background-color: black;
	border: 2px dashed white;
	padding: 10px;
	font-size: 1.1em;
	clear: both;
	color: #FFF;
}

.donations a {
	color: #FFF;
}

.donations a:hover {
	color: yellow;
}

.screenhack {
	display: none;
}



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

.container {
	margin-left: 1%; margin-right: 1%;
	width: 100%;
}

.linkstyle {
	font-size: 1em;
}

.screenhack {
	display: block;
}


}

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

.container {
	margin-left: 1%; margin-right: 1%;
}

.linkstyle {
	font-size: 1em;
}


}