article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

body
{
	padding: 0;
	margin: 0;	
	font-family: Helvetica, sans-serif;
    font-size: 15px;

}


.example
{
	width: 300px;
	height: 200px;
    -webkit-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;	
    overflow: hidden;
    padding: 0;
    display: block;
}

.example-label
{
	display: none;
    position: absolute;
    right: 4px;
    top: 4px;
    height: 16px;
    background: rgb(255, 255, 255); /* fallback */
    background: rgba(255, 255, 255, 0.809);
    border: none;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    font-family: AvenirNext-DemiBold, "Avenir Next", sans-serif;
    color: rgb(0, 0, 0);
    padding: 2px 5px;
    -webkit-border-radius: 3px 3px 3px 3px;
       -moz-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px;
	text-transform: uppercase;
}

ul#frontpage-examples-list li
{
	position: relative;
/*	width: 300px;*/
	height: 240px;
	overflow: hidden;
	border-top: 1px solid #e5e5e5;
/*	margin-bottom: 40px;*/
	margin-top: 0px;
	padding-top: 40px;
}

#frontpage-examples > div
{
	width: 800px;
}

ul#frontpage-examples-list
{
	width: 800px;
}

ul#frontpage-examples-list li:nth-child(1) 
{
	border-top: none;
}

ul#frontpage-examples-list li .example-info
{
/*	background-color: yellow;*/

	width: 800px;
}

.example
{
	float: left;
/*	margin-right: 20px;*/
	margin-right: 40px;
}

#htmlExample
{
	float: right;
	display: block;
	position: relative;
	margin-right: 0px;
	margin-left: 40px;
}

ul#frontpage-examples-list p
{
	line-height: 150%;
	font-size: 15px;
	font-family: "Avenir Next", sans-serif;
}

ul.features-list, ul#frontpage-examples-list, ul#examples-list, ul#screenshots-list
{
	padding: 0;
	margin: 0;
}

ul.features-list li, ul#frontpage-examples-list li, ul#examples-list li, ul#screenshots-list li
{
	list-style-type: none;
	display: block;
	float: left;
/*	margin: 0 20px 20px 0;*/
	color: rgb(128, 128, 128);
}

ul.features-list li, ul#examples-list li, ul#screenshots-list li
{
	margin: 0 20px 20px 0;
	padding: 0;
}

ul.features-list div
{
	line-height: 150%;
}

ul.features-list li, ul#examples-list li
{
	width: 172px;
}

li.last-in-line
{
	margin: 0 0 0 0 !important;
}

.documentation h1, .documentation h2
{
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    color: black;
}

.documentation h3
{
    color: black;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    font-weight: normal;
}

ul#frontpage-examples-list h3
{
	font-size: 25px;
    text-align: left;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    font-weight: normal;
    color: rgb(85, 85, 85);
	text-transform: uppercase;
	margin: 0px;
}

ul.features-list h3, ul#examples-list h3
{
	border: none;
	padding: 0;
	margin: 0;
	display: block;
	height: 57px;
	text-transform: uppercase;
    font-size: 18px;
    text-align: left;
    font-weight: normal;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    color: rgb(85, 85, 85);	
}

ul#examples-list h3
{
	height: auto;
}

ul.features-list div.featureImg, ul#examples-list div.exampleImg
{
	width: 172px;
	height: 172px;	
	margin-bottom: 23px;
	border: 1px solid #999;
    background-repeat: repeat;
    background-position: 0px 0px;
/*	-webkit-box-shadow: -0.5px 3px 6px 0 rgba(0, 0, 0, 0.183) inset;
	   -moz-box-shadow: -0.5px 3px 6px 0 rgba(0, 0, 0, 0.183) inset;
	        box-shadow: -0.5px 3px 6px 0 rgba(0, 0, 0, 0.183) inset;*/
}

a:hover div.exampleImg
{
	opacity: 0.8;	
}

p#warning
{
	display: none;
}


#featureTools { background-image: url(../images/featureTools.png); }
#featureColors { background-image: url(../images/featureColors.png); }
#featureCode { background-image: url(../images/featureCode.png); }
#featureGradients { background-image: url(../images/featureGradients.png); }
#featureImport { background-image: url(../images/featureImport.png); }
#featureShadows { background-image: url(../images/featureShadows.png); }
#featureExport { background-image: url(../images/featureExport.png); }
#featureDynamics { background-image: url(../images/featureDynamics.png); }
#featureCompatibility { background-image: url(../images/featureCompatibility.png); }
#featureBooleans { background-image: url(../images/featureBooleans.png); }

div.screenshotImg
{
	width: 172px; 
	height: 108px; 
}	

#screenshot1 { background-image: url(../images/screenshot1-thumb.png); }
#screenshot2 { background-image: url(../images/screenshot2-thumb.png); }
#screenshot3 { background-image: url(../images/screenshot3-thumb.png); }
#screenshot4 { background-image: url(../images/screenshot4-thumb.png); }
#screenshot5 { background-image: url(../images/screenshot5-thumb.png); }

ul#examples-list div.exampleImg, ul.features-list div.featureImg
{
    -webkit-border-radius: 3px 3px 3px 3px;
       -moz-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px;
}

section#screenshots > div
{
	height: 100px;
	padding-bottom: 60px;
/*	padding: 20px 0;*/
}

section#screenshots
{
/*	background-color: #f8f8f8;*/
}



section#features1
{
	padding-top: 0px;
	padding-bottom: 34px;
	background-color: #f8f8f8;
	border-top: 1px solid #e5e5e5;
}

section#features2, section#examples
{
	padding-top: 20px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 20px;
}

section#testimonials
{
	padding-top: 20px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #e5e5e5;
	position: relative;
	height: 200px;
}

section#testimonials > div
{
	width: 800px;
}

section
{
	clear: both;
	width: 100%;
}

section > div
{
	margin: 0 auto;
	width: 940px;
}


header.body
{
	width: 940px;
	margin: 0 auto;
	height: 85px;
	position: relative;
}

section#banner
{
	background-color: #2B6DAB;
	height: 400px;
}


header#banner, header#small_banner
{
	width: 940px;
	padding: 0;
	margin: 0 auto;
	position: relative;
	
}

header#banner
{
	height: 310px;
}

header#small_banner
{
	height: 185px;
}

section#banner
{
	background-image: url(../images/back.jpg);
	background-position: center top;
}

header#banner div#header-rectangle
{
    position: absolute;
    left: 0px;
    width: 940px;
    top: 103px;
    height: 400px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDcwIiB5MT0iMCIgeDI9IjQ3MCIgeTI9IjE4OCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIzMi4xMDIlIiBzdG9wLWNvbG9yPSIjMmIyYjJiIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2NTYiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijk0MCIgaGVpZ2h0PSIxODgiIGZpbGw9InVybCgjZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(0, 0, 0)), color-stop(32.102%, rgb(43, 43, 43)), color-stop(100%, rgb(86, 86, 86)));
    background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:    -moz-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:     -ms-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:      -o-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:         linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#565656', GradientType=0);
    background-repeat: no-repeat;
    border: none;
    -webkit-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
}

header#small_banner h1#header-rectangle
{
    position: absolute;
    left: 0px;
    width: 919px;
    top: 88px;
    height: 61px;  
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDcwIiB5MT0iMCIgeDI9IjQ3MCIgeTI9IjE4OCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIzMi4xMDIlIiBzdG9wLWNvbG9yPSIjMmIyYjJiIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NjU2NTYiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijk0MCIgaGVpZ2h0PSIxODgiIGZpbGw9InVybCgjZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(0, 0, 0)), color-stop(32.102%, rgb(43, 43, 43)), color-stop(100%, rgb(86, 86, 86)));
    background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:    -moz-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:     -ms-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:      -o-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    background-image:         linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(43, 43, 43) 32.102%, rgb(86, 86, 86) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#565656', GradientType=0);
    background-repeat: no-repeat;
    border: none;
    -webkit-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
    text-align: left;
    color: white;
    border: none;
    font-size: 40px;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;    
    font-weight: 500;
    padding: 10px 0 0 21px;
    text-transform: uppercase;
    margin: 0;
}


/*
header#banner img#webCodeIcon
{
    
    position: absolute;
    left: -58px;
    width: 256px;
    top: 3px;
    height: 256px;
    border: none;
}*/

header img#webCodeIcon
{
    position: absolute;
    left: -8px;
    width: 64px;
    top: 10px;
    height: 64px;
    border: none;
    display: block;
    z-index: 100;
}

div#oval2
{
    position: absolute;
    left: 26px;
    width: 89px;
    top: 220px;
    height: 34px;
    background: rgb(85, 85, 85);
    border: none;
    -webkit-box-shadow: 0px 0px 47px 0 rgb(0, 0, 0);
       -moz-box-shadow: 0px 0px 47px 0 rgb(0, 0, 0);
            box-shadow: 0px 0px 47px 0 rgb(0, 0, 0);
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

section#banner h1
{
	margin: 0px;
	letter-spacing: -0.02em;
/*	margin: 0;
	padding: 6px 0 0 0;*/
    position: relative;
  /*  left: 260px;
    width: 437px;*/
    top: 70px;
/*    height: 112px;*/
    background: none;
    border: none;
    font-size: 50px;
    text-align: left;
    font-weight: 600;
    font-family: Avenir-DemiBold, "Avenir Next", sans-serif;
    color: rgb(255, 255, 255);
    text-align: center;
/*    text-transform: capitalize;*/
}

header#banner em
{
	font-style: normal;
	font-weight: 600;
	color: white;
}

#screenshots h2, #features1 h2
{
    font-size: 50px;
    text-align: center;
    font-family: AvenirNext-Regular, "Avenir Next", sans-serif;
    color: rgb(85, 85, 85);
    font-weight: normal;
/*    margin: 0px;*/
    text-transform: uppercase;
    padding-top: 20px;
    margin-bottom: 20px;
    margin-top: 0px;
}

a
{
	color: rgb(32, 88, 162)
}

header a
{
    text-decoration: none;
    color: white;
}

ul header a
{
	color: rgb(85, 85, 85);
}

section#banner h2
{
	margin-top: 80px;


    background: none;
    border: none;
    font-size: 25px;
    font-weight: 500;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    color: rgb(230, 230, 230);
    text-align: center;
}

header nav ul
{
	text-transform: uppercase;
	position: absolute;
	left: 0px;
	top: 35px;
	padding: 0;
	margin: 0;
	/*background-color: green;*/
	width: 760px;
	float: left;
	height: 30px;
}

#socialButtons
{
	width: 200px;
	height: 40px;
/*	background-color: red;*/
	position: absolute;
	right: 0px;
	top: 32px;
	height: 30px;
}

#socialButtons div.fb-like
{
	margin-left: 10px;
}

header nav ul li
{
	float: right;
	list-style-type: none;
	color: black;
	font-size: 12px;
    text-align: right;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    margin: 0 0 0 28px;
    padding: 0;
    
}

header nav ul > li:first-child 
{
	float: left;
	margin-left: 60px;
/*	position: absolute;*/
}

header nav ul li a
{
	color: rgb(85, 85, 85);
	padding-bottom: 2px;
	border: none;
}

header nav ul li a.active
{
	border-bottom: 1px solid black;
}

header nav ul li a:hover, header nav ul li a.active
{
    color: rgb(0, 0, 0);
}

a#tryButton
{
/*    position: absolute;
    right: 20px;
    top: 176px;*/
    width: 163px;
    height: 24px;
    padding: 8px 0 6px 0;
	margin: 0 12px;
}

a#buyButton
{
    position: absolute;
    right: 20px;
    top: 125px;
    width: 129px;
}

.blueButton
{
    position: absolute;
    left: 772px;
    width: 63px;
    top: 118px;
    height: 24px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMzEuNSIgeTE9IjAiIHgyPSIzMS41IiB5Mj0iNDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1OWFhZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMxNzRjYiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNDAiIGZpbGw9InVybCgjZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(89, 170, 255)), color-stop(100%, rgb(49, 116, 203)));
    background-image: -webkit-linear-gradient(top, rgb(89, 170, 255) 0%, rgb(49, 116, 203) 100%);
    background-image:    -moz-linear-gradient(top, rgb(89, 170, 255) 0%, rgb(49, 116, 203) 100%);
    background-image:     -ms-linear-gradient(top, rgb(89, 170, 255) 0%, rgb(49, 116, 203) 100%);
    background-image:      -o-linear-gradient(top, rgb(89, 170, 255) 0%, rgb(49, 116, 203) 100%);
    background-image:         linear-gradient(to bottom, rgb(89, 170, 255) 0%, rgb(49, 116, 203) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59aaff', endColorstr='#3174cb', GradientType=0);
    background-repeat: no-repeat;
    border: none;
    font-size: 17px;
    text-align: center;
    font-family: Futura-Medium, Futura, "Trebuchet MS", Arial, sans-serif;
    color: rgb(255, 255, 255);
    padding: 8px 0;
    -webkit-border-radius: 4px 4px 4px 4px;
       -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;
}

div#mail_subscribe
{
	background: rgb(237, 237, 237);
	text-align: center;
}

div#mail_subscribe form, div#mail_subscribe > div
{
	height: 300px;
}

div#mail_subscribe label
{
	color: rgb(74, 74, 74);
	padding: 70px 0 27px 0;
	width: 650px;
	font-size: 21px;
	display: block;
}

div#mail_subscribe_thanks header
{
	color: rgb(74, 74, 74);
	padding: 115px 0 27px 0;
	width: 650px;
	font-size: 21px;
	display: block;
}

div#mail_subscribe input
{
	font-size: 17px;
}

div#mail_subscribe input[type="email"], div#mail_subscribe input[type="text"] 
{
	color: rgb(74, 74, 74);
	width: 216px;
	height: 32px;
	border: 1px solid rgb(212, 212, 212);
}

div#mail_subscribe input[type="submit"]
{
	position: relative;
	top: -1px;
	line-height: 36px;
	height: 36px;
	width: 142px;
/*	border: 1px solid rgb(114, 192, 25);*/
    padding: 0 0 0 0;
}

div#mail_subscribe input[type="submit"]:hover
{
	cursor: pointer;
}

div#mail_subscribe div.error
{
	height: 18px;
	color: #c00;
	margin-top: 22px;
	position: absolute;
	display: none;
	width: 100%;
	text-align: center;
}

div#mail_subscribe hr
{
	margin-top: 60px;
	
	width: 570px;
	border-color: rgb(207, 207, 207);
	color: rgb(207, 207, 207);
	background-color: rgb(207, 207, 207);
	height: 1px;
	border: 0;
}

div#mail_subscribe .note
{
	padding: 24px 0 0 0;
	color: rgb(135, 135, 135);
}




div#footer1
{
	text-align: center;
/*	padding: 56px 56px 0 56px;*/
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #424242;
/*	height: 100px;*/
}

#footer1 a.bigButton, input.bigButton
{
	margin: 0 12px;
	text-decoration: none;
/*    border: 1px solid rgb(128, 128, 128);*/
    width: 163px;
    height: 24px;
    padding: 8px 0 6px 0;
    border: none;
    background-color: #72C019;
}

#footer1 a.bigButton:hover, input.bigButton:hover
{
	background-color: #90d146;
}


footer div#footer3
{
    background: rgb(43, 43, 43);	
    font-size: 14px;
    height: 30px;
    padding: 15px 0 0 0;
    color: #888;
    text-align: center;
}

footer div#footer3 a
{
	color: #8ad;
}

footer div#footer3 a:hover
{
	color: #cef;
}
	
.bigButton
{
    background-repeat: no-repeat;
    border: 1px solid black;
/*    -webkit-box-shadow: 0px 2.5px 0px 0 rgba(255, 255, 255, 0.412) inset;
       -moz-box-shadow: 0px 2.5px 0px 0 rgba(255, 255, 255, 0.412) inset;
            box-shadow: 0px 2.5px 0px 0 rgba(255, 255, 255, 0.412) inset;*/
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.434);
    font-size: 17px;
    text-align: center;
    font-weight: 600;
    font-family: AvenirNext-DemiBold, "Avenir Next", sans-serif;
    color: rgb(255, 255, 255);
    padding: 6px 0;
    -webkit-border-radius: 4.5px 4.5px 4.5px 4.5px;
       -moz-border-radius: 4.5px 4.5px 4.5px 4.5px;
            border-radius: 4.5px 4.5px 4.5px 4.5px;
    display: inline-block;
}

a.bigBlueButton
{
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNjcuNTAxIiB5MT0iMCIgeDI9IjY3LjUwMSIgeTI9IjM0Ij48c3RvcCBvZmZzZXQ9IjEuMDM4JSIgc3RvcC1jb2xvcj0iIzg1YzFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI1My4xNTAlIiBzdG9wLWNvbG9yPSIjNTdhNmZhIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjUzLjE1MCUiIHN0b3AtY29sb3I9IiMyOThjZjQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMxNzRjYiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTM1IiBoZWlnaHQ9IjM0IiBmaWxsPSJ1cmwoI2cpIiAvPjwvc3ZnPg==);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1.038%, rgb(133, 193, 255)), color-stop(53.150%, rgb(87, 166, 250)), color-stop(53.150%, rgb(41, 140, 244)), color-stop(100%, rgb(49, 116, 203)));
    background-image: -webkit-linear-gradient(top, rgb(133, 193, 255) 1.038%, rgb(87, 166, 250) 53.150%, rgb(41, 140, 244) 53.150%, rgb(49, 116, 203) 100%);
    background-image:    -moz-linear-gradient(top, rgb(133, 193, 255) 1.038%, rgb(87, 166, 250) 53.150%, rgb(41, 140, 244) 53.150%, rgb(49, 116, 203) 100%);
    background-image:     -ms-linear-gradient(top, rgb(133, 193, 255) 1.038%, rgb(87, 166, 250) 53.150%, rgb(41, 140, 244) 53.150%, rgb(49, 116, 203) 100%);
    background-image:      -o-linear-gradient(top, rgb(133, 193, 255) 1.038%, rgb(87, 166, 250) 53.150%, rgb(41, 140, 244) 53.150%, rgb(49, 116, 203) 100%);
    background-image:         linear-gradient(to bottom, rgb(133, 193, 255) 1.038%, rgb(87, 166, 250) 53.150%, rgb(41, 140, 244) 53.150%, rgb(49, 116, 203) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#85c1ff', endColorstr='#3174cb', GradientType=0);
}

.bigGreenButton
{
/*    position: absolute;
    left: 40px;
    top: 40px;
    width: 159px;
    height: 23px;*/
    background: rgb(0, 0, 0); /* fallback */
    background: rgba(0, 0, 0, 0.271);
    border: 1px solid rgb(255, 255, 255);
/*    font-size: 17.5px;
    text-align: center;
    font-weight: bold;
    font-family: AvenirNext-DemiBold, "Avenir Next", sans-serif;*/
    color: rgb(255, 255, 255);

    -webkit-border-radius: 5.5px 5.5px 5.5px 5.5px;
       -moz-border-radius: 5.5px 5.5px 5.5px 5.5px;
            border-radius: 5.5px 5.5px 5.5px 5.5px;
            
    text-decoration: none;
            
/*
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNjcuNSIgeTE9IjAiIHgyPSI2Ny41IiB5Mj0iMzQiPjxzdG9wIG9mZnNldD0iMS4wMzglIiBzdG9wLWNvbG9yPSIjYmFiYWJhIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjUzLjE1MCUiIHN0b3AtY29sb3I9IiNhZmFmYWYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNTMuMTUwJSIgc3RvcC1jb2xvcj0iI2EzYTNhMyIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOTQ5NDk0IiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMzUiIGhlaWdodD0iMzQiIGZpbGw9InVybCgjZykiIC8+PC9zdmc+);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1.038%, rgb(186, 186, 186)), color-stop(53.150%, rgb(175, 175, 175)), color-stop(53.150%, rgb(163, 163, 163)), color-stop(100%, rgb(148, 148, 148)));
    background-image: -webkit-linear-gradient(top, rgb(186, 186, 186) 1.038%, rgb(175, 175, 175) 53.150%, rgb(163, 163, 163) 53.150%, rgb(148, 148, 148) 100%);
    background-image:    -moz-linear-gradient(top, rgb(186, 186, 186) 1.038%, rgb(175, 175, 175) 53.150%, rgb(163, 163, 163) 53.150%, rgb(148, 148, 148) 100%);
    background-image:     -ms-linear-gradient(top, rgb(186, 186, 186) 1.038%, rgb(175, 175, 175) 53.150%, rgb(163, 163, 163) 53.150%, rgb(148, 148, 148) 100%);
    background-image:      -o-linear-gradient(top, rgb(186, 186, 186) 1.038%, rgb(175, 175, 175) 53.150%, rgb(163, 163, 163) 53.150%, rgb(148, 148, 148) 100%);
    background-image:         linear-gradient(to bottom, rgb(186, 186, 186) 1.038%, rgb(175, 175, 175) 53.150%, rgb(163, 163, 163) 53.150%, rgb(148, 148, 148) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#949494', GradientType=0);*/
}

a.bigBlueButton:hover
{
    background: rgb(0, 0, 0); /* fallback */
    background: rgba(0, 0, 0, 0.671);
    
}

.bigGreenButton:hover
{
    background: rgb(0, 0, 0); /* fallback */
    background: rgba(0, 0, 0, 0.671);
}


#appStoreButton
{
    background-repeat: no-repeat;
    background-image: url(../images/appStore.svg);
	text-decoration: none;

	margin: 0 12px;
    width: 165px;
	height: 40px;
    display: inline-block;
    vertical-align: bottom;
}

a#tryButton
{
/*    position: absolute;
    right: 20px;
    top: 176px;*/
    width: 163px;
    height: 24px;
    padding: 8px 0 6px 0;
	margin: 0 12px;
}

div.documentation
{
	color: #555;
	line-height: 150%; 
}

div.documentation img
{
	display: block;
	margin: 8px auto;
}


div.documentation nav
{
	display: block;
	float: left;
    font-family: AvenirNext-Medium, "Avenir Next", sans-serif;
    text-transform: uppercase;
    background-color: rgb(248, 248, 248);
        -webkit-border-radius: 5px 5px 5px 5px;
       -moz-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;	

}

div.documentation nav ul
{
	
	width: 260px;
	padding: 8px 20px;
	margin: 10px 0 0 0;
	text-align: left;
}

div.documentation nav li
{
	list-style-type: none;
	margin-bottom: 8px;
	margin-left: 0;
}

div.documentation nav li a:hover
{
	text-decoration: none;
}

div.documentation nav li.active
{
	font-weight: bold;
}

div.documentation div
{
	padding-left: 320px;
}

img.retinaVersion
{
	display: none !important; 
}

.window_container
{
	min-height: 750px; 
	position: absolute; 
	top: 0px; 
	width: 100%; 
	height: 100%;
	z-index: -1;
}

.window_bottom
{
	position: absolute; 
	bottom: 0px; 
	width: 100%;
}



.twitter-share-button
{
	position: absolute;
	left: 791px;
	top: 237px;
}



section#support a:hover
{
	text-decoration: none;
}


section#support div.text
{
	width: 480px;
	margin: 30px auto;
    background-color: rgb(248, 248, 248);
    border-radius: 5px 5px 5px 5px;
	color: rgb(85, 85, 85);
    line-height: 150%;
    padding: 6px 30px;
    font-size: 20px;
    text-align: center;
}

section#support div.address
{
	width: 800px;
	margin: 30px auto;
	text-align: center;
	font-size: 50px;
    font-family: AvenirNext-Roman, "Avenir Next", sans-serif;
}


.rotator
{
	display: inline-block;
	width: 200px;
	height: 40px;
	text-align: left;
}

.rotator span
{
/*    position: absolute;*/
	position: absolute;
    opacity: 0;
/*    height: 0px;*/
    top: 0px;
    
  /*  overflow: hidden;*/
/*    width: 100%;*/
	color: #ffe683;
}


.rotator span:nth-child(1) 
{ 
    color: #ffe683;
    opacity: 1;
}

#footer1 > div
{
	display: inline-block;
	color: white;
	font-family: AvenirNext-Roman, "Avenir Next", sans-serif;
	font-weight: 500;
	width: 140px;
	text-align: right;
}

#footer1 > div.left
{
	text-align: left;
}

/*
.rotator span:nth-child(2) 
{ 

    color: yellow;
    
    animation: rotatePhrase 6s linear infinite 2s;
    -webkit-animation: rotatePhrase 6s linear infinite 2s;
    -moz-animation: rotatePhrase 6s linear infinite 2s;
    -o-animation: rotatePhrase 6s linear infinite 2s;
    -ms-animation: rotatePhrase 6s linear infinite 2s;
}

.rotator span:nth-child(3) 
{ 

    color: yellow; 
    
    animation: rotatePhrase 6s linear infinite 4s;
    -webkit-animation: rotatePhrase 6s linear infinite 4s;
    -moz-animation: rotatePhrase 6s linear infinite 4s;
    -o-animation: rotatePhrase 6s linear infinite 4s;
    -ms-animation: rotatePhrase 6s linear infinite 4s;
}

@-webkit-keyframes rotatePhrase
{
    0% { opacity: 0; -webkit-animation-timing-function: ease-out; top: -80px; height: 0px; }
    5% { opacity: 1;  top: 0px;}
    25% { opacity: 1; top: 0px;}
    35% { opacity: 1;  top: 0px;}
    38% { opacity: 0;}
    40% { opacity: 0; -webkit-animation-timing-function: ease-out; top: 80px;}
}

.rotator span
{

}

*/

.speech-bubble
{
	font-size: 16px;
	font-weight: 500;
	font-family: Avenir, "Avenir Next", sans-serif;
	
	position: relative;
	padding: 15px;
	margin-bottom: 20px;
	
	border: 1px solid #c3c3c3;
	color: #333;
	background-color: #fff;

	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius: 5px;
	
	text-align: center;
	
/*	font-style: italic;*/
}

.speech-bubble:before 
{
	content: "";
	position: absolute;
	bottom: -15px;
	left: 45px;
    border-width: 15px 15px 0;
	border-style: solid;
    border-color: #c3c3c3 transparent;

    display: block; 
    width: 0;
}

.speech-bubble:after 
{
	content: "";
	position: absolute;
	bottom: -14px;
	left: 45px;
	border-width: 15px 15px 0;
	border-style: solid;
	border-color: white transparent;
    display: block; 
    width: 0;
}

@-moz-document url-prefix() {
	.speech-bubble:after 
	{
		bottom: -13px;
	}
}

/*
.speech-bubble > p
{
}

.speech-bubble > p:before
{
	content: '\201C';
}

.speech-bubble > p:after
{
	content: '\201D';
}*/

.testimonial
{
	overflow: hidden;
	position: absolute;
	width: 800px;
	margin-top: 30px;
	opacity: 0;
}

.testimonial-author
{
	margin-left: 30px;
	height: 64px; 
	padding-bottom: 30px;
}

.testimonial-author > img
{
	width: 64px; 
	margin: 0px; 
	padding: 0px; 
	float: left;
}

.testimonial-author > div
{
	height: 64px; 
	line-height: 64px; 
	display: inline-block; 
	margin: 0 0 0 15px; 
	padding: 0px; 
	float: left;
	font-size: 18px;
	font-weight: 400;
	font-family: "Avenir Next", sans-serif;
}

.testimonial-author > div > em
{
	font-weight: 500;
	font-style: normal;
}

#rotator-pagination
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	right: 0px;
	bottom: 40px;
	width: 800px;
	text-align: right;
	top: 130px;
	cursor: default;
}

.dot
{
	width: 10px;
	height: 10px;
    background: rgb(128, 128, 128);
    border: none;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;

	display: inline-block;
	color: gray;
}

.dot:hover
{
	cursor: pointer;
    background: rgb(0, 0, 0);
}

.dot.selected
{
	background: black;
}




@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 2dppx) {
       	   
	img.retinaVersion
	{
		display: block !important;
	}

	img.nonRetinaVersion
	{
		display: none !important;
	}
       	   
    div.featureImg, div.exampleImg
    {
        background-size: 172px 172px;
    }

    #featureTools { background-image: url(../images/featureTools_2x.png); }
	#featureColors { background-image: url(../images/featureColors_2x.png); }
	#featureCode { background-image: url(../images/featureCode_2x.png); }
	#featureGradients { background-image: url(../images/featureGradients_2x.png); }
	#featureImport { background-image: url(../images/featureImport_2x.png); }
	#featureShadows { background-image: url(../images/featureShadows_2x.png); }
	#featureExport { background-image: url(../images/featureExport_2x.png); }
	#featureDynamics { background-image: url(../images/featureDynamics_2x.png); }
	#featureCompatibility { background-image: url(../images/featureCompatibility_2x.png); }
	#featureBooleans { background-image: url(../images/featureBooleans_2x.png); }
	
	div.screenshotImg
	{
		background-size: 172px 108px;
	}
	
	#screenshot1 { background-image: url(../images/screenshot1-thumb_2x.png); }
	#screenshot2 { background-image: url(../images/screenshot2-thumb_2x.png); }
	#screenshot3 { background-image: url(../images/screenshot3-thumb_2x.png); }
	#screenshot4 { background-image: url(../images/screenshot4-thumb_2x.png); }
	#screenshot5 { background-image: url(../images/screenshot5-thumb_2x.png); }
}