@charset "UTF-8";


/* CSS Document April 7, 2015 */


body {
	background-attachment: fixed;
	background-color: #0c8744;
	background-image: url(../images/grass-sky-repeat.jpg);
	background-repeat: repeat-x;
	background-position: center top;padding:0px;margin:0;
}

#grid div.column p {
	color: #FFF;
}



#sticky div.stickytext p {
	font-size: 16px;width: 90%;color: #000;
}


h1 {
	color:#FF3;}
.menu h1 {
	font-size: 4.5em;margin: 20px 60px;color:#FF3!important;
	text-shadow: #000 1px 1px 1px;
}

.menu p {
	
	font-size:2em;margin: 10px 60px;
	text-shadow: #000 1px 1px 1px;
}

.menu{

  width: 920px;

  margin: 0px auto; padding: 15px;	  

  list-style: none;

  counter-reset: li;

  background: #FFF;

  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;

  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;

  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  border-radius: 10px;

}



.menu:before,

.menu:after {

  content: "";

  display: table;

}



.menu:after {

  clear: both;

}



.menu {

  zoom:1;

}



/* -------------------------------- */        



.menu li {

  position: relative;

  float: left;

  cursor: pointer;

  height: 220px; width: 300px;

  margin: 10px 0 0 10px;

  color: #fff;

} 



.menu li:hover, .menu li:focus{

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));

}



.menu .cover{

  z-index: 2;

}



.menu .cover:focus{

  outline: 0;

}



/* -------------------------------- */



.menu li::after{

  content: counter(li);

  counter-increment: li;

  font: italic bold 10px serif, georgia;

  position: absolute;

  color: rgba(255,255,255,.1);

  opacity: 0;

  -webkit-transition: all .2s ease-out;

  -moz-transition: all .2s ease-out;

  -ms-transition: all .2s ease-out; 

  -o-transition: all .2s ease-out;  

  transition: all .2s ease-out;    

}      





.menu .cover::after{

  z-index: -1;

}



/* -------------------------------- */       



.menu li:nth-child(1),

.menu li:nth-child(2),

.menu li:nth-child(3){

  margin-top: 0;

}



.menu li:nth-child(1),

.menu li:nth-child(4),

.menu li:nth-child(7){

  margin-left: 0;      

}



/* -------------------------------- */       



.menu li:nth-child(1),

.menu li:nth-child(1) .content,

.menu li:nth-child(1) .close{

  background-color: #444Da1;

}         



.menu li:nth-child(2),

.menu li:nth-child(2) .content,

.menu li:nth-child(2) .close{

  background-color: #8aa43C;   

}   



.menu li:nth-child(3),

.menu li:nth-child(3) .content,

.menu li:nth-child(3) .close{

  background-color: #918b6d;   

}



.menu li:nth-child(4),

.menu li:nth-child(4) .content,

.menu li:nth-child(4) .close{

  background-color: #e58600;      

}



.menu li:nth-child(5),

.menu li:nth-child(5) .content,

.menu li:nth-child(5) .close{

  background-color: #b35f30;

}



.menu li:nth-child(6),

.menu li:nth-child(6) .content,

.menu li:nth-child(6) .close{

  background-color: #7f5dac;

}



.menu li:nth-child(7),

.menu li:nth-child(7) .content,

.menu li:nth-child(7) .close{

  background-color: #5672b7;     

}



.menu li:nth-child(8),

.menu li:nth-child(8) .content,

.menu li:nth-child(8) .close{

  background-color: #69003f;

}



.menu li:nth-child(9),

.menu li:nth-child(9) .content,

.menu li:nth-child(9) .close{

  background-color: #312112;

}



/* -------------------------------- */



.menu .content{

  opacity: 0; display: none\9;

  overflow: hidden;

  font: 12px Arial, Helvetica;

  position: absolute;

  height: 220px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */

  -webkit-transition: all .3s ease-out;

  -moz-transition: all .3s ease-out;

  -ms-transition: all .3s ease-out; 

  -o-transition: all .3s ease-out;  

  transition: all .3s ease-out;      

}  



.menu .expanded{

  opacity: .95; display: block\9;

  overflow: visible;

  padding: 0px;

  height:680px; width: 920px;

}



.menu li:nth-child(3n) .content{ /* 3,6,9 */

  right: 0;

}



.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */

  left: 0%;

  margin-left: -310px;

}



.menu li:nth-child(7) .content, /* 7,8,9 */

.menu li:nth-child(8) .content,

.menu li:nth-child(9) .content{

  bottom: 0;

}                      



.menu li:nth-child(4) .expanded, /* 4,5,6 */

.menu li:nth-child(5) .expanded,

.menu li:nth-child(6) .expanded{

  margin-top: -230px;

  top: 0%;

} 



/* -------------------------------- */    



.menu .title{

  position: absolute;
  
  margin-top:20%;
 
  height: 80%; width: 100%;

  text-align: center;

  font: italic bold 1.5em/38px 'trebuchet MS', Arial, helvetica;

  opacity: .6;

}



.menu li:hover .title{

  opacity: .7;

}    



/* -------------------------------- */



.menu .close {

  display: none;

  border: 5px solid #fff;

  color: #fff;

  cursor: pointer;

  height: 40px; width: 40px;

  font: bold 20px/40px arial, helvetica;

  position: absolute;

  text-align: center;

  top: -20px; right: -20px;

  -moz-border-radius: 40px;

  -webkit-border-radius: 40px;

  border-radius: 40px;      

}



.menu .cover .close{

  display: block;

}

header {
	width: 960px;
	margin: 0 auto;z-index:20;
}
#footer {
	width: 920px;
	margin-top:0px;
	clear:both;
	color: #000;
	height:80px;
	font-family: "Trebuchet MS", "Helvetica", sans-serif;
	font-size:24px;
	background-image: url(../images/chalktray_03.png);
	background-repeat: no-repeat;
	background-position: center -20px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 25px;
	padding-bottom: 10px;
	padding-left: 25px;
}
#footer-extended {
		width: 900px;margin:5px auto;margin-top:5px;padding:10px 25px;clear:both;color: #FFF;height:auto;
	font-family: "Trebuchet MS", "Helvetica", sans-serif;
}

#horizontal-menu {
	float: right;
	margin-top: 30px;z-index:20;
}


header img {
	float:left;
}

#horizontal-menu ul
{
	float:right;
	width:100%;
	padding:0;
	list-style-type:none;
	position:relative;
	top:0px;
	color:#000;
	margin-top: -20px;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0px;
}
#horizontal-menu ul li a
{
	float:left;
	width:75px;
	color:#000;
	text-decoration: none;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	padding:0.6em;
	margin-right: 4px;
	font-family: "Trebuchet MS",Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
	font-weight: bold;
	text-align: center;
	background-image: url(/images/button-yellow.png);
	background-position:center center;
	background-color:#FBDE03;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
	}
#horizontal-menu ul li a:hover {
	text-decoration: none;
	background-color: #FFFFFF;

}
#horizontal-menu ul li a.home {

}
#horizontal-menu ul li a.home:hover {
	background-color: #FFF;color: #000;

}

#horizontal-menu ul li a.about {
	
}
#horizontal-menu ul li a.about:hover {
	background-color: #FFF;color: #000;
	
}
#horizontal-menu ul li a.Login {

}
#horizontal-menu ul li a.Login:hover {
		background-color: #FFF;color: #000;

}

#horizontal-menu ul li a.contact {

}
#horizontal-menu ul li a.contact:hover {
	background-color: #FFF;color: #000;

}
li {display:inline;}

.green-btn {
	padding:8px;background-color:#18782A;width:auto;
	}

.chalkboard {
	background-image: url(../images/chalkboard-3.jpg);
	background-repeat:no-repeat;
	background-position: center 30px;width:100%;
	}
	.chalkboard-2 {
	background-image: url(../images/chalkboard-3.jpg);
	background-repeat:no-repeat;background-position:fixed;
	background-position: center 30px;width:100%;
	}

.body-container {
	width: 1020px;
	margin:0 auto;
	clear:none;
	margin-top:0px;
	padding:0px;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
!important;
	background-position: center top;
}
.body-container h1 {
	color:#EDCB00;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
}

div.top-image {
		overflow: hidden;height: 200px;background-position: 0 -60px;
}

#home-backdrop {
	
}
#contact-backdrop {
	background: url(../agraham/images/contact-bg.jpg) no-repeat center top;background-color: #EEEEEE;
}
#active {background-color:#FFFFFF !important;
	text-decoration: none;
}
#sticky {
	background-image:url(../images/stickynote.png);
	background-repeat:no-repeat;
	background-position:7px top;
	height:270px;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
	}

#sticky-green {
	background-image:url(images/stickynote.png) ; background-repeat:no-repeat; background-position:7px top;height:400px;padding:20px 30px;
	}


img {border:0;
	}

.gutter, .gutter_outer {
	float:left;
	}

.column {float:left; top:0px;position:relative;padding:0;line-height:1.4em;}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

.stickytext {
	font-family:"tekton-pro", sans-serif;font-size:22px;width:270px;
}

.more {
	font-size:22px;width:270px;margin-left:30px;
}
#stickygreen div.stickytext p {
	font-size: 16px;width: 90%;color: #000;font-family:"tekton-pro", sans-serif;
}


.stickytext h3 {
	font-family:"tekton-pro", sans-serif;font-size:22px;}

.more h3 {
	font-size:22px;
	color: #EDCB00
	!important
}

#title {
	width:90%;
}
	
#title h2 {
	font-family:"Delius", Arial, Helvetica, sans-serif;
	font-size:38px;
	line-height:1.3em;
	color:  #EDCB00;
	margin-top: 20px;
}
.tab-title {font-family:"Delius", Arial, Helvetica, sans-serif !important;
	font-size:38px;
	line-height:1.3em;
	color:  #EDCB00;
	margin-top: 20px;}
.tab-style {color:#FFF !important;text-align:left !important;font-family: Helvetica,Arial, sans-serif;font-weight:200;
	}
.tab-style p { line-height:1.5em;}
.tab-style h2 {font-size:16px;}	
	
	.tab-style li {font-size:20px;list-style-type:disc !important; display:list-item !important;padding-left:5px;margin-left:15px;line-height:28px;}	
/* FORM STyles */

#form1 div {color: #222222;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;	padding: 10px;
}

#form1 div span.style2 strong {
	color: #222;font-size: 22px;
}

#form1 div table tbody tr td  {padding: 0px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

    .form-label{
        width:150px !important;color:#000;
    }
    .form-label-left{
        width:250px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    .form-all{
        width:800px;
        font-family:'Verdana';
        font-size:12px;
		color:#FFF;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label{
        color:false;
    }
	.form-header {
		color:#000;
		}
	
.form-header-group h2 {
		color:#000;font-family:"Delius",trebuchet,san-serif;
		}
	
	.product p {line-height:1.8em;font-size:.8em;width:500px;}

.product { height:auto !important;}

/*input {
   border: 5px solid white; 
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 10px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;

}*/

#form1 div table tbody tr td {
	padding: 4px;
}

#btnLogin, #btnClear {
	padding: 8px 10px;background-color:#8aa43C;font-size: 1em;color: #FFF;
	font-weight: bold;
}

#btnLogin:hover, #btnClear:hover {
	padding: 8px 10px;background-color: gray;font-size: 1em;
}

.tech-spec {
	border:none;
	font-size:.8em;width:100%;
	}
	
.tech-spec td {border-bottom:1px dotted #FFFFFF; cellpadding:0px; cell-spacing:0px;}
	
.schedule p {padding-left:250px; widows:0;}
.schedule ul {padding-left:280px;}
.schedule h1 {padding-left:250px;}

.scan {background:url(../images/scan-background.png) top center no-repeat;height:400px;}
.track {
	background-image: url(../images/images/track-doggy-bg_02.png);
	background-repeat: no-repeat;
	background-position: 40px 40px;
}
.schedule { background:url(../images/schedule-icon-bg.png) no-repeat 10px 60px; height:600px !important;}
.reports {background:url(../images/reports-icon-bg.png) no-repeat 650px 130px;height:600px;}
.role-a {width:380px !important;float:left;clear:none !important; padding:0px 55px 0px 15px;font-size:.8em;background:url(../images/roles-line-bg.png) no-repeat right -30px;height:400px; }
.role-b {width:380px !important;float:left;clear:none !important;padding:0px 20px 0 0;font-size:.8em;}
.roles {
	height:700px !important;
	padding-left:30px;
	padding-top:50px;
	background:url(../images/roles-icon-bg.png);background-position:500px 40px;background-repeat:no-repeat;}
.roles h1, .roles p {padding-left:10px;}
.roles p { line-height:1.7em;}
.roles h2 {color:#E8C500}

.form-html, .form-payment-total, .form-product-item {
	color: #FFF !important;
}
.hover-product-item:hover{background:#f5f5f5;color:#000 !important;}

.form-line-active{background-color: #7af87d !important;color:#000 !important;}
.form-line-sub-label { color: #FFF !important;
	
}