/*  CSS Document                             */

@charset "UTF-8";



/* Global Styles */

html {

    margin:0;

    overflow-x:hidden;

}



body {

    margin:0;

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    background-color: #f8f8f8;

    -webkit-font-smoothing: antialiased;

    overflow-x:hidden;

}



/* Adobe Clean */

.light-text { font-family: "Adobe Clean", Arial, Helvetica, sans-serif;font-weight:300 }

.normal-text { font-family: "Adobe Clean", Arial, Helvetica, sans-serif;font-weight:400 }

.regular-text { font-family: "Adobe Clean", Arial, Helvetica, sans-serif;font-weight:400 }

.bold-text { font-family: "Adobe Clean", Arial, Helvetica, sans-serif;font-weight:700 }

.condensed-text { font-family: "Adobe Clean", Arial, Helvetica, sans-serif;font-weight:400 }

.condensed-bold-text { font-family: "Adobe Clean", Arial, Helvetica, sans-serif;font-weight:700 }



.create_heroblock {

    margin: 0px;

    padding: 0px;

    height:120px;

}



.create_base_wrapper

{

}



.create_base_wrapper_new

{

}



.create_cardblock {

    background-color: #F0F0F0;

    top:400px;

    margin: 0px;

    padding: 0px;

    display:inline-block;

/*    background-color: #00F0F0;*/

}



.category_template {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 14px; font-weight: normal;

    color: #000;

    margin: 0px;

    padding: 0px;

    width: 100%;

    background-color: #F8F8F8;

}



/**

 * Emojizer CSS

 */

.emoji-svg

{

    width: 14px;

    height: 14px;

    display: -moz-inline-stack;

    display: inline-block;

    zoom: 1;

    position: relative;

    top: 1px;

}



.create_base_footer

{

    /*position:fixed;*/

    /*bottom:0px;*/

    left:0px;

    right:0px;

    margin-bottom:0px;

    margin-left:0px;

}



/* Hero Sectional Styles */



#HeroContainer {

    display: block;

    left: 0px; width: 840px; height: 400px;

    background-color: #EEE; padding: 0px;

}

#HeroContainerImage {

    position: absolute;

    background-position: center center;

    background-size: cover;

    height: 400px;

    width: 100%;

}



#HeroImage {

    margin-left:-17px;

}



#HelloCardContainer {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    color:#1d1f1f;

    display: block;

    position: absolute;

    top: 43px;

    left: 289px;

    width: 248px;

    min-height: 183px;

    background-color: #FFF;

    padding: 21px 16px 26px;

    color: #000;

    text-decoration: none;

    box-shadow: 0px 5px 16px rgba(0,0,0,0.45);

}

/*

 #HelloCardContainer:hover {

	box-shadow: 7px 7px 10px #444;

 }

 */

#HelloCardContainer img {

    position: relative;

    left: 60px;

}

#HelloCardContainer hr {

    width: 164px;

    border: 0;

    border-top: 1px solid #b3d618;

}

.photoshop #HelloCardContainer hr {

    border-top-color: #2DCAF9;

}

.indesign #HelloCardContainer hr {

    border-top-color: #fd4891;

}

.dreamweaver #HelloCardContainer hr {

    border-top-color: #88ff32;

}



#HelloCardContainer h1 {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-weight: 400;

    font-size: 24px;

    text-align:center;

    word-wrap: break-word;

    margin-top: 0px;

    margin-bottom: 14px;

}

#HelloCardContainer h2 {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-weight: 400;

    font-size: 16px;

    text-align:center;

    margin-top: 16px;

}

#HelloCardContainer h3 {

    font-size: 14px;

    line-height: 24px;

    text-align:center;

    min-height: 48px;

    margin-top: 9px;

}

/*

 #HelloCardFooter img {

	position: relative;

	top: -5px;

	float: left; height: 20px;

	left: 0px;

 }

 */



.NewDocButton

{

    background-color: #4197FB;

    border-radius: 5px;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: normal;

    width:164px;

    padding:10px 12px 9px 12px;

    cursor:pointer;

    margin-right:10px;

}



.NewDocButton:hover

{

    text-decoration:none;

    color: #FFFFFF;

}



.OpenDocButton

{

    background-color: #4197FB;

    border-radius: 5px;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: normal;

    width:164px;

    padding:10px 12px 9px 12px;

    cursor:pointer;

}

.OpenDocButton:hover

{

    text-decoration:none;

    color: #FFFFFF;

}



#HelloCardFooter{

    margin-top: 15px;

    text-align: center;

}



#HelloCardFooter div {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 15px; font-weight: normal;

    background-color: #4197fb;

    border-radius: 5px;

    color: #FFFFFF;

    height: 32px; width: 164px;

    line-height: 32px;

    margin: 0 auto;

}



#HelloCardContentType {

    float: left;

    margin-left: 5px;

}



#HelloCardContentDuration {

    float: right;

}





/* Card Sectional Styles */



.categoryCard {

    display: block;

    float: left;

    width: 30%;

    height: 181px;

    background-color: transparent;

    padding: 0px;

    color: #4198FF;

    text-decoration: none;

    margin-bottom: 20px;

    margin-left: 1.45%;

    margin-right: 1.45%;

    margin-top: 0px;

    position: relative;

    box-sizing:border-box;

}



.cardImage {

    height: auto;

    max-width: 100%;

}



.cardContainer {

    padding-left: 10px; padding-right: 10px; padding-top: 12px;

    position: relative;

    background-color: #ffffff;

    margin-top: 0px;

    transition: margin-top 0.3s;

}



.categoryCard:hover .cardContainer{

    margin-top: -10px;

}



.categoryCard:visited h2 {

    color: #FFFFFF;

}



.categoryCard h2 {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    color: #444;

    margin: 5px 0;

    padding:0;

    max-width:180px;

    line-height: 130%

}



.categoryCard h3 {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-weight: normal;

    margin-top: 5px;

    margin-bottom: 5px;

}



.categoryCard img{

    border: none;

}



#HelloCards {

    width: 100%;

    margin: 0;

    padding: 0;

    display:inline-block;

}



.cardsTitleBar

{

    margin: 25px 0px 25px 20px;

    display:inline-block;

}



.helloCardsTitleTxt

{

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: normal;

    text-align:center;

    display : inline-block;

    margin:5px 0px 0px;

    color:#727272;

    width:100%;

}



.template_filter_select

{

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 15px;

    float: right;

    display:none;

}



.template_filter_option

{

    font-size: 20px;

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

}



.cardTitle

{

    float: left;

    padding-top: 6px; padding-left: 10px;

    width: 190px;

    height: 22px;

}



a.cardTitleLink

{

    text-align:right;

    text-decoration:none;

    float:right;

    color:#444;

    font-size: 14px;

    margin-top:7px;

}



a:hover.cardTitleLink

{

    color:#4197fb;

}



.cardCta

{

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    margin:3px -2px 0 0;

    float:right;

}



.newSite {

  display:block;

  overflow:hidden;

  position: absolute;

}



.newSite:before {

  content:"Install Theme";

  background:rgba(0,0,0,0);

  position:absolute;

  top:-152px;

  left:0;

  width:100%;

  text-align:center;

  height:152px;

  line-height:152px;

  color:#ccc;

  transition: all .3s;

}



.newSite:hover:before {

  background:rgba(0,0,0,0.9);

  top:0;

}



.categoryCardFooter {

    bottom: 0;

    background:transparent;

    color: #000;

    height: 30px;

    position: absolute;

    text-decoration: none;

    width: 254px;

}



.categoryCardFooter img {

    float: left;

    width: 20px;

    height: 18px;

    padding-right: 2px;

    position: relative;

}



.categoryCardContentType {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #727272;

    border-right: 1px solid #EAEAEA;

    float: left;

    padding-top: 8px; padding-left: 10px;

    width: 127px;

    height: 22px;

}



.categoryCardContentDuration {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 12px;

    float: left;

    padding-top: 8px; padding-left: 16px; padding-right: 10px;

    vertical-align: middle;

    color: #727272;

}



.categoryCardContentTypeIcon

{

    margin-top: 6px;

    margin-right: 5px;

    float: right;

    opacity: 0.5;

    filter: alpha(opacity=50);

}

.categoryCardContentTypeIcon:hover

{

    opacity: 1;

    filter: alpha(opacity=100);

}



/* Add More Button Sectional Styles */



#addMoreButton {

    background-color: #389AFC;

    border-color: #000000;

    border-radius: 100px;

    border-style: none;

    color: #FFFFFF;

    font-size: 20px;

    height: 50px; width: 50px;

    line-height: 50px;

    margin-left: 395px;

    margin-bottom: 30px;

    opacity: 0.9;

    position: relative;

    text-align: center;

    cursor: pointer;

}



#HelloContentWrapper {

    width: 840px;

    background-color: #F8F8F8;

}



/* Card Divider for getting-started and tips-techniques */

.cardDivider {

    margin-left: 23px;

    height: 61px;

    clear: left;

    width: 794px;

}



/**/

.helloCardsScroll

{

    overflow-y:auto;

}



.helloSixCardBlock {

    display:inline-block;

}



.newFeaturesCardsBlock {

    padding-left: 7px;

}



/* small offer card */

div#HelloSmallOffer {

    height: 260px;

    width: 254px;

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    float: left;

}



#SmallContainer {

    position:relative;

}



#SmallImage {

    position:absolute;

    left:0;

    top:0;

}



.small-offer-content {

    z-index: 100;

    position: absolute;

    font-weight: normal;

    top: 40px;

    display: inline-block;

    left: 0px;

    padding: 0 20px;

    text-align: center;

}



.small-offer-button {

    font-family: "Adobe Clean", Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: normal;

    background-color: #4197fb;

    border-radius: 5px;

    color: #FFFFFF;

    height: 37px;

    width: 166px;

    line-height: 37px;

    text-align: center;

    margin-left: 24px;

}



.black-text {

    color: black;

}



.blue-text {

    color: #4197fb;

}



.small-offer-title {

    font-size: 22px;

    line-height: 22px;

    margin-bottom: 10px;

}

.small-offer-subtitle {

    font-size: 15px;

}



.small-offer-body {

    font-size: 13px;

    margin: 5px 0;

}

.small-offer-footnote {

    font-size: 12px;

}



.create_base_title

{

    font-weight:300;

    font-style:normal;

    height:30px;

    width:254px;

    margin: 0;

    font-size: 24px;

    color:#1d1f1f;

}



.create_base_container {

    width:794px;

    text-align:left;

    padding:34px 0 0 5px;

}



#createNewContainer

{

    width:254px;

    max-width:254px;

    float:left;

    white-space: nowrap;

}

#openRecentContainer

{

    width:524px;

    max-width:524px;

    float:left;

    margin-left:16px;

    white-space: nowrap;

}

#optionalContainer

{

    width:254px;

    float:left;

    margin-left:16px;

    white-space: nowrap;

}



#pxtextruler { position: absolute; top: -10000; visibility: hidden; white-space: nowrap; font-size:14px; padding:5px 0px 4px 0px; }



a.new_site_button { display: block; text-decoration: none; margin:-14px 0 0 0px; cursor:pointer;}

a.new_site_button:hover { background-color: #EBEBEB;}

a.new_site_button p {

    font-size:14px;

    padding:5px 0px 4px 0px;

    color:#727272;

    text-overflow:ellipsis;

    overflow:hidden;

    white-space:nowrap;

}

a.new_site_button p:hover {color:#0099F0;}

a.new_site_button img { float:left; margin:6px 7px 0 6px; height:15px;}



/**

 * Bootstrap tooltip CSS

 */

a + .tooltip > .tooltip-inner

{

    max-width: 508px;

    background-color: #CCCCCC;

    border: 1px solid #CCCCCC;

    border-radius: 0px;

    color: #000;

    font-size: 13px;

    text-overflow:ellipsis;

    overflow:hidden;

    white-space:nowrap;

    margin-left:15px;

}



a.new_site_button + .tooltip > .tooltip-inner

{

    white-space:pre-wrap;

}



a + .tooltip.bottom > .tooltip-arrow

{

    left:10px;

    border-left:0px solid transparent;

    border-right:0px solid transparent;

    border-bottom:0px solid #CCCCCC;

}



/**

 * Bootstrap sets some default on box-sizing to border-box,

 * but for Hello we currently need it set to content box.

 * So do the override here.

 */

* {

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

}

*:before,

*:after {

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

}



/**/

