@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; } }