/* General Styles */

body {
margin: 0;
padding: 0;
background: #39c;
font-family: Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6,p,form {
margin: 0;
padding: 0;
}

h1{
font-size: 22px;
}

h2 {
font-size: 18px;
}

h3 {
font-size: 16px;
}

h4 {
font-size: 14px;
}

h5 {
font-size: 12px;
}

h6 {
font-size: 10px;
}

form, td, p {
font-size: 12px;
}

/*
------------------------------------------------- Wrapper
*/
#wrap{
background: transparent url(../img/wide-contbg.gif) repeat-y top left;
width: 979px;
margin: 0 auto;
}


/*
------------------------------------------------- Header
*/
#hdr {
height: 89px;
width: 979px;
}

#hdr h1 a {
display: block;
height: 89px;
width: 979px;
background: transparent url(../img/wide-hdr.jpg) no-repeat top left;
}

#hdr h1 a span {
display: none;
}


/*
------------------------------------------------- Content
*/

#content {
float: left;
width: 979px;	
}

#content div.contpad {
padding: 10px 30px 10px 29px;
}

/*
--------------------------------------------------------------------------------------- PAGE INTRO
*/

.pageintro {
width: 920px;
padding: 0 0 20px 0;
/* border-bottom: 1px solid #e5e5e5; */
margin-bottom: 20px;
position: relative;
text-align: center;
}

.pageintro h1 {
font-size: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
position: relative;
float: left;
width: 100%;
}

.pageintro h1 span {
display: block;
font-size: 22px;
color: #666;
font-weight: normal;
}

.pageintro h1 span.tag {
font-size: 16px;
font-style: italic;
color: #333;
font-weight: normal;
}

.pageintro p {
display: none;
padding-top: 20px;
font-size: 14px;
color: #666;
clear: left;
background: transparent url(img/mcd.gif) no-repeat 0 10px;
padding-left: 115px;
text-align: left;
}

/*
--------------------------------------------------------------------------------------- Quick Select Menu
*/

div.qselect {
float: left;
clear: left;
width: 100%;
margin-bottom: 40px;
}

div.qselect h2 {
font-size: 24px;
padding-bottom: 10px;
}

div.qselect h2 span {
font-size: 12px;
color: #8b8b8b;
padding-left: 10px;
font-weight: normal;
}

div.qselect ul {
margin: 0;
padding: 0;
list-style: none;
}

div.qselect ul li {
float: left;
width: 145px;
height: 70px;
margin-right: 10px;
background: url(img/quickbg.gif) no-repeat bottom;
position: relative;
text-align: center;
border-top: 1px solid #d5d5d5;
z-index: 9999;
}

div.qselect ul li.last {
margin-right: 0; 
}

div.qselect ul li h3 {
border-top: 10px solid #ccc;
font-size: 12px;
padding-top: 5px;
margin: 0 1px 1px 1px;
}

div.qselect ul li.cctv h3 { border-color: #ff0; }
div.qselect ul li.profit h3 { border-color: #008000; }
div.qselect ul li.backdoor h3 { border-color: #002060; }
div.qselect ul li.motion h3 { border-color: #c6d9f1; }
div.qselect ul li.drivethru h3 { border-color: #943634; }
div.qselect ul li.alarm h3 { border-color: #ff9966; }

div.qselect ul li span.moreinfo {
position: absolute;
bottom: -12px;
left: 0;
text-align: center;
width: 145px;
z-index: 9999;
}

div.qselect ul li span.moreinfo a {
font-size: 10px;
text-decoration: none;
display: block;
width: 145px;
}

div.qselect ul li span.moreinfo a:hover {
font-weight: bold;
}

/*
div.qselect ul li.cctv span.moreinfo a:hover { background: #ff0; }
div.qselect ul li.profit span.moreinfo a:hover { background: #008000; color: #fff; }
div.qselect ul li.backdoor span.moreinfo a:hover { background: #002060; }
div.qselect ul li.motion span.moreinfo a:hover { background: #c6d9f1; }
div.qselect ul li.drivethru span.moreinfo a:hover { background: #943634; }
div.qselect ul li.alarm span.moreinfo a:hover { background: #ff9966; } 
*/

span.class-descr {
display: block;
text-align: left;
position: absolute;
top: 20px;
left: -30px;
background: #39c;
width: 180px;
font-size: 14px;
padding: 10px;
border: 2px solid #39c;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
border: 5px solid #fff;
}

span.class-descr img.class-descr-arrow {
position: absolute;
top: -9px;
left: 93px;
}

div.qselect ul li select {
width: 135px;
position: absolute;
bottom: 5px;
left: 5px;
}

/*
--------------------------------------------------------------------------------------- CALENDAR AREA
*/
div.calendarwrap {
float: left;
clear: left;
width: 100%;
}

div.calendarwrap h2 {
font-size: 24px;
border-bottom: 1px solid #E5E5E5;
padding-bottom: 5px;
}

div.calendarwrap  div.sm-text {
color:#8B8B8B;
font-size:12px;
font-weight:normal;
padding: 10px 0 15px 0;
}

div.calendarwrap div.left,
div.calendarwrap div.right {
float: left;
}

div.calendarwrap div.left {
width: 775px;
}

div.calendarwrap div.right {
width: 145px;
}

div.calendarwrap div.right h2 {
font-size: 14px;
margin-bottom: 15px;
}

div.calendarwrap div.right div.pad {
padding-left: 10px;
}

div.calendarwrap ul li {
border: 1px solid #ccc;
margin-bottom: 10px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px; 
}

div.calendarwrap ul li h3 {
border-top: 10px solid #333;
padding: 5px 8px;
font-size: 12px;
color: #666;
}

div.calendarwrap ul li.cctv h3 { border-color: #ff0; }
div.calendarwrap ul li.profit h3 { border-color: #008000; }
div.calendarwrap ul li.backdoor h3 { border-color: #002060; }
div.calendarwrap ul li.motion h3 { border-color: #c6d9f1; }
div.calendarwrap ul li.drivethru h3 { border-color: #943634; }
div.calendarwrap ul li.alarm h3 { border-color: #ff9966; }

div.calendarwrap ul li ul li {
border: none;
}

div.calendarwrap ul li ul li a {
text-decoration: none;
border-bottom: 1px solid #f1f1f1;
}

div.calendarwrap ul {
list-style: none;
margin: 0;
padding: 0;
}

div.calendarwrap ul ul {
list-style: disc;
padding-left: 25px;
font-size: 12px;
color: #999;
}

/*
--------------------------------------------------------------------------------------- CALENDAR STRUCTURE
*/
div#calwrap {
	width: 100%;
	float: left;
	clear: left;
	}


div.monthlabel {
	width: 768px;
	clear: left;
	background: #E4F2F8;
	position: relative;
	padding: 5px 0;
	border: 1px solid #ccc;
	border-bottom: none;
	z-index: 0;
}

div.monthlabel h1 {
padding-left: 10px;
}

div.monthlabel h1 span {
font-size: 12px;
color: #666;
font-weight: normal;
position: relative;
top: -2px;
}

div.monthlabel p a {
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #333;
	background: #f1f1f1;
	border: 1px solid #666;
	text-decoration: none;
	padding: 2px 5px;
	-moz-border-radius: 3px;
	position: absolute;
	top: 10px;
}

div.monthlabel p a.prevmonth {
right: 46px;
}

div.monthlabel p a.nextmonth {
right: 10px;
}

div#calwrap div.day, 
div#calwrap div.daylabel {
	width: 108px;
	float: left;
	border: 1px solid #ccc;
	}
	
div#calwrap div.day {	
   height:100px;
   overflow: hidden;
}

div#calwrap div.daylabel {
	min-height:20px;
   	height:auto !important;
   	height:20px;	
	text-align: center;
	font-weight: bold;
	background: #f1f1f1;
}

p.num {
	border: 1px solid #ccc;
	float: left;
	margin-top: -1px;
	margin-left: -1px;
	font-weight: bold;
	padding: 5px;
	background: #f1f1f1;
}

div.calendarwrap div.day ul {
clear: left;
margin: 10px 10px 0 10px;
float: left;
}

div.calendarwrap div.day li {
border: none;
font-size: 11px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #f1f1f1;
float: none;
}

div.calendarwrap div.day li a {
text-decoration: none;
display: block;
border-top: 10px solid #ccc;
color: #333;
line-height: 100%;
padding: 5px;
float: none;
}

div.calendarwrap div.day li.cctv a { border-top-color:  #ff0; }
div.calendarwrap div.day li.profit a { border-top-color:  #008000; }
div.calendarwrap div.day li.backdoor a { border-top-color:  #002060; }
div.calendarwrap div.day li.motion a { border-top-color:  #c6d9f1; }
div.calendarwrap div.day li.drivethru a { border-top-color:  #943634; }
div.calendarwrap div.day li.alarm a { border-top-color:  #ff9966; }

div.today {
	background: #FEFEB4;
}
/*
--------------------------------------------------------------------------------------- FORM LAYOUT
*/
div.formtitle {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-bottom: 10px;
float: left;
width: 100%;
clear: left;
}

div.item {
float: left;
width: 467px;
clear: left;
padding: 5px 0;
position: relative;
z-index: 999;
}

div.item label {
width: 150px;
text-align: right;
float: left;
font-size: 14px;
color: #666;
padding: 5px 5px 0 0;
}

div.options {
width: 160px;
float: none;
}

div.options h4 {
font-size: 14px;
}

div.options label {
text-align: left;
float: none;
display: block;
}

div.options input {
border: none !important;
margin: 0 !important;
width: auto !important;
float: none !important;
}

div.optional label {
color: #c3c3c3;
}

span.suffix {
position: relative;
width: 300px;
}

span.suffix span {
position: absolute;
right: 5px;
top: 0px;
color: #c3c3c3;
}

div.item input {
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 300px;
padding: 3px;
font-size: 14px;
}

div.item input.date-pick {
width: 200px
}

div.optional input {
border: 1px solid #f1f1f1;
}

div.item input.name {
width: 145px;
}

div.item span.error {
display: block;
position: absolute;
right: -225px;
top: 5px;
width: 200px;
padding: 5px 10px;
background: #C6595F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
}

div.item span.error img.errorarrow {
position: absolute;
left: -10px;
top: 8px;
}

p.error {
padding: 10px;
background: #FEFEB4;
border: 1px solid #ccc;
font-weight: bold;
font-size: 14px;
margin-bottom: 20px;
}

div.submit {
clear: left;
float: left;
width: 100%;
border-top: 2px solid #ccc;
margin-top: 10px;
padding-top: 10px;
text-align: right;
}

div.submit input {
border: 2px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}

div.submit a {
color: #999;
text-decoration: none;
padding-right: 30px;
font-size: 11px;
}

div.submit a:hover {
color: #666;
}

div.col2 {
float: left;
width: 920px;
}

div.col2 div.left,
div.col2 div.right {
float: left;
}

div.col2 div.left {
width: 507px;
}

div.col2 div.left div.pad {
padding-left: 40px;
}

div.col2 div.right {
width: 366px;
}

div.col2 div.right div.pad {
padding-left: 60px;
}


div.registeringfor {
padding: 10px;
margin-top: 29px;
border: 1px solid #ccc;
background: #f1f1f1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

div.registeringfor h2 {
color: #666;
padding-bottom: 10px;
}

div.registeringfor h3 {
margin-bottom: .5em;
}

div.registeringfor p {
margin-bottom: 1em;
}

div.registeringfor ul {
margin: 0;
padding: 10px 0 10px 15px;
}

div.registeringfor ul li {
font-size: 14px;
}

.tip {
font-size: 11px;
color: #666;
clear: left;
padding-left: 155px;
}

/*
--------------------------------------------------------------------------------------- RECEIPT STYLES
*/
div.back {
text-align: center;
clear: left;
float: left;
width: 920px;
margin-top: 20px;
}

div.back a {
font-weight: bold;
color: #369;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

div.receipt {
float: left;
width: 920px;
clear: left;
}

div.receipthdr {
padding-bottom: 10px;
margin-bottom: 10px;
text-align: center;
}

div.receipthdr h2 {
font-size: 24px;
}


div.receipt div.left,
div.receipt div.right {
float: left;
width: 50%;
}

div.receipt div.left div.applicantinfo,
div.receipt div.right div.applicantschedule {
width: 70%;
margin: 0 auto;
background: #fff;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px;
height: 250px;
text-align: center;
}

div.receipt div.left div.applicantinfo p {
color: #666;
padding-bottom: 25px;
font-size: 14px;
}

div.receipt div.left div.applicantinfo span {
display: block;
}

div.receipt div.left div.applicantinfo span.name {
color: #000;
font-size: 18px;
padding-bottom: 5px;
}

div.receipt div.left div.applicantinfo span.businessname {
color: #333;
font-weight: bold;
font-size: 22px;
}

div.receipt div.left div.applicantinfo span.address {
color: #666;
padding-bottom: 15px;
font-size: 16px;
}

div.receipt div.left div.applicantinfo span.email,
div.receipt div.left div.applicantinfo span.phone {
font-size: 16px;
padding-bottom: 10px;
color: #666;
}

div.applicantschedule {
text-align: center;
}

div.applicantschedule div.ty-text {
font-size: 12px;
color: #666;
padding-top: 15px;
}

div.applicantschedule h3 {
color: #666;
font-weight: normal;
font-size: 14px;
}

div.applicantschedule h2 {
font-size: 24px;
padding-top: 10px;
}

div.applicantschedule span {
display: block;
color: #999;
}

div.applicantschedule span.date {
font-size: 20px;
color: #369;
font-weight: bold;
}

/*
------------------------------------------------- Footer
*/

#ftr {
clear: left;
float: left;
width: 100%;
border-top: 1px solid #e5e5e5;
padding-top: 15px;
margin-top: 15px;
padding-bottom: 5px;
}

#ftr p { 
font-size: 11px;
color: #999;
} 

#ftr p a {
color: #666;
}

div.ftrcap {
clear: left;
height: 20px;
width: 979px;
margin: 0 auto;
background: transparent url(../img/wide-ftr.gif) no-repeat top left;
}