.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -144px; /* the bottom margin is the negative value of the footer's height */
}
.primaryContainer {

    height: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
}
.centreContent {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 660px;
  width: 88%;
}

.downloadButton {
    display:inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    clear: none;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: auto;
    margin-bottom: 20px;
}
#openSubtitlesLogo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    clear: none;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
#buttonsurrounds {
    float:left;
    clear: none;
    display: block;
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align:center;
}
#logosurrounds {
    float:left;
    clear: none;
    display: block;
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
.MenuTitle {
    
    font-size: 1em;
    text-align: left;
    font-weight: normal;
    line-height: normal;
    color: rgb(255, 255, 255);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: aclonica;
}
.MenuSubTitle {
    float: none;
    font-size: 1em;
    line-height: normal;
    color: rgb(255, 255, 255);
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: antic;
}

.contentText {
    float: left;
    font-size: 1.1875em;
    width: 97%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: normal;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: antic;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 31;
    margin-top: 16px;
    margin-left: 6%;
    clear: left;
}

.MenuColumn {
    
    float: left;
    width: auto;
    height: auto;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 5;
    margin-top: 1px;
    margin-left: 0%;
    clear: none;
    margin-right: 0%;
}
.MenuColumnAndClose {
    margin-left: 5%;
}
.MenuColumnAndThen {
    margin-left: 10%;
}

#textspan3 {
    float: none;
    font-size: 1em;
    line-height: normal;
    color: rgb(255, 255, 255);
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: aclonica;
}

.push {
    clear: left;
	height: 111px; /* '.push' must be the same height as 'footer' */
}
.footer {
    float: left;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 4;
    clear: left;
    margin-left: 0%;
    margin-top: 33px;
    height: 111px; 
    width: 100%;
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 30px inset;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 30px inset;
    /* help: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
    background-image:-webkit-linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65098) 19%,rgba(0,0,0,0.65098) 82%,rgba(0,0,0,0) 100%), url("img/coconutTexture2.jpg");/* Chrome */
    background-image:-moz-linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65098) 19%,rgba(0,0,0,0.65098) 82%,rgba(0,0,0,0) 100%), url("img/coconutTexture2.jpg");  /* firefox */
    background-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65098) 19%,rgba(0,0,0,0.65098) 82%,rgba(0,0,0,0) 100%), url("img/coconutTexture2.jpg");  /* IE */
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-background-size: auto;
    background-size: auto;
}

#interactive_coconut {
    float: left;
    width: 391.01452072000006px;
    height: auto;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 12;
    margin-top: 4px;
    margin-left: -10px;
    clear: right;
    margin-right: 0%;
}
h1 {
    font-size: 2.25em;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: aclonica;
    text-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px; 
    margin-bottom: 0px;
}
h2 {
    font-size: 2em;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: aclonica;
    text-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px;  
    margin-bottom: 0px;
}
h3 {
    font-size: 1.5em;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: aclonica;
    text-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px;  
    margin-bottom: 0px;
}
.topMenu {
    float: right;
    font-size: 1.25em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: antic;
    text-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 16;
    margin-top: 0px;
    margin-left: 0%;
    clear: none;
    margin-right: 0px;
}

.appMenu {
    float: left;
    font-size: 1em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1.5em;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: antic;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 16;
    margin-top: 0px;
    margin-left: 0px;
    clear: none;
    margin-right: 20px;
    padding: 0 17px;
    border-radius: 28px;
    border-width: 2px;
    -webkit-box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
    box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
}
.appMenuSelected {
    float: left;
    font-size: 1em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1.5em;
    color: rgb(45, 45, 45);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: antic;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 16;
    margin-top: 0px;
    margin-left: 0px;
    clear: none;
    margin-right: 20px;
    background: #000000;
    border-radius: 28px;
    padding: 0 17px;
    color: #ffffff;
    background-image:url("img/coconutDark.png");
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-background-size: auto, auto;
    background-size: auto, auto;
    -webkit-box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
    box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
}

#demo {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    position: relative;
    width: 100%;
    max-width: 1118px;
    max-height: 400px;
    display: block;
}
#demoHolder {
    clear: left;
    position: relative;
    height: auto;
    width: 100%;
    background-color: #ffffff;
    margin-top: 10px;
}


#FacebookButton {
    float: right;
    height: 33px;
    margin-left: 0px;
    margin-top: 14px;
    clear: none;
    width: 33px;
    background-image:url("img/iconCoco1.gif");
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-background-size: auto, auto;
    background-size: auto, auto;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: rgb(59, 89, 152);
    -webkit-box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
    box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
    margin-right: 14px;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 13;
}

#facebookLogoImage {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: 44.223485%;
    margin-top: 6px;
    clear: none;
    color: rgb(0, 0, 0);
}

#TwitterButton {
    float: right;
    height: 33px;
    margin-left: 0px;
    margin-top: 14px;
    clear: none;
    width: 33px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
    box-shadow: rgba(130, 130, 130, 0.45098) 0px 3px 3px 0px;
    display: block;
    background-image:url("img/iconCoco2.gif");
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-background-size: auto;
    background-size: auto;
    background-color: rgb(95, 169, 221);
    margin-right: 10px;
    padding-right: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 13;
}

#twitterLogoImage {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: 19.128788%;
    margin-top: 8px;
    clear: none;
    color: rgb(0, 0, 0);
}

#Menu_Butts {
    float: right;
    height: auto;
    margin-left: 0px;
    margin-top: 36px;
    clear: none;
    width: auto;
    margin-right: 110px;
    position: relative;
    top: 0px;
    left: 0px;
}

#AppButts {
    float: left;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
    clear: none;
    width: auto;
    margin-left: 0px;
    position: relative;
    top: 0px;
    left: 0px;
}
#Twitter_widget {
    float: left;
    margin-left: 6%;
    margin-right: 6%;
    margin-top: 17px;
    margin-bottom: 17px;
    clear: left;
    width: 88%;
}
#cocoImg {
    float: left;
    color: rgb(0, 0, 0);
    position:relative;
    top: 0px;
    left: 0px;
    z-index: 12;
    margin-top: 14px;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 10px;
    clear: none;
}

#TwitterButton:hover {
    background-image:-webkit-linear-gradient(270deg, rgb(95, 169, 221) 0%, rgb(95, 169, 221) 99%),url("img/iconCoco1.gif");
    background-image: linear-gradient(180deg, rgb(95, 169, 221) 0%, rgb(95, 169, 221) 99%), url(file:///Users/user/Projects/craiggrummitt.com/interactivecoconut/site/interactivecoconutV1.0/assets/img/iconCoco1.gif);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-background-size: auto;
    background-size: auto;
}

#FacebookButton:hover {
    background-image:-webkit-linear-gradient(270deg, rgb(59, 89, 152) 0%, rgb(59, 89, 152) 100%),url("img/iconCoco1.gif");
    background-image: linear-gradient(180deg, rgb(59, 89, 152) 0%, rgb(59, 89, 152) 100%), url(file:///Users/user/Projects/craiggrummitt.com/interactivecoconut/site/interactivecoconutV1.0/assets/img/iconCoco1.gif);
    background-position: 0% 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-background-size: auto;
    background-size: auto;
    background-color: rgb(59, 89, 152);
}

#footerbox {
    max-width: 580px;
    float: none;
    height: auto    ;
    margin-left: auto;
    margin-top: 23px;
    clear: none;
    position: relative;
    top: 0px;
    left: 0px;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.topMenu:hover {
    text-shadow: rgb(130, 130, 130) 0px 3px 3px;
}

.topMenu:active {
    text-shadow: rgb(130, 130, 130) 0px 3px 3px;
}
#contactForm {
    float: left;
    height: auto;
    margin-left: 10%;
    margin-top: 20px;
    clear: both;
    width: 79.997854%;
}
.formFieldTitle {
     float: left;
    height: auto;
    margin-left: 10%;
    margin-top: 20px;
    clear: both;
    width: 90%;
    font-family: antic;
    font-size: 1.1875em;
}
.formField {
    float: left;
    font-size: 1em;
    width: 90%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    word-wrap: break-word;
    margin-left: 10%;
    margin-top: 10px;
    clear: both;
    min-height: 0px;
    font-family: antic;
    margin-right: 0%;
    color: rgb(73, 73, 73);
    text-shadow: rgba(130, 130, 130, 0.478431) 0px 3px 3px;
    min-width: 0px;
    border: 1px solid rgb(182, 182, 182);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 5px;
}

.sendButton {
    float: right;
    font-size: 1em;
    width: 80px;
    height: auto;
    text-align: center;
    font-weight: normal;
    line-height: 1em;
    word-wrap: break-word;
    clear: both;
    min-height: 0px;
    font-family: antic;
    color: rgb(45, 45, 45);
    text-shadow: rgba(130, 130, 130, 0.478431) 0px 3px 3px;
    border: 1px solid rgb(182, 182, 182);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 5px;
    background-color: rgb(234, 234, 234);
    position: relative;
    top: 0px;
    left: 0px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: 0%;
    margin-bottom: 20px;
    z-index: 1;
}

.greyText {
    float: left;
    font-size: 1em;
    width: 79.999152%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    word-wrap: break-word;
    margin-left: 10%;
    margin-top: 34px;
    clear: none;
    min-height: 0px;
    font-family: antic;
    margin-right: 10%;
}
.greyText a {
    color: #0000ff;
}
@media only screen and (max-width: 916px) {
    #Menu_Butts {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 546px) {
    #interactive_coconut {
        margin-left: auto;
        margin-right: auto;
        float: none;
        clear: none;
        margin-top: 4px;
    }

    #Menu_Butts {
        margin-right: auto;
        margin-top: 10px;
        clear: none;
        margin-left: auto;
        width: 276px;
        float: none;
    }

    #footer {
        margin-top: 33px;
        margin-left: 0%;
        clear: left;
    }
    #cocoImg {
        margin-top: 22px;
        margin-left: auto;
        clear: none;
        margin-right: auto;
        float: none;
        display: block;
        margin-bottom:auto;
    }
    #FacebookButton {
        margin-right: 30px;
        margin-top: -117px;
        clear: none;
    }

    #TwitterButton {
        margin-right: 73px;
        margin-top: -117px;
        clear: none;
    }

    .MenuColumnAndThen {
        margin-left: 5%;
    }
}

@media only screen and (max-width: 410px) {
    #interactive_coconut {
        font-size: 1.5em;
        height: auto;
        margin-top: 4px;
        margin-left: auto;
        clear: none;
        width: 258.375px;
        margin-right: auto;
    }

    #Menu_Butts {
        margin-top: 10px;
        clear: none;
    }

    #footer {
        margin-top: 33px;
        margin-left: 0%;
        clear: left;
    }
}