/*  
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
*/

/* What has been changed on this stylesheet for IE6?
---------------------------------------------------------
	#nav ul li a span: added float:left
	#contact: added display:hidden
	.content-left: width:540px
	.content-services-left: width:540px
	.contact-right: margin-right:20px
	.contact-right h2: margin-right:0px
*/

/*  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-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 100%; background: #376a99; color: #666; background: url(../images/bg-body.png) repeat; } 
a:link { color: #666666; text-decoration: none; } 
a:visited { color: #666666;	text-decoration: none; } 
a:hover, a:active { color: #999999;	text-decoration: none; }
#wrapper { width: 100%; margin: 0px auto; }

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

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

#nav-wrapper { width: 100%; background: url(../images/bg-nav.png) repeat-x; height: 71px; margin: 0px auto; }
#nav { 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 { margin: 0 48px 0 0; padding: 0px 0px 0px 57px; float: left; }
#nav ul li a span { height: 20px; border-bottom: thin solid #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 28px; font-weight: bold; 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: 22px; 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; }

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

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

/*  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-family: Arial, Helvetica, san-serif; 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; text-align: justify; }
.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; }

#content-wrapper { background: #fff; width: 320px; 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 p a, #content-interior p a:link, #content-interior p a:visited { color: #333333; text-decoration: underline; }
#content-interior p a:hover { color: #111111; }

.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:320px; }
.content-left h3 { font:17px Georgia, Times New Roman, Times, serif; color:#555555; margin: 25px 0px 5px 30px; padding:0px 0px 5px 0px; border-bottom:thin solid #e8e8e8; }
.content-left p { margin:5px 0px 5px 55px; }

.contact-right { float:right; width:225px; margin: 25px 30px 0px 0px; background:#eeeeee; border:5px solid #cccccc; }
.contact-right h2 { margin:15px 15px 10px 15px; font: 22px Georgia, Times New Roman, Times, serif; color: #333; }
.contact-right p { margin:5px 0px 5px 30px; 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; }

.contact-right .newsletter { background:url(../images/icon-newsletter.png) no-repeat left; display: block; width: 100%; height: 37px; padding:10px 0px 0px 33px; margin: 15px 0px 0px 15px; }
.contact-right .twitter { background:url(../images/icon-twitter.png) no-repeat left; display: block; width: 100%; height: 37px; padding:10px 0px 0px 38px; margin: 0px 15px; }
.contact-right .facebook { background:url(../images/icon-facebook.png) no-repeat left; display: block; width: 100%; height: 37px; padding:10px 0px 0px 38px; margin: 0px 15px 10px 15px; }

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

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

.content-services-left { float:left; width:320px; }
.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 { margin:5px 0px 25px 40px; }

.h2-web, .h2-identity, .h2-print, .h2-consulting, .h2-programming { 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; }

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

#contact-form-interior p { 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: #333333; text-decoration: underline; }
#contact-form-interior p a:hover { color: #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; }

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

#work-wrapper { margin: 15px 30px; }
#work-wrapper h2 { 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; }

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

#home-button { position:absolute; margin: 275px 0px 0px 63px; z-index: 1000; }
#home-button a, #home-button a:link, #home-button a:visited { font: 22px Helvetica, Arial, san-serif; }
#home-button a:hover { color: #333333; text-decoration: underline; }

#rotator { display:none; }

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

/* submit button */
input[type="submit"] { cursor:pointer; border:1px solid #777; padding:5px; -moz-border-radius:4px; background:#eee; width: 200px; height:75px; }
input[type="submit"]:hover, input[type="submit"]:focus { border-color:#333; background:#ddd; }
input[type="submit"]:active { font-weight: bold; }

/*  FOOTER
-------------------------------------------------------------- */
 
#footer { width: 900px; margin: 0 auto; height: 125px; }
#footer-logo { width: 145px; height: 47px; background: url(../images/logo-footer.png) no-repeat top center; float: left; }
#footer-nav { float: right; font: 24px "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; }
#footer-nav a:hover { color: #ffffff; text-decoration: underline; }

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

#contact { display:none; }

/*  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;}

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