/*



*/


body {background-color: #fbfbfb; background-image: url("http://s3.amazonaws.com/UnboundApp/img/bgtexture.jpg"); font-family: 'Hoefler Text', 'Adobe Caslon Pro', Georgia, serif; font-size: 18pt;  line-height: 150%; }

li { line-height: 150%;}

.narrowcontainer {width: 900px; margin: auto;}

@media (max-width: 900px) {

	.narrowcontainer {width: auto;}
}


h1 { margin-bottom: 20px; margin-top: 0px;}
h1, h2 {font-family: 'Hoefler Text', 'Adobe Caslon Pro', Georgia, serif; font-size: 28pt; color: #444; font-style: italic; font-weight: normal; color: black; text-align: center; padding-bottom: 0px; line-height: 150%;}
p {font-family: 'Hoefler Text', 'Adobe Caslon Pro', Georgia, serif; font-size: 18pt; line-height: 150%; color: #444;}

h1 a {color: black;}
h2 a {color: black;}

.linkarrow {font-style: normal; font-family: 'Hoefler Text', 'Adobe Caslon Pro', Georgia, serif; font-size: .6em; font-size: .6em;}

.videolink { display: block; width: 178px; height: 31px; background-image: url("http://s3.amazonaws.com/UnboundApp/img/play-video.jpg"); background-size: 198px 45px; padding: 7px 18px; font-size: 17pt; background-repeat: no-repeat; text-align: left; margin: 35px auto 0px auto; font-style: italic;}
.videolink:hover {text-decoration: none; color: black; cursor: pointer;}

video {margin-bottom: -13px;}



.socialbuttons {margin: 20px auto 10px auto; padding-left: 30px;}




ul.topnav {list-style-type: none; text-align: left; margin-top: 5px; float: right; font-size: 13px; line-height: 18px;}

ul.topnav a {color: #666;}

ul.topnav a:after { content: " →"; }



ul.topnav li {font-family: 'Hoefler Text', 'Adobe Caslon Pro', Georgia, serif;  padding: 3px 0px;}

ul.topnav li.active {display: none;}

.single ul.topnav li.active {display: block;}

.centered {text-align: center;}

/*.firstrow p {font-size: 24pt; line-height: 123%}*/
.firstrow {padding-bottom: 0px; margin-top: 80px; }
#devicelink img {padding-top: 00px;}


.seperator {border-top: 1px solid #ccc; margin: 40px 10px 40px 10px; height: 1px;}


.screenshotthumbs {margin: 0px; text-align: center;}
.screenshotthumbs img {height: 112px; margin: 15px; border: 5px solid white; display: inline;
	
	box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
	
}

.screenshotthumbs img:hover {height: 122px; margin: 10px;}


.featurelist {font-size: 0.8em; margin-top: 30px;}
.featurelist h2 {text-align: left; font-size: 1.4em; margin-bottom: 10px;}
.featurelist h2 img {margin: -15px 10px 0 0;}
.featurelist ul {margin-left: 65px;}



.quotepara a { color: #444;}
.byline {display:block; text-align: right; font-size: .8em; color: #666; margin: 10px; margin-bottom: 0px;}
.byline a {color: #666;}
.dropshadowrow {

	background-image: url("http://s3.amazonaws.com/UnboundApp/img/drop-shadow-bg.png"); 
	background-size: 100% 150px;
	height: 150px; 
	
}
.dropshadow-corner {text-align: center;}
.dropshadow-corner img {width: 150px; height: auto;}

.narrowcontainer .dropshadowrow {
	background-image: url("img/drop-shadow-bg.png"); 
	background-size: 100% 50px;
	height: 50px; 
	
}

.reverseshadow {
	
	-webkit-transform:scaleY(-1);
    -moz-transform:scaleY(-1);
    -ms-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
	
}

.narrowcontainer .dropshadow-corner img {height: 50px; width: auto;}

.pixiterow p {font-size: 24pt; line-height: 123%}
.pixiterow {margin-bottom: 70px; margin-top: 30px;}

.logoholder{text-align: center; padding-bottom: 20px;}

.logoholder img {width: 150px;}

.appicon {margin-right: 20px; margin-left: -5px;}

/*.appstore {margin: auto; text-align: left; width: 360px;}
.appstore img {float: left; width: 60px; margin-top: -12px; margin-right: 10px;}
.appstore p {font-size: 0.75em;}*/

.appstore {float: left; text-align: left; width: 270px; margin-top: 35px; }
.appstore img {float: left; width: 60px; margin-top: -12px; margin-right: 7px;}
.appstore p {font-size: 0.75em;}

@media (max-width: 1196px) {

.pixiterow p {font-size: 21pt; }	

.screenshotthumbs img {margin: 10px;}
	.screenshotthumbs img:hover {margin: 5px;}
	
	.appstore {width: 220px;}
	.appstore p {font-size: 0.7em;}
}

@media (max-width: 980px) {


	.firstrow {padding-bottom: 10px; margin-top: 60px;}
	.firstrow p {font-size: 13.8pt; }
	
	
	
	p {font-size: 13.8pt; }
	
	h1 {font-size: 18pt; margin-bottom: 10px; }
	
	.pixiterow p {font-size: 18pt; }
	
	.featurelist {width: 352px;}
	

	/*.appstore {margin: auto; text-align: left; width: 320px;}
	.appstore img {width: 60px; }
	
	.quotepara { margin-top: 0px;}*/
	
	.appstore {margin: auto; text-align: left; width: 300px; margin-top: 35px; clear: both; float none;}

}

@media (max-width: 767px) { 

	.firstrow {padding-bottom: 20px; margin-top: 20px;}
	

	.blogfirstrow {margin-top: 20px;}
	
	.dropshadowrow{ height: 50px; background-size: 100% 50px; margin-top: -20px;} 
	.dropshadow-corner {visibility: hidden;}
	
	.logoholder img {width: 110px;}
	
	.post {margin-top: 0px; margin-bottom: 40px;}
	
	ul.topnav {margin: 20px -25px 0px -35px;}
	ul.topnav {text-align: center; float: none;}
	ul.topnav li {display: inline; border-left: solid 1px #ccc; padding: 5px 15px;}
	ul.topnav li:first-child {border: none; }
	
	
	ul.topnav a:after { content: ""; }
	ul.topnav li.active {display: none;}
	
	.single ul.topnav li.active {display: inline;}
	
	/*.featurelist {width: 352px;}*/
	
	

}


/* Bio info styles */

.bio {margin-top: 30px;}

.bio p {font-size: 14pt; padding-right: 15px;}

.bioshotholder {float: left; margin-right: 25px; margin-bottom: 15px; width: 120px;}
.bioshotholder img {width: 120px;
	
	border: 5px solid white;
	box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.3);
	
}

.bio .titleholder { margin-top: 25px; float: left;}
.bio .titleholder h2 {display: block; text-align: left; padding-bottom: 0px; width: 220px; font-size: 22pt;}
.bio p.position {text-transform: uppercase; font-size: 14px; padding-right: 10px; }

.testimonial p {font-size: 0.7em;} 

.carousel li {margin: 0; padding: 0; width: 100%;}
.testimonialcarousel {overflow: hidden; margin: 10px; position: relative; padding-right: 40px; margin-right: -10px;}

.testimonialcarousel .nav {position: absolute; height: 100%; width: 40px; right: 0px; top: 0px; z-index: 50; cursor: pointer; background: center 20px url('img/nextbutton.png') no-repeat; display:none; background-size: 30px 30px;}


.carousel {
  visibility: visible;
  overflow: hidden;
  position: relative;
  z-index: 2;
  height: 200px;
  margin: 0px;
  /* if the vertical option is set to true, the following would be height */
}


.carousel ul {
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  z-index: 1;
  

  /* if the vertical option is set to true, the following would be height */
  /* can be any number larger than total combined width of list items */
}

.carousel li {
  overflow: visible /* if vertical: true, overflow is hidden */;
  float: left /* if vertical: true, float is none */;
}

#indicator, #indicator > li {
	float: left;
	display:block;
	list-style:none;
	padding:0; margin:0;
}

#indicator {
	float: none;
	width:110px;
	padding:12px 0 0 30px;
	margin: 0px auto;
}

#indicator > li {
	text-indent:-9999em;
	width:8px; height:8px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	background:#ddd;
	overflow:hidden;
	margin-right:4px;
	
	cursor: pointer;
}

#indicator > li.active {
	background:#888;
}

#indicator > li:last-child {
	margin:0;
}

@media (max-width: 1196px) {

.bio .titleholder { margin-top: 0px; }

}

/* End Bio info styles */


input, textarea { width: 100%; font-size: 16pt; padding: 10px;}
form { margin: 0px; padding: 0px; margin-right: 20px;}

ul.footernav {list-style-type: none; font-size: 13px; line-height: 18px; margin-bottom: 30px;}

ul.footernav a {color: #666;}
ul.footernav li {font-family: 'Hoefler Text', 'Adobe Caslon Pro', Georgia, serif; display: inline; border-right: solid 1px #ccc; padding: 5px 15px;}

ul.footernav li:first-child {padding-left: 0px; margin-left: -35px;}

ul.footernav li:last-child {border: none; padding-right: 0px; margin-right: -15px;}

ul.footernav li.active a {color: #333;}

.endmark {text-align: center; margin-top: 40px;}
.endmark img {width: 200px;}

footer {text-align: center; margin-bottom: 60px;}
#content-info {border: none; margin-top: 15px;}

@media (max-width: 480px)
{
	
	#devicelink {margin-bottom: 0px;}
	.appicon {clear: both; display: block; margin: auto;}
	p {font-size: 14pt;}
	
	h1 {font-size: 20pt;}
	h2 {font-size: 20pt;}
	
	.screenshotthumbs img {height: 90px;}
	.screenshotthumbs img:hover {height: 90px; margin: 10px;}
	
    
    footer#content-info {border-top: none; margin-top: 0px;}
    
    ul {margin-left: 80px;}
    
    ul.footernav {list-style-type: none; text-align: left; margin-top: 5px; float: left; font-size: 13px; line-height: 18px; margin-left: -10px; clear: both;}
    
    ul.footernav li {border: none; display: block;}

	ul.footernav a {color: #666;}
	
	ul.footernav a:after { content: " →"; }
	
	ul.footernav li:first-child {margin: 0px; padding: 5px 15px;}

	ul.footernav li:last-child {margin: 0px; padding: 5px 15px;}
}