/* TUTORIAL LANDING PAGES */

/* overwrite old language page widths */
#page.home.arduinoyun, 
#page.home.arduinoothers, 
#page.home.hardwareti, 
#page.home.hardwareenergia, 
#page.home.hardwaresamsung {
  width: auto;
  margin:0 auto;
}

#page.hardwaresamsung.home {
	width: auto;
}
.tutorial-landing {
	margin:50px;
}

.mobile .tutorial-landing {
	margin: 50px 0 0;
}

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

.mobile .tutorial-landing .header-image {
	height: 100px;
}

iframe {
	width: 100%;
	max-width: 500px;
	height: 281px;
}

#arduino-header { background-image: url("/assets/graphic-header-arduino.svg") }
#ti-header { background-image: url("/assets/graphic-header-ti.svg") }
#samsung-header { background-image: url("/assets/graphic-header-samsung.svg") }

#page.hardwaresamsung .tutorial-landing h1 {
	width:290px;
	font-size:24px;
	position:absolute;
	margin:0 0 0 -370px;
}

.tutorial-landing #tutorials h1 {
	font-size: 24px;
	margin: 0 0 0 -370px;
}

.mobile .tutorial-landing #tutorials h1 {
	margin: auto;
	text-align: center;
}

.tutorial-landing h1,
.tutorial-landing h2 {
	width:290px;
	font-size:24px;
	position:absolute;
	margin:0 0 0 -370px;
}

.mobile .tutorial-landing h1,
.mobile .tutorial-landing h2 {
	margin: 20px auto;
	text-align: center;
	position: relative;
}

.tutorial-landing .section {
	margin:40px 20px 80px 400px;
	width:560px;
}

.mobile .tutorial-landing .section {
	margin: 40px 0;
	width: auto;
}

/* GET STARTED BUTTON */

.tutorial-landing .button.xlarge {
  display: block;
  margin: 0 10px 30px 0;
}

.mobile .tutorial-landing .button.xlarge {
	margin: 20px 10px 40px;
}

code.overflow {
	overflow-x: scroll;
	display: block;
	padding: 10px;
	border: 1px solid #ccc;
	white-space: pre;
	margin: 5px 0px;
}

.num-body code.overflow { 
	margin: 5px 0px 5px -29px;
}
/* TUTORIAL TILES */

#tutorials.section .tutorial {
  width: 130px;
  height: 150px;
  border: 1px solid #95daf4;
  margin: 20px 23px 0 1px;
  display: inline-block;
  border-radius: 4px;
  vertical-align: top;
  padding: 20px 15px;
}

.mobile #tutorials.section .tutorial {
	margin: 15px auto;
	display: block;
}

#tutorials.section.features .tutorial {
	margin-top: 0;
}

#tutorials.section .tutorial.tutorial-right {
	margin-right:0;
}

.mobile #tutorials.section .tutorial.tutorial-right {
	margin-right: auto;
}

#tutorials.section .tutorial h3 {
	font-size:21px;
	margin:0 0 5px 0;
	line-height:26px;
    text-align:center;
}

#tutorials.section .tutorial .default h3 {
  padding-top: 35px;
}

#tutorials.section .tutorial#outputfilters .default h3 {
  padding-top: 10px;
}

#tutorials.section .tutorial .default {
	padding-top:90px;
	background:url('/assets/graphic-tutorials-tutorials.png') no-repeat center top;
}


#tutorials.section .tutorial#conditions .default { background-position: center -40px }
#tutorials.section .tutorial#profiles .default { background-position: center -215px }
#tutorials.section .tutorial#outputfilters .default { background-position: center -440px }

#tutorials.section .tutorial .clouds {
	padding-top:90px;
	background:url('/assets/graphic-tutorials-cloud-controls.png') no-repeat center top;
}

#tutorials.section .tutorial#cc .clouds { background-position: center -25px }
#tutorials.section .tutorial#sensors .clouds { background-position: center -215px }
#tutorials.section .tutorial#actuators .clouds { background-position: center -415px }

#tutorials.section .tutorial .hover {
	padding:0;
	background:none;
}



#tutorials.section .tutorial p {
	font-size:13px;
	font-weight:normal;
	margin:5px 0 0 0;
    text-align:center;
}

#tutorials.section .tutorial:hover {
	border-color:#2bb5e9;
}

#tutorials.section .tutorial:active {
	border-color:#f47925;
}

#tutorials.section .tutorial .hover {
	display: none;
}

#tutorials.section .tutorial:hover .hover {
	display: block;
}

.mobile #tutorials.section .tutorial:hover .hover {
	display: none;
}

#tutorials.section .tutorial:hover .default,
#tutorials.section .tutorial:hover .clouds {
	display: none;
}

.mobile #tutorials.section .tutorial:hover .default,
.mobile #tutorials.section .tutorial:hover .clouds {
	display: block;
}

/* TUTORIAL M2M */

.tutorial-landing #m2m.section {
  width: 610px;
  margin-left:375px;
}

.mobile .tutorial-landing #m2m.section {
	margin: 0;
	width: auto;
}

.tutorial-landing #m2m.section h2 {
  margin-left:-345px;
}

.mobile .tutorial-landing #m2m.section h2 {
	margin: 20px auto;
}

.tutorial-landing #m2m.section p, #m2m-row .m2m.example p {
  text-align:center;
  font-size:24px;
  margin:0;
}

#m2m-examples {
  background: url('/assets/graphic-m2m-tutorials.png') no-repeat left top;
  padding:43px 0 0 136px;
  width:474px;
  height:107px;
  background-size:100%;
}

.mobile #m2m-examples {
	background: none; 
	padding: 0;
	width: auto;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#m2m.section .m2m.example, #m2m-row .m2m.example {
  width: 100px;
  height: 42px;
  padding-top:8px;
  margin: 5px;
  display: inline-block;
  border: 1px solid #95daf4;
  background:#fff;
  vertical-align: middle;
  border-radius:4px;
}

.mobile #m2m.section .m2m.example, #m2m-row .m2m.example {
	margin: 10px;
}

#m2m.section a:hover .m2m.example, #m2m-row a:hover .m2m.example { border-color:#2bb5e9 }
#m2m.section a:active .m2m.example, #m2m-row a:active .m2m.example { border-color:#f47925 }

#m2m-row .m2m.example {
    border-width: 4px;
    width: 95px;
    height: 40px;
    padding-top: 6px;
    margin-top: 4px;
}


/* TUTORIAL EXAMPLES */

#examples.section {
	border:1px solid #95daf4;
	border-radius:4px;
	width:545px;
}

.mobile #examples.section {
	width: 100%;
	padding: 20px 0;
	margin: 20px 0;
}

#examples.section .example {
	background:url('/assets/graphic-tutorials-examples.png') no-repeat left top;
	width:160px;
	height:40px;
	padding:5px 0 5px 65px;
	margin:20px 15px 20px 30px;
	display:inline-block;
	font-size:14px;
	vertical-align: top;
	background-size: 50px;
}

.mobile #examples.section .example {
	margin: 20px auto;
	display: block;
}

#examples.section .example#facebook { background-position: left top }
#examples.section .example#twitter { background-position: left -50px }
#examples.section .example#googledrive { background-position: left -100px }
#examples.section .example#gmail { background-position: left -150px }
#examples.section .example#envirofacts { background-position: left -200px }
#examples.section .example#twilio { background-position: left -250px }
#examples.section .example#dropbox { background-position: left -300px }
#examples.section .example#yahooweather { background-position: left -350px }
#examples.section .example#mysql { background-position: left -400px }
#examples.section .example#paypal { background-position: left -450px }
#examples.section .example#amazon { background-position: left -500px }
#examples.section .example#nexmo { background-position: left -550px }
#examples.section .example#instagram { background-position: left -600px }
#examples.section .example#govtrack { background-position: left -650px }
#examples.section .example#devices { background-position: left -700px }
#examples.section .example#utilities { background-position: left -750px }
#examples.section .example#nytimes { background-position: left -800px }
#examples.section .example#youtube { background-position: left -850px }
#examples.section .example#email-lightsensor { background-position: left -900px }
#examples.section .example#download { background-position: left -950px }
#examples.section .example#devicecoder { background-position: left -1000px }
#examples.section .example#zendesk { background-position: left -1050px }
#examples.section .example#android { background-position: left -1100px }
#examples.section .example#ios { background-position: left -1150px }
#examples.section .example#rails { background-position: left -1200px }
#examples.section .example#fedex { background-position: left -1250px }
#examples.section .example#bigquery { background-position: left -1300px }
#examples.section .example#powerbi { background-position: left -1350px }

/* Data viz examples */

#examples.data-viz.section .example {
	background-image:url('/assets/icon-tutorials-data-visualization.png')
}

#examples.data-viz.section .example#temperature { background-position: left top }
#examples.data-viz.section .example#liquid-level { background-position: left -50px }
#examples.data-viz.section .example#light { background-position: left -100px }
#examples.data-viz.section .example#motion { background-position: left -150px }
#examples.data-viz.section .example#distance { background-position: left -200px }
#examples.data-viz.section .example#sensor-data { background-position: left -250px }
#examples.data-viz.section .example#pressure { background-position: left -300px }
#examples.data-viz.section .example#graph420ma { background-position: left -350px }


#examples.section .example#cloudcontrols { 
	background-image: url('/assets/graphic-tutorials-examples-cloud-controls.png');
	background-size: 75px;
	height: 75px;
	padding-left: 90px;
}

#examples.section .example.example-center {
	margin-left:150px;
} 

.mobile #examples.section .example.example-center {
	margin: auto;
}

/* RESOURCE SECTION */

#resources.section {
	width: 570px;
}

.mobile #resources.section {
	width: auto;
}

#resources.section .resource {
  width: 233px;
  height: 15px;
  border: 1px solid #95daf4;
  margin: 0 15px 18px 0;
  display: inline-block;
  border-radius: 4px;
  vertical-align: top;
  padding: 20px 15px;
  text-align: center;
  font-size: 14px;
}

.mobile #resources.section .resource {
	display: block; 
	margin: 20px auto;
}

#resources.section .resource:hover {
	border-color:#2bb5e9;
}

#resources.section .resource:active {
	border-color:#f47925;
}

#resources.section .resource.resource-tutorial {
  text-align: left;
  width: 123px;
  padding-left: 80px;
  padding-top: 25px;
  background: url('/assets/graphic-tutorials-resources.png') no-repeat left top;
  height: 25px;
  padding: 15px 40px 30px 100px;
}

#resources.section .resource.resource-center {
	margin-left:135px;
} 

#resources.section .resource.resource-tutorial#interpretingoutputs { background-position: 40px -15px }
#resources.section .resource.resource-tutorial#runwirelessly { background-position: 40px -115px }
#resources.section .resource.resource-tutorial#settingsfiles { background-position: 40px -215px }
#resources.section .resource.resource-tutorial#buildchoreos { background-position: 40px -315px }


/* IN ACTION RESOURCE */

#iotapps.section {
  width: 570px;
}

.mobile #iotapps.section {
	width: auto;
}

#iotapps.section .resource {
  background: url('/assets/graphic-tutorials-iotapps.png') no-repeat left top;
  width: 545px;
  border: 1px solid #95daf4;
  margin: 0 15px 18px 0;
  display: inline-block;
  border-radius: 4px;
  padding: 35px 0;
  text-align: center;
  font-size: 20px;
}

.mobile #iotapps.section .resource {
	background: none;
	padding: 0;
	margin: 20px auto;
	width: 250px;
	display: block;
}

#iotapps.section .resource p {
	margin:0;
}

.mobile #iotapps.section .resource p {
	padding: 20px;
}

#iotapps.section .resource:hover {
	border-color:#2bb5e9;
}

#iotapps.section .resource:active {
	border-color:#f47925;
}


/* Arduino landing page specific content */

#page.home.arduino {
	width:790px;
	height:650px;
}

.mobile #page.home.arduino {
	width: auto;
	height: 950px;
}

.languages-giant h1, 
.languages-giant h2,
.languages-giant h3 {
	font-weight:bold;
	margin:0;
	color:#333;
}

.languages-giant h2 {
	font-size:24px;
}

.mobile .languages-giant h2 {
	text-align: center;
}

.languages-giant h3 {
	font-size:18px;
}

.languages-box.languages-giant {
	border: 1px solid #95daf4;
	border-radius:4px;
  font-weight: bold;
  display: inline-block;
	padding:20px;
	background:url('/assets/graphic-devices-large.png') no-repeat left top;
	width:320px;
	float: left;
	margin: 40px 15px;
	text-align:left;
}

.mobile .languages-box.languages-giant {
	width: -moz-available; 	
	width: -webkit-fill-available;
	margin: 10px 0px
}

.languages-giant:hover {
	border-color:#0882b6;
}

.languages-giant:active {
	border-color:#f47925;
}

#languages-giant-yun {
	background-position: -10px 15px;
	height:250px;
}

.mobile #languages-giant-yun {
	background-size: cover;
	background-position: -10px 40px;
}

#languages-giant-others {
	background-position: -15px -380px;
	height:350px;
}

.mobile #languages-giant-others {
	background-position: -80px -380px;
}


/* -------------------------------- */

/* TUTORIAL LOWER LEVEL PAGES */

#tutorials .box {
	width:680px;
	margin:-1px auto 0;
	border-style:solid;
	border-color:#caecf9;
	border-width:0 1px 0;
	padding:35px 80px;
	position: relative;
}

.mobile #tutorials .box {
	width: auto;
	border-width:0 1px 0;
	padding:35px 15px;
	position: relative;
}

#tutorials .box .twitter-link {
	position: absolute;
	right: 20px;
	top: 20px;
	display: block;
}

#tutorials .ord {
	background: #555;
	color: #fff;
	display: inline-block;
	width: 18px;
	height: 18px;
	text-align: center;
	border-radius: 9px;
	font-weight:bold;
	margin: 10px 9px 0 -27px;
}

#tutorials .num-body {
	margin-left:27px;
}

#tutorials h1 {
	text-align: left;
	font-size:36px;
	margin-top:10px;
	margin-bottom:-10px;
}

#tutorials .subtitle {
	font-size: 18px;
	margin: 30px 0 -5px 0;
}

#tutorials img {
	border: 2px solid #ccc;
}

.mobile #tutorials img {
	margin-left: -28px;
	height: 100%;
	width: calc(100% + 25px);
}

#tutorials img.no-border {
	border: none;
}

/* old tutorial hr style */
#tutorials hr {
	margin:40px -80px;
	border:0;
	background-color:#caecf9;
	height:1px;
}

/* new tutorial hr style to overwrite old hrs */
#tutorials hr {
  visibility: hidden;
  margin: 25px 0;
}

#tutorials pre.prettyprint {
	word-wrap: break-word;
}

#tutorials .prettyprint.no-color * {
	color: #333 !important;
}


/* NAVIGATION BUTTONS */

a.button.nav-back {
	background: none;
	font-size: 20px;
}

/* hiding back buttons for now */
a.button.nav-back {
	display: none;
}

a.button.nav-forward {
	background: none;
	float: right;
	font-size: 20px;
    margin-right: -30px;
}

a.button.nav-forward .nav-icon {
	display: inline-block;
	background-image:url('/assets/button-walkthrough.png');
	background-repeat: no-repeat;
	background-position:right 0px;
	padding:0 4px 0 0;
	height:25px;
	width:25px;
	vertical-align: text-bottom;
}

a.button.nav-forward:hover .nav-icon {
	background-position:right -25px;
}

a.button.nav-forward:active .nav-icon {
	background-position:right -50px;
}

a.button.nav-back .nav-icon {
	display: inline-block;
	background-image:url('/assets/button-walkthrough.png');
	background-repeat: no-repeat;
	background-position:left -75px;
	padding:0;
	height:25px;
	width:25px;
	vertical-align: text-bottom;
}

a.button.nav-back:hover .nav-icon {
	background-position:left -100px;
}

a.button.nav-back:active .nav-icon {
	background-position:left -125px;
}


/* SPECIAL M2M TUTORIAL STYLE */

#tutorials.m2m .box {
	border:none;
}

#tutorials .tutorial-sections {
	margin: 20px -70px; /* To fit inside #tutorials.sdk .box yet still achieve 820px width */
}

.mobile #tutorials .tutorial-sections{
	margin: 20px -15px;
}

#tutorials h1.tutorial-sections-title {
	font-size: 36px;
	font-weight: bold;
	color: #2bb5e9;	
	text-align: center;
	margin-bottom: 20px;
}

#tutorials .tutorial-section {
	margin-bottom: 15px;
}

#tutorials h2.tutorial-section-title {
	font-size: 26px;
	font-weight: bold;
	color: #fff;
	line-height: 50px;
	background: #2bb5e9;
	border: 1px solid #95daf4;
	text-align: center;
	margin: 0;
}

#tutorials .tutorial-section-content {
	border: 1px solid #95daf4;
	margin-top: 0;
	margin-bottom: 0;
	padding: 20px 40px 30px;
	display: none;
}

.mobile #tutorials .tutorial-section-content {
	padding: 20px 10px 30px;
}

#tutorials .tutorial-section.selected .tutorial-section-title {
	background: #0882b6;
	border: 1px solid #95daf4;
}

#tutorials .tutorial-section.selected .tutorial-section-content {
	border: 1px solid #95daf4;
	border-top: none;
}

#tutorials h2.tutorial-section-title:hover, #tutorials .tutorial-section.selected h2.tutorial-section-title:hover {
	border: 1px solid #2bb5e9;
	background: #056188;
	cursor: pointer;
}

#tutorials .tutorial-section-title:hover + .tutorial-section-content {
	border: 1px solid #2bb5e9;
	border-top: none;
}

#tutorials .integrations {
	margin-top: 40px;
}

#tutorials .integrations .integration {
	margin-bottom: 30px;
}

#tutorials .integrations .integration .integration-icon {
	height: 40px;
	width: 40px;
	background-size: 100%;
	background-image: url('/assets/tutorials-third-party-integrations.png');
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
}

#tutorials .integrations .integration .integration-icon.slack {
	background-position: left top;
}

#tutorials .integrations .integration .integration-icon.github {
	background-position: left -40px;
}

#tutorials .integrations .integration .integration-icon.ccs {
	background-position: left -80px;
}

#tutorials .integrations .integration .integration-text {
	display: inline-block;
	vertical-align: top;
}

#tutorials .integrations .integration .integration-text .subtitle {
	margin: 0;
}

#tutorials .integrations .integration .integration-text .description {
	margin-top: 5px;
}

#tutorials .copy-large {
	font-size: 16px;
	margin: 0 -25px;
}

.mobile #tutorials .copy-large {
	margin: 0px;
}

.mobile #tutorials.sdk.ruby code.overflow {
	width: calc(100% - 20px);
	margin: auto;
}

.mobile #tutorials.sdk.ruby .num-body code.overflow  {
	margin: 10px 0px 0px -27px;
	width: 100%;
}