img, div, a
{
	behavior: url(js/iepngfix.htc);
	outline: none;
}

body
{
	behavior: url(js/csshover.htc);
	background: url(../images/bg-main.gif) repeat-x;
	padding: 4px 0 0 0;
	font-family: Helvetica, Arial;
	color: #6f6f6f;
	font-size: 12px;
}

.right
{
	float: right;
}

.no-display
{
	display: none;
}

.top-space
{
	margin-top: 60px;
}

#menu
{
	margin: 34px 0 0 32px;
	padding: 0;
	list-style: none;
	height: 28px;
}

#menu li
{
	width: auto;
	margin: 0;
	padding: 0;
	float: left;
}

#menu li a
{
	backgorund-position: 0 0;
	height: 28px;
	display: block;
	margin-right: 19px;
}

#menu li a.last
{
	margin-right: 0px;
}

#menu li a span
{
	display: none;
}

#menu li a:hover, #menu li a.selected
{
	background-position: 0 -28px;
}

#home
{
	background: url(../images/menu-home.gif);
	width: 54px;
}

#services
{
	background: url(../images/menu-service.gif);
	width: 71px;
}

#praise
{
	background: url(../images/menu-praise.gif);
	width: 55px;
}

#blog
{
	background: url(../images/menu-blog.gif);
	width: 49px;
}

#examples
{
	background: url(../images/menu-examples.gif);
	width: 77px;
}

#contact
{
	background: url(../images/menu-contact.gif);
	width: 71px;
}

/* main gallery */

div.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 950px;
    height: 310px;
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
div.scrollable div.items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
div.scrollable div.items div.item {
    float:left;
}

div.scrollable div.items div.item .img {
	display: block;
    height: 271px;
    width: 950px;
    overflow: hidden;
    float: none;
	z-index: 1;
}

div.scrollable div.items div.item .img .header-img {
	display: block;
    height: 271px;
    width: 950px;
    overflow: hidden;
    float: none;
	z-index: 1;
}

div.scrollable div.items div.item .description {
    height: 31px;
    width: 940px;
    background: url(../images/bg-top-banner.gif) repeat-x;    color: #fff;
    padding: 8px 0 0 10px;
    font-size: 16px;
}

/* you may want to setup some decorations to active the item */
div.items div.active {
    border:1px inset #ccc;
    background-color:#fff;
}

.prevPage
{
	background: url(../images/icon-arrow-left.png) no-repeat 10px 130px;
	width: 300px;
	height: 271px;
	display: block;
	z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;

}

.nextPage
{
	background: url(../images/icon-arrow-right.png) no-repeat 280px 130px;
	width: 300px;
	height: 271px;
	display: block;
	z-index: 10;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;

}

.disabled
{
	display: none;
}
/*
.navi
{
	position: absolute;
	bottom: 10px;
	right: 13px;
}

.navi a
{
	display: block;
	float: left;
	background: url(../images/icon-radio.gif) no-repeat;
	width: 15px;
	height: 15px;
	cursor: pointer;
	margin: 0 5px 0 0;
}

.navi a.active
{
	background: url(../images/icon-radio-sel.gif) no-repeat;
}
*/


.navi
{
	list-style: none;
	margin: 0;
	padding: 0 0 0 0px;
	position: absolute;
	bottom: 5px;
	right: 13px;
}


ul.navi li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 0 5px 0 !important;
	list-style-image: none !important;
}

.navi a
{
	display: block;
	float: left;
	text-align: center;
	padding: 1px 4px;
	cursor: pointer;
	margin: 0 5px 0 0;
	background: #fff;
	color: #15638B !important;
	width: 11px;
}

.navi li.active a
{
	background: #1c82b5;
	color: #fff !important;
}


.subheader
{
	overflow: hidden;
	height: 231px;
}

/* Headers */

h2.header
{
	margin: 26px 0 12px 8px;
	height: 16px;
}

h2.header-title
{
	margin: 20px 0 0px 0px;
	padding: 8px 30px 0;
	height: 47px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	width: auto;
	float: left;
	background: url(../images/bg-header.gif) no-repeat center center #1c83b7;
}

div.header-title-box
{
	float: left;
	padding-right: 0px;
	background: #fff;
}

h2.header-title2
{
	margin: 20px 0 0px 0px;
	padding: 4px 10px 0;
	height: 45px;
	color: #cdcdcd;
	text-transform: uppercase;
	width: auto;
	border-bottom: 1px solid #dedede;
	font-size: 28px;
}

h2.header span
{
	display: none;
}

h3.header span
{
	display: none;
}

h2#about-us
{
	width: 102px;
	background: url(../images/h-about-us.gif) no-repeat;
}

h2#our-services
{
	width: 145px;
	background: url(../images/h-our-services.gif) no-repeat;
}

h2#our-services-big
{
	width: 310px;
	background: url(../images/h-our-services-big.gif) no-repeat;
	height: 50px;
	margin: 20px 0 0px 0px;
}

h2#praise-big
{
	width: 310px;
	background: url(../images/h-praise-big.gif) no-repeat;
	height: 50px;
	margin: 20px 0 0px 0px;
}

h2#about-us-big
{
	width: 310px;
	background: url(../images/h-about-us-big.gif) no-repeat;
	height: 50px;
	margin: 20px 0 0px 0px;
}

h2#faq-big
{
	width: 310px;
	background: url(../images/h-faq-big.gif) no-repeat;
	height: 50px;
	margin: 20px 0 0px 0px;
}

h2#contact-big
{
	width: 310px;
	background: url(../images/h-contact-big.gif) no-repeat;
	height: 50px;
	margin: 20px 0 0px 0px;
}

h2#examples
{
	width: 107px;
	background: url(../images/h-examples.gif) no-repeat;
}

h2#examples-big
{
	width: 310px;
	background: url(../images/h-examples-big.gif) no-repeat;
	height: 50px;
	margin: 20px 0 0px 0px;
}

h2#go-to
{
	width: 68px;
	background: url(../images/h-go-to.gif) no-repeat;
	height: 17px;
	margin: 31px 0 12px 15px;
}

h2#get-in-touch
{
	width: 135px;
	background: url(../images/h-get-in-touch.gif) no-repeat;
	height: 17px;
	margin: 31px 0 12px 15px;
}

h2#send-us
{
	width: 242px;
	background: url(../images/h-send-us.gif) no-repeat;
	height: 10px;
	margin: 0px 0 21px 15px;
}

h2#h-footer
{
	width: 515px;
	background: url(../images/h-footer.gif) no-repeat;
	height: 11px;
	margin: 182px 0 0px 15px;
}

h2#h-footer2
{
	width: 514px;
	background: url(../images/h-footer2.gif) no-repeat;
	height: 11px;
	margin: 23px 0 0px 15px;
}

h3#realtor
{
	width: 86px;
	background: url(../images/h-realtor.gif) no-repeat;
	height: 13px;
	margin: 25px 0 10px;
}

h3#panoramas
{
	width: 124px;
	background: url(../images/h-panoramas.gif) no-repeat;
	height: 13px;
	margin: 25px 0 10px;
}

h2#header-back-to-examples
{
	width: 283px;
	background: url(../images/h-back-to-examples.gif) no-repeat;
	height: 55px;
	margin: 20px 0 10px;
}

h2#header-back-to-examples:hover
{
	background-position: 0px -55px;
}

.block-paragraph
{
	margin: 0 0 0 8px;
	line-height: 21px;
}

.line
{
	border-bottom: 1px solid #efeeee;
	width: 100%;
	margin: 14px 0 0 0;
}

.more
{
	display: block;
	float: right;
	background: url(../images/h-read-more.gif) no-repeat 0 0;
	width: 81px;
	height: 27px;
	margin: 0px 0px 0 0;
}

.more:hover, #see-examples:hover, #see-our-services:hover
{
	background-position: 0 -27px;
}

.more span
{
	display: none;
}

#see-examples
{
	background: url(../images/h-see-examples.gif) no-repeat 0 0;
	width: 93px;
}

#see-our-services
{
	background: url(../images/h-see-our-services.gif) no-repeat 0 0;
	width: 113px;
}

#grey
{
	background: url(../images/h-read-more-grey.gif) no-repeat;
	margin: 9px 0 0 0;
}


/* References */

div#testimonials-box
{
    background: url(../images/bg-middle-banner.gif) repeat-x #e5e4e4;
    margin: 13px 0 0 0;
    width: 100%;
}

div.scrollable2 {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 950px;
    height: 152px;
    background: url(../images/bg-middle-banner.gif) repeat-x #e5e4e4;
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
div.scrollable2 div.items2 {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
div.scrollable2 div.items2 div.item2 {
    float:left;
}

div.scrollable2 div.items2 div.item2 .text {
    height: 114px;
    width: 595px;
    font-size: 16px;
    float: left;
    color: #7f7f7f;
    text-align: right;
    margin: 27px 7px 0 20px;
}

div.scrollable2 div.items2 div.item2 .text p {
    margin: 0;
}

div.scrollable2 div.items2 div.item2 .author p {
    margin: 0;
}

div.scrollable2 div.items2 div.item2 .author {
    height: 114px;
    width: 274px;
    font-size: 16px;
    float: left;
    margin: 27px 30px 0 24px;
}

div.scrollable2 div.items2 div.item2 .author .name {
    font-size: 19px;
    color: #7f7f7f;
}

div.scrollable2 div.items2 div.item2 .author .company {
    font-size: 12px;
    color: #7f7f7f;
}

div.scrollable2 div.items2 div.item2 .author .address {
    font-size: 12px;
    color: #176d99;
    margin: 5px 0 0 0;
}

/* you may want to setup some decorations to active the item */
div.items2 div.active {
    border:1px inset #ccc;
    background-color:#fff;
}

.prevPage2
{
	background: url(../images/icon-arrow-left.png) no-repeat 10px 75px;
	width: 100px;
	height: 152px;
	display: block;
	z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;

}

.nextPage2
{
	background: url(../images/icon-arrow-right.png) no-repeat 80px 75px;
	width: 100px;
	height: 152px;
	display: block;
	z-index: 10;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;

}

/* footer */

#bottom-box
{
	width: 100%;
	background: url(../images/bg-footer.gif) repeat-x #15638b;
	height: 300px;
	padding: 0 0 35px 0;
}

#bottom-box2
{
	width: 100%;
	background: url(../images/bg-footer-short.gif) repeat-x #15638b;
	height: 51px;
	padding: 0 0 0px 0;
}

#bottom
{
	height: 300px;
	background: url(../images/bg-footer.gif) repeat-x #15638b;
}

#bot-menu
{
	margin: 0px 0 0px 15px;
	padding: 0;
	list-style: none;
	height: 10px;
}

#bot-menu li
{
	width: auto;
	margin: 0;
	padding: 0;
	float: left;
}

#bot-menu li a
{
	backgorund-position: 0 0;
	height: 10px;
	display: block;
	margin-right: 23px;
}

#bot-menu li a.last
{
	margin-right: 0px;
}

#bot-menu li a span
{
	color: #fff;
	text-transform: uppercase;
	font-size: 9px;
}

#bot-home
{
	background: url(../images/bot-menu-home.gif) no-repeat;
	width: 32px;
}

#bot-about-us
{
	background: url(../images/bot-menu-about-us.gif) no-repeat;
	width: 53px;
}

#bot-services
{
	background: url(../images/bot-menu-services.gif) no-repeat;
	width: 49px;
}

#bot-examples
{
	background: url(../images/bot-menu-examples.gif) no-repeat;
	width: 55px;
}

#bot-testimonials
{
	background: url(../images/bot-menu-testimonials.gif) no-repeat;
	width: 75px;
}

#bot-contact
{
	background: url(../images/bot-menu-contact.gif) no-repeat;
	width: 49px;
}

#bot-faq
{
	background: url(../images/bot-menu-faq.gif) no-repeat;
	width: 22px;
}

/* Contact form */

.contact-label
{
	height: 12px;
	width: 73px;
	float: left;
	margin: 5px 10px 0 0px;
	display: block;
	padding: 0;
}

#label-name
{
	background: url(../images/form-your-name.gif) no-repeat right;
}

#label-phone
{
	background: url(../images/form-your-phone.gif) no-repeat right;
}

#label-email
{
	background: url(../images/form-your-email.gif) no-repeat right;
}

#label-message
{
	background: url(../images/form-message.gif) no-repeat right;
}

#contact-send
{
	float: right;
	margin: 0 5px 0 0;
	background: url(../images/button-send.gif) no-repeat;
	width: 44px;
	height: 21px;
	border: 0;
}

.contact-input
{
	width: 150px;
	border: 1px solid #70acd0;
	height: 18px;
	background: url(../images/bg-input.gif) repeat-x;
	float: left;
	margin: 0 0 5px 0px !important;
}

*html #contact-form
{
	float: left;
}

.contact-textarea
{
	width: 210px;
	border: 1px solid #70acd0;
	height: 79px;
	background: url(../images/bg-textarea.gif) repeat-x #fff;
	float: left;
	overflow: hidden;
	margin: 0 0 5px 0 !important;
}

/* Big Contact form */

.contact-label-big
{
	height: 22px;
	width: 118px;
	float: left;
	margin: 2px 15px 0 0;
	display: block;
	padding: 0;
	font-weight: normal;
	text-align: right;
}

#contact-send-big
{
	float: right;
	margin: 0 64px 0 0;
	background: url(../images/button-send-big.gif) no-repeat;
	width: 57px;
	height: 25px;
	border: 0;
}

.contact-input-big
{
	width: 238px;
	border: 1px solid #dedede !important;
	height: 24px;
	background: url(../images/bg-input-big.gif) repeat-x;
	float: left;
	margin: 0 0 10px 0px !important;
}

*html #contact-form-big
{
	float: left;
	width: 598px;
}

.contact-textarea-big
{
	width: 389px;
	border: 1px solid #dedede;
	height: 155px;
	background: url(../images/bg-textarea-big.gif) repeat-x #fff;
	float: left;
	overflow: hidden;
	margin: 0 0 10px 0 !important;
}

.clear
{
	clear: both;
}

/* tooltip */

#tooltip
{
	position: absolute;
	z-index: 3000;
	background: url(../images/tooltip-bg.png) no-repeat;
	width: 80px;
	height: 28px;
	padding: 10px 0 0 0;
}

#tooltip h3
{
	color: #fff !important;
	font-size: 12px;
	font-family: Helvetica, Arial;
	width: 100%;
	text-align: center;
}

/* services tabs */

/* root element for tabs  */
ul.tabs
{
	list-style: none;
	margin: 20px 0 0 14px !important;
	padding: 0;
	height: 55px;
}

/* single tab */
ul.tabs li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a, ul.tabs p
{
	display: block;
	height: 55px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: relative;
	outline: none;
	cursor: pointer;
}

ul.tabs a span, ul.tabs p span
{
	display: none;
}

ul.tabs li ul
{
	position: absolute;
	display: none;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	border: 1px solid #dedede;
	z-index: 100;
}

ul.tabs li:hover ul
{
	position: absolute;
	display: block;
}

ul.tabs li:hover p
{
	background-position: 0px -55px !important;
}

ul.tabs li ul li
{
	display: block;
	width: 106px;
	float: none;
	background: #fff;
}

ul.tabs li ul li a
{
	text-align: left !important;
	height: 19px;
	width: 91px;
	padding: 5px 5px 5px 10px;
	background: #fff;
	border-bottom: 1px solid #dedede;
}

ul.tabs li ul li a.last-item
{
	border-bottom: 0px solid #dedede;
}

ul.tabs li ul li a:hover
{
	background: #1979a9;
	color: #fff;
}

#tab-photo-services
{
	background: url(../images/tab-photo-services.gif) no-repeat 0 0;
	width: 203px;
	margin-right: 13px;
}

#tab-video-services
{
	background: url(../images/tab-video-services.gif) no-repeat 0 0;
	width: 197px;
	margin-right: 13px;
}

#tab-print-services
{
	background: url(../images/tab-print-services.gif) no-repeat 0 0;
	width: 190px;
}

#tab-photo
{
	background: url(../images/tab-photo.gif) no-repeat 0 0;
	width: 103px;
	margin-right: 3px;
}

#tab-video
{
	background: url(../images/tab-video.gif) no-repeat 0 0;
	width: 96px;
}

#tab-photo-gallery
{
	background: url(../images/tab-photo-gallery.gif) no-repeat 0 0;
	width: 120px;
	margin-right: 3px;
}

#tab-panos
{
	background: url(../images/tab-panos.gif) no-repeat 0 0;
	width: 106px;
	margin-right: 3px;
}

#tab-back
{
	background: url(../images/tab-back.gif) no-repeat 0 0;
	width: 93px;
	height: 55px;
	display: block;
	margin: 20px 0 0 0;
}

#tab-back:hover
{
	background-position: 0 -55px;
}

#tab-back span
{
	display: none;
}

ul.tabs a:active {
	outline: none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover, ul.tabs p:hover
{
	background-position: 0 -55px !important;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a, ul.tabs p.current, ul.tabs p.current:hover
{
	background-position: 0px -55px !important;
	cursor: default !important;
	background-color: #1979a9;
	color: #fff;
}

/* initially all panes are hidden */
div.panes div.pane
{
	display: none;
}

.panes
{
	margin: 26px 0 0 0;
}

/* services subpage */

.services-item
{
	border-bottom: 0px solid #dedede;
	width: 939px;
	line-height: 22px;
	font-size: 12px;
}

.last-item
{
	margin: 0 0 57px 0;

}

.first-item
{
	border-top: 0px solid #dedede !important;
}

.services-left
{
	border-top: 1px solid #dedede;
	padding: 17px 0 0px 10px;
	font-weight: bold;
}

.services-left span
{
	color: #c0c0c0;
}

.services-right
{
	border-top: 1px solid #dedede;
	padding: 17px 0 23px 10px;
}

.services-right .more
{
	float: left;
	margin: 16px 0 0 -10px;
}

/* praise subpage */

#praise-blank
{
	border-bottom: 1px solid #dedede;
	width: 631px;
	height: 50px;
	margin: 0 0 0 9px;
	margin: 19px 0 0px 0px;
}

.praise-left
{
	border-top: 1px solid #dedede;
	line-height: 22px;
	padding: 20px 0 35px 12px;
}

.praise-left span
{
	color: #c0c0c0;
}

.praise-right
{
	padding: 20px 16px 35px 16px;
	border-top: 1px solid #dedede;
	line-height: 22px;
}

.praise-left.item-first, .praise-right.item-first
{
	border: 0 !important;
}

.praise-left.item-last, .praise-right.item-last
{
	margin-bottom: 20px;
}

/* about us subpage */

#about-blank
{
	border-bottom: 1px solid #dedede;
	width: 631px;
	height: 50px;
	margin: 0 0 0 9px;
	margin: 19px 0 0px 0px;
}

.about-left
{
	border-top: 1px solid #dedede;
	line-height: 22px;
	padding: 20px 0 35px 12px;
	font-size: 14px;
	color: #116189;
	font-style: oblique;
}

.about-left span
{
	color: #c0c0c0;
}

.about-right
{
	padding: 20px 16px 35px 16px;
	border-top: 1px solid #dedede;
	line-height: 22px;
}

.about-left.item-first, .about-right.item-first
{
	border: 0 !important;
}

.about-left.item-last, .about-right.item-last
{
	margin-bottom: 60px;
}

/* faq subpage */

#faq-blank
{
	border-bottom: 1px solid #dedede;
	width: 631px;
	height: 50px;
	margin: 0 0 0 9px;
	margin: 19px 0 0px 0px;
}

.faq-left
{
	border-top: 1px solid #dedede;
	line-height: 22px;
	padding: 20px 0 35px 12px;
	font-weight: bold;
}

.faq-left span
{
	color: #c0c0c0;
}

.faq-right
{
	padding: 20px 16px 35px 16px;
	border-top: 1px solid #dedede;
	line-height: 22px;
}

.faq-left.item-first, .faq-right.item-first
{
	border: 0 !important;
}

.faq-left.item-last, .faq-right.item-last
{
	margin-bottom: 60px;
}

/* contact subpage */

#contact-blank
{
	border-bottom: 1px solid #dedede;
	width: 631px;
	height: 50px;
	margin: 0 0 0 9px;
	margin: 19px 0 0px 0px;
}

.contact-left
{
	border-top: 1px solid #dedede;
	line-height: 22px;
	padding: 20px 0 35px 12px;
}

.contact-left h3
{
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 30px 0;
	color: #6f6f6f;
	font-size: 14px;
}

.contact-left span
{
	color: #c0c0c0;
}

.contact-right
{
	padding: 20px 16px 35px 16px;
	border-top: 1px solid #dedede;
	line-height: 22px;
}

.contact-right h3
{
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 23px 134px;
	color: #6f6f6f;
	font-size: 14px;
}

.contact-left.item-first, .contact-right.item-first
{
	border: 0 !important;
}

.contact-left.item-last, .contact-right.item-last
{
	margin-bottom: 60px;
}

#social-icons
{
	margin: -15px 0 0 0;
}

#social-icons img
{
	margin: 0 8px 0 0;
}

/* examples page */

#examples-blank
{
	width: 425px;
	height: 49px;
	border-bottom: 1px solid #dedede;
	float: left;
	margin: 20px 3px 0 0;
}

.example-thumb
{
	width: 298px;
	height: 93px;
	overflow: hidden;
	margin: 0 0 0 6px;
	position: relative;
}

.example-thumb-arrows
{
	background: url(../images/thumb-bg.png) no-repeat;
	width: 290px;
	height: 6px;
	top: 4px;
	left: 4px;
	position: absolute;
	z-index: 10;
}

.example-title
{
	background: url(../images/arrow-bot-right.png) no-repeat 288px 25px #dadada;
	padding: 9px 0 0 12px;
	width: 286px;
	height: 26px;
	color: #fff !important;
	font-weight: bold;
	margin: 0 0 22px 6px;
	font-size: 12px;
	display: block;
}

.example-title.last-item
{
	margin: 0 0 44px 6px;
}

/* example page - internal example, external example */

#example-blank
{
	width: 59px;
	height: 49px;
	border-bottom: 1px solid #dedede;
	float: left;
	margin: 20px 3px 0 0;
}

.grey-line
{
	background: url(../images/bg-grey-line.gif) repeat-x;
	height: 55px;
	width: auto;
	margin: 20px 0px 0 0px;
}

#example-content, #v-example-content
{
	margin: 0px 0 40px 15px;
	font-family: Helvetica, Arial;
	line-height: 22px;
}

.realtor
{
	text-align: center;
	height: 326px;
	margin: 0 0 10px 0;
	width: 100%;
}

.panorama-link
{
	line-height: 14px;
	margin: 8px 0;
}

#flash-panorama
{
	margin: 30px 0 40px;
}

.flash-panorama
{
	margin: 0px 0 10px;
	height: 366px;
	background: url(../images/loading.gif) no-repeat center center;
}

#example-map, #v-example-map, #p-example-map, .p-example-map
{
	width: 70px;
	height: 20px;
	margin: 0 10px 0px 0;
	background: url(../images/button-map.gif) 0 0;
	float: left;
}

#example-contact, #v-example-contact, #p-example-contact, .p-example-contact
{
	width: 70px;
	height: 20px;
	margin: 0;
	background: url(../images/button-contact.gif) 0 0;
	float: left;
}

#example-map:hover, #example-contact:hover, #example-map.selected, #example-contact.selected, #v-example-map:hover, #v-example-contact:hover, #v-example-map.selected, #v-example-contact.selected, .p-example-map.selected, .p-example-map:hover, .p-example-contact.selected, .p-example-contact:hover
{
	background-position: 0 -20px !important;
}

/* root element for tabs  */
ul.etabs
{
	list-style: none;
	margin: 20px 0 0 14px !important;
	padding: 0;
	height: 55px;
}

/* single tab */
ul.etabs li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important;
}

/* link inside the tab. uses a background image */
ul.etabs a, ul.etabs p
{
	display: block;
	height: 55px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: relative;
	outline: none;
	cursor: pointer;
}

ul.etabs a span, ul.etabs p span
{
	display: none;
}

ul.etabs li ul
{
	position: absolute;
	display: none;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	border: 1px solid #dedede;
	z-index: 100;
}

ul.etabs li:hover ul
{
	position: absolute;
	display: block;
}

ul.etabs li:hover p
{
	background-position: 0px -55px !important;
}

ul.etabs li ul li
{
	display: block;
	width: 106px;
	float: none;
	background: #fff;
}

ul.etabs li ul li a
{
	text-align: left !important;
	height: 19px;
	width: 91px;
	padding: 5px 5px 5px 10px;
	background: #fff;
	border-bottom: 1px solid #dedede;
}

ul.etabs li ul li a.last-item
{
	border-bottom: 0px solid #dedede;
}

ul.etabs li ul li a:hover
{
	background: #1979a9;
	color: #fff;
}

/* when mouse enters the tab move the background image */
ul.etabs a:hover, ul.etabs p:hover
{
	background-position: 0 -55px !important;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.etabs a.current, ul.etabs a.current:hover, ul.etabs li.current a, ul.etabs p.current, ul.etabs p.current:hover
{
	background-position: 0px -55px !important;
	cursor: default !important;
	background-color: #1979a9;
	color: #fff;
}

.etabs .panes
{
	height: 200px;
	background: url( ../images/loading.gif) no-repeat center center;
}

/* root element for subtabs  */
ul.video-tabs
{
	list-style: none;
	margin: 10px 0 40px 180px !important;
	padding: 0 0 0 0px;
	height: 42px;
	float: left;

}

/* single tab */
ul.video-tabs li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important;
}


/* link inside the tab. uses a background image */
ul.video-tabs a
{
	display: block;
	height: 42px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: relative;
	outline: none;
	cursor: pointer;
}

ul.video-tabs a span
{
	display: none;
}

#tab-quicktime-version
{
	background: url(../images/tab-quicktime-version.gif) no-repeat 0 0;
	width: 85px;
	margin-right: 4px !important;
}

#tab-flash-version
{
	background: url(../images/tab-flash-version.gif) no-repeat 0 0;
	width: 85px;
	margin-right: 4px !important;
}

ul.video-tabs a:active {
	outline: none;
}

/* when mouse enters the tab move the background image */
ul.video-tabs a:hover
{
	background-position: 0 -42px !important;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.video-tabs a.current, ul.video-tabs a.current:hover, ul.video-tabs li.current a
{
	background-position: 0px -42px !important;
	cursor: default !important;
	background-color: #1979a9;
	color: #fff;
}

/* photo gallery */

div.example-gallery {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 550px;
    height: 366px;
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
div.example-gallery div.items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
div.example-gallery div.items div.example-gallery-item {
    float:left;
    overflow: hidden;
    width: 550px;
    height: 400px;
}

div.example-gallery .prevPage
{
	background: url(../images/icon-arrow-left.png) no-repeat 10px 190px;
	width: 300px;
	height: 400px;
	display: block;
	z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;

}

div.example-gallery .nextPage
{
	background: url(../images/icon-arrow-right.png) no-repeat 280px 190px;
	width: 300px;
	height: 400px;
	display: block;
	z-index: 10;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;

}

.disabled
{
	display: none;
}

.example-navi
{
	list-style: none;
	margin: 10px 0 30px 0px !important;
	padding: 0 0 0 0px;
	width: 450px;
	float: left;
}


ul.example-navi li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 0 5px 0 !important;
	list-style-image: none !important;
}

.example-navi a
{
	display: block;
	float: left;
	height: 17px;
	width: 19px;
	text-align: center;
	padding: 2px;
	cursor: pointer;
	margin: 0 5px 0 0;
	background: #1c82b5;
	color: #fff !important;
}

.example-navi li.active a
{
	background: #fff;
	color: #15638B !important;
}

.panos-navi
{
	list-style: none;
	margin: 0 !important;
	padding: 0 0 0 0px;
	height: 42px;
	width: 450px;
	float: left;
}


ul.panos-navi li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 0 5px 0 !important;
	list-style-image: none !important;
}

.panos-navi a
{
	display: block;
	float: left;
	height: 17px;
	width: 19px;
	text-align: center;
	padding: 2px;
	cursor: pointer;
	margin: 0 5px 0 0;
	background: #1c82b5;
	color: #fff !important;
}

.panos-navi li.active a
{
	background: #fff;
	color: #15638B !important;
}


/* links */

a:link
{
	color: #1979a9;
	text-decoration: none;
}

a:active
{
	color: #1979a9;
	text-decoration: none;
}

a:visited
{
	color: #1979a9;
	text-decoration: none;
}

a:hover
{
	color: #1979a9;
	text-decoration: none;
}


/* services2 tabs */

/* root element for tabs  */
ul.tabs2
{
	list-style: none;
	margin: 20px 0 0 0px !important;
	padding: 0;
	height: 50px;
	float: left;
}

/* single tab */
ul.tabs2 li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important;
}

/* link inside the tab. uses a background image */
ul.tabs2 a
{
	display: block;
	height: 50px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: relative;
	outline: none;
	cursor: pointer;
}

ul.tabs2 a span
{
	display: none;
}

#tab-services-packages
{
	background: url(../images/services-packages.gif) no-repeat 0 0;
	width: 138px;
	margin-right: 82px;
}

#tab-services-photos
{
	background: url(../images/services-photos.gif) no-repeat 0 0;
	width: 113px;
}

#tab-services-videos
{
	background: url(../images/services-videos.gif) no-repeat 0 0;
	width: 105px;
}

#tab-services-prints
{
	background: url(../images/services-prints.gif) no-repeat 0 0;
	width: 101px;
}

#tab-services-more
{
	background: url(../images/services-more.gif) no-repeat 0 0;
	width: 91px;
}

#tab-for-developers
{
	background: url(../images/tab-for-developers.gif) no-repeat 0 0;
	width: 207px;
}

#services-tabs
{
	background: url(../images/bg-grey-line.gif) repeat-x;
	margin-left: 0px !important;
}

#tab-for-homeowners
{
	background: url(../images/tab-for-homeowners.gif) no-repeat 0 0;
	width: 228px;
}

ul.tabs2 a:active {
	outline: none;
}

/* when mouse enters the tab move the background image */
ul.tabs2 a:hover
{
	background-position: 0 -50px !important;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs2 a.current, ul.tabs2 a.current:hover, ul.tabs2 li.current a
{
	background-position: 0px -50px !important;
	cursor: default !important;
	background-color: #1979a9;
	color: #fff;
}

#services-blank
{
	width: 16px;
	height: 49px;
	border-bottom: 1px solid #dedede;
	float: left;
	margin: 20px 0px 0 0;
}

#subtabs-blank
{
	width: 310px;
	height: 25px;
	border-bottom: 1px solid #dedede;
	float: left;
	margin: 0 10px 0 0;
}

#subtabs-box
{
	width: 100%;
	float: left;
	height: 26px;
	background: url(../images/bg-subtabs.gif) repeat-x;
	margin: 0px 0 20px 310px !important;

}

/* root element for subtabs  */
ul.subtabs
{
	list-style: none;
	margin: 0px 0 20px 320px !important;
	padding: 0 0 0 0px;
	height: 26px;
	background: url(../images/bg-subtabs.gif) repeat-x;
	float: left;
	width: 630px;

}

/* single tab */
ul.subtabs li
{
	float: left;
	text-indent: 0;
	padding: 0;
	margin: 0 !important;
	list-style-image: none !important;
}

/* link inside the tab. uses a background image */
ul.subtabs a
{
	display: block;
	height: 26px;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: relative;
	outline: none;
	cursor: pointer;
}

ul.subtabs a span
{
	display: none;
}

.tab-photo-services-min
{
	background: url(../images/tab-photo-services-min.gif) no-repeat 0 0;
	width: 150px;
	margin-right: 4px !important;
}

.tab-video-services-min
{
	background: url(../images/tab-video-services-min.gif) no-repeat 0 0;
	width: 145px;
	margin-right: 4px !important;
}

.tab-print-services-min
{
	background: url(../images/tab-print-services-min.gif) no-repeat 0 0;
	width: 141px;
}

ul.subtabs a:active {
	outline: none;
}

/* when mouse enters the tab move the background image */
ul.subtabs a:hover
{
	background-position: 0 -26px !important;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.subtabs a.current, ul.subtabs a.current:hover, ul.subtabs li.current a
{
	background-position: 0px -26px !important;
	cursor: default !important;
	background-color: #1979a9;
	color: #fff;
}

/* initially all panes are hidden */
div.panes2 > div, div.subpanes > div
{
	display: none;
}

/* contact validation */

.fill-error
{
	padding: 10px 10px 0px 0px;
	background: #F299AC;
	float: left;
	margin: 5px 0;
	color: #fff;
	border: 1px solid #ED6683;
	width: 100%;
}

.error-comment
{
	margin: 0 0 0 134px;
	width: 100%;
	float: left;
}

#response-info
{
	width: 100%;
	padding: 5px;
	margin: 5px 0 15px 0;
	text-align: center;
}

#response-info.ok
{
	border: 1px solid #80BA63;
	background: #CDF2BB;
}

#response-info.error
{
	border: 1px solid #ED6683;
	background: #F299AC;
}

.small-error
{
	margin: 3px 0 0 5px;
	color: #ED6683;
	float: left;
}

.small-error-textarea
{
	margin: 70px 0 0 10px;
	color: #ED6683;
}

.response-info
{
	margin: 2px 0 0 20px;
	color: #ED6683;
}

/* mp3 player */

#player-trigger
{
	float: right;
	margin: 10px 0 0 0;
}

/* overlay */

#overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#fff;

    width:675px;

}

/* container for external content. uses vertical scrollbar, if needed */
.contentWrap {
    height:441px;
    overflow-y:auto;
    padding: 10px;
}

/* close button positioned on upper right corner */
#overlay .close {
    background-image:url(../images/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* packages page */

table#tpackages
{
	border-collapse: collapse;
	margin: 0 0 50px 0;
}

table#tpackages td
{
	border: 1px solid #dedede;
	padding: 5px;
	margin: 0;
}

table#tpackages td.package-services-left
{
	width: 300px;
}

table#tpackages td.package-services-left.first-item
{
	border: 0;
}

table#tpackages td.package-title, table#tpackages td.package-price
{
	width: 65px;
	text-transform: uppercase;
	text-align: center;
}

table#tpackages td.package-title
{
	color: #1979A9;
	line-height: 12px;
}



table#tpackages td.tick
{
	background: url(../images/icon-tick.png) no-repeat center center;
	min-height: 23px;
}

table#tpackages td.dash
{
	background: url(../images/icon-dash.png) no-repeat center center;
	min-height: 23px;
}

.center
{
	text-align: center;
}

.page-header
{
	text-transform: uppercase;
	color: #c5c5c5;
	margin: 26px 0 12px 8px;
	height: 43px;
	font-size: 30px;
	padding: 0 0 0 13px;
	border-bottom: 1px solid #dedede;
}

.service-lead
{
	margin: 10px 0px 30px 320px;
}