/* Main CSS for Gotaticket.com design and CSS by Shelly Cooper - www.shellycooperdesign.com */

/* --------------------- Misc --------------------- */

body {
	background: #c5c5c5 url('img/bg/page-bg.jpg') repeat-x left top;
	color: #666666;
	font: normal 14px/1.5em "helvetica neue", helvetica, arial,serif;
	margin: 0;
	padding: 5px 0 10px 0;
	position: relative;
}
.clear {
	clear: both;
	height: 1%;
	position: relative;
}
.container {
	background: transparent;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 1024px;
}
#page {
	background: #ffffff;
	margin: 0 auto;
	padding: 10px 30px;
	position: relative;
	text-align: left;
	width: 964px;}
#page .container {
	margin: 0 auto;
	width: 964px;
}

.slide-out-div {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
          padding: 20px;
          width: 320px;
          background: #fff;
          border: 1px solid #000;
          z-index: 200;
      }   

.bbb-rating{

}   
.yelp-rating{

}   

/* --------------------- Navigation --------------------- */

#navigation {
  display: block;
  margin: 10px 0;
  position: relative;
  width: 100%;
}
#navigation * {
  padding:0;
  margin:0;
 font:  normal 14px/14px "helvetica neue", helvetica, arial, san-serif;   
 text-transform: uppercase;
}

#navigation ul {
	background:url('img/navigation/border.png') repeat-x left bottom;
	display: block;
	height: 44px;
	padding:0;
	position: relative;
	margin: 0;
}
#navigation ul li {
	background: url('img/navigation/tab-b.png') top right no-repeat;
	color: #dadada;
	display: block;
	float: left;
	height: 40px;
  	list-style: none;
  	margin: 0 3px 0 0;
	padding: 0 4px 0 0;
  	text-decoration: none;
  	text-shadow:2px 2px 6px #383838;
}
#navigation ul li.selected ,
#navigation ul li.hover  {
  background: url('img/navigation/tab-b.png') bottom right no-repeat;
}

#navigation ul li a  {
  background: url('img/navigation/tab-a.png') top left no-repeat;
  color: #dadada;
  display: block;
  height: 20px;
  padding: 12px 10px 8px 14px;
  text-decoration: none;
}
#navigation ul li.selected a,
#navigation ul li.hover a {
  background: url('img/navigation/tab-a.png') bottom left no-repeat;
  color: #fff;
  text-shadow:1px 1px 0px #000;
}
#navigation ul li a {
	display: block;
}
#home #navigation li.home, #register #navigation li.register, #online #navigation li.online, #classroom #navigation li.classroom, #faq #navigation li.faq, #contact #navigation li.contact {
	background: url('img/navigation/tab-b.png') bottom right no-repeat;
}

#home #navigation li.home a, #register #navigation li.register a, #online #navigation li.online a, #classroom #navigation li.classroom a, #faq #navigation li.faq a, #contact #navigation li.contact a {
	background: url('img/navigation/tab-a.png') bottom left no-repeat;
	color: #fff;
	text-shadow:1px 1px 0px #000;
}
/* --------------------- Content Area --------------------- */

.content {
	position: relative;
	width: 100%;
}

.content .main {
	float: right;
	position: relative;
	width: 634px;
}
.content .side {
	float: left;
	position: relative;
	width: 300px;
}

#home .content {
	position: relative;
	width: 100%;
}

#home .content .main {
	float: right;
	position: relative;
	width: 624px;
}
#home .content .side {
	float: left;
	position: relative;
	width: 300px;
}

#home .hero {
	position: relative;
	width: 100%;
}

#home .hero .main {
	float: left;
	position: relative;
	/*width: 624px;*/
    width: 500px;
}
#home .hero .side {
	float: right;
	position: relative;
	/*width: 300px;*/
    width: 424px;
}

.box {
	display: block;
	background: url('img/bg/box-top.jpg') no-repeat left top;
	margin: 0 0 20px 0;
	position: relative;
}
.box div.boxContainer {
	display: block;
	background: url('img/bg/box-bottom.jpg') no-repeat left bottom;
	padding: 10px;
	position: relative;
}

.left-col {
	float: left;
	padding: 0 10px 0 10px;
	margin: 0 10px 0 0;
	width: 290px;
}
.right-col {
	float: left;
	margin: 0;
	padding: 0 10px 0 10px;
	width: 280px;
}
.map {
	border: 5px solid #ccc; 
	margin: 0 0 10px 0;
	width: 284px;
}
/* --------------------- Table --------------------- */
.tblCostEstimator
{
    /*border: 2px solid black;*/
    width:100%;
    /*background: url('img/bg/grain.png')repeat top left;*/
    /*position: relative;*/
	/*border-collapse:collapse;*/
}
.tblCostEstimator th {
        padding: 5px;
        text-align: left;
    }

.tblCostEstimator td {
    text-align: right;
	padding:5px;
	border: 1px solid #000;
	border-width:0 0 1px 0;
	}

    .tblCostEstimator th.amtDue {
        color: red;
        font-size: large;
    }
    .tblCostEstimator td.amtDue {
        color: red;
        font-size: large;
        text-align: right;
        border-color: red;
    }


.tblCostEstimatorTop th {
    padding: 5px;
    border: 1px solid #ccc;
    border-width: 1px 1px 1px 1px;
}
.tblCostEstimatorTop td {
    padding: 5px;
    border: 1px solid #ccc;
    border-width: 0 0 1px 0;
}
.tblCostEstimatorSelectCourt {
    padding: 5px;
    border: 1px solid red;
    border-width: 1px 0 1px 0;
}

/* --------------------- Typography --------------------- */

a {
	color: #cb1920;
	text-decoration: underline;
}
a:hover {
	color: #cb1920;
	text-decoration: none;
}
em {
	font-style: italic;
}

strong {
	font-weight: bold;
}
.hr {
	background:#ffffff url('img/hr.png') repeat-x left top;
	height: 4px;
	margin: 20px 0;
	position: relative;
}
p {
	color: #666666;
	font: normal 14px/1.5em 'helvetica neue', helvetica, arial,serif;
	margin: 0 0 10px 0;
}
h1, h2, h3, h4, h5, h6 {
	color:#464646;
	margin: 0 0 20px 0;
}
h1 {
	font: normal 24px/32px 'helvetica neue', helvetica, arial,serif;
}
h1.chunkfive {
	font: normal 24px/32px 'ChunkFiveRegular', 'helvetica neue', helvetica, arial,serif;
	text-transform: uppercase;
}
h2 {
	font: bold 18px/24px 'helvetica neue', helvetica, arial,serif;
	text-transform: uppercase;	
}
h2.chunkfive {
	font: normal 18px/24px 'ChunkFiveRegular', 'helvetica neue', helvetica, arial,serif;
	text-transform: uppercase;	
}
h3 {
	font: bold 14px/24px 'helvetica neue', helvetica, arial,serif;	
}

.box h2.chunkfive {
	text-shadow: 1px 1px 0 #fff;
}
.box h2.flag {
	background: url('../images/Flag_bubble.png') no-repeat left top;
	padding: 5px 0 10px 55px;
}
#home h1 {
	color: #898989;
	font: italic normal 30px/1.2em 'helvetica neue', helvetica, arial,serif;
	margin: 0 0 20px 0;
	padding: 0 10px;
}

h2.phone-numbers {
	background: url('img/icons/phone.png') no-repeat left top;
	color: #898989;
	float: right;
	font: 18px "helvetica neue", helvetica, arial,serif;
	margin: 11px 0 0 0;
	padding:  10px 0 10px 25px;
	position: relative;
	max-width: 500px;
}
h2.phone-numbers span{
	color: #cb1920;
}
h2.section-title {
    color: #cb1920;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
}
#home h3 {
	color: #898989;
	font: italic normal 24px "helvetica neue", helvetica, arial,serif;
	margin: 0 0 20px 0;
	padding: 0 10px;
}
#home h3 span {
	font-size: 40px;
	text-transform: uppercase;
	
}
#home h3 span.chunkfive {
	color: #cb1920;
	font: normal 36px ChunkFiveRegular, "helvetica neue", helvetica, arial,serif;
	text-transform: uppercase;
	
}
/* CANT USE GLOBAL
ul {
	list-style: disc outside url("img/bullet.png");
	margin:0 0 20px 20px;
	}
ol {
	list-style: decimal outside;
	margin:0 0 20px 20px;
}
li {
margin: 0 0 10px 0
}
blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background: #eee;
  border-left: 3px solid #ccc;
} 
*/
/* --------------------- UL --------------------- */
ul.links {
	display: block;
	margin:0;
	position: relative;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	list-style: none;
}

ul.links li {
	margin: 0 0 10px 0;
	padding: 0;
	position: relative;
	list-style: none;
	list-style-image: none;
}
ul.links li.rule {
	background: url('img/hr.png') repeat-x left bottom;
	padding: 0 0 10px 0;
}
ul.links li a {
	display: block;
	position: relative;
	text-decoration: none;
}
ul.links li a:hover {
	color:#900005;
	text-decoration: none;
}
ul.links li a.online {
	background: url('img/buttons/register-online.jpg') no-repeat left top;
	height:70px;
}
ul.links li a.online:hover {
	background: url('img/buttons/register-online.jpg') no-repeat left bottom;
	height:70px;
}
ul.links li a.classroom {
	background: url('img/buttons/register-classroom.jpg') no-repeat left top;
	height:70px;
}
ul.links li a.classroom:hover {
	background: url('img/buttons/register-classroom.jpg') no-repeat left bottom;
	height:70px;
}
ul.links li a.info {
	background: url('img/icons/info.jpg') no-repeat 0 0px;
	padding: 4px 0 10px 35px;
	}
ul.links li a.badge {
		background: url('img/icons/badge.jpg') no-repeat 0 9px;
		padding: 10px 0 10px 35px;
		}
ul#affiliate-links {
	border-top: 1px solid #ccc;
	margin: 10px 0 0 0;
	padding: 10px 10px 0 10px;
}
ul#affiliate-links li {
	display:inline;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0 10px 0 0;
	}	
ul#affiliate-links li a {
font-size: 12px;
	text-decoration: none;
}
ul#affiliate-links li a:hover {
	color:#900005;
	text-decoration: none;
}
ul#affiliate-links li.admin-login {
	background:transparent url('img/secondary-nav/icons/user.png') no-repeat left top;
	float: right;
	padding:0 0 0 25px;
	}
ul#affiliate-links li.admin-login a {
	color: #898989;
}
ul#affiliate-links li.admin-login a:hover {
	color: #898989;
		color:#900005;
}

/* --------------------- Pagination --------------------- */
ul#pagelinks {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#pagelinks li {
    display: inline;
    padding: 0 2px 0; 
}
ul#pagelinks a {
    padding: 5px;
    font-size: 12px;
    text-decoration: none;
    color: #ccc;
}
ul#pagelinks a:hover {
    color: #fff;
}
ul#pagelinks a.current {
    color: #fff;
    background: none;
}
/* --------------------- Footer --------------------- */
#footer {
	/*color: #777777;*/
	color:#000;
	font-size: 12px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	text-shadow: 1px 1px 0 #e0e0e0;
	width: 1024px;
}
#footer p {
	/*color: #777777;*/
	color:#000;
	font-size: 12px;
	margin: 0 0 5px 0;
}
ul#logos {
	margin: 5px 0;
	position: relative;
	text-align: center;
}
 ul#logos li {
	display:inline;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0 10px 0 10px;
}
 ul#logos li a {
	/*color: #777777;*/
	color:#000;
	text-decoration: none;
}
#footer ul#nav {
font-size: 12px;
margin: 20px auto;
position: relative;
text-align: center;
width: 850px;
}
#footer ul#nav li {
	display: inline;
	padding: 0 10px;

}
#footer ul#nav li a {
	/*color: #777777;*/
	color:#000;
	text-decoration: none;
}
#footer a:hover, #footer ul#nav li a:hover {
	color:red;
}

/* --------------------- Forms --------------------- */

#livechat form {
	margin: 20px 0;
	width: 300px;
		}
#livechat .field{margin-bottom:7px;}
	
#livechat label {
	font-family: "helvetica neue", helvetica, Arial, Verdana; 
	display: block; 
	float: left; 
	font-weight: bold; 
	margin-right:10px; 
	text-align: right; 
	width: 80px; 
	line-height: 22px; 
	font-size: 14px; 
	}
	
#livechat .input{
	font-family: "helvetica neue", helvetica, Arial, Verdana;
	font-size: 14px; 
	padding: 5px; 
	border: 1px solid #b9bdc1; 
	width: 200px; 
	color: #797979;	
	}
	
#livechat .input:focus{
	background-color:#eee;	
	}
	
#livechat .textarea {
	height:150px;	
	}
	
#livechat .button{
	float: right;
	margin:10px 20px 10px 0;
	font-weight: bold;
	line-height: 1;
	padding: 6px 10px;
	cursor:pointer;   
	color: #fff;
	
	text-align: center;
	text-shadow: 0 -1px 1px #64799e;
	
	/* Background gradient */
	background: #bbd32c;
	background: -moz-linear-gradient(top, #cde05b 0%, #bbd32c 100%);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cde05b), to(#bbd32c));

	
	/* Border style */
	border: 1px solid #aec71b;  
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Box shadow */
	-moz-box-shadow: inset 0 1px 0 0 #ecfa94;
	-webkit-box-shadow: inset 0 1px 0 0 #ecfa94;
	box-shadow: inset 0 1px 0 0 #ecfa94;
	
	}
	
#livechat .button:hover {
	background: #aec71b;
  cursor: pointer;
	}

.RadPicker {
    display: inline-table;
}


.AdminLoginToolTip {
    left: 750px !important;
    top: 25px !important;
}

ul.animateListGrow {
    width: 100%;
    padding-inline-start: 0;
}

    ul.animateListGrow li {
        color: red;
        font-size: 16px;
        padding: 0 5px;
        animation-name: animateIn;
        animation-duration: 2s;
        animation-timing-function: linear;
    }
        ul.animateListGrow li:nth-of-type(2) {
            animation-delay: 2s;
        }
        ul.animateListGrow li:nth-of-type(3) {
            animation-delay: 4s;
        }
        ul.animateListGrow li:nth-of-type(4) {
            animation-delay: 6s;
        }
        ul.animateListGrow li:nth-of-type(5) {
            animation-delay: 8s;
        }
        ul.animateListGrow li:nth-of-type(6) {
            animation-delay: 10s;
        }

@keyframes animateIn {
    0% {
        color: red;
        font-weight: normal;
    }

    25% {
        color: White;
        background-color:red;
        font-weight: bold;
        border-radius: 10px;
    }

    100% {
        color: red;
        font-weight: normal;
    }
}