/*  CSS rules - understand this could use some refactoring.  But then again, I could use some more CSS experience */
@import url(http://fonts.googleapis.com/css?family=Lato:300,300italic);


html {
  font-family: Raleway, "Open Sans", Lucida Handwriting, Impact, Charcoal, sans-serif;
  background: no-repeat center center fixed;
  background-image: url(../img/strooper.jpg);
  background-size: cover;
  transition: background-image 250ms ease-in-out 250ms;
}

img {
    height: 100px;
    width: 190px;
    margin: 10px auto;
}

h1 {
    font-size: 25px;
    display:inline;
    position:relative;
    margin: 0;
    color: red;
    text-align:center;
    padding-bottom: 5px;
    border-bottom: 2px solid yellow
}

#header {
    display: inline;
}

#buySubParagraph, .homeSubParagraph {
    text-align: center;
}

section {
    background: rgba(255,255,255,0.85);
    margin: 20px 12%;
    border-radius: 25px;
}

input,
button{
  padding: 10px;
  display: none;
  border-radius: 5px;
  border: 1px solid #1a1a1a;
  margin: 5px auto;
  line-height: 1.5;
  font-size: 25px;
  text-align: left;
}

table, td, th {
    border: 1px solid black;
    color: black;
    font-size: 30px;
    position: relative;
    margin: 10px auto;
    width: 980px;
    text-align: center;
    background: rgba(255,255,255,0.45);
}

th {
    background: rgba(0,0,0,0.2);
    color: white;
}

.purchaseTable table tbody tr .starValue {
    color: yellow;
    text-align: left;
    padding-left: 20px;
}

.packageName {
    font-family: Raleway, Lucida Handwriting, Impact, Charcoal, sans-serif;
    color: black;
}

.purchaseTable table tbody tr img {
    height: 20px;
    width: 60px;
}


input[type="text"],
input[type="password"] {
    width: 600px;
    margin-bottom: 5px;
}

p, .purchaseTable {
    display: none;
    color: red;
    font-weight: normal;
    font-size: 25px;
    padding: 15px 15px;
}

span {
    text-align: center;
    display: none;
    font-weight: bold;
    color: red;
    font-size: 35px;

}

#specialHelp {
    font-size: 25px;
    border-bottom: 2px solid yellow;
    display: inline;
    font-weight: normal;
}

ul.navbar {
    margin: 10px 10px 10px 10px;
    float:none;
    position:relative;
    width:600px;
    display: inline;
    left: 18%;
}

ul.navbar li {
    display: inline;
    padding: 10px;
}

ul.navbar a {
    text-decoration: none;
    color: white;
    padding: 10px 10px 10px 10px;
}

ul.navbar a:hover {
    color: red;
    border-bottom: solid red 2px;
}

.visibleElement {
    display:block;
    visibility: visible;
    transition: all 250ms ease-in-out 250ms;
}

.signInCheck {
    display: none;
}

.codeCheck, .signInCheck {
    width:622px;
    height:82px;
    position:absolute;
    left:50%;
    top:40%;
    margin:-41px 0 0 -311.5px;
}

.navSelected {
    color: red;
    border-bottom: solid yellow 2px;
}

.contact {
    width: 200px;
    bottom: 0;
    position: fixed;
    float:left;
}

.contact ul {
    list-style: none;
    text-align: center;
    padding: 0;
    float:left;
}

.contact ul li {
    display: block;
}

.contact ul li a img {
    height: 48px;
    width: 177px;
}

.learned {
    color: red;
    background: rgba(255,255,255,0.85);
    border-radius: 25px;
    width: 850px;
    text-align: center;
    height: 300px;
    font-weight: bold;
    display: none;
    position:absolute;
    margin:-150px 0 0 -425px;
    padding-left: 20px;
    left:50%;
    top:60%;
}

.lessons  {
    display: none;
    text-align: left;
    padding: 5px;
    font-size: 15px;
}