/* Scroll down to the Product Extensions section and look for comments indicating where there are parameters you might want to tweak to improve the homepage appearance for your specific product.  */

html, body {
    background-color: #fff;
    color: #333;
    font-family: Artifakt ElementOfc;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

p {
    margin-top: 0;
    margin-bottom: 10px;
}

div.body {
    padding: 16px;
    width: 630px;
}

h2 {
    color: #555555;
    font-size: 18px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 5px;
    padding: 0
}

h3 {
    color: #555555;
    font-size: 14px;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 5px;
    padding: 0
}

ul.thumbnails,
ul.thumbnails li {
    margin: 0;
    padding: 0;
    list-style-type: none; 
}

ul.thumbnails {
    margin-top: 20px;
    margin-bottom: 25px;
}

.thumbnail-wrap {
    position: relative;
}

.thumbnail-wrap a {
    display: block;
    position: relative;
}

.thumbnail-wrap .thumbnail {
    display: block;
    position: relative;
}

.thumbnail-wrap .video-icon {
    position: absolute;
    left: 3px;
    bottom: 3px;
}

ul.thumbnails.one-column .thumbnail {
    height: 130px;
    width: 630px;
}

ul.thumbnails.two-column .thumbnail {
    height: 130px;
    width: 310px;
}

ul.thumbnails.three-column .thumbnail {
    width: 70px;
    height: 70px;
}

ul.thumbnails.four-column .thumbnail {
    width: 150px;
    height: 100px;
}

.columns-layout {
    overflow: hidden;
}

.columns-layout .column {
    float: left;
    margin-left: 10px;
}

.columns-layout .column:first-child {
    margin-left: 0
}

.columns-layout.two-column .column {
    width: 310px;
}

.columns-layout.two-column h3 {
    margin: 6px 0 0;
}

.columns-layout.two-column p {
    margin-bottom: 0;
}

.columns-layout.three-column {
    margin-bottom: 16px;
}

.columns-layout.three-column .column {
    margin-left: 0;
    margin-bottom: 10px;
    width: 200px;
    padding-right: 10px;
    height: 70px;
}

.columns-layout.three-column .column .thumbnail-wrap {
    float: left;
}

.columns-layout.three-column .column h3 {
    margin-left: 80px;
}

.columns-layout.four-column .column {
    width: 150px;
}

.columns-layout.four-column h3 {
    margin: 6px 0 0;
}

ul.links,
ul.links li {
    margin: 0;
    padding: 0;
    list-style-type: none; 
}

ul.links {
    margin-top: 20px;
}

.athena-home a {
    color: #327084;
    text-decoration: none;
}

.athena-home a:hover,
.athena-home a:focus {
    color: #275666;
    text-decoration: underline;
}

/** Athena Extensions **/

.body.athena-home {
    width: 800px;
}

.athena-home p {
    margin-bottom: 1em;
}

.athena-home h1 {
    font-size: 32px;
    font-weight: normal;
    margin: 0 0 .25em;
}

.athena-home h2 {
    font-size: 22px;
}

.athena-home h2,
.athena-home h3 {
    color: #333;
}

.athena-home ul.thumbnails {
    margin-top: 5px;
}

.athena-home ul.thumbnails > li {
    box-shadow: 1px 0 0 #e4e4e4, -1px 0 0 #e4e4e4;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

.athena-home ul.thumbnails > li > h3 {
    font-size: 15px;
    line-height: 17px;
    margin: 0;
    padding: 8px;
    height: 34px;
    display: table-cell;
    vertical-align: middle;
}

.athena-home ul.thumbnails .thumbnail {
    width: auto;
    height: auto;
}

.athena-home ul.thumbnails.one-column .thumbnail {
    width: 800px;
    height: 250px;
}

.athena-home ul.thumbnails.two-column .thumbnail {
    width: 390px;
    height: 170px;
}

.athena-home ul.thumbnails.three-column .thumbnail {
     width: 256px;
    height: 150px;
}

.athena-home ul.thumbnails.four-column .thumbnail {
    width: 190px;
    height: 140px;
}

.athena-home ul.thumbnails + div.columns-layout {
    margin-top: 25px;
}

.athena-home ul.links {
    margin: 0;
}

.athena-home div.columns-layout {
    margin-bottom: 2em;
}

.athena-home .thumbnail-wrap .video-icon {
    left: 8px;
    bottom: 8px;
}

.athena-home .thumbnail-wrap span.video-icon-wrap .video-icon {
    left: 0;
    bottom: 0;
}

.athena-home .thumbnail-wrap span.video-icon-wrap {
    position: absolute;
    overflow: hidden;
    width: 32px;
    height: 32px;
    left: 8px;
    bottom: 8px;
}

.athena-home .column:hover .thumbnail-wrap span.video-icon-wrap .video-icon {
    bottom: auto;
    top: 0;
}

.athena-home .columns-layout {
    overflow: visible;
}

.athena-home .columns-layout::after {
    content: "";
    display: table;
    clear: both;
}

.athena-home .columns-layout.two-column .column {
    width: 390px;
}

.athena-home .columns-layout .column + .column {
    margin-left: 20px;
}

.athena-home .columns-layout.three-column .column {
    height: auto;
    width: 256px;
    margin-bottom: 0;
    padding-right: 0;
}

.athena-home .columns-layout.three-column .column + .column {
    margin-left: 16px;
}

.athena-home .columns-layout.three-column .column .thumbnail-wrap  {
    float: none;
}

.athena-home .columns-layout.three-column .column h3 {
    margin-left: 0;
}

.athena-home .columns-layout.four-column .column {
    width: 190px;
}

.athena-home .columns-layout.four-column .column + .column {
    margin-left: 13.33px;
}

.athena-home ul.thumbnails.four-column + ul.thumbnails {
    margin-top: -12px;
}

/** Product Extensions **/

.body.product-home {
	background-image: url(../images/product-splash.png);
	background-repeat: no-repeat;
	width: 860px;
}

.product-home a:link {
	text-decoration: none;
    color: #000000;
}

.product-home a:visited {
    text-decoration: none;
    color: #000000;
}

.product-home a:hover {
    text-decoration: underline;
    color: #000000;
}

.img.product-home {
    border: 0px;
}

.container.product-home {
    width: 700px;
/* You may want to tweak the margin-left parameter to best line up your table with the product icon and name appearing within your splash screen image.  */
    margin-left: 80px;
    margin-top: 125px;
}

.getStarted.product-home table {
/* You may want to tweak the width parameter to optimize the overall table width for the text it contains.  Also, see the homepage.htm file to adjust widths of each individual column in this table.
Caution:  Adjusting the width of this table will alter the alignment of the "share.product-home" table.  Adjust the right-margin parameter in that table to compensate.  */
	width: 450px;
	height: 200px;
	border-collapse: collapse;
	opacity: 0.78;
	filter: Alpha(opacity=90);
	float: left;
}

.getStarted.product-home td{
    vertical-align: middle;
    text-align: middle;
    padding: 10px;
    font-size: 16px;
    font-family: Artifakt ElementOfc;
    font-weight: light;
    color: #000000; 
    background-color: #FFFFFF;  
    border: none;
}

.getStarted.product-home th{
    vertical-align: middle;
    background-color: #747471;
    padding: 10px;
    font-size: 16px;
    font-family: Artifakt ElementOfc;
    font-weight: bold;
    color: #FFFFFF;
    text-align: left;
    border: none;
}

.resources.product-home table {
/* You may want to tweak the width parameter to optimize the overall table width for the text it contains.  Also, see the homepage.htm file to adjust widths of each individual column in this table.  */
	width: 620px;
	height: 50px;
	margin-top: 95px;
/* You may want to tweak the margin-left parameter to center your resources links between the left edge of the splash screen image and the Autodesk logo, or to line it up with the table above.  */
	margin-left: -8px;
	border-collapse: collapse;
	opacity: 1.00;
	filter: Alpha(opacity=90);
	float: left;
}

.resources.product-home td{
    vertical-align: middle;
    text-align: middle;
/* You may want to tweak the padding and font-size parameter to fit longer text strings or a greater number of links in your resources table.  Also, see the homepage.htm file to adjust widths of each individual column within this table.  */
    padding: 20px;
    font-size: 12.5px;
    font-family: Artifakt ElementOfc;
    font-weight: light;
    color: #000000; 			
    border: none;
}

.share.product-home table{
    width: 45px;
    margin-top: -195px;
/* Adjust the margin-right parameter to realign the social network icons if you're adjusted the width or left-margin of the getStarted.product-home table.  A more negative right-margin moves the icons further to the right.  */
	margin-right: -60px;
    border-collapse: collapse;
    opacity: 1.0;
    filter: Alpha(opacity=90);
    height: 200px;
    float:right;
}

.share.product-home td{
    vertical-align: middle;
    padding: 2px;
/* background-color: #ECECEC; */
	border: none;
}

.clear.product-home {
    clear: both;
}