/** General **/
h1, h2, h3, h4, h5, h6 { font-weight: 100; }
a, a:active, a:visited 
{ 
color: #11aadc;
}

a 
{
border-bottom: none;
text-decoration: none;
}

a:hover 
{ 
color: #00CCFF;
text-decoration: none;
border-bottom: none;
}

.dark-bg a 
{
color: #00CCFF;
border-bottom: none;
}

.dark-bg a:hover 
{
color: #00CCFF;
border-bottom: 1px solid;
}

.light-bg a 
{
color: #025a77;
border-bottom: none;
}

.light-bg a:hover 
{
color: #016181;
border-bottom: 1px solid;
}

/** color **/
/*

*/

/** Structure **/

#branding 
{ 
 position:fixed; 
 width: 1050px;
 z-index:9999; 
}

#page-bg 
{ 
 position:fixed; 
 top:0; 
 left:0;
 z-index:-1; 
}

#container 
{
background-color: #F2F2F2;
background-image:url(/img/dark-page-bg.png);
}

#inner-container
{
width: 1050px;
min-height: 600px; height: auto !important; height: 600px;
margin: 0px auto;
overflow: hidden;
border-left: 1px solid #444;
border-right: 1px solid #444;
}

/** Header and Nav **/
#branding
{
height: 50px;
margin: 6px auto 0;
color: #FFF;
background-color: #000;
}

#branding h1
{
background: url(/img/slymark6s.png) no-repeat 0 3px;
float: left; 
font-family: "museo-sans-rounded-1","museo-sans-rounded-2", sans-serif;
font-size: 28px;
font-weight: 300;
letter-spacing: 3px;
margin: 9px 0 0 15px;
padding-left: 45px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}

#branding #mark, #mark
{
display: none;
background-color: #FFF;
color: #42E6FF;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
line-height: 2em;
box-shadow: #888 0px 0px 2px 0px;
vertical-align: center;
cursor: pointer;
float: left;
height: 2em;
width: 2em;
text-align:center;
margin:12px auto;
font-family: "museo-sans-rounded-1","museo-sans-rounded-2", sans-serif;
font-size: 12px;
letter-spacing: 0;
font-weight: 300;
-webkit-transition: background-color .25s linear;
-moz-transition: background-color .25s linear;
-o-transition: background-color .25s linear;
-transition: background-color .25s linear;

-webkit-transition: color .25s linear;
-moz-transition: color .25s linear;
-o-transition: color .25s linear;
-transition: color .25s linear;
}

#branding #mark:hover
{
background-color: #42E6FF;
color: #fff; 
}

#branding ul#nav 
{
float: right;
margin: 0 35px 0 0;
padding: 16px 0 0 0;
}


#branding a, #branding a:active, #branding a:visited { color: #FFF; text-decoration:none; }
#branding ul#nav a:hover { color: #000; background-color:#FFF;}
#branding #nav li
{
font-size: 16px;
display: inline;
float: left;
margin: 0 0 0 15px;
padding: 0 0 0 17px;
font-family: "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100;
}


/** Pages **/
/** Intro section **/
#intro
{
height: 650px;
margin: 0 auto;
padding-top: 150px;
background-color: #FFF;
}

#intro h2
{
text-align: center;
font-size: 36px;
font-family: "museo-sans-1","museo-sans-2", sans-serif;
text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
}

#intro h2 i 
{
  color: #FFF;
  background-color: #11aadc;
  padding: 0 5px 0 5px;
}

#intro p
{
padding-top: 10px;
margin: 0 auto;
}

#intro p 
{
font-size: 20px;
line-height: 1.5em;
font-family: "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100;
text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
color: #000;
}

#intro #services-list
{
  margin: 0 auto;
  clear: left;
}

#intro #services-list p
{
 margin: 0 auto;
 text-align: center; 
}

#intro #services-list ul
{
margin: 15px 0 0 25px;
}

#intro #services-list li
{
list-style:none;
padding: 0;
margin: 0;
}

#intro #services-list li a
{
 text-decoration:none;
}

#intro input
{
  margin:  0 5px 8px 0 ;
  padding: 0;
}

/*
 * Service descriptions
 */
 
.content
{
 padding-left: 100px;
 width:500px;
 overflow: hidden;
}

.service-desc
{
float: none;
border-top: 1px solid #DCDCDC;
margin: 0 auto;
padding: 30px 50px 70px 50px;
font-size: 16px;
line-height: 1.5em;
font-family: "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100;
text-shadow: 0px 1px rgba(0, 0, 0, 0.2); 
color: #333;
background-color: #FFF;
overflow: hidden;
height: 600px;
padding-left: 100px;
}



#more-customers, #more-customers h2, #more-customers h3, 
#better-app, #better-app h2, #better-app h3,
#who, #who h2, #who h3
{
  background-color: #000;
  color: #FFF;

}

#contact, #contact h2, #contact h3
{
  padding-left: 100px;
  background-color: #FFF;
  color: #000;
}

#contact
{
 border-top: 1px solid #BFBFBF;
 border-bottom: 1px solid #666;
}

.service-desc h2, .service-desc h3
{
  padding-left: 100px;
}

.service-desc h2
{
font-size: 44px;
margin: 25px 0 0 0;
padding-top: 25px;
font-weight: 700;
color: #000; 
text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}


.service-desc h3
{
font-size: 18px;
margin: 5px 0 5px 0;
padding-top: 5px;
font-weight: 700;
color: #000;
}
                    
.service-desc p, .company-desc p
{
padding-top: 1em;
}

.service-desc ul
{
padding-top: 10px;
}

/*
 * company description
 */ 
.company-desc
{
font-size: 16px;
line-height: 1.5em;
font-family: "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100;
text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
color: #000;
border-top: 1px solid #777;
float: none;
width: 950px;
margin: 0 auto;
padding: 30px 50px 70px 100px;
background-color: #FFF;
}

.company-desc h2
{
font-size: 44px;
margin: 25px 0 0 0;
padding: 25px 0;
padding-left: 100px;
font-weight: 700;
color: #000; 
text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

.company-desc h3
{
font-size: 18px;
margin: 5px 0 5px 0;
padding: 5px 0 0 0;
font-weight: 700;
color: #666;
}


#about
{
 height: 600px;
}

#about ul
{
padding-top: 1em;
}

#about li
{
padding-bottom: .6em;
}

#unexpected
{
 height: 300px;
}         

#who
{
 height: 600px;
}

#contact
{
 height: 600px;
}

#contact p
{
padding:0;
margin:0;
}

#contact #more-customers-note, #more-traffic-note, 
#better-app-note, #better-tools-note
{
 display:none;
}

/*
 * contact form
 */  
#selected-services-list  
{
padding: 15px 0 0 0;
width: 500px;
overflow: hidden;
}

#selected-services-list p, #selected-services-list li 
{ 
font-size: 36px;
-font-weight: bold;
font-weight: 300;
line-height: 1.1em;
font-family: "reenie-beanie-1","reenie-beanie-2", sans-serif;
text-shadow: 1px 1px rgba(0, 0, 20, 0.2);
color: #229;
}

#selected-services-list li 
{
list-style: none;
}

#selected-services-list a
{
text-decoration: none;
}

#selected-services-list ul
{
padding: 0 0 0 20px;
margin:0;
 
}

form#note-form
{
padding-bottom: 20px;
}

form#note-form p
{ 
position:relative;
width: 400px; 
}

form#note-form label  
{ 
position:absolute; 
top:0; 
left:0;
display: block;
color: #666;
} 

#selected-services-list input[type=checkbox]
{
  display:none;
}

#selected-services-list input[type="text"]
{
  border: none;
  border-bottom: 2px solid #33A;
  background: transparent;
  margin:  10px 0 30px;
  padding: 0;
  color: #666;
  width: 900px;
  font-weight: 100;
  font-family: "reenie-beanie-1","reenie-beanie-2", serif;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  display: block;
}

.required
{
background-color: red;
}

.email.error
{
background-color: #AFA !important;
}


/*
 * Footer
 */
  
#footer
{
height: 600px;
padding:0.5em 0 0 0;
background-color: #444; 
color: #888;
font-family: "museo-sans-rounded-1","museo-sans-rounded-2", sans-serif;
font-size: 18px;
font-weight: 100;
letter-spacing: 3px;

}

#footer .content 
{
 width: 100%;
}

#footer p
{
padding-left: 100px
}

/*
 * checklist styles
 */
.checklist 
{
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

ul.checklist 
{
	height: 165px;
	margin: 0 auto;
	padding-top: 20px;
	width: 660px;
	
}
/* 
   170x2 = 340
   105x3 = 415
   755 
*/ 

.checklist li 
{
	float: left;
	margin-right: 172px;
	width: 105px;
	height: 150px;
	position: relative;
	font: normal 11px "Helvetica", "Arial", sans-serif;
	text-indent: -9999px;
}

.checklist li:last-child
{
 margin-right:0;
}
 
/** For IE 7,8 **/
.checklist li.last-child
{
 margin-right:0;
}


li#more-customers-btn 
{
	background: url(/img/checkboxbg-slide.png) no-repeat 0 0;
}

li#more-customers-btn.selected
{
	background-position: -105px 0;
}

li#more-traffic-btn 
{
	background: url(/img/checkboxbg-slide.png) no-repeat -210px 0;
}

li#more-traffic-btn.selected
{
	background-position: -315px 0;
}


li#better-app-btn 
{
	background: url(/img/checkboxbg-slide.png) no-repeat -420px 0;
}

li#better-app-btn.selected
{
	background-position: -525px 0;
}

li#better-tools-btn 
{
	background: url(/img/checkboxbg-slide.png) no-repeat -630px 0;
}

li#better-tools-btn.selected
{
	background-position: -735px 0;
}

.checklist li.selected 
{
	background-position: -105px 0;
}

.checklist li.selected .checkbox-select 
{
	display: none;
}

.checkbox-select 
{
	display: block;
	float: left;
	position: absolute;
	top: 96px;
	left: 10px;
	width: 85px;
	height: 50px;
	text-indent: -9999px;
}

.checklist li input 
{
	display: none;	
}



a.checkbox-deselect 
{
	display: none;
	color: #F00;
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	top: 96px;
	right: 10px;
	width: 85px;
	height: 50px;
	text-indent: -9999px;
}

.checklist li.selected a.checkbox-deselect 
{
	display: block;
}

.checklist li label a
{
	display: block;
	text-align: center;
	padding: 8px;
  position: absolute;
	top: 0px;
	right: 0px;
	width: 90px;
	height: 50px;
}

.checklist a
{
  text-decoration: none;

  border: none;
}
.checklist a:hover
{
  border-bottom: none;
}
/*
 * end checklist styles
 */
 
#mail-sent-msg  p
{
 padding-top: 23px; 
 height: 50px;
 background-color: #F2F2F2;
 border-top: 1px solid #DDD;
 border-bottom: 1px solid #DDD; 
 text-align: center;
 font: normal 16px "Helvetica", "Arial", sans-serif;
}
    
#send-note
{
margin: 0;
width: 150px;
padding-bottom: 10px;
}

#change-note
{
margin: 0;
width: 264px;
}