/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html,body{height:100%;display:block;}
body
{
	/*font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
	font-family: 'Questrial', sans-serif;
	font-size:18px;
	line-height:1.5em;
	display:block;
	background-attachment:fixed;
	position:relative;
	height:100%;
	width:100%;
	padding:0;
	margin-top:0;
	margin:auto;
	background-image:url(../images/background.jpg);
	background-position:center center;
	background-repeat:no-repeat;
  /* fallback */
  background-color:rgb(0,173,238);
  
  /* Safari 4-5, Chrome 1-9; */
  background: -webkit-gradient(radial, center center, 0, center center, 500,  from(rgb(255,255,255)), to(rgb(0,173,238)));
  
  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(center center, circle, rgb(255,255,255),rgb(0,173,238));
  
  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(center center, circle,rgb(255,255,255), rgb(0,173,238));
  
  /* IE 10 */
  background: -ms-radial-gradient(center center, circle, rgb(255,255,255), rgb(0,173,238));
  
  /* Opera cannot do radial gradients yet */
}
h1,h2,h3,h4,h5
{
	color:rgb(146,39,143);
	text-transform:uppercase;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
h5
{
	color:rgb(0,0,0);
        display:block;
        margin-bottom:10px;
}
p {font-size:0.9em}
p.center {text-align:center; margin:inherit auto}
a:link
{
	color:rgb(115,193,103);
	text-decoration:none;
}
a:hover
{
	color:rgb(187,129,59);
}
a.green strong {color:rgb(115,193,103);padding-bottom:2px;
font-weight:bold;line-height:2em;border-bottom:1px solid rgb(115,193,103);
}

a.green:hover strong {color:#5b5b5b; border-botton:1px solid #5b5b5b;}
#mainContent
{
	background-color:rgb(255,255,255);
	position:relative;
	z-index:auto;
	-moz-box-shadow:    -4px 0px 28px 0 #333;
 	-webkit-box-shadow: -4px 0px 28px 0 #333;
  	box-shadow:         -4px 0px 28px 0 #333;
	width:700px;
	padding-left:20px;
	padding-right:20px;
	/*padding:20px;*/
	padding-top:40px;
	/*max-width:700px;
	margin-right:20px;*/
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

	#mainContent .four.columns
	{
		max-width:200px;
	}
	#mainContent .five.columns
	{
		max-width:260px;
	}
	#mainContent .six.columns
	{
		max-width:310px;
	}
	#mainContent .seven.columns
	{
		max-width:370px;
	}
	#mainContent .eight.columns
	{
		max-width:420px;
	}
	
	#mainContent .nine.columns
	{
		max-width:480px;
	}
	
	#mainContent .thirteen.columns
	{
		max-width:700px;
	}
	#mainContent .screenshot
	{
		padding-bottom:25px;
	}
  #sticker {margin-left:-10px}   
    @media screen and (max-width:767px) {
 #sticker {display:none; padding-top:0; }   
}

#mainHeader
{
	position:relative;
	background-color:rgb(88,89,91);
	height:66px !important;
	margin-top:50px;
	/*margin-left:25px;
	max-width:925px;*/
	overflow:visible;
	-moz-box-shadow:    4px 4px 8px 0 #333;
 	-webkit-box-shadow: 4px 4px 8px 0 #333;
  	box-shadow:         4px 4px 8px 0 #333;
	z-index:10;
}
	#mainHeader #logo
	{
		background-image:url(../images/logo_mainHeader.png);
		display:block;
		margin-top:-40px;
		margin-left:-25px;
		max-width:165px;
		height:152px;
		text-indent:-10000px;
		overflow:hidden;
		-moz-background-size:100% 100%; /* Old Firefox */
		background-size:100%;
		background-repeat:no-repeat
	}
	#mainHeader nav #menuLInk
	{
		display:none;
	}
	#mainHeader nav ul
	{
		display:block;
		
	}
	#mainHeader nav ul li
	{
		float:left;
		margin:0;
		padding:0 10px 0 10px;
		text-align:left;
	}
	/*#mainHeader nav ul li:first-child
	{
		text-align:left;
	}*/
	#mainHeader nav ul li:last-child
	{
		padding-right:0;
	}
	#mainHeader nav a
	{
		color:rgb(255,255,255);
		padding:25px;
		padding-right:15px;
		padding-left:35px;
		display:inline-block;
		text-shadow:1px 3px 2px #000;
		text-decoration:none;
		font-weight:bold;
		font-size:14px;
	}
	#mainHeader nav a:hover, #mainHeader nav li:hover > a
	{
		background-color:rgb(51,51,51);
	}
    
    #header-break {display:none; height:175px; width:1px;} 
    @media screen and (min-width:768px) {
   #header-break {display:block}     
    }
    
    
    #navigation li {position:relative}
    #navigation li ul a {background-color:rgb(115,193,103);}
    
     /* CSS TOOLTIP */
     
  a.tooltip {display:block}
    a.tooltip strong {line-height:30px;}
    a.tooltip > span 
    {
	    width:190px;
	    padding: 10px 20px;
	    margin-top: -10px;
	    margin-left: -50px;
	    opacity: 0;
	    visibility: hidden;
	    z-index: 10;	   
	    position: absolute;

	    font-family: Arial;
	    font-size: 12px;
	    font-style: normal;  
        	    
	    -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -o-border-radius: 3px;
	    border-radius: 3px;
	    
	    
        -webkit-box-shadow: 2px 2px 2px #999;
	    -moz-box-shadow: 2px 2px 2px #999;		
	    box-shadow: 2px 2px 2px #999;	    
	    
	    -webkit-transition-property:opacity;
	    -webkit-transition-duration:0.4s;  
	    -webkit-transition-timing-function: ease-in-out;
	
	    -moz-transition-property:opacity;
	    -moz-transition-duration:0.4s;  
	    -moz-transition-timing-function: ease-in-out;
	
	    -o-transition-property:opacity;
	    -o-transition-duration:0.4s;  
	    -o-transition-timing-function: ease-in-out;
	
	    transition-property:opacity;
	    transition-duration:0.4s;  
	    transition-timing-function: ease-in-out;
    }
    a.tooltip > span img {width:100%;}
@media screen and (min-width:320px) {        
	a.tooltip:hover > span
	{
		opacity: 1;
		text-decoration:none;
		visibility: visible;
		overflow: visible;
		margin-top:-210px;
		display: none;
		margin-left: -110px;		
	}
}
@media screen and (min-width:768px) {
    a.tooltip:hover > span
	{display:inline}
}
@media screen and (min-width:960px) {
    a.tooltip:hover > span
	{margin-left:-90px}
}
	a.tooltip span b {
    
		width: 15px;
		height: 15px;
		margin-left: 20px;
		margin-top: 155px;
			
		display: block;
		position: absolute;

		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
			
		-webkit-box-shadow: inset -1px 1px 0 #fff;
		-moz-box-shadow: inset 0 1px 0 #fff;
		-o-box-shadow: inset 0 1px 0 #fff;
		box-shadow: inset 0 1px 0 #fff;
			
		display: none\0/;
		*display: none;
	}
    
a.tooltip > span {
	color: #000000; 

	background: #FFFFFF;
	background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 );
	    
	border: 1px solid #000;	     
}    
	  
a.tooltip span b {
	background: #FFFFFF;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
}    


.arrow_box {
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 12px;
	margin-left: -12px;
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 13px;
	margin-left: -13px;
}




    
   @media screen and (min-width:768px) {
        
    #navigation li ul {display:block;position:absolute; top:64px; left:0; width:250px;}
    #navigation li ul a {width:200px; border-bottom:1px solid rgb(100,100,100);border-top:1px solid transparent; margin-left:-10px; text-shadow:1px 2px 1px #5b5b5b; }
    }
    /*

                      generated content icons (can also use image sprite)
      
                  
*/
 
[class^="icon-"]:before,
[class*="icon-"]:before,
[class^="icon-"]:after,
[class*="icon-"]:after
{
        display: inline-block;
        vertical-align: middle;
        content: "";
        text-decoration: inherit;
}
[class^="icon-"]:before,
[class*="icon-"]:before
{
        margin-right: 2px;
}
[class^="icon-"]:after,
[class*="icon-"]:after
{
        margin-left: 7px;
}
.icon-arrow:after, .icon-arrow2:after {width:11px; height:11px; background:url(../images/menuArrow.png) 0 -13px no-repeat;}
.icon-arrow.open:after, .icon-arrow2.open:after {height:8px; background:url(../images/menuArrow.png) 0 -52px no-repeat;}





	#mainFooter
	{
		margin-top:20px;
                margin-bottom:20px;
		text-align:left;
		font-size:14px;
	}
		#mainFooter #rundLogo
		{
			font-family:Arial, Helvetica, sans-serif;
			font-weight:bold;
			color:rgb(244,126,11);
			display:inline;
			font-size:15px;	
		}
		#mainFooter #rundLogo #rund
		{
			color:#999999;
		}
		#mainFooter #rundDesign
		{
			display:inline-block;
		}
        #mainFooter a, #mainFooter a:visited {color:#5b5b5b;}
#mainFooter a:hover, #mainFooter a:active {color:rgb(244,126,11); text-decoration:underline;}
	label
	{
		display:inline-block;
	}
	label.shortLength
	{
		width:40px;
	}
	label.midLength
	{
		width:80px;
	}
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea
	{
		display:inline-block;
		width:300px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		padding:2px 15px;
	}
	input.error,
	div.error
	{
		background-color:#FF9999;
		border-color:#f00;
	}
	.radioGroup label,
	.checkboxGroup label
	{
		display:block;
	}
	.caption
	{
		font-size:85%;
		line-height:normal;
	}
	.caption h4
	{
		font-size:1.2em;
		line-height:normal;
	}
	h1
	{
		font-size:2em;
		line-height:normal;
	}
	h3
	{
		font-size:1.6em;
		text-height:1.6em;
      
	}
	#mainContent .screenshot
	{
		clear:left;
	}
	#mainContent .screenshot img
	{
		width:100%;
	}
	#mainContent ul
	{
		list-style:disc;
		margin-left:2em;
	}
	
/* #Page Styles
================================================== */
.appStoreLink
{
	display:block;
	width:135px;
	height:40px;
	padding:0;
	margin:0;
      
	overflow:hidden;
	text-indent:-1000px;
	background-position:center center;
	background-repeat: no-repeat;
	background-size:100%;
	background-image:url(../images/App_Store_Badge_EN_0609.png);
}

body #mainHeader nav a
{
	background-repeat:no-repeat;
	background-position:5px center;
}
body.home a#link_home{background-image:url(../images/ui_pageDot_blue.png);}
body.getTheApp a#link_getTheApp{background-image:url(../images/ui_pageDot_green.png);}
body.resources a#link_resources{background-image:url(../images/ui_pageDot_brown.png);}
body.contact a#link_contact{background-image:url(../images/ui_pageDot_purple.png);}
body.howitworks a#link_howItWorks{background-image:url(../images/ui_pageDot_orange.png);}

#mainHeader .socialLinks
{
	position:absolute;
	top:-45px;
	right:40px;
}

#mainHeader #ticker-div {
	position:absolute;
	top:-52px;
	left:180px;	
	height: 47px;
	width: 500px;
	display: none;
}

ul#ticker {height:47px;overflow:hidden;list-style-type:none;}

ul#ticker li {
	height:47px;
	line-height: 47px;	
	}
	
ul#ticker li a{
	font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
	font-size: 14px;
	color: rgb(0, 121, 193);
	line-height: 47px;	
	}	

.socialLinks a.socialLink
{
	display:inline-block;
	width:40px;
	height:40px;
	text-indent:-10000px;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100%;
}
 a.socialLink#blogLink
{
	background-image:url(../images/graphics_icon_social_Blog.png)
}
 a.socialLink#facebookLink
{
	background-image:url(../images/graphics_icon_social_Facebook.png)
}
a.socialLink#twitterLink
{
	background-image:url(../images/graphics_icon_social_Twitter.png)
}
	a.socialLink#pinterestLink
{
	background-image:url(../images/graphics_icon_social_Pinterest.png)
}

	a.socialLink#rssLink
{
	background-image:url(../images/graphics_icon_social_RSS.png)
}

.blue
{
	color:rgb(0,121,193);
}
.brown
{
	color:rgb(187,129,59);
}
.green
{
	color:rgb(115,193,103);
}
.orange
{
	color:rgb(251,177,87);
}
div.screenshots
{
	padding-left:240px;
}
h3#mainTagline
{
	/*width:346px;
	display:inline-block;*/
	min-height:141px;
	max-width:346px;
	background:url(../images/loveAtFirstWrite.png);
	background-size:100%;
	background-position:top right;
	vertical-align:top;
	background-repeat:no-repeat;
	text-indent:-10000px;
	overflow:hidden;
}
#mainScreenshot
{
	background-image:url(../images/screenshot_01.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:100%;
	max-width:347px;
	height:299px;
}
input#contactCity
{
	width:160px;
}
input#contactState
{
	width:25px;
}
input#contactZip
{
	width:60px;
}
input[type="text"].other
{
	display:block;
	margin-left:20px;
}
section#whoWeAre #authorAndHistory
{
	padding-left:230px;	
}
section#whoWeAre #triciaHeadshot
{
	position:absolute;
	margin-left:-230px;
	margin-top:-2em;
}

div#writeThisWayImage,
div#pictureIsWorthImage,
div#sammyInTheSky
{
	min-height:243px;
	max-width:300px;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:100%;
}
div#writeThisWayImage
{
	min	-height:180px;
}
div#segueImage
{
	width:100%;
	max-width:552px;
	background-image:url(../images/graphics_img_puppySegue.png);
	background-position:top center;
	background-size:100%;
	min-height:234px;
	background-repeat:no-repeat;
}
div#writeThisWayImage{background-image:url(../images/graphics_img_joeyLettersScreen.png);}
div#pictureIsWorthImage{background-image:url(../images/graphics_img_cloudLettersStart.png);}
div#sammyInTheSky{background-image:url(../images/graphics_img_SammyLearning.png);}
#goodPlaceoStartHeadline
{
	background-image:url(../images/graphics_img_puppyHead.png);
	padding-left:144px;
	padding-top:40px;
	background-repeat:no-repeat;
	background-position:top left;
}
#fullVersionDescription
{
	position:relative;
}
div#homeScreenshot,
div#liteScreenshot
{
	max-width:300px;
	min-height:232px;
	background-repeat: no-repeat;
	margin:auto;
	background-size:90%;
	background-position:center center;
}
div#homeScreenshot
{
	background-image:url(../images/screenshot_home_300.jpg);
}
div#liteScreenshot
{
	background-image:url(../images/screenshot_homeLite_300.jpg);
}
.cost
{
	display:block;
	position:absolute;
	width:80px;
	height:80px;
	top:0;
	right:0;
	text-indent:-1000px;
	overflow:hidden;
}
.copy-full {padding:25px 5% 0;}
.copy-full h4 {margin-bottom:10px}
#startDotCost
{
	background-image:url(../images/graphic_violator_499.png);
}
#liteCost
{
	background-image:url(../images/graphic_violator_free.png);
}
#topContent
{
	padding-bottom:30px;
}
blockquote{
	border-left:none;}
/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		#mainContent
		{
			margin:0;
			width:564px;
			/*width:708px;
			max-width:708px;*/
			
		}
		#mainContent .four.columns
		{
			max-width:162px;
		}
		#mainContent .five.columns
		{
			max-width:200px;
		}
		#mainContent .six.columns
		{
			max-width:238px;
		}
		#mainContent .seven.columns
		{
			max-width:286px;
		}
		#mainContent .eight.columns
		{
			max-width:344px;
		}
		#mainContent .nine.columns
		{
			max-width:382px;
		}
		#mainContent .ten.columns
		{
			max-width:420px;
		}
		#mainContent .eleven.columns
		{
			max-width:458px;
		}
		#mainContent .twelve.columns
		{
			max-width:496px;
		}
		#mainContent .thirteen.columns
		{
			max-width:564px;
		}
		#mainHeader
		{
			/*max-width:728px;*/
			margin-left:0;
			margin-right:0;
			-moz-box-shadow:    -4px 0px 28px 0 #333;
			-webkit-box-shadow: -4px 0px 28px 0 #333;
			box-shadow:         -4px 0px 28px 0 #333;
		}
			#mainHeader #logo
			{
				margin-top:-30px;
				margin-left:-25px;
			}
			#mainHeader nav ul li
		{
			padding:0 5px 0 5px;
		}#mainHeader nav ul li a
		{
			padding:25px 15px;
		}
		
body.home a#link_home,
body.getTheApp a#link_getTheApp,
body.resources a#link_resources,
body.contact a#link_contact,
body.howitworks a#link_howItWorks{background-image:none;}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
			
		}
		
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
        #mainHeader .socialLinks
{
	position:absolute;
	top:-45px;
	right:10px;
}
		#mainContent
			{
			width:380px;
			}
			#mainContent .one.column,
			#mainContent .two.columns,
			#mainContent .three.columns,
			#mainContent .four.columns,
			#mainContent .five.columns,
			#mainContent .six.columns,
			#mainContent .seven.columns,
			#mainContent .eight.columns,
			#mainContent .nine.columns,
			#mainContent .ten.columns,
			#mainContent .eleven.columns,
			#mainContent .twelve.columns,
			#mainContent .thirteen.columns
			{
			max-width:380px;
			}
			#mainContent div#writeThisWayImage,
			#mainContent div#pictureIsWorthImage,
			#mainContent div#sammyInTheSky
			{
			  max-width:300px;
			}
			#mainHeader
			{
				margin:0;
                                margin-top:45px;
				height:auto;
			}
			#mainHeader #logo
			{
				margin-top:0;
				margin-left:0;
				width:40px;
				position:absolute;
			}
		#mainHeader nav
		{
			position:relative;
			top:0;
			left:0;
		}
		#mainHeader nav ul
		{
			display:none;
			margin:0;
			background-color:rgb(51,51,51);
		}
		
		#mainHeader nav #menuLInk
		{
			display:block;
			text-align:right;
			padding-right:40px;
			background-repeat: no-repeat;
			background-position:390px 2px;
			background-image:url(../images/menuArrow.png)
		}
		#mainHeader nav #menuLInk.open
		{
			
			background-position:390px -35px;
		}
		/*#mainHeader nav:hover ul
		{
			display:block;
			background-color:rgb(66,66,66);	
		}*/
		#mainHeader #navigation li
		{
			display:block;
			float:none;
			width:auto;
			text-align:left;
			padding:5px;
			border-top:solid 1px rgb(100,100,100);
		}
        #mainHeader #navigation li ul li {
               padding:0; 
        }
        
        
		
		#mainHeader #navigation li:hover
		{
			background-color:rgb(33,33,33);
		}
		#mainHeader nav a
		{
			height:20px;
			padding:10px;
			display:block;
		}

		/*Page Styles*/
		div.screenshots
		{
			padding-left:0;
			padding-bottom:208px;
		}
		#mainScreenshot
			{
				display:none;
			}
		#spacer
		{
			display:none;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#mainContent
			{
				width:380px;
			}
		#cool-mom-badge
		{
			max-width: 200px !important;
			padding-left: 90px;	
		}
		#container h2 {font-size: 24px !important;font-weight:bold !important;}
           
			
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
			 #mainHeader nav #menuLInk
		{
			
			background-position:268px 2px;
		}
		#mainHeader nav #menuLInk.open
		{
			
			background-position:268px -35px;
		}
        #mainContent
			{
				width:260px;
			}
			#mainContent .one.column,
			#mainContent .two.columns,
			#mainContent .three.columns,
			#mainContent .four.columns,
			#mainContent .five.columns,
			#mainContent .six.columns,
			#mainContent .seven.columns,
			#mainContent .eight.columns,
			#mainContent .nine.columns,
			#mainContent .ten.columns,
			#mainContent .eleven.columns,
			#mainContent .twelve.columns,
			#mainContent div#writeThisWayImage,
			#mainContent div#pictureIsWorthImage,
			#mainContent div#sammyInTheSky
			{
			max-width:260px;
			}
			
					#cool-mom-badge
		{
			max-width: 200px !important;
			padding-left: 30px;	
		}
				#container h2 {font-size: 24px !important;font-weight:bold !important;}
		h3#mainTagline
		{
			width:260px;
			height:106px;
			-moz-background-size:100% 100%; /* Old Firefox */
			background-size:100%;
		}
		input[type="text"],
		input[type="password"],
		input[type="email"],
		textarea
		{
			max-width:240px;
		}
		Input[type="text"].other
		{
			margin-left:0px;
		}
		label{display:block;}
        
    }

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/