/*  
Site Name: D2L Studios™
Description: The online home of D2L Studios™
Author: D2L Studios™
Author URI: www.d2lstudios.com
*/

/*  COLORS
---------------------------------------------------
	Body Background: #376a99
	Main Text: #333
*/


/*  RESETS
---------------------------------------------------*/
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
ol,ul { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
abbr,acronym { border: 0; }

/*  GLOBAL ELEMENTS
-------------------------------------------------------------- */

body { font: .75em/150% "Lucida Grande", "Lucida sans Unicode", Arial, sans-serif; background: #376a99 url(../images/bg-body.png) repeat; color: #666; } 
a:link { color: #376a99; text-decoration: none; } 
a:visited { color: #376a99;	text-decoration: none; } 
a:hover, a:active { color: #333333;	text-decoration: none; }
#wrapper { width: 100%; margin: 0px auto; }

/*  HEADER
-------------------------------------------------------------- */
 
#header { height: 100px; width: 900px; margin: 0px auto; }
#logo, #logo a { float: left; text-indent: -9000px; background: url(../images/logo-header.png) top left no-repeat; display: block; width: 486px; height: 100px; }
#number { background:url(../images/number.png) no-repeat; display:block; width:290px; height:100px; float:right; text-indent:-9000px; }

/*  NAVIGATION
-------------------------------------------------------------- */

#nav-wrapper { width: 100%; background: url(../images/bg-nav.png) repeat-x; height: 71px; margin: 0px auto; }
#nav { width: 900px; margin: 0px auto; padding: 0px 0px 0px 20px; }
#nav.mod { margin: 55px 0 0 0; }
#nav ul { margin:0; padding: 10px 0px 0px 0px; list-style-type: none; }
#nav ul li { float: left; }
#nav ul li a span { height: 20px; border-bottom: thin solid #ffffff; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; display: block; color: #333333; text-decoration: none; cursor: pointer; padding: 10px 0px 0px 0px; }
#nav ul li a span .small { margin: 7px 0 0 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #999999; text-decoration: none; text-align: left; display: block; border: none; cursor: pointer; padding: 0; }
		   
/* ROLLOVER and ACTIVE
------------------------------------------------------------ */

#nav ul li a:hover span, #nav ul li a.active span { color:#333333; border-bottom:thin solid #999999; text-decoration:none; }
#nav ul li a:hover span .small, #nav ul li a.active span .small { color:#333333; text-decoration:none; border:none; }

.nav-padding { margin:0px 49px 0px 0px; }

/* BUTTON BACKGROUNDS
------------------------------------------------------------ */
   
.nav-home, .nav-home a, .nav-work, .nav-work a, .nav-services, .nav-services a, .nav-about, .nav-about a, .nav-contact, .nav-contact a { display:block; line-height:14px; height:50px; width:51px; margin:0px 5px 0px 0px; }

.nav-home { background: url(../images/button-home.gif) no-repeat top left; }
.nav-home:hover { background: url(../images/button-home.gif) no-repeat bottom left; }
.nav-work { background: url(../images/button-work.gif) no-repeat top left; }
.nav-work:hover { background: url(../images/button-work.gif) no-repeat bottom left; }
.nav-services { background: url(../images/button-services.gif) no-repeat top left; }
.nav-services:hover { background: url(../images/button-services.gif) no-repeat bottom left; }
.nav-about { background: url(../images/button-about.gif) no-repeat top left; }
.nav-about:hover { background: url(../images/button-about.gif) no-repeat bottom left; }
.nav-contact { background: url(../images/button-contact.gif) no-repeat top left; }
.nav-contact:hover { background: url(../images/button-contact.gif) no-repeat bottom left; }

.current, .current a, .current a:link, .current a:visited, .current:hover, .current:active { background-position: 0px -50px; }

/*  CONTENT
-------------------------------------------------------------- */
 
#content-home { background: #ffffff url(../images/bg-content-top.png) top repeat-x; width: 100%; padding: 20px 0px 0px 0px; }
#content-home p { font-size: 13px; line-height: 18px; }
#column-wrapper { width: 900px; margin: 0 auto; }
.column-1, .column-2, .column-3 { width: 270px; float: left; padding: 117px 0px 0px 0px; }
.column-1 p, .column-2 p, .column-3 p { padding: 0px 15px; }
.column-1 { background: url(../images/home-headers.png) no-repeat top left; margin: 0px 45px 0px 0px; }
.column-2 { background: url(../images/home-headers.png) no-repeat top center; margin: 0px 45px 0px 0px; }
.column-3 { background: url(../images/home-headers.png) no-repeat top right; }

.home-work { border: 5px solid #376a99; float: left; }
.home-work:hover { border: 5px solid #333; }
.home-work img { padding: 0px; margin: 0px; border: none; }
.spacer { margin: 0px 10px 10px 15px; }

/* CONTENT HOMEPAGE MINI CONTACT BOX
------------------------------------------------------------------- */

.column-3 form { margin: 10px 0px 0px 15px; font-size: 12px; }
.column-3 label { cursor:pointer; display:block; }
.column-3 input[type="text"], .column-3 textarea { width:225px; border:1px solid #777777; padding:2px; -moz-border-radius:4px; background: #f8f8f8; color: #222222; }
.column-3 input[type="text"]:hover, .column-3 input[type="text"]:focus, .column-3 textarea:hover, .column-3 textarea:focus { border-color:#555555; background:#e8e8e8; }

/* submit button */
.column-3 input[type="submit"] { cursor:pointer; border:1px solid #777777; padding:2px; -moz-border-radius:4px; background:#f8f8f8; width: 75px; }
.column-3 input[type="submit"]:hover, .column-3 input[type="submit"]:focus { border-color:#555555; background:#e8e8e8; }
.column-3 input[type="submit"]:active { font-weight: bold; }

.read-more, .read-more a { display:block; width: 125px; height: 40px; background: url(../images/button-read.png) no-repeat 0px 0px; }
.read-more a:hover { background: url(../images/button-read.png) no-repeat -125px 0px; }
.see-more, .see-more a { display:block; width: 125px; height: 40px; background: url(../images/button-see-more.png) no-repeat 0px 0px; }
.see-more a:hover { background: url(../images/button-see-more.png) no-repeat -125px 0px; }

/* END MINI FORM */

#content-wrapper { background: #fff; width: 900px; margin: 30px auto 0px auto; border-left: 1px solid #002A51; border-right: 1px solid #002A51; }
#content-top-interior { background: url(../images/bg-content-top.png) repeat-x bottom; height: 25px; width: 100%; display: block; }
#content-interior { width: 100%; margin: 0 auto; }
#content-interior { font-size: 13px; }

.about-bullets { margin-left: 30px; }
#content-bottom-interior { background: url(../images/bg-content-bottom.png) repeat-x bottom; height: 33px; width: 100%; }
#content-bottom { background: url(../images/bg-content-bottom.png) repeat-x bottom; height: 33px; width: 100%; display: block; }
.header-work, .header-services, .header-about, .header-contact, .header-newsletter { text-indent: -9000px; display: block; width: 334px; height: 62px; margin: 0px 0px 0px 20px; }
.header-work { background: url(../images/page-headers.png) no-repeat 0px 0px; }
.header-services { background: url(../images/page-headers.png) no-repeat -334px 0px; }
.header-about { background: url(../images/page-headers.png) no-repeat -668px 0px; }
.header-contact { background: url(../images/page-headers.png) no-repeat -1002px 0px; }
.header-newsletter { background: url(../images/page-headers.png) no-repeat -1336px 0px; }

.content-left { float:left; width:585px; }
.content-left p a, .content-left p a:visited, .content-left p a:link { color: #376a99; text-decoration: none; border-bottom: 1px dotted #376a99; padding: 1px 3px; }
.content-left p a:hover { color: #ffffff; text-decoration: none; background: #376a99; }
.content-left h3 { font: 15px "Lucida Grande", "Lucida sans Unicode", Arial, sans-serif; color:#555555; margin: 10px 0px 5px 30px; padding:0px 0px 5px 0px; border-bottom:thin solid #e8e8e8; }
.content-left p { font-size: 13px; margin:5px 0px 5px 55px; }

.about p { font-size: 14px; line-height: 20px; padding: 5px 0px 0px 0px; }

.contact-right { float:right; width:225px; margin: 10px 30px 0px 0px; }
.contact-right h2 { margin:15px 15px 5px 15px; font: 22px Georgia, Times New Roman, Times, serif; color: #333; }
.contact-right p { font-size: 13px; margin:5px 0px 10px 25px; line-height: 26px; }
.contact-right a, .contact-right a:link, .contact-right a:visited { color: #333; text-decoration: underline; }
.contact-right a:hover { color: #000; }

.light { outline: 1px solid #ddd; border-top: 1px solid #fff; background: #e9e9e9; }
.dark { outline: 1px solid #111; border-top: 1px solid #555; background: #333; }

#indented ul { margin: 10px 5px 15px 5px; padding: 0; list-style: none; }
#indented ul li { border-top: 1px solid #cccccc; border-bottom: 1px solid #ffffff; }
#indented ul li a { padding: 10px 10px 10px 10px; display: block; color: #3333333; text-decoration: none; }
#indented ul li a:hover { background: #666666; color:#ffffff; }

#indented ul li:first-child { border-top: none; }
#indented ul li:last-child { border-bottom: none; }


.contact-right .newsletter-2 { background:url(../images/newsletter.png) no-repeat left; display: block; padding:0px 0px 0px 40px; }
.contact-right .twitter { background:url(../images/twitter.png) no-repeat left; display: block; padding:0px 0px 0px 40px; }
.contact-right .facebook { background:url(../images/facebook.png) no-repeat left; display: block; padding:0px 0px 0px 40px; }

.header-terms { font:26px 'Helvetica', Arial, San-serif; padding: 10px 20px; color:#666666; }

.about-button { margin:30px auto 0px auto; background:url(../images/bg-about-button.png) no-repeat; display:block; width:350px; height:77px; padding:25px 0px 0px 30px; font:18px 'Helvetica', Arial, San-serif; font-weight: 700; color: #333333; text-shadow: 0px 1px 1px #fff; }

#home-button a, #home-button a:link, #home-button a:visited { font: 18px Helvetica, Arial, san-serif; font-weight: 700; text-shadow: 0px 1px 1px #fff; }
#home-button a:hover { color: #333333; text-decoration: none; }

/* SERVICES PAGE HEADERS
------------------------------------------------------------------- */

.content-services-left { float:left; width:585px; }
.content-services-left h2 { font:22px Georgia, Times New Roman, Times, serif; color:#555555; padding: 30px 0px 3px 0px; border-bottom:thin solid #e8e8e8; margin: 0px 0px 0px 70px; }
.content-services-left p { font-size: 14px; line-height: 22px; margin:5px 0px 25px 40px; }

.content-services-left a, .content-services-left a:link, .content-services-left a:visited { color: #376a99; text-decoration: none; border-bottom: 1px dotted #376a99; padding: 1px 3px; }
.content-services-left a:hover { color: #ffffff; text-decoration: none; background: #376a99; }

.h2-web, .h2-identity, .h2-print, .h2-consulting, .h2-programming, .h2-photography, .h2-seo { display:block; height:64px; font:22px Georgia, Times New Roman, Times, serif; color:#555555; margin: 10px 0px 0px 40px; }

.h2-web { background:url(../images/services-icons.png) no-repeat top left; }
.h2-identity { background:url(../images/services-icons.png) no-repeat 0px -64px; }
.h2-print { background:url(../images/services-icons.png) no-repeat 0px -128px; }
.h2-consulting { background:url(../images/services-icons.png) no-repeat 0px -192px; }
.h2-programming { background:url(../images/services-icons.png) no-repeat 0px -256px; }
.h2-photography { background:url(../images/services-icons.png) no-repeat 0px -320px; }
.h2-seo { background:url(../images/services-icons.png) no-repeat 0px -384px; }

/* CONTENT RIGHT CONTACT BOX
------------------------------------------------------------------- */

#contact-form-interior p { font-size: 14px; line-height: 20px; padding: 10px 30px; }
#contact-form-interior h2 { font:22px 'Helvetica', Arial, San-serif; padding: 10px 20px; }
#contact-form-interior p a, #contact-form-interior p a:link, #contact-form-interior p a:visited { color: #376a99; text-decoration: none; border-bottom: 1px dotted #376a99; }
#contact-form-interior p a:hover { color: #111111; text-decoration: none; border-bottom: 1px solid #111111; }
.newsletter { background:url(../images/icon-newsletter-white.png) no-repeat left; display: block; height: 37px; padding:10px 0px 0px 38px; margin: 2px 0px 2px 20px; }
.work { background:url(../images/icon-gear.png) no-repeat left; display: block; height: 37px; padding:10px 0px 0px 38px; margin: 15px 0px 2px 20px; }
.twitter-2 { background:url(../images/icon-twitter-white.png) no-repeat left; display: block; height: 37px; padding:10px 0px 0px 38px; margin: 2px 0px 2px 20px; }
.facebook-2 { background:url(../images/icon-facebook-white.png) no-repeat left; display: block; height: 37px; padding:10px 0px 0px 38px; margin: 2px 0px 2px 20px; }

/* WORK
------------------------------------------------------------ */

#work-wrapper { margin: 15px 30px; }
#work-wrapper h1 { font: 22px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 0px 0px 10px 0px; color: #999; }
.work-img { margin: 0px 15px 15px 0px; float: left; }
.work-img img { border: 5px solid #ccc; }
.work-img img:hover { border: 5px solid #666; }
.work-img span { font: 18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 700; }
.work-links { width: 264px; height: 17px; float: left; margin: 0px 15px 10px 0px; display: block; text-align: center; }
.work-links a, .work-links a:link, .work-links a:visited { color: #666666; font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration: none; }
.work-links a:hover { color: #333333; text-decoration: underline; }

.work-quote, .work-quote a { display:block; height:175px; width:525px; background:url(../images/work-quote.png) no-repeat; float:left; text-indent:-9000px; }

.work-quote:hover, .work-quote a:hover { background:url(../images/work-quote-over.png) no-repeat; }

/*  ROTATOR
-------------------------------------------------------------- */

#home-button { position:absolute; margin: 270px 0px 0px 40px; z-index: 1; }
#home-button a, #home-button a:link, #home-button a:visited { font: 18px Helvetica, Arial, san-serif; font-weight: 700; text-shadow: 0px 1px 1px #fff; }
#home-button a:hover { color: #333333; text-decoration: none; }

.home-button-work { float:left; padding:0px 55px 0px 0px; }
.home-button-contact { float:left; }

#rotator { width: 900px; height: 390px; background: url(../images/bg-rotator.png); margin: 0 auto; }
.slideshow img { position: absolute; margin: 28px 0px 0px 425px; border: thin solid #eeeeee; }

/*  FORMS
-------------------------------------------------------------- */
 
.content-left form { margin: 20px 0px 30px 50px; }
label { cursor:pointer; display:block; }
input[type="text"], textarea { width:300px; border:1px solid #777777; padding:8px; -moz-border-radius:4px; background: #f8f8f8; color: #222222; }
input[type="text"]:hover, input[type="text"]:focus, textarea:hover, textarea:focus { border-color:#555555; background:#e8e8e8; }

/* submit button */
input[type="submit"] { cursor:pointer; border:1px solid #777777; padding:5px; -moz-border-radius:4px; background:#f8f8f8; width: 100px; }
input[type="submit"]:hover, input[type="submit"]:focus { border-color:#555555; background:#e8e8e8; }
input[type="submit"]:active { font-weight: bold; }

/*  FOOTER
-------------------------------------------------------------- */
 
#footer { width: 900px; margin: 0 auto; height: 75px; }
#footer-logo { width: 145px; height: 47px; background: url(../images/logo-footer.png) no-repeat top center; float: left; }
#footer-social { float: left; width: 300px; padding: 20px 0px 0px 20px; }
#footer-nav { float: right; font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 10px 0px 0px 0px; color: #cccccc; }
#footer-nav a, #footer-nav a:link, #footer-nav a:visited { color: #f2f2f2; text-decoration: none; padding: 0px 2px; }
#footer-nav a:hover { color: #376a99; text-decoration: none; background: #ffffff; }

/*  JQUERY CONTACT FORM
------------------------------------------------ */

#contactable { background-color:#ffffff; background-image: url(../images/contact.png); color:#333333; background-color:#ffffff; cursor:pointer; height:102px;	left:0;	margin-left:-5px; *margin-left:-5px; overflow:hidden; position:fixed; *position:absolute; text-indent:-100000px; top:175px; *margin-top:10px; width:44px; z-index:1001; }

#contactForm { background-color:#ffffff; background-image: url(../images/bg-contact.png); background-repeat: repeat-x; border:1px solid #999999; color:#333333; height:385px; left:0; margin-left:-400px; *margin-left:-434px; margin-top:-160px; overflow:hidden; padding-left:30px; position:fixed; top:200px; width:360px; *width:394px; z-index:999; }

form#contactForm input, textarea { background:#f8f8f8 none repeat scroll 0 0; outline-style:none; outline-width:medium; width:325px; padding:5px; border:1px solid #999999; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px; margin-bottom:10px; }

form#contactForm input:hover, textarea:hover { background:#eeeeee; }

form#contactForm .submit { background: #376A99 none repeat scroll 0 0; outline-style:none; outline-width:medium; width:325px; padding:5px; border:1px solid #999999; outline-color:-moz-use-text-color; font-size:1em; cursor:pointer; color:#f2f2f2; text-transform:uppercase; 	font-weight:bolder; font-family:Helvetica; margin-top:10px; }

form#contactForm .submit:hover { background: #4a8bc7; color:#f2f2f2; }

form#contactForm p { width:325px; font-size:14px; }
form#contactForm .disclaimer { *margin-left:20px; }
#contactForm .red { color:#376A99; }

#overlay { background-color:#666666; display:none; height:100%; left:0; margin:0; padding:0; position:absolute; top:0; width:100%; z-index:0; } 
.error { background-color: #EDBE9C; }

#name.error { background-color: #EDBE9C; } 
#email.error { background-color: #EDBE9C; }
#comment.error { background-color: #EDBE9C; }

form#contactForm label{	*margin-left:20px; }
form#contactForm #loading {	background: url(images/ajax-loader.gif) no-repeat; width:55px; height:55px; margin: 100px auto; display:none; }
#callback {	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1.1em;	color: #333333; width:325px; margin: 130px auto; display:none; }
.holder { margin:0 auto; *margin-left:20px; padding-top:20px; }

/*  TOOLTIP STYLES
-------------------------------------------------------------- */

.tooltip { outline: none; cursor: help; text-decoration: none; position: relative; border-bottom: 1px dotted #376a99; color: #000; }

.tooltip:hover { border-bottom: 1px dotted #333333; }

.tooltip span { margin-left: -999em; position: absolute; }

.tooltip:hover span { position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; }

.tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; }

.tooltip:hover em { font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; }

.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }

.classic { background: #FFFFAA; border: 1px solid #FFAD33; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); z-index: 0; color: #333333; }

.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

/*  DEFAULT STYLES
-------------------------------------------------------------- */
 
.alignleft {float: left;}
.alignright {float: right;}
.clear {clear: both;}
 
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
 
.small {font-size: 0.8em;}
.hidden {display: none;}

.blue { color: #376a99; }

.border-none, .border-none a, .border-none a:link, .border-none a:visited, .border-none a:hover { border: none; }