@import url("/content/reset.css");
@import url("/content/typography.css");

body
{
    background: #1f1e1d url('/images/background-tile.jpg') repeat;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.WideContainer
{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.hidden
{
    display: none;
}
.Container
{
    width: 960px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.button { background:#333; height:24px; width:100%; padding: 4px 12px; border-radius:3px;  }

.Center
{
    margin: 0;
}
.Left, .left
{
    float: left;
}
.Right, .right
{
    float: right;
}
.Transparent
{
    opacity: .05;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=05)";
    filter: alpha(opacity=05);
}

#SentAppointmentMessage
{
    margin-top: 8px;
    display: none;
}
#SentContactMessage
{
    float: right;
    
    display: none;
}



#ContactTab
{
    background: url('/images/ContactTab.png') no-repeat top;
    text-align: center;
    height: 33px;
    width: 77px;
    position: absolute;
    z-index: 100;
    right: 274px;
}
#ContactTab a
{
    display: block;
    font-weight: bold;
    padding: 0px 4px;
}
#ContactTab:hover
{
    cursor: pointer;
    background-position: bottom;
}

#SlideDownTabs
{
    float: right;
    position: relative;
    width: 136px;
    height: 100%;
}


/* Portfolio Dropdown */

#Portfolio
{
    position: absolute;
    right: 0px;
    height: 100%;
    width: 100%;
}
#PortfolioTab
{
    background: url('/images/otherwebsitesTab.png') no-repeat top;
    text-align: center;
    height: 33px;
    width: 136px;
    position: absolute;
    z-index: 200;
    right: 136px;
}
#PortfolioTab a
{
    display: block;
    font-weight: bold;
    padding: 0px 8px;
}
#PortfolioTab:hover
{
    background-position: bottom;
    cursor: pointer;
}
#PortfolioDropDown
{
    background: url('/images/OurWebsitesDropDown.png') repeat-y;
    height: 100px;
    width: 272px;
    margin-left: -1px;
    position: relative;
    z-index: 300;
    display: none;
}
#PortfolioDropDown a
{
    font-family: "Century Gothic";
    font-style: normal;
}
#PortfolioDropDown ul
{
    text-align: left;
    padding: 8px 16px;
}
#PortfolioDropDown ul li
{
    width: 100%;
    display: block;
}

/* Other Websites */

#OtherWebsites
{
    position: absolute;
    right: 0px;
    height: 100%;
    width: 100%;
}
#OtherWebsitesTab
{
    background: url('/images/CustomerToolsTab.png') no-repeat top;
    text-align: center;
    height: 33px;
    width: 136px;
    position: relative;
    z-index: 200;
    float: right;
}
#OtherWebsitesTab a
{
    display: block;
    font-weight: bold;
    padding: 0px 8px;
}
#OtherWebsitesTab:hover
{
    cursor: pointer;
    background-position: bottom;
}
#OtherWebsitesDropDown
{
    background: url('/images/customerToolsDropDown.png') repeat-y;
    height: 300px;
    width: 272px;
    margin-right: 3px;
    position: relative;
    z-index: 300;
    display: none;
}
#OtherWebsitesDropDown a
{
    font-family: "Century Gothic";
    font-style: normal;
}
#OtherWebsitesDropDown ul
{
    text-align: left;
    padding: 8px 16px;
}
#OtherWebsitesDropDown ul li
{
    width: 100%;
    display: block;
}

/*Main Content*/
#TopContent .WideContainer
{
    min-height: 372px;
    width: 1200px;
    background: url('/images/TopHeader.png') no-repeat;
}
#TopContent
{
    height: 100%;
    width: 100%;
    clear: both;
}
#TopContent .Left
{
   
    height: 100%;
}
#TopContent .Right
{
  
    height: 100%;
}
#TopContent p
{
    letter-spacing: .1em;
}

#main-content
{
    background: #fff;
    width: 100%;
    height: 100%;
    min-height:100px;
    border-radius: 6px;
    margin-top:32px;
    }
    
    #main-content .full { margin:0px 16px; padding:16px 0px;}
    #main-content .full a { color:#999; }

#main-content .left
{
    background: #eee;
    width: 327px;
    height: 100%;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 16px 24px;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ccc;
}

#main-content .left a { color:#333; }
#main-content .right
{
    background: #fff;
    width: 536px;
    height: 100%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 16px 24px;
    
}

#main-bottom-shadow { width:960px; height:32px; margin:0; background: url('/images/MainBottomShadow.png') no-repeat; }

#index-video { border:3px solid #333; height:330px; width:534px; margin-bottom:8px;}

#featured-videos {  width:548px;  }
.featured-video,.featured-video:hover, .featured-video:focus {  display:block; height:147px; width:260px;  float:left; }

/*---- hover.js ----*/

div.fadehover {
	position: relative;
	float: left;
	margin:0px 8px 8px 0px;
	width: 260px;
	height: 147px;
	border:3px solid #333;
	background:#000;
	}
 
img.a {
	position: relative;
	left: 0;
	top: 0;
	z-index: 10;
	opacity:.8;
        }
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	z-index:20;
	}
	
/* end hover.js */


#featured-services-top
{
    background: url('/images/FeaturedTop.jpg') repeat-x;
    width: 304px;
    height: 48px;
    line-height:48px;
    padding:0px 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}
#featured-services
{
    background: #fbfbfb;
    width: 304px;
    height: 100%;
    padding: 8px 12px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid #e1e1e1;
    border-bottom: 1px solid #cfcfcf;
}

#featured-services li { list-style:none;  border-bottom:1px solid #f7f7f7; padding-top:4px; padding-bottom:4px; }
#featured-services a:hover { text-decoration:underline; }
#LinkList
{
}
#LinkList li
{
    list-style: none;
    margin: 4px 0 4px -15px;
}


#Logo img
{
    margin-top: 16px;
    cursor: pointer;
}

.VerticalDivider
{
    background: url('/images/MainContentVerticalDivider.jpg') repeat-y;
    width: 2px;
    min-height: 200px;
    float: left;
    margin: 0px 8px;
}
.big-button
{
    background: url('/images/ContactButton.png') no-repeat;
    height: 41px;
    width: 244px;
    text-align: center;
    font-weight:bold;
    margin-top:12px;
    margin-left:296px;
}
.big-button a
{
    line-height: 41px;
    padding:10px 60px;
}
.big-button:hover a
{
    color: #fff;
}
.small-button  
{
    background: url('/images/SmallButton.png') no-repeat;
    height: 33px;
    width: 132px;
    text-align: left;
    font-weight:bold;
    float:left;
    margin-right:8px;
}
.small-button a
{
    line-height: 33px;
    color:#666;
    padding:8px 40px 8px 16px;
}

.portfolio-links { display:block; margin:0; padding:8px 0px; margin-bottom:4px;background:#dfdfdf; border:1px solid #d8d8d8; border-bottom:1px solid #ececec; padding:8px; }
.portfolio-links:hover { background:#f5f5f5; border:1px solid #ececec;  }

.portfolio-group { float:left; width:100%; height:100%; margin-bottom:8px; }

/* Contact Navigation */
#contact-navigation
{
    text-align:right;
    margin-top:4px;
    }
    #contact-navigation a 
    {
        margin-right:6px;
        text-decoration:underline;
    }


/* Main Navigation */
#main-navigation
{
    height: 64px;
    width: 500px;
    margin-top: 24px;
    background: url('/images/MainNavigationBackground.png') no-repeat;
}
.main-navigation
{
    height: 100%;
    position: relative;
    z-index: 100;
}
.main-navigation li
{
    float: left;
    text-align: center;
    line-height: 16px;
    padding: 14px 0px 0px 0px;
    width: 100px;
    height: 64px;
    cursor: pointer;
    display: block;
}
.main-navigation li:hover
{
    background: url('/images/MainNavigationBackground-hover.png') no-repeat;
}




/* Banners */
#SlideShow
{
    height: 480px;
    width: 960px;
    position: relative;
}
#IndexBanners
{
    height: 480px;
    width: 960px;
    position: relative;
}
#IndexBanners div
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#IndexBanners div.active
{
    z-index: 10;
}
#IndexBanners div.last-active
{
    z-index: 9;
}
.PlayButton a
{
    background: url("/images/playbutton.png") no-repeat left top;
    height: 166px;
    width: 216px;
    position: absolute;
    z-index: 100;
}
.PlayButton:hover a
{
    background-position: left bottom;
}

.BannerShadow
{
    height: 32px;
    width: 960px;
    background: url('/images/BannerShadow.png') no-repeat;
}

#SlideIndicator
{
    padding-left: 6px;
    height: 53px;
    width: 182px;
    background: url('/images/SlideIndicator.png') no-repeat;
    position: absolute;
    bottom: 16px;
    left: -6px;
    z-index: 100;
}
.SlideIndicatorCircle
{
    float: left;
    margin-left: 4px;
    height: 48px;
    width: 38px;
    background: url('/images/slideindicatorcircles.jpg') no-repeat left bottom;
}
#SlideIndicator div.Active .SlideIndicatorCircle
{
    background: url('/images/slideindicatorcircles.jpg') no-repeat left top;
}
/*ContactContent*/
#ContactContentTop
{
    height: 64px;
    width: 100%;
}
#ContactContent
{
    height: 100%;
    width: 100%;
}
#ContactContent .Left
{
    height: 100%;
    width: 340px;
}
#ContactContent .Right
{
    height: 100%;
    width: 556px;
    text-align: left;
}
#ContactContent .Left a, #ContactContent .Left span
{
    float: left;
}

/* Contact Info */
#ContactInfo
{
    height: 60px;
    width: 400px;
    margin: 15px 0px;
}
.ContactInfoItem
{
    height: 20px;
    width: 400px;
    margin: 8px 0;
}
#ContactInfo p
{
    line-height: 16px;
    color: #ccc;
    float: left;
    margin: 0;
    margin-left: 10px;
}
#ContactInfo a:hover
{
    color: #4f6b6b;
}
#ContactInfo img
{
    float: left;
}

/* Contact Form */
fieldset
{
    border: none;
}

#ContactForm
{
    width: 100%;
    height: 100%;
}
.contact-label
{
    float: left;
    text-align: right;
    width: 250px;
    height:38px;
    margin-bottom:8px;
    line-height:38px;
}
#ContactForm input[type=text]
{
    margin: 0 auto;
    padding: 0;
    width: 253px;
    height: 32px;
    margin-bottom: 8px;
    text-align: left;
    float: right;
    font-size: 20px;
    border: solid 3px #333;
}

#contact-textarea { width:100%; height:100%; float:left; }
#ContactForm textarea
{
    width: 253px;
    height: 114px;
    text-align: left;
    float: right;
    font-size: 20px;
    margin-bottom: 8px;
     border: solid 3px #333;
}
.contact-submit input[type="submit"]
{
    margin: 0 auto;
    margin-top: 12px;
    float:right;
    padding: 0;
    border: 0px;
    cursor: pointer;
    height: 32px;
    width: 126px;
}
#ContactSubmit input[type="submit"]:hover
{
    background-position: left -43px;
}
#ContactSubmit label
{
    margin: 0 auto;
    padding: 0;
    float: left;
}
#messageSent
{
    display: none;
    float: right;
    line-height: 32px;
    padding-left: 20px;
}

/* error message */
.error
{
    /* supply height to ensure consistent positioning for every browser */
    height: 15px;
    background-color: #FFFE36;
    border: 1px solid #E1E16D;
    font-size: 11px;
    color: #000;
    padding: 3px 10px;
    margin-left: -2px; /* CSS3 spicing for mozilla and webkit */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-box-shadow: 0 0 6px #ddd;
    -webkit-box-shadow: 0 0 6px #ddd;
}



/*Feeds Content*/

#feeds-content
{
    height: 100%;
    width: 100%;
    color: #eee;
    border-bottom:1px solid #111;
    padding-bottom:32px;
} 
#feeds-content p { color:#999; }

.Cols h5, .cols h5, .last-cols h5
{
    line-height: 48px;
}
/* Yellow Area Content */
.Cols, .cols
{
    width: 300px;
    margin-right:26px;
    padding-right:12px;
    border-right: 1px solid #333;
}
.Cols li, .cols li { list-style:none; }
.Last-Cols, .last-cols
{
    width: 280px;
    margin-left:0px;
}
/* Twitter */
#TwitterContainer
{
    text-align: left;
    width: 300px;
}

#TwitterWidget
{
    height: 112px;
    width: 300px;
    overflow: hidden;
}
.twitterSearchTweet
{
    height: 300px;
    color: #1d1d1d;
}
.twitterSearchContainer
{
    height: 300px;
}

#Twitter
{
    margin: 0 auto;
    padding: 0;
    background: url('/Images/TwitterBox.jpg') no-repeat;
    width: 300px;
    text-align: right;
}
#Twitter span
{
    color: #1F1E1D;
}

#twitter_div
{
    text-align: left;
    margin: 0 auto;
    color: #ffffff;
    margin-top: 32px;
    padding: 0;
    width: 276px;
    height: 85px;
}
#twitter_div a
{
    margin-top: 8px;
}
#twitter_div
{
    line-height: 16px;
}

/* Blog Feed */

#creditfooter
{
    display: none;
}
#RecentPosts
{
    text-align: left;
    width: 300px;
}
.feedburnerFeedBlock ul
{
    margin-top: 8px;
}
.feedburnerFeedBlock li
{
    margin-bottom: 8px;
    color:#999;
}
.headline a
{
}

/* Content Boxes */

.ContentBox
{
    -moz-border-radius: 16px;
    border-radius: 16px;
    float: left;
    width: 528px;
    height: 100%;
    padding: 8px 16px;
}

.BlueBackground
{
    background-color: #7E9FB9;
}


.ContentBoxContainer
{
    margin: 0 auto;
    padding: 0;
    width: 960px;
    min-height: 300px;
    float: left;
}

.Titles
{
    height: 210px;
    width: 65px;
    padding-top: 25px;
    float: left;
}

.slideshow
{
    min-height: 300px;
    width: 960px;
    margin: auto;
    margin-left: 0px;
}
.Slide
{
    min-height: 300px;
    width: 100%;
}
.Slide a
{
    color: #7E9FB9;
}


.VerticalSpacer
{
    clear: both;
    height: 16px;
    width: 960px;
}
.MediaContent
{
    min-height: 268px;
    width: 220px;
    float: left;
    margin-left: 40px;
}



.ContentImage
{
    float: left;
    margin-right: 32px;
}


.WidgetHeader
{
    background: url('/Images/widgetheader.jpg') no-repeat;
    width: 213px;
    height: 40px;
    padding-top: 4px;
}




/*Banners Fade In */
#Banners
{
    position: relative;
    height: 350px;
}

#Banners IMG
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    padding: 34px 0px 0px 40px;
    height: 120px;
    width: 180px;
}

#Banners IMG.active
{
    z-index: 10;
}

#Banners IMG.last-active
{
    z-index: 9;
}
/*Share Toolbar*/
#Toolbar
{
    width: 652px;
    height: 100%;
    float: left;
}
#Toolbar img
{
    border: none;
    margin-left: 2px;
    float: left;
}

.PleaseShare
{
    background: url('/Images/pleaseshare.jpg') no-repeat;
    height: 18px;
    width: 124px;
    margin-bottom: 1px;
}
.ToolbarTop
{
    margin: 0 auto;
    padding: 0;
    width: 652px;
    background: url('/Images/toolbarTop.jpg') no-repeat;
    height: 2px;
}
.ToolbarBottom
{
    margin: 0 auto;
    padding: 0;
    width: 652px;
    background: url('/Images/toolbarBottom.jpg') no-repeat;
    height: 2px;
}

.ToolbarLeft
{
    margin: 0 auto;
    padding: 0;
    width: 20px;
    background: url('/Images/toolbarleft.jpg') no-repeat;
    height: 82px;
    float: left;
    margin-left: 134px;
    margin-top: 16px;
}

.ToolbarRight
{
    margin: 0 auto;
    padding: 0;
    width: 20px;
    background: url('/Images/toolbarright.jpg') no-repeat;
    height: 82px;
    float: left;
    margin-top: 16px;
}

.Toolbar
{
    margin: 0 auto;
    padding: 0;
    width: 652px;
    background: url('/Images/toolbar.jpg') repeat-y;
    height: 76px;
}


#HomeContent
{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    min-height: 600px;
    font-size: 14px;
    text-align: left;
}

#HomeContent .Left
{
    margin: 0 auto;
    padding: 0;
    width: 630px;
    height: 100%;
}
#HomeContent h2
{
    margin: 0 auto;
    padding: 0;
    margin-bottom: -8px;
    margin-left: 12px;
}



/* Featured Work & Testimonials */

#PortfolioNavigation .VideosGraphicsButtons
{
    height: 64px;
    width: 300px;
    float: left;
    text-transform: uppercase;
}
#PortfolioNavigation .VideosGraphicsButtons .VideosButton
{
    float: left;
    width: 150px;
}
#PortfolioNavigation .VideosGraphicsButtons .PortfolioButton
{
    float: left;
    width: 150px;
}
#PortfolioNavigation .PortfolioButton span
{
    display: block;
    height: 64px;
    width: 150px;
    background: url('/images/TestimonialsNavigationBackground.png') left top no-repeat;
}
#PortfolioNavigation .VideosGraphicsButtons .GraphicsButton
{
    width: 150px;
    float: right;
}
#PortfolioNavigation a
{
    padding: 20px 16px;
    text-align: center;
    display: block;
    height: 24px;
    width: 117px;
    position: relative;
    z-index: 100;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
#PortfolioNavigation a:hover
{
    color: #dfdfdf;
}
#PortfolioNavigation .VideosButton span
{
    display: block;
    height: 64px;
    width: 150px;
    background: url('/images/SmallNavigationBackground.png') left top no-repeat;
}
#PortfolioNavigation .GraphicsButton span
{
    display: block;
    height: 64px;
    width: 150px;
    background: url('/images/SmallNavigationBackground.png') right top no-repeat;
}
#PortfolioNavigation .VideosButton .Active
{
    background: url('/images/SmallNavigationBackground.png') left bottom no-repeat;
}
#PortfolioNavigation .GraphicsButton .Active
{
    background: url('/images/SmallNavigationBackground.png') right bottom no-repeat;
}
#PortfolioNavigation .TestimonialsButton
{
    float: right;
    text-transform: uppercase;
}
#PortfolioNavigation .TestimonialsButton span
{
    display: block;
    height: 64px;
    width: 150px;
    background: url('/images/TestimonialsNavigationBackground.png') left top no-repeat;
}
#PortfolioNavigation .TestimonialsButton .Active
{
    background: url('/images/TestimonialsNavigationBackground.png') left bottom no-repeat;
}
.TestimonialsButton .ButtonToggle
{
    float: right;
}
#PortfolioNavigation h5
{
    text-transform: none;
}

#actions .prev
{
    float: left;
    margin-top: 8px;
}
#actions .next
{
    float: right;
    margin-top: 8px;
}

#VideosThumbs, #GraphicsThumbs
{
    margin: 0px;
}
#VideosThumbs img, #GraphicsThumbs img
{
    cursor: pointer;
}

#IndexTestimonials .Left, #IndexTestimonials .Right
{
    width: 45%;
    text-align: left;
}

.VideoThumbInfo
{
    float: right;
    position: relative;
    text-align: left;
    width: 134px;
    height: 154px;
    background: url('/images/videoinfobackground.png') no-repeat;
    padding: 8px 8px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    filter: alpha(opacity=00);
}
.VideoThumbInfo a
{
    position: absolute;
    bottom: 16px;
    left: 0px;
    z-index: 300;
    display: block;
    background: #000;
    text-align: center;
    height: 24px;
    width: 75px;
}
.VideoThumbInfo
{
    display: none;
}

.PortfolioShadow
{
    position: absolute;
    bottom: 0;
    height: 12px;
    width: 300px;
    background: url('/images/PortfolioShadow.png') no-repeat;
}

/* Scrollable styles */
.horizontal
{
    position: relative;
    overflow: hidden;
    width: 960px;
    height: 182px;
}

.horizontal .items
{
    width: 20000em;
    position: absolute;
}

.vertical
{
    position: relative;
    overflow: hidden;
    width: 150px;
    height: 312px;
}

.vertical .items
{
    position: absolute;
    height: 20000em;
}


.itemGroup
{
    float: left;
}
.horizontal .item
{
    float: left;
    margin-right: 30px;
    height: 182px;
    position: relative;
}
.vertical .item
{
    float: left;
    height: 100%;
    position: relative;
}
.ItemTitle
{
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 284px;
    padding: 4px 8px;
    background: #000;
    display: none;
}

.infoBox
{
    height: 198px;
    width: 198px;
    background: rgba(255,255,255,.04);
    border: 1px solid #333333;
    margin: 10px;
    padding: 10px;
    float: left;
}

.infoBox p
{
    color: #cccccc;
    text-align: center;
    font-size: 12px;
}
.infoBox h4
{
    color: #ffffff;
    text-align: center;
    font-family: Century Gothic, Arial, Sans-Serif;
    font-size: 15px;
}

.infoBox:hover
{
    background: rgba(255,255,255,.7);
}

/*Footer*/


#footer
{
	margin: 0 auto;
	padding-top: 16px;
	width: 100%;
	height: 100%;
	background:#333;
	font-size:12px;
	border-top:1px solid #444;
	color:#aaa;
}
.horizontal-list li
{
	display: inline;
}



.vertical-list li { list-style:none; }
#footer-main { float:left; height:100%; width:100%; border-bottom:solid 1px #292929; padding-bottom:16px;}
#footer-sub { float:left; width:100%; padding-top:16px; border-top:solid 1px #393939; height:32px; color:#555; }
#footer-sub a { color:#555; }


#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span {
	/*color: #ababab;*/
	color: #999;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #DDD;
	}