/* Language landing pages */
#page.home {
	width:700px;
	margin:50px auto 80px;
}

.mobile #page.home {
	padding: 0 15px;
	width: auto;
}

.mobile #page.docs.home {
	padding: 0px;
}

.header-image {
    background-position: center bottom;
    background-repeat: no-repeat;
    height:170px;
}

.mobile .header-image {
	background-size: contain;
	height: 100px;
}
/*extra tall headers*/
#twyla-header, #processing-header {height:210px}

.mobile #twyla-header, .mobile #processing-header {
	height: 150px;
}

#arduino-header { background-image: url("/assets/graphic-header-arduino.svg") }
#twyla-header { background-image: url("/assets/graphic-header-twyla.svg") }
#processing-header { background-image: url("/assets/graphic-header-processing.svg") }
#java-header { background-image: url("/assets/graphic-header-java.svg") }
#python-header { background-image: url("/assets/graphic-header-python.svg") }
#php-header { background-image: url("/assets/graphic-header-php.svg") }
#ios-header { background-image: url("/assets/graphic-header-ios.svg") }
#ruby-header { background-image: url("/assets/graphic-header-ruby.svg") }
#nodejs-header { background-image: url("/assets/graphic-header-nodejs.svg") }
#android-header { background-image: url("/assets/graphic-header-android.svg") }
#restapi-header { background-image: url("/assets/graphic-header-restapi.svg") }
#csharp-header { background-image: url("/assets/graphic-header-csharp.svg") }
#javascript-header { background-image: url("/assets/graphic-header-javascript.svg") }

h1.languages-subtitle,
h2.languages-subtitle {
	font-size: 22px;
	font-weight: 200;
	text-align: center;
	margin:0;
}

.mobile h2.languages-subtitle br {
	display: none
}

.languages-container {
	margin: 10px auto 70px;
	text-align:center;
}

.languages-container-twocolumn {
	width:500px;
}

.languages-box {
	border:1px solid #95daf4;
	font-weight:bold;
	margin: 20px 10px 0px 10px;
	display:inline-block;
}

.mobile .languages-box {
	margin: 20px 0px 0px;
}

.languages-box:hover {
	border-color:#2bb5e9;
	cursor:pointer;
}

.languages-box:active {
	border-color:#f47925;
	cursor:pointer;
}

.languages-gettingstarted {
	font-size:21px;
	text-align:center;
	padding: 20px 95px 20px 50px;
}

.mobile .languages-gettingstarted {
	display: flex;
}

.mobile .languages-gettingstarted .button-submit-xxlarge {
	width: 73px;
	align-self: center;
	margin: 0 -50px 0 0;
}

.languages-gettingstarted .button-submit-xxlarge {
	width:33px;
	height:33px;
	background:url("/assets/button-submit-xxlarge.png") no-repeat left top;
	float:right;
	margin:0 -40px 0 0;
}

.languages-gettingstarted:hover .button-submit-xxlarge {background-position:left -33px}
.languages-gettingstarted:active .button-submit-xxlarge {background-position:left -66px}

/*Chrome and Safari specific positioning*/

.languages-examples {
	text-align:left;
	font-size:15px;
	width: 170px;
	height: 45px;
	padding: 20px 20px 20px 95px;
}

.languages-examples.short-text {
	width: 165px;
	padding-right: 25px;
}

.languages-examples.long-text {
	width: 180px;
	padding-right: 10px;
}

.languages-tutorials {
	text-align:left;
	font-size:14px;
	padding: 15px 20px 15px 75px;
	width: 110px;
	height: 40px;
}

.languages-extralinks {
	font-size:14px;
	text-align:center;
	padding:10px 20px;
	width:136px;
}

.languages-extralinks.long-text {
	padding:10px;
	width:156px;
}

.languages-examples-graphic {
	background:url('/assets/graphic-languages-examples.png') no-repeat left top;
	width:70px;
	height:70px;
	margin: -55px 0 0 -80px;
}

#examples-facebook { background-position: left top }
#examples-twitter { background-position: left -70px }
#examples-drive { background-position: left -140px }
#examples-gmail { background-position: left -210px }
#examples-envirofacts { background-position: left -280px }
#examples-twilio { background-position: left -350px }
#examples-dropbox { background-position: left -420px }
#examples-yahooweather { background-position: left -490px }
#examples-mysql { background-position: left -560px }
#examples-paypal { background-position: left -630px }
#examples-amazon { background-position: left -700px }
#examples-nexmo { background-position: left -770px }
#examples-instagram { background-position: left -840px }
#examples-govtrack { background-position: left -910px }
#examples-devices { background-position: left -980px }
#examples-utilities { background-position: left -1050px }
#examples-nytimes { background-position: left -1120px }
#examples-youtube { background-position: left -1190px }
#examples-email-lightsensor { background-position: left -1260px }
#examples-download { background-position: left -1330px }
#examples-devicecoder { background-position: left -1400px }
#examples-zendesk { background-position: left -1470px }
#examples-android { background-position: left -1540px }
#examples-ios { background-position: left -1610px }
#examples-rails { background-position: left -1680px }
#examples-fedex { background-position: left -1750px }

.languages-tutorials-graphic {
	background:url('/assets/graphic-languages-tutorials.png') no-repeat left top;
	width:50px;
	height:50px;
	margin: -43px 0 0 -60px;
}

#tutorials-parsing { background-position: left top }
#tutorials-settingsfiles { background-position: left -50px }
#tutorials-credentials { background-position: left -100px }
#tutorials-readingoutputs { background-position: left -150px }
#tutorials-wireless { background-position: left -200px }
#tutorials-outputfilters { background-position: -100px -200px }
#tutorials-choreo { background-position: -150px -200px }

#tutorials-arduino-parsing { background-position: left top }
#tutorials-arduino-settingsfiles { background-position: left -50px }
#tutorials-arduino-credentials { background-position: left -100px }
#tutorials-arduino-readingoutputs { background-position: left -150px }
#tutorials-arduino-wireless { background-position: left -200px }

#tutorials-twyla-json { background-position: -50px top }
#tutorials-twyla-xml { background-position: -50px -50px }
#tutorials-twyla-chaining { background-position: -50px -100px }
#tutorials-twyla-sdk { background-position: -50px -150px }
#tutorials-twyla-custom { background-position: -50px -200px }

.mobile #tutorials-twyla-custom { 
	display: table-cell;
	float: left;
	margin: -25px 0 0 -54px;
}

#tutorials-processing-json { background-position: -100px top }
#tutorials-processing-xml { background-position: -100px -50px }

#tutorials-java-json { background-position: -150px top }
#tutorials-java-xml { background-position: -150px -50px }

#tutorials-python-json { background-position: -200px top }
#tutorials-python-xml { background-position: -200px -50px }

#tutorials-php-json { background-position: -250px top }
#tutorials-php-xml { background-position: -250px -50px }

#tutorials-ios-json { background-position: -300px top }
#tutorials-ios-xml { background-position: -300px -50px }

#tutorials-ruby-json { background-position: -350px top }
#tutorials-ruby-xml { background-position: -350px -50px }

#tutorials-nodejs-json { background-position: -400px top }
#tutorials-nodejs-xml { background-position: -400px -50px }

#tutorials-android-json { background-position: -450px top }
#tutorials-android-xml { background-position: -450px -50px }

#tutorials-restapi-concepts { background-position: -500px top }
#tutorials-restapi-reference { background-position: -500px -50px }

#tutorials-csharp-json { background-position: -550px top }
#tutorials-csharp-xml { background-position: -550px -50px }

#tutorials-javascript-json { background-position: -600px top }
#tutorials-javascript-xml { background-position: -600px -50px }

/* special REST API page styling */
#page.restapi .languages-tutorials-graphic {margin-top:-35px}
#page.restapi .languages-tutorials {padding: 25px 20px 5px 75px}

.languages-question {
	text-align: center;
	font-size: 19px;
	font-weight: 200;
}

.tutorial-download-button {
	position: absolute;
	width: 100px;
	margin: -30px 0 0 733px;
	padding: 3px 30px 3px 12px;
	line-height: 26px;
	background: #2bb5e9 url(/assets/button-download-white.png) no-repeat 109px center;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	border: 1px solid #95daf4;
}

.tutorial-download-button:hover {
	background-color: #0882b6;
	border-color:#2bb5e9;
}

.tutorial-download-button:active {
	background-color: #f47925;
	border-color:#f9bc92;
}

.mobile .tutorial-download-button {
	display: none;
}

/*wide button special styling*/
.languages-tutorials-wide {
	text-align: center;
	padding: 24px 40px 24px 103px;
	height: 25px;
	font-size: 15px;
}

#page.javascript .languages-tutorials-wide {
	padding: 24px 40px;
}

.languages-tutorials-wide .languages-tutorials-graphic {
	margin: -33px 0 0 -54px;
}

.languages-tutorials.tutorials-center {
	margin: 20px 200px 0;
}

.mobile .languages-tutorials.tutorials-center {
	margin: 20px 0 0;
}

#arduinoyun .languages-tutorials-wide #examples-devices {
background-position: left -985px;
width: 70px;
height: 60px;
margin: -38px 0 0 -77px;
}

.languages-examples-graphic#examples-download {
margin: -44px 0px 0px -78px;
}

#twyla .languages-tutorials-wide {
padding-left:80px;
}

.mobile #twyla .languages-tutorials-wide {
	display: table;
}