/*----------------
Additional styling for Tutorial pages
www.pgmusic.com
------------------*/

/* Tutorials main page*/
.tutorials .rowBlock .fullBlock ul.bullet-sm li {background: url("gfx/listbullet_link.png") no-repeat 3px 7px; line-height: 20px; margin-bottom: 18px}
.tutorials .rowBlock .fullBlock ul.bullet-sm li a{font-weight:bold;}

/*General*/
.tutorials .rowBlock .fullBlock p {margin-top:4px}
.tutorials .rowBlock .fullBlock p.boxed {border:1px solid #898989; padding:6px}
.tutorials .rowBlock .fullBlock p a strong span.smaller {font-size:14px; font-weight:normal; color:inherit; text-decoration:none}
.tutorials .rowBlock .fullBlock img {margin-top:12px; margin-bottom:30px; /*border:thin solid #898989*/}
.tutorials .rowBlock .fullBlock img.no-padding {margin:0; padding:0}
.tutorials .rowBlock .fullBlock a {colour:#blue; text-decoration:none}
.tutorials .rowBlock .fullBlock h2 {padding-top:8px; font-size:24px; text-shadow: 1px 0 1px rgba(0, 0, 0, 0.3)}
.tutorials .rowBlock .fullBlock h3 {margin:8px 0 14px 0; font-size:18px}
.tutorials .rowBlock .fullBlock h4 {margin:8px 0 8px 0; font-size:16px}

/*Lists*/
.tutorials .rowBlock .fullBlock ul li {margin-bottom:10px}
.tutorials .rowBlock .fullBlock ul li ul {margin:10px 0 0 12px}
.tutorials .rowBlock .fullBlock ul li ol {margin:10px 0 0 12px}
.tutorials .rowBlock .fullBlock ol {margin: 0 0 16px 37px}
.tutorials .rowBlock .fullBlock ol li {margin-bottom:12px; padding-left:8px}
.tutorials .rowBlock .fullBlock ol li ul {margin:10px 0 0 12px}
.tutorials .rowBlock .fullBlock ol li ol {margin:10px 0 0 12px}
.tutorials .rowBlock .fullBlock ol li ul li {padding-left:20px; list-style-position:outside}
.tutorials .rowBlock .fullBlock ul li ol li {margin-left: 18px; padding-left:12px; list-style-position:outside}

/*Tables*/
.tutorials .rowBlock .fullBlock table {border:1px solid; width:60%}
.tutorials .rowBlock .fullBlock table tr {border:1px solid; margin:7px}
.tutorials .rowBlock .fullBlock table tr td {border:1px solid}
.tutorials .rowBlock .fullBlock table.tutorial-generic {border:1px solid #aaaaaa; margin: 10px 0}
.tutorials .rowBlock .fullBlock table.tutorial-generic tr td {border:1px solid #aaaaaa}
.tutorials .rowBlock .fullBlock table.tutorial-generic tr th {border:1px solid #aaaaaa}
.tutorials .rowBlock .fullBlock table.tutorial-generic tr th {text-align:left; font-weight:bold; padding:14px; font-size:14px}
.tutorials .rowBlock .fullBlock table.tutorial-generic tr td {font-size:12px; line-height:20px; padding:6px}
.tutorials .rowBlock .fullBlock table.full-width {width:100%}
.tutorials .rowBlock .fullBlock table.no-borders-sm {width:200px; border:none; text-align:left; margin-top:6px}
.tutorials .rowBlock .fullBlock table.no-borders-sm tr td {border:none}
.tutorials .rowBlock .fullBlock table.no-borders-sm tr td.center {text-align:center}
.tutorials .rowBlock .fullBlock table.no-borders-sm tr th.center {text-align:center}

	/*For the GM instrument list*/
	.tutorials .rowBlock .fullBlock div.two-up {width:50%; float:left; margin-bottom:16px}
	.tutorials .rowBlock .fullBlock div.two-up table {width:90%}
	.tutorials .rowBlock .fullBlock div.three-up {width:33.3%; float:left; margin-bottom:16px}
	.tutorials .rowBlock .fullBlock div.three-up table {width:90%}

/*columns for newer-style tutorials (e.g. tutorial_downloading-realtracks.htm)*/
.tutorials .rowBlock .fullBlock .leftcol {float:left; width:476px; margin-right:16px}
.tutorials .rowBlock .fullBlock .rightcol {float:left; width:424px}

/*expandable areas of text for tutorial_downloading-realtracks.htm
DownThemAll and Internet Download Manager*/
#expandable_DTA,
#expandable_IDM {display:none; padding: 30px 0 30px 74px}
#expandable_olderTuts {display:none; padding: 15px 0 10px 0px}
#expandable_DTA .leftcol,
#expandable_IDM .leftcol {float:left; width:476px; margin-right:16px}
#expandable_DTA .rightcol,
#expandable_IDM .rightcol {float:left; width:350px}

/*Realtracks and RealDrums lists on tutorial_realtrackslist.htm and tutorial_realdrumslist.htm*/
.tutorials ul.winlist li,
.tutorials ul.rtsets li,
.tutorials ul.rdsets li {background: url("gfx/listbullet_link_blue.png") no-repeat 5px 5px; padding-left: 20px; padding-right:10px; list-style:none; margin:0 0 14px 12px}
.tutorials ul.rdsets li {margin:0 0 15px 12px}
.tutorials ul.rtsets li ul {margin-top:12px}
.tutorials ul.rdsets li ul {margin-top:6px}
.tutorials ul.rtsets li ul li {background: url("gfx/listbullet_small.png") no-repeat 5px 8px; padding-left: 20px; padding-right:10px; list-style:none; margin:0 0 4px 12px}
.tutorials ul.rdsets li ul li {background: url("gfx/listbullet_small.png") no-repeat 5px 8px; display: inline-block; margin: 0 0 2px 15px; padding-left: 20px; padding-right: 11px; text-decoration: none; width: 230px;}
.tutorials ul.rtsets li .rtviddemo {cursor:pointer; margin:0px 12px;padding: 0 0px 0 20px; font-size:13px; font-weight:bold; background: url("gfx/audiodemo8.png") no-repeat scroll 2px 1px transparent;}
.tutorials ul.rtsets li .short-desc {margin-left:78px;}
.tutorials ul.rtsets li .rtbanddemo {cursor:pointer; margin:0px 12px; padding: 0 0px 0 35px; font-size:13px; font-weight:bold; background: url("gfx/audiodemo8.png") no-repeat scroll 14px 1px transparent;}
.tutorials ul.rtsets li .rtviddemo:hover {background: url("gfx/audiodemo9.png") no-repeat scroll 2px 1px transparent;}
.tutorials ul.rtsets li .rtbanddemo:hover {background: url("gfx/audiodemo9.png") no-repeat scroll 14px 1px transparent;}
.tutorials ul.rtsets li .rtsolodemo,
.tutorials ul.rtsets li .rtauddemos {margin:0px -67px 0px 13px;font-size:12px;color:#004FC3;cursor:pointer;}
.tutorials ul.rtsets li .rtsolodemo:hover,
.tutorials ul.rtsets li .rtauddemos:hover {color:red;}
.tutorials ul.rtsets li .rtauddemos .test {float:left;}
.tutorials ul.rtsets li .rtartist {margin:0px 2px; font-size:12px}
.tutorials ul.rtsets li .rtsetdesc a,
.tutorials ul.rdsets li .rdsetdesc a {font-size:12px;color:#242424;}
.tutorials ul.rtsets li .rtsetdesc a:hover,
.tutorials ul.rdsets li .rdsetdesc a:hover {color:#000000;}
.tutorials ul.rdsets li .rdsetdesc a {padding-left:10px;}
.tutorials .rtdesctip {line-height:20px}
.tutorials .rtsets td,
.tutorials .rdsets td {background-color: #454545;}
.tutorials ul.rtsets li .rtsetdesc a .more,
.tutorials ul.rdsets li .rdsetdesc a .more {color:#004FC3;font-size:11px;}
.tutorials ul.rtsets li .rtsetdesc a .more:hover,
.tutorials ul.rdsets li .rdsetdesc a .more:hover {color:red;}
.tutorials #realtrackslist .pagelinks {text-align:center;font-weight:bold;}
.tutorials #realtrackslist .pagelinks .pagelink {display:inline-block;margin:12px;}

/*bg color for the tooltip title bar was getting overriden by the packages table td*/
.tutorials #WzTiTlTb td {background-color:#cdd2d2}

/*Adjustments for Macsynths page*/

.macsynthtut .rowBlock .fullBlock .leftcol {
    float: left;
    margin-right: 40px;
    width: 480px;}


.macsynthtut .fullWidth .videoDemo .desc {
    margin: 10px 0 11px 270px;}

.macsynthtut .videos .videoDemo .desc {
    float: none;
    font-size: 14px;
    line-height: 20px;}


.macsynthtut .fullWidth .videoDemo {
    width: 910px;
}

.macsynthtut .videos .videoDemo {
	border-bottom:none}


.macsynthtut .videos .video .button_small {
    left: 272px;
    position: absolute;
    top: 148px;
}


.macsynthtut .rowBlock .fullBlock p {
    margin-top: 20px;
}

.macsynthtut img.screenshot {
    border: 2px solid white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.57);
}

.iframe-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (min-width:720px) {
	.iframe-wrapper iframe {
		max-width: 630px;
		max-height: 400px;
	}
	.iframe-wrapper {
		max-width: 630px;
		margin-left: auto;
		margin-right: auto;
		max-height: 400px;
		padding-bottom: 450px;
	}
}

.image-mobile {
	max-width: 100%;
}

.column-thirdwide {
  width: 30%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  min-height: 300px;
}

.column-halfwide {
  width: 46%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  min-height: 300px;
}
.column-halfwide img {
	max-height: 254px;
	max-width: 100%;
}
.column-fullwide {
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 20px;
  margin-bottom: 20px;
  min-height: 300px;
  float: left;
}
@media only screen and (max-width: 720px) {
	.column-thirdwide {
    clear: both;
    width: 98%;
    margin-top: 10px;
    padding-top: 30px;
    height: auto;
		min-height: auto;
  }
  .column-halfwide {
    clear: both;
    width: 98%;
    margin-top: 10px;
    padding-top: 30px;
    height: auto;
		min-height: auto;
  }
  .column-fullwide {
    clear: both;
    margin-top: 30px;
    padding-top: 30px;
    height: auto;
  }
}

.tutorials .rowBlock .fullBlock .screenshot {
    text-align: center;
    margin: 30px;
}

/*.tutorials .rowBlock .fullBlock .screenshot-2up {
    text-align: center;
    margin:10px;
    float: left;
    width: 46%;
}*/

.tutorials .rowBlock .fullBlock .screenshot img
 {
	margin-bottom:0px;
    display: inline;
    border: 1px solid black;
    max-width: 100%;
 }
 
.tutorials .rowBlock .fullBlock .screenshot .caption{
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
}