body {
    background-color:#d8e0e6;
    color:#253039;
    font-family: 'Open Sans', sans-serif;
}

h1 {
	font-family: 'Roboto', sans-serif;
	font-weight:500;
}

h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
}

h2 {
    margin-bottom:2rem;
}

h3 {
    margin-bottom:1.5rem;
}







/******************/

@media only screen and (min-width: 76.063em) {
    .row-wide {
        width: 1200px;
        max-width:inherit;
    }
}



/******************/

/* Foundation tweaks */

.reveal-modal-bg {
  background: #000000;
  background: rgba(0, 0, 0, 0.65);
}

select {
    margin-bottom:0.5rem;
}


.panel {
    background-color:#F2F2F2;
    border:3px solid #D2D2D2;
}

.panel select {
    background-color:#ffffff;
}

.alert-box {
    border:0;
}

/******************/



.topNav {
    position:absolute;
    top:2.5rem;
    right:2rem; 
    font-weight:bold;   
    font-size:1rem; 
    line-height:2rem;  
}

.topNav a:hover {
    text-decoration:underline;
}

.topNav a, .topNav a:visited {
    color:#253039;
    padding-left:2rem;
    padding-right:0rem;
}

@media only screen and (max-width: 56em) {
    .topNav {
        top:4.5rem;
        left:4.5rem; 
        right:0.1rem; /*almost no margin on right*/
    }

    .topNav a, .topNav a:visited {
        padding-left:1rem;
        padding-right:0rem;
    }    
}


.logoTop img {
    background-image:url(/img/aplusattendance-grey.png);
    background-size:100%; /*Make sure bg image resizes with actual (transparent) image*/
}

.logoTop {
    /*width:55%;*/ /*No resizing necessary*/
    position:absolute;
    top:1.5rem;
    left:1.5rem;
}


/* For blue header, we change some styles*/

body.blueHeader {
    background-color:#1c92d4;
    background-image:url(/img/home-blue-fade.png);
    background-position: top left;
    background-repeat: repeat-x;    
}

body.blueHeader .logoTop img {
    background-image:url(/img/aplusattendance-white.png)!important;
}

body.blueHeader .topNav a, body.blueHeader .topNav a:visited {
    color:#ffffff;
}


body.blueHeader .pageHeaderTxt, body.blueHeader .pageHeaderTxt h1, body.blueHeader .pageHeaderTxt h2 {
    color:#ffffff;
}


footer {
    padding-top:2rem;
    padding-bottom:2rem;
    font-size:1rem;    
}

footer a, footer a:visited {
    color:#505050;
}

body.blueHeader footer {
    color:#ffffff;
}

body.blueHeader footer a {
    color:#ffffff;
    opacity:0.8;
}



footer p {
    line-height:2;
}

.footerBottom {

    background-color:#ffffff;
    padding:1rem;
    color:#000000;
    opacity:0.8;

}

.footerBottom a, .footerBottom a:visited {
    color:#555555;
}




/******************/

.whiteStrip {
    background-color:#ffffff;
}

.darkGreyStrip {
    background-color:#55555B;
    color:#ffffff;    
}
/*
.veryDarkGreyStrip {    
    background-color:#253039;
    color:#ffffff;       
}
.veryDarkGreyStrip h1, .veryDarkGreyStrip h2, .veryDarkGreyStrip h3 {
    color:#ffffff;
}
*/

.blueSdarkGreyStriptrip h1, .darkGreyStrip h2, .darkGreyStrip h3 {
    color:#ffffff;
}


.blueStrip {
    background-color:#1c92d4;
    color:#ffffff;
}

.blueStrip h1, .blueStrip h2, .blueStrip h3 {
    color:#ffffff;
}

.successStrip {
    background-color:#009822;
    color:#ffffff;
}
.successStrip h1, .successStrip h2, .successStrip h3 {
    color:#ffffff;
}



.contentStrip {
    padding-top:3.5rem;
    padding-bottom:3.5rem;
}

.stripShadow {

    -webkit-box-shadow: 0px 15px 38px -6px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 15px 38px -6px rgba(0,0,0,0.25);
    box-shadow: 0px 15px 38px -6px rgba(0,0,0,0.25);
}

.contentStrip h2 {
    text-align:center;
    margin-top:0;
    margin-bottom:3rem;
}

.contentStrip h3 {
    font-size:1.5rem;
    margin-top:0;
    margin-bottom:3rem;
    line-height:2.25rem;
    text-align:center;
}

/******************/

.pageHeaderTxt {
    color:#253039;
}


.pageHeaderTxt {
    margin-top:10rem;
    margin-bottom:2.5rem;
}

.pageHeaderTxt h1 {
    text-align:center;
    font-weight:bold;

}

.pageHeaderTxt h2 {
    text-align:center;
    font-size:2rem;
}

@media only screen and (max-width: 64em) {
    .pageHeaderTxt h2 {
        font-size:1.5rem;
    }
}


a.navBtn {
    display:inline-block;
    padding:1.0rem 2.0rem;
    font-size:1.25rem;
    margin-right:1rem;
    margin-left:1rem;    
    background-color:#cfd1d3;
    border:3px solid #a6aeb8;
    color:#253039;
}

a.navBtn:hover {
    background-color:#dfe1e3;
    border-color: #969ea8;
    transform: scale(1.03);
}



a.navBtnSel,a.navBtnSel:hover {
    border:3px solid #ffd256!important;
    background-color:#ffffff;
    color:#000000;
}

/******************/

table.featureTb {
    width:100%;
}

table.featureTb th, table.featureTb td {
    padding:0.75rem;
    font-size:1rem;
    border-spacing:0;
    border-collapse:collapse;

}

table.featureTb tbody tr th {
    text-align:left;
    font-weight:normal;
}

table.featureTb tbody tr:nth-child(even) th, table.featureTb tbody tr:nth-child(even) td {
    background-color:#f0f0f0;
    border-top:1px solid #e0e0e0;
}

table.featureTb tbody tr:nth-child(odd) th, table.featureTb tbody tr:nth-child(odd) td {
    background-color:#ffffff;
    border-top:1px solid #e0e0e0;
}

table.featureTb tbody tr td {
    text-align:center;
}

/******************/

 
img.screenSmall, img.screen {
    border:2px solid #b8c0c6;
    border-radius: 3px 3px 3px 3px;-moz-border-radius: 3px 3px 3px 3px;-webkit-border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 2px 2px 13px -1px rgba(0,0,0,0.25);-moz-box-shadow: 2px 2px 13px -1px rgba(0,0,0,0.25);box-shadow: 2px 2px 13px -1px rgba(0,0,0,0.25);
}

img.screenSel {
    border:2px solid #ffd256;
}


.caption {

}

.caption h4 {
    color:#0080d0;
    font-size:1.5rem;
    padding-top:1rem;
}

.caption p {
    font-size:1.15rem;
}

/******************/





.homeTab, .homeTabSel {
    text-align:center;
    padding-top:1.25rem;
    padding-bottom:1.25rem;
}

.homeTab {
    background-color:#cfd1d3;
    border-top:5px solid #a6aeb8;
    cursor:pointer;
}

.homeTab:hover {
    background-color:#dfe1e3;
    border-top:5px solid #b6bec8;
}

.homeTabSel {
    background-color:#ffffff;    
    border-top:5px solid #ffd256;    

    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    -webkit-transition: border-color 500ms linear;
    -ms-transition: border-color 500ms linear;
    transition: border-color 500ms linear;
    
}

.homeTab .tHdg, .homeTabSel .tHdg {
    font-weight:bold;
    font-size:1.5rem;
    line-height:1.75rem;
}

.homeTab .tBlw, .homeTabSel .tBlw {
    font-weight:normal;
    font-size:1.2rem;
    line-height:2.25rem;
    white-space:nowrap;
    text-overflow: ellipsis;
}

.homeTabBanner {
    background-repeat:no-repeat;
    background-size: auto 100%;
    background-position:100% 0%;
    padding-top:2.5rem;
    padding-bottom:2.5rem;
    padding-right:40%;
    font-size:1.1rem;
    line-height:1.95rem;
    margin-top:4px;
    margin-bottom:4px;
}

.hmTile {
    padding-left:2px!important;
    padding-right:2px!important;   
    margin:0; 
    cursor:pointer;
}

.hmTile:hover {    
    transform: scale(1.015);
    
    filter: brightness(110%);
}

.hmTileInner {
    text-align:center;
    color:#ffffff;
    padding-left:6px;
    padding-right:6px;
    padding-bottom:4rem;
    position:relative;
}

.hmTileImg {
    padding-top:2rem;
    padding-bottom:1rem;
}

.hmTile h3 {
    color:#ffffff;
    font-size:1.5rem;
    margin-bottom:0.25rem;
}

.hmTileAbt {
    opacity:0.9;
    font-size:1rem;
    line-height:1.5rem;
}

.hmTileLnk {
    text-align:right;
    padding-right:1rem;
    padding-bottom:1rem;
    position:absolute;
    right:0px;
    bottom:0px;    
}

.hmTileLnk a, .hmTileLnk a:link {
    color:#ffffff;
    font-size:1.1rem;
}

.hmTileLnk a i {
    font-size:120%;
    margin-left:0.25rem;
}


/* Home feature icons */
.hmiconctr {
  text-align:center;
}


.hmiconctr img {
    -moz-transform:scale(0.75);
    -webkit-transform:scale(0.75);
    transform:scale(0.75);
}


.hmiconctr p {
  margin-top:0px;
  margin-bottom:1em;
  color:#333333;
}



.bannerHeading {
    color:#ffffff;
    font-size:32px;
    line-height:125%;
    margin-left:16px;
  }
  
  
  img.bannerDevice {
  
  
  
    margin-top:10px;
  
  
  
    height:300px;
  
  
  
    width:250px;
  
  
  
    max-width: none; /*prevent image resize*/
  
  
  
  }
  
  
  .bannerVideoButton {
  
  
  
    color:#ffffff;
  
  
  
    margin-left:16px;
  
  
  
    font-size:16px;
  
  
  
    font-weight:bold;
  
  
  
    cursor:pointer;
  
  
  
  }
  
  
  @media only screen and (max-width: 40.063em) {
  
  
  
    .bannerHeading { 
  
  
  
      margin-top:20px;
  
  
  
      margin-right:20px;
  
  
  
    }
  
  
  
    .bannerVideoButton {
  
  
  
      text-align:center;
  
  
  
    }
  
  
  
  }
  
  
  @media only screen and (min-width: 40.063em) {
  
  
  
    .bannerHeading { 
  
  
  
      margin-top:60px;
  
  
  
      margin-right:20px;
  
  
  
    }
  
  
  }
  
  
  @media only screen and (min-width: 64.063em) {
  
  
  
    .bannerHeading { font-size:36px; line-height:54px; margin-top:70px;}
  
  
    img.bannerDevice { height:340px; width:auto;   margin-top:12px; }
  
  
  }
  
  
  @media only screen and (min-width: 76.063em) {
  
  
  
    .bannerHeading { font-size:42px; line-height:56px; margin-top:90px; }
  
  
  
    img.bannerDevice { height:380px; width:auto;  margin-top:14px; }
  
  
  
  }
  
  @media only screen and (min-width: 90.063em) {
  
  
  
    .bannerHeading { font-size:42px; line-height:56px; margin-top:110px; margin-left:28px;}
  
  
  
    img.bannerDevice { height:406px; width:auto;  margin-top:16px; }
  
  
  
    .bannerVideoButton {margin-left:28px;}
  
  
  }



/******************/

p.formLine {
	margin-top:0px;
	margin-bottom:8px;
}

p.formLine textarea {
	height:8rem;
}


/******************/

.greenText {
    color:#009822!important;
}


/******************/