@charset "utf-8";
/*
* Copyright (c) 2015 All Rights Reserved, VERGOSOFT LLC
* Title: CheaterReader Website
* Author: Scott Zastrow
*
*/
html 
{ 
margin: 0px 0px 0px;
line-height: 1;
background: url("../images/siteBK.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #003399;
}

@font-face
{
font-family: crfont;
src: url('../fonts/crfont.eot');
src: url('../fonts/crfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/crfont.woff') format('woff'),
url('../fonts/crfont.otf') format('otf'),
url('../fonts/crfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size: normal;
}
#icon
{
width: 15%;
height: 100px;
margin: 10px auto 10px 10px;
float: left;
background-image:url("../images/icon.png");
background-repeat:no-repeat;
background-size: contain;
/*background-color: yellow;*/
}
#wrap
{
width: 900px;
height: auto;
margin: 0px auto 10px auto;
/*background-color:blue;*/
/*overflow: hidden;*/
}
#header-wrap
{
width:900px;
height: 120px;
margin: 0px auto 10px auto;
border-radius: 15px;
border: 2px solid #000000;
background: url("../images/HeaderBK.png") no-repeat center right fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*overflow: hidden;*/
}
#header
{
width:100%;
height:100%;
/*background-image:url("../images/HeaderBK.png");
background-repeat: repeat-x;
background-size: contain;*/
/*overflow: hidden;*/
}
.menu-item 
{
width: 19%;
height:auto;
display:block;
margin: 10px;
padding-top: 25px;
padding-bottom: 25px;
border-radius: 15px;
border: 2px solid #000000;
background: url("../images/menu-itemBK.png") no-repeat center right fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
float: right;
display: inline;
font-size: 300%;
color: #fff;
text-decoration: none;
/*text-shadow: 3px 3px black;*/
text-align: center;
font-family: crfont, arial, verdana, helvetica;
}
.menu-item:link
{
text-decoration: none;
}
.menu-item:hover
{
text-decoration: none;
background-image:url("../images/menuBK.png");
background-position: top;
background-repeat:no-repeat;
background-size:100% 200%;
}
.menu-item:active
{
text-decoration: none;
background-image:url("../images/menuBK.png");
background-position: bottom;
background-repeat:no-repeat;
background-size:100% 200%;
}
.menu-item:visited
{
text-decoration: none;
}
#body
{
width:900px;
height: auto;
margin: 20px auto 30px auto;
border-radius: 15px;
border: 2px solid #000000;
background: url("../images/bodyBK.png") no-repeat center right fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
#footer
{
width:900px;
height: 200px;
margin: 0px auto 10px auto;
border-radius: 15px;
/*border: 2px solid #0e2b6d;*/
border: 2px solid #000000;
background: url("../images/footerBK.png") no-repeat center right fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*overflow: hidden;*/
}

#logo /*Used for Temp Splash Screen*/
{
width: 300px;
height: 300px;
margin: 100px auto 10px auto;
background-image:url("../images/icon.png");
background-repeat:no-repeat;
background-size: contain;
}
#copy /*Used for Temp Splash Screen*/
{
width: 100%;
font-family:crfont, arial, verdana, helvetica;
text-align:center;
color: #fff;
font-size: 45px;
}
#privacy
{
width: 85%;
margin: 10px auto 20px auto;
padding: 5px 20px 20px 20px;
border-radius: 15px;
/*border: 2px solid #000;*/
font-family:arial, verdana, helvetica;
text-align:left;
color: #000;
background-color: #F0F8FF;
}
.page
{
width:85%;
margin: 10px auto 20px auto;
padding: 5px 20px 20px 20px;
border-radius: 15px;
font-family:arial, verdana, helvetica;
line-height: 1.2;
font-size:20px;
text-align:left;
color: #000;
background-color: #F0F8FF;
}
#settings-image
{
float: right;
margin-left: 20px;
width: 200px;
height: 259px;
border-radius: 5px;
background-image:url("../images/settings.png");
background-repeat:no-repeat;
background-size:contain;
}
#setTip
{
float: right;
margin-left: 20px;
width: 200px;
height:300px;
border-radius: 5px;
background-image:url("../images/setTip.png");
background-repeat:no-repeat;
background-size:contain;
}
#tipImage
{
float: left;
margin-right: 20px;
width: 100px;
height:100px;
border-radius: 5px;
background-image:url("../images/tip.png");
background-repeat:no-repeat;
background-size:contain;
}
#tipTotal
{
float: right;
margin-left: 20px;
width: 200px;
height:200px;
border-radius: 5px;
background-image:url("../images/totalTip.png");
background-repeat:no-repeat;
background-size:contain;
}
/*******Contact Form********/
#contact
{
width: 250px;
height: auto;
margin: 20px auto 20px auto;
padding: 15px;
border-radius: 15px;
border: 2px solid #000000;
background: url("../images/bodyBK.png") no-repeat center right fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: crfont, arial, verdana, helvetica;
font-size:200%;
line-height: .8;
color: #F0F8FF;
}
.message
{
margin-bottom:10px;
}
#sendButton
{
height: auto;
padding: 5px;
font-family: crfont, arial, verdana, helvetica;
font-size:100%;
}
#subjectButton
{
height: auto;
padding: 5px;
font-family: crfont, arial, verdana, helvetica;
font-size:75%;
}
/*******Main Section**********/
#mainOne
{
float: left;
height: 400px;
width: 30%;
}
#mainTwo
{
float: right;
height: 400px;
width: 70%;
}
#mainLogo
{
float: left;
margin: 10px auto 10px auto;
width: 90%;
height: 45%;
background: url("../images/CR-Logo.png") no-repeat right;
background-position: center; 
background-size: contain;
}
#mainFeatures
{
float: left;
margin: 10px auto 10px auto;
width: 90%;
height: 45%;
background: url("../images/CR-Features.png") no-repeat center;
background-size: contain;
}
.youtube-wrap
{
width:600px;
height:353px;
margin: 20px auto 10px auto;
}
.youtube-video
{
float:left;
margin:0px;
width:600px;
height:337px;
}
.youtube-shadow
{
float:left;
margin:0px;
width:600px;
height:16px;
background-image:url("../images/youtube-shadow.png");
background-size:100% 100%;
background-position:top center;
}
#apple
{
float: left;
width: 100%;
height: 90px;
background-color: black;
}
.appleBtn
{
width:170px;
height:50px;
margin-top: 20px;
display:block;
background-image:url("../images/apple.png");
background-repeat:no-repeat;
background-size:contain;
}
.appleBtn span
{
visibility: hidden;
}
#apple-wrap
{
width: 170px;
height:50px;
margin:10px auto 10px auto;
}
/***************Footer Section**************/
#Footer-Left
{
margin-top: 0px;
/*overflow: hidden;*/
float: left;
width: 50%;
height:150px;
}
#Footer-Right
{
margin-top: 0px;
/*overflow: hidden;*/
float: left;
width: 50%;
height:150px;
}
#copyright
{
float: left;
margin:15px 0px 0px 5%;
width: auto;
font-family: arial, verdana, helvetica;
font-size: small;
color: #F0F8FF;
}
/*
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
*/
#copyright a:link
{
text-decoration: none;
color: #F0F8FF;
}
#copyright a:visited
{
text-decoration: none;
color: #F0F8FF;
}
#copyright a:hover
{
text-decoration: none;
color: #000000;
}
#copyright a:active
{
text-decoration: none;
color: #F0F8FF;
}
#Footer-Bottom
{
/*overflow: hidden;*/
float: left;
width: 100%;
height:30px;
}
#navigation
{
vertical-align:top;
margin-top: 15px;
width: 100%;
font-family: arial, verdana, helvetica;
font-size: normal;
line-height: 1.7;
color: #F0F8FF;
}
#nav-A
{
float:left;
padding-left:30px;
padding-right: 10px;
width:auto;
background-image:url("../images/divide.png");
background-repeat: no-repeat;
background-size: 90% 2px;
background-position: bottom center;
}
#nav-B
{
margin: 0px 0px 0px 0px;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 20px;
float:left;
width:auto;
background-image:url("../images/divide.png");
background-repeat: no-repeat;
background-size: 2px 100%;
background-position: top left;
}
#nav-B a:link
{
text-decoration: none;
color: #F0F8FF;
}
#nav-B a:visited
{
text-decoration: none;
color: #F0F8FF;
}
#nav-B a:hover
{
text-decoration: none;
color: #000000;
}
#nav-B a:active
{
text-decoration: none;
color: #F0F8FF;
}
/****************@media***************************/
@media only screen and (max-width: 900px)
{
#mainFeatures
{
margin-left: 10px;
}
.youtube-wrap
{
width:500px;
height:294px;
}
.youtube-video
{
width:500px;
height:281px;
}
.youtube-shadow
{
width:500px;
height:13px;
}
#body, #header-wrap, #footer, #wrap
{
width:95%;
}
#icon
{
height: 80px;
}
.menu-item 
{
font-size:200%;
padding-top: 22px;
padding-bottom: 22px;
}
#header-wrap
{
height:100px;
}
@media only screen and (max-width: 820px)
{
.youtube-wrap
{
width:400px;
height:235px;
}
.youtube-video
{
width:400px;
height:225px;
}
.youtube-shadow
{
width:400px;
height:11px;
}
}
@media only screen and (max-width: 650px)
{

#body, #header-wrap, #footer, #wrap
{
width:97%;
}
#mainOne
{
width: 100%;
height: 230px;
}
#mainTwo
{
width: 100%;
height: 275px;
}
#mainLogo
{
margin-left: 20px;
width: 40%;
height: 90%;
}
#mainFeatures
{
margin-left: 20px;
width: 40%;
height: 90%;
}
.menu-item 
{
font-size:100%;
margin:10px 10px 10px 0px;
border-radius: 12px;
padding-top: 17px;
padding-bottom: 17px;
}
#header-wrap
{
height:75px;
}
#icon
{
height: 60px;
}
#settings-image
{
width: 150px;
height: 194px;
}
#setTip
{
width: 150px;
height: 266px;
}
#tipTotal
{
width:150px;
height: 150px;
}
#settings-image, #setTip, #tipTotal
{
margin-left: 10px;
margin-bottom: 10px;
}
}
@media only screen and (max-width: 455px)
{
.youtube-wrap
{
width:300px;
height:177px;
}
.youtube-video
{
width:300px;
height:168px;
}
.youtube-shadow
{
width:300px;
height:8px;
}
#body, #header-wrap, #footer, #wrap
{
width:99%;
}
#mainOne
{
width: 100%;
height: 200px;
}
#mainTwo
{
width: 100%;
height: 220px;
}
.menu-item 
{
font-size:80%;
margin:10px 10px 10px 0px;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#header-wrap
{
height:55px;
}
#icon
{
height: 40px;
}
#Footer-Left
{
width: 20%;
}
#Footer-Right
{
width: 80%;
}
#copyright
{
font-size: 57%;
margin-left: 2.5%;
}
.page
{
font-size: 18px;
}
#settings-image
{
margin-left: 5px;
}
}
@media only screen and (max-width: 320px)
{
#mainOne
{
height: 250px;
}
#mainTwo
{
width: 100%;
height: 150px;
}
#mainLogo
{
margin-left: 0px;
width: 90%;
height: 45%;
}
#mainFeatures
{
margin-left: 0px;
width: 90%;
height: 45%;
}
#copyright
{
margin:15px 0px 0px 5%;
width: auto;
font-size: 8px;
}
.youtube-wrap
{
width:200px;
height:118px;
}
.youtube-video
{
width:200px;
height:112px;
}
.youtube-shadow
{
width:200px;
height:5px;
}
}