/* style sheet for articles */

/*test styles for layout */
.arttestBG1{
    height: 600px;
    background-color: yellowgreen;
}

.arttestBG2 {
    background-color: yellow;
    
}
/* container for the links in sticky div right side of article page */
.ArticlerightSideStickyContainer {
  height: 90%;
  width: 100%;
}

/* container for right side of article page links sticky Pos */
.articleRightSideStickyLinks{
    height: 20%;
}

/* text container for sticky right side links */
.articleRightSideStickyLink {
    float: right;
    width: 60%;
    height: 100%;
}

/* text style for links on right side of page */
.articleRightSideStickyLinkTextStyle {
    font-size: large;
}

/* image on right side links in sticky div */
.articleRightSideImageSticky {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    table-layout:fixed;
}

/* container for image in rightr side of article */
.articleRightSideImageContainerSticky {
    width: 40%;
    height: 100%;
    float: left;
}

/* main container for all of the right side of article page */
.ArticleRightSideMainContainerSticky {
    height: 600px;
    position: sticky;
    top: 0;
}

/*container for images within the article contents */
.articleMainImageContainer {
    width: 100%;
}

.articleMainImageContainer h6 {
    color: grey;
    font-size: small;
}

/*image styling for image within article Contents */
.MainImageForArticles {
    max-width: 100%;
}

/* containers for portions of text within the article and extra styling for specific HTML elements */
.ArticleTextContainer {
    font-size: Larger;
}

.ArticleTextContainer h2 {
    margin-bottom: 30px;
}

.ArticleTextContainer p {
    margin-bottom: 30px;
}

/* text for date created styling */
.articlePageDateCreated {
    font-size: small;
    color: grey;
}

/* class for within article image container with elements of HTML styled too */
.articleInContentImageContainer {
    width: 100%;
    margin-bottom: 30px;
}

.articleInContentImageContainer h6 {
    color: grey;
    font-size: small;
}

.articleInContentImageContainer img {
    max-width: 100%;
    
}


/* changes for Mobile Styles */

/* mobile styles for text in article */ 
.ArticleTextContainerMobile {
    font-size: Large;
}

.ArticleTextContainerMobile h2 {
    margin-bottom: 20px;
}

.ArticleTextContainerMobile p {
    margin-bottom: 20px;
}

/* below Article Related Articles container */
.ArticleBottomContainer {
    height: 600px;
    margin-bottom: 30px;
}