@import url('reset.css');

html {/*overflow:hidden;*/}
body {background: url(../images/car.jpg) repeat #252525; background-attachment:fixed; margin:0;}


#content-container {width:960px; margin:0 0 0 0; z-index:999;}

/**------------ navigation --------------**/
#logo-and-navigation {background:url(../images/tile.png) repeat-x; width:100%; height:78px; position:fixed; top:0; left:0; z-index:999; margin:0; padding:20px 20px 0 20px;}

#logo {float:left;}

#navigation {float:right; margin:0 20px 0 0;}
#navigation ul li {display:inline; margin:0 30px 0 0;}

a#icon-home {background:url(../images/icon-home.png) no-repeat; background-position: 0px 0px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}
a#icon-home:hover {background:url(../images/icon-home.png) no-repeat 0px -31px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}

a#icon-photos-videos {background:url(../images/icon-photos-videos.png) no-repeat; background-position: 0px 0px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}
a#icon-photos-videos:hover {background:url(../images/icon-photos-videos.png) no-repeat; background-position: 0px -31px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}

a#icon-faqs {background:url(../images/icon-faqs.png) no-repeat; background-position: 0px 0px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}
a#icon-faqs:hover {background:url(../images/icon-faqs.png) no-repeat; background-position: 0px -31px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}

a#icon-calendar {background:url(../images/icon-calendar.png) no-repeat; background-position: 0px 0px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}
a#icon-calendar:hover {background:url(../images/icon-calendar.png) no-repeat; background-position: 0px -31px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}

a#icon-map-directions {background:url(../images/icon-map-directions.png) no-repeat; background-position: 0px 0px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}
a#icon-map-directions:hover {background:url(../images/icon-map-directions.png) no-repeat; background-position: 0px -31px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}

a#icon-contact {background:url(../images/icon-contact.png) no-repeat; background-position: 0px 0px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}
a#icon-contact:hover {background:url(../images/icon-contact.png) no-repeat; background-position: 0px -31px; width:27px; height:29px; display:inline-block; text-indent:-10000px;}


/**------------ for home slide --------------**/
#big-tagline {margin:0 0 10px 0; float:left; clear:both;}
#join-us {margin:0 0 20px 0; float:left; clear:both;}

#home-promo {width:382px; height:382px; float:left;}
#home-small-squares {float:left: clear:right;}

#top-left {float:left; margin:0 0 16px 16px;}
#top-right {float:left; clear:right; margin:0 0 16px 16px;}
#bottom-left {float:left; margin-left:20px;}
#bottom-right {float:left; clear:right; margin-left:20px;}



/**------------ for all slides --------------**/
#title-for-slide {margin:0 0 20px -22px; float:left; clear:both;}
#link-dark {margin:40px 0 0 -25px; float:left; clear:both;}
#link-light {margin:5px 0 0 -25px; float:left; clear:both;}

/**------------ main content --------------**/

#main-content {width:920px; height:400px; background:none; float:left; clear:both; margin:0 0 0 22px;}


/**------------ home --------------**/
#home {padding-top:115px; margin:0 0 0 0;}

/**------------ photos videos --------------**/
#photos-videos {margin:900px 0 1000px 0 !important; padding-top:110px; /*background:url(../images/colorful-lines-bookings.png) no-repeat;*/}
#photos-videos h2 {margin:15px 20px 0 20px; color:#FFF; font:14pt "Lucida Grande", Arial, sans-serif; letter-spacing:-1px; font-weight:normal; border-bottom:1px solid #545454; padding-bottom:8px;}

#photos-top-first {float:left; margin:0 0 16px 0;}
#photos-top {float:left; margin:0 0 16px 16px;}
#photos-bottom-first {float:left; margin:0;}
#photos-bottom {float:left; margin:0 0 0 16px;}

/**------------ faqs --------------**/
#faqs {margin:900px 0 1000px 0 !important; padding-top:115px; /*background:url(../images/colorful-lines-clients.png) no-repeat;*/}

#accordion {width:850px;}
.accordion {width:850px; font:16px "Lucida Grande", Arial, sans-serif; color:#033;}
.accordion dt {width:850px; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:#fff; color:#333;}
.accordion dt:hover {background:#333; color:#fff;}
.accordion dd {overflow:hidden; background:#333; color:#fff;}
.accordion span {display:block; width:810px; padding:20px;}
.accordion span p {font:14px "Lucida Grande", Arial, sans-serif; line-height:24px !important;}
.accordion span p a {border-bottom:1px dashed #67dd48; text-decoration:none; color:#fff;}
.accordion span p a:hover {border-bottom:1px solid #67dd48; text-decoration:none; color:#fff; background:#525252;}


/**------------ calendar --------------**/
#calendar {margin:900px 0 1000px 0 !important; padding-top:115px; /*background:url(../images/colorful-lines-gear.png) no-repeat;*/}
#google-calendar {width:667px; height:385px; float:left; background:#fff; padding:15px 0 0 15px;}
#event-highlights {width:220px; height:400px; background:#fff; float:right;}
#event-highlights h2 {font:16px "Lucida Grande", Arial, sans-serif; font-weight:bold; color:#fff; background:#444; padding:13px 25px; display:inline-block;}
#event-highlights h3 {font:14px "Lucida Grande", Arial, sans-serif; font-weight:bold; color:#333;}
#event-highlights .row {width:auto; height:auto; padding:22px 20px 0 26px; float:left;}
#event-highlights p {font:14px "Lucida Grande", Arial, sans-serif; font-weight:normal; color:#333; float:left; line-height:18px; padding-top:5px;}
#event-highlights a {border-bottom:1px dashed #999; text-decoration:none; color:#252525;}
#event-highlights a:hover {border-bottom:1px solid #666; text-decoration:none; color:#252525; background:#eaeaea;}

/**------------ map directions --------------**/
#map-directions {margin:900px 0 1000px 0 !important; padding-top:115px; /*background:url(../images/colorful-lines-services.png) no-repeat;*/}
#google-map {width:682px; height:400px; float:left;}
#map-key {width:220px; height:400px; background:#fff; float:right;}
#map-key h2 {font:16px "Lucida Grande", Arial, sans-serif; font-weight:bold; color:#fff; background:#444; padding:13px 25px; display:inline-block;}
#map-key .row {width:auto: height:32px; padding:22px 20px 0 30px; float:left;}
#map-key img {width:32px; height:32px; float:left; }
#map-key p {font:14px "Lucida Grande", Arial, sans-serif; font-weight:normal; color:#333; float:left; padding:8px 0 0 10px;}

/**------------ contact --------------**/
#contact {margin:900px 0 480px 0 !important; padding-top:115px; /*background:url(../images/colorful-lines-photos.png) no-repeat;*/}
#contact a {border-bottom:1px dashed #999; text-decoration:none; color:#252525;}
#contact a:hover {border-bottom:1px solid #666; text-decoration:none; color:#252525; background:#eaeaea;}

#about-us {width:410px; height:400px; float:left; background:#fff;}
#about-us h2 {font:16px "Lucida Grande", Arial, sans-serif; font-weight:bold; color:#fff; background:#444; padding:13px 25px; display:inline-block; float:left; clear:both;}
#about-us .row {width:auto: height:auto; padding:22px 20px 0 30px; float:left; clear:left;}
#about-us p {font:14px "Lucida Grande", Arial, sans-serif; font-weight:normal; color:#333; float:left; padding:0; line-height:24px;}
#about-us p.second {padding-top:8px;}

#connect {width:200px; height:360px; float:left; background:#fff; margin-left:18px;}
#connect h2 {font:16px "Lucida Grande", Arial, sans-serif; font-weight:bold; color:#fff; background:#444; padding:13px 25px; display:inline-block; float:left; clear:both;}
#connect .row {width:auto: height:32px; padding:22px 20px 0 30px; float:left; clear:left;}
#connect img {width:32px; height:32px; float:left; }
#connect p {font:14px "Lucida Grande", Arial, sans-serif; font-weight:normal; color:#333; float:left; padding:8px 0 0 10px;}
#connect p#other {font:14px "Lucida Grande", Arial, sans-serif; font-weight:normal; color:#333; float:left; padding:13px 0 0 0;}

#contact-info {width:260px; height:190px; float:left; background:#fff; margin:0 0 0 18px;}
#contact-info h2 {font:16px "Lucida Grande", Arial, sans-serif; font-weight:bold; color:#fff; background:#444; padding:13px 25px; display:inline-block; float:left; clear:both;}
#contact-info .row {width:auto: height:32px; padding:22px 20px 0 30px; float:left; clear:left;}
#contact-info img {width:32px; height:32px; float:left; }
#contact-info p {font:14px "Lucida Grande", Arial, sans-serif; font-weight:normal; color:#333; float:left; padding:8px 0 0 10px;}


/**------------ footer --------------**/
#footer {padding:115px 0 500px 0; width:920px; font:12px "Lucida Grande", Arial, sans-serif; color:#fff;}
#copyright {float:left;}
#goodworksmedia {float:right;}

/**------------ meerkat --------------**/
#meerkat {}
#meerkat .on-off {padding:15px 0 0 15px;}
#meerkat .meerkat-close {padding:4px 4px 0 0;}
#meerkat-left {float:left; clear:left;}
#meerkat-right {float:right;}
#meerkat-sentence {float:left; clear:left; margin:8px 0 0 25px; font-family:Helvetica, Arial, sans-serif; color:#fff; font-size:14px; letter-spacing:0.25px;}
#meerkat-sentence strong {letter-spacing:-0.25px; margin-right:5px; text-shadow: 1px solid #000;}
#meerkat-sentence a {color:#fff; text-decoration:underline;}
#meerkat-sentence a:hover {color:#000; text-decoration:underline;}


/**------------ sliding boxes --------------**/
	
	/**------------ big promo on home --------------**/
	#home-promo h2 {margin:20px 20px 0 20px; color:#FFF; font:18pt "Lucida Grande", Arial, sans-serif; letter-spacing:-1px; font-weight:bold; border-bottom:1px solid #545454; padding-bottom:8px;}
	.boxgrid { width: 382px; height: 383px; margin:0; float:left; background:#242424; overflow: hidden; position: relative;}
	.boxgrid img {position: absolute; top: 0; left: 0; border: 0;}
	.boxgrid p {padding: 12px 30px 0 20px; color:#d6d6d6; font-weight:bold; font:14px "Lucida Grande", Arial, sans-serif; line-height:24px;}
	.boxgrid p a {background:#c917a5; color:#fff; text-decoration:none; padding:6px 9px; font-style:italic; font-weight:normal; font-size:14px;}
	.boxgrid p a:hover {background:#de2bba; color:#fff; text-decoration:none; padding:6px 9px; font-style:italic; font-weight:normal; font-size:14px;}
	
	/**------------ small boxes on home and photo+video --------------**/
	#home-small-squares h2 {margin:15px 20px 0 20px; color:#FFF; font:14pt "Lucida Grande", Arial, sans-serif; letter-spacing:-1px; font-weight:normal; border-bottom:1px solid #545454; padding-bottom:8px;}
	.boxgridsmall { width: 183px; height: 183px; margin:0; float:left; background:#242424; overflow: hidden; position: relative;}
	.boxgridsmall img {position: absolute; top: 0; left: 0; border: 0;}
	.boxgridsmall p {padding: 12px 30px 0 20px; color:#d6d6d6; font-weight:bold; font:14px "Lucida Grande", Arial, sans-serif; line-height:24px;}
	.boxgridsmall p a {background:#c917a5; color:#fff; text-decoration:none; padding:6px 9px; font-style:italic; font-weight:normal; font-size:12px;}
	.boxgridsmall p a:hover {background:#de2bba; color:#fff; text-decoration:none; padding:6px 9px; font-style:italic; font-weight:normal; font-size:12px;}