/***********************
 * Stylesheet Structure
 * Section 1 - Global Body, Font and Link Settings
 * Page layout
 * links
 * Button Stuff
 * Video, Map, and Modal stuff
 * McMenu
 * C2 stuff
 * scrollbar styles
 ***********************/





/* ------ Section 1 - Global Body, Font and Link Settings ------ */

* {box-sizing: border-box;} /*this is to make ALL elements behave with borders and padding */

html {
background: #ffffff url(../image-files/aj-page-bg.jpg) repeat center top;
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
}


body {
padding: 0;
margin: 0;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #545454;
background: transparent url(../image-files/aj-bodybg.jpg) no-repeat center top;
}

a:link img{
opacity:1;
transition:opacity .25s ease-in-out;
-moz-transition:opacity .25s ease-in-out;
-webkit-transition:opacity .25s ease-in-out;
}

a:hover img{
opacity:.6;
filter:grayscale(100%);
}





h1,h2,h3,h4,h5,h6 {
font-family: "Arial Black", sans-serif;
line-height: 1.5;
}

h1 em,h2 em,h3 em,h4 em,h5 em,h6 em {
font-style: normal;
}

h1 {
font-size: 2rem;
color: #2b9fe1;
margin: 0 0 16px 0;
text-align: center;
}

h2 {
font-size: 1.5rem;
color: #2b9fe1;
margin: 30px 0 10px 0;
text-align: left;
}

h3 {
font-size: 1.2rem;
color: #2b9fe1;
margin: 0 0 10px 0;
text-align: left;
}

h4 {
font-size: 1.1rem;
color: #2b9fe1;
text-align: left;
margin: 0 0 10px 0;
}

h5,
h6 {
font-size: 1rem;
color: #666666;
text-align: left;
margin: 0 0 10px 0;
}

/*Style HTML elements */
p {
margin: 0 0 15px 0;
}

ul {
list-style-type: disc;
padding: 0;
margin: 0 0 30px 0;
}

ul li {
padding: 0;
margin: 0 0 0 45px;
line-height: 2;
}

img{
    max-width: 100%;
    height: auto;
}




img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

#ContentColumn img {
border: 1px solid #eee;
padding: 3px;
border-radius: 3px;
background: white;
}

#ContentColumn .c2inv img,
#ContentColumn #SUBSCRIBE img,
#ContentColumn #news img,
#ContentColumn .rss-icons img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}



#ContentColumn ul  {
padding-top: 20px;
padding-bottom: 20px;
}


#ContentColumn ul li {
    padding-left: 5px;
    color: #101010;
    font-size: 1rem;
    font-family: "open sans", sans-serif;
}


#ContentColumn ul li:nth-child(even) {
background: #fcfcfc;
}

#ContentColumn .text-NavBar ul  {
border-top: none;
border-bottom: none;
}

#ContentColumn .text-NavBar ul li:nth-child(even) {
background: initial;
}

ol {
list-style-type: decimal;
padding: 0 0 0 10px;
margin: 0;
}

ol li {
padding: 0;
margin: 0 0 0 30px;
}

input[type="text"] {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: .9rem;
color: #545454;
width: 168px;
padding: 5px;
margin-bottom: 8px;
border: 1px solid #dadbd8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

input[type="submit"] {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: .9rem;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
background-color: #2b52e1;
padding: 5px 15px;
margin: 10px 0;
border: 1px solid #2b52e1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

/* -- General Link Styling -- */

a:link {
color: #2b52e1;
font-weight: bold;
}

a:visited {
color: purple;
}

a:hover {
color: #2b9fe1;
}





/* ------ Section 3 - Page Structure Details ------ */



#PageTop {
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 110px;
z-index: 100;
border-bottom:  3px solid #97E1DA;
}

#PageWrapper {
width: 96%;
max-width: 1060px;
margin:  0 auto;
padding-top: 0;
padding: 0;
}

#Header {
position: relative;
width: 96%;
max-width: 1060px;
height: 200px;
}



#Header .Liner {
position: absolute;
    bottom: 0 !important;
    
    height: 30px;
    width: 380px;
    background: rgba(255, 255, 255, .55);
    border-radius: 5px 5px 0 0;
}


div .top-social-holder {
    position: relative;
    display: block;
    margin-top: 0;
    margin-left: 20px;
}
  


#ContentWrapper {
width: 1060px;
max-width: 100%;
margin: 0 auto 30px auto;
background: rgba(255, 255, 255, .55);
border-radius: 0 7px 7px 7px;
box-shadow: 0 3px 3px #ccc;
}



#ContentColumn {
width: 96%;
max-width: 1020px;
    margin: auto;
    padding: 20px;
    border-radius: 7px;
    padding: 20px 10px;
}

#ContentColumn .Liner {
position: relative;
    margin: 0;
    padding: 30px 115px;
    z-index: 10;
    background: white;
    border-radius: 7px;
}



#NavColumn, #ExtraColumn {
display: none;
}

.footer-wrap {
    background: white;
    display: block;
    padding: 20px;
    border-radius: 7px;
    box-shadow: 0 3px 3px #ccc;
}

.footer-wrap::after {
  content: "";
  clear: both;
  display: table;
}


#Footer {
clear: both;
width: 96%;
max-width: 1060px;
margin: 0 auto;
background: transparent;
}

.Liner {
padding: 10px;
*zoom: 1;
}



#Footer .Liner {
padding: 1px 0;
background: transparent;
}

/*this is to move the breadcrumbs away from the left edge*/
#Footer .Liner span {
padding: 5px;
background: transparent;
}

/* -- Top Bar -- */

#TopBar {
position: relative;
width: 1060px;
max-width: 100%;
height: 59px;
margin: 0 auto;
}

#logo {
width: 331px;
height: 55px;
padding-top: 15px;
}

#SocialBar {
position: absolute;
width: 340px;
height: 37px;
top: 15px;
left: 355px;
}



#SocialBar img {
    margin-right: 12px;
}

#SocialBar ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#SocialBar ul li {
display: inline;
margin: 0;
padding: 0 1px;
}

#calm {
position: absolute;
width: 59px;
height: 59px;
top: 3px;
left: 705px;
}

#search {
    position: absolute;
    top: 10px;
    right: 20px;
    border: 1px solid #eee;
    border-radius: 3px;
    padding:8px;
    background: #fbfbfb;
}





.widerList {
list-style-type: none;
padding: 0;
margin: 0;
}

.widerList li {
padding: 0;
margin: 0;
}

/* -- Navigation Link styles -- */





/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.imageCaptionLinkGroup {}

.imageCaptionLinkGroup img {}

.imageCaptionLinkGroup href {}

.imageCaptionLinkGroup a {}

.imageCaptionLinkGroup .caption {}

/* -- Horizontal Text NavBar -- */

.text-NavBar ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.text-NavBar ul li {
display: inline;
padding: 0;
margin: 0;
}

#PageTop .text-NavBar {
position: absolute;
top: 69px;
width: 100%;
background-color: #ffffff;
border-bottom: 3px solid #97e1da;
padding: 7px 0;
text-align: center;
}

#PageTop .text-NavBar a,
#PageTop .text-NavBar a:visited {
font-family: "arial black", san-serif;
font-size: 1rem;
font-weight: normal;
color: #7f7f7f;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 7px 14px;
}

#PageTop .text-NavBar a:hover,
#PageTop .text-NavBar a.anguilla-card:hover {
color: #97e1da;
}

#PageTop .text-NavBar a.anguilla-card {
color: #2B9FE1;
padding-top: 4px;
padding-bottom: 4px;
}

.anguilla-card-right-nav {
    position: relative;
    display: block;
}

.anguilla-card-right-nav span {
    position: absolute;
    top: 41px;
    width: 100%;
    text-align: center;
    color: #F00;
    text-transform: uppercase;
    font-size: .75rem;
}

.anguilla-card-right-nav:hover span {
    text-decoration: underline;
}

.anguilla-card-right-nav img {
    display: block;
    max-width: 100%;
}

#ContentColumn .text-NavBar {
border-bottom: 4px solid #f2f2f2;
margin: 0 auto 30px auto;
}

#ContentColumn .text-NavBar ul li {
padding: 0 10px 0 6px;
border-right: 2px solid #e6e6e6;
}

#ContentColumn .text-NavBar ul li:last-child {
border: none;
}

#ContentColumn .text-NavBar a {
text-decoration: none;
}

#ContentColumn .IntroBox .text-NavBar {
border-bottom: 2px solid #5776e7;
text-align: center;
}

#ContentColumn .IntroBox .text-NavBar a {
padding: 6px 12px;
}

#ContentColumn .IntroBox .text-NavBar a:hover {
color: #ffffff;
background-color: #5776e7;
}

#ContentColumn .IntroBox .text-NavBar ul li {
border-right: 2px solid #5776e7;
line-height: 2.5;
}

#ContentColumn .IntroBox .text-NavBar ul li:last-child {
border: none;
}

#Footer .text-NavBar p {
font-size: .75rem;
float: left;
width: 320px;
text-align: left;
padding: 7px 0 0 10px;
}

#Footer .text-NavBar {
background: transparent;
text-align: center;
padding: 15px 0;
}

#Footer .text-NavBar li a,
#Footer .text-NavBar li a:visited {
font-family: "Arial Black", san-serif;
font-size: 1rem;
text-decoration: none;
text-align: center;
padding: 5px 10px;
}




/* ------ Section 6 - Specific Font Styles ------ */

.sponsor {}

#NavColumn {}

#ExtraColumn {}

#Footer {}

#NavColumn h4 {}

#NavColumn h3 {}

#ExtraColumn h3 {
text-align: center;
}

#ExtraColumn h4 {}

.Caption {
font-size: .8rem;
font-weight: bold;
display: block;
margin: 30px 0 0 0;
text-align: center;
}

.ItemRight.Caption,
.ItemLeft.Caption {
text-align: center;
}

blockquote {
font-family: 'Courier New', monospace;
}

.QuotedText {
margin:12px 3%;
color:#006;
font-size:1rem;
line-height:20px;
font-family:'Courier New', Courier, monospace;
}

.small {}

.update {
color: #e12b62;
background-color: #ffffff;
border: 1px dashed #e12b62;
padding: 20px;
}



/* ------ Section 7 - Boxes ------ */

#postcard {}

#postcard img {}

#postcard h4 {}

.footerboxes {
text-align: center;
border-radius: 7px;
background: transparent;
}

.footerboxes h2 {
margin-bottom: 20px;
text-align: center;
}




.footerbox-inner {
vertical-align: top;
width: 170px;
padding:5px;
border: 1px solid lightblue;
display: inline-block;
float: none;
margin: 5px;
position: relative;
background:  #f3f3f3;
}

.footerbox-inner a .caption {
font-family:"Arial", sans-serif;
font-size: .75rem;
}

.footerbox-inner img {
margin-bottom: 10px;
padding: 5px;
background: white;
}

.boxtop {}

.boxcenter {}

.boxbottom {}

.non-nav-top {}

.non-nav-center {}

.non-nav-bottom {}

.nonnav-liner {}

.nonnav-liner p {}

.non-nav-top-rc {}

.non-nav-center-rc {}

.non-nav-bottom-rc {}

.nonnav-liner-rc {}

.nonnav-liner-rc p {}

.rightbox {}

.fblike-box,
.twitter-share-box {
    position: relative;
    width: 200px;
    padding: 5px;
    text-align: center;
    margin-top: -20px;
}

.fbcomment-box {}

.socialize-it {}

#PageWrapper .fb-comments-intro h2 {}

.site-sponsors {}

.site-sponsors img {}

.site-sponsors img:hover {}

.our-ads {}

.related-pages {}

.related-pages img {}

.related-pages img:hover {}

.CalloutBox {
background-color: #f2f2f2;
margin: 30px 0;
padding: 25px;
}

/*
.CalloutBox .non-nav-top {
width: 680px;
height: 10px;
margin-bottom: 10px;
background-image: url(../image-files/calloutbox-top.png);
}
*/
.CalloutBox .non-nav-liner {
margin: 0 25px;
}

.CalloutBox .non-nav-bottom {
width: 680px;
height: 10px;
margin-top: 15px;
background-image: url(../image-files/calloutbox-bottom.png);
}

.CalloutBox h3 {}

.CalloutBox h4 {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 1.2rem;
text-align: center;
}

.CalloutBox p {
margin: 10px 0 0 0;
}

#ContentColumn .linkbox .text-NavBar {
margin: 0 auto;
text-align: center;
border: none;
}

#ContentColumn .linkbox .text-NavBar ul li {
border-color: #bebebe;
}

#ContentColumn .linkbox .non-nav-top {
margin-bottom: 0;
}

#ContentColumn .linkbox .non-nav-bottom {
margin-top: 0;
}

.intro-title {
padding: 20px 25px 0 25px;
margin: 0;
background-color: #f2f2f2;
}

.IntroBox {
background-color: #f2f2f2;
padding: 25px 25px 5px 25px;
margin-bottom: 30px;
}

.IntroBox .rating {
font-size: .75rem;
}

.IntroBox h4 {}

.IntroBox p {}

.C2LeftBox {
width: 285px;
float: left;
padding: 20px;
margin: 5px 20px 0 0;
background-color: #f2f2f2;
text-align: center;
}

.C2LeftBox .non-nav-top {
width: 325px;
height: 10px;
margin-bottom: 10px;
background-image: url(../image-files/c2leftbox-top.png);
}

.C2LeftBox .non-nav-liner {
margin: 0 25px;
text-align: center;
}

.C2LeftBox .non-nav-bottom {
width: 325px;
height: 10px;
margin-top: 15px;
background-image: url(../image-files/c2leftbox-bottom.png);
}

.C2LeftBox h5 {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 1.25rem;
margin-top: 0;
color: #2b9fe1;
text-align: center;
}

.C2LeftBox p {}

.ReminderBox {}

.ReminderBox h5 {}

.ReminderBox p {}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter {}

.AdSenseBoxLeft {}

.AdSenseBoxRight {}

.AdSenseBoxCenter {}

.ReturnToNavBox {
width: 100%;
padding: 3px 0;
margin: 5px 0;
border-top: 1px dotted #cccccc;
border-bottom: 1px dotted #ccc;
font-size: .9rem;
background: transparent;

}

.ReturnToNavBox p {
padding: 10px 25px;
margin: 0;
}

/* -- RSS Box -- */

#RSSbox {}

.rss-icons {
width: 100px;
margin: 5px 10px 5px 0;
float: left;
}

.rss-icons ul {
list-style-type: none;
}

.rss-icons ul li {
padding: 0;
margin: 0;
line-height: 1.5;
}

/* -- News Box -- */

#news, #SUBSCRIBE {
    text-align:  center;
    padding: 15px;
    border:  1px solid #fafafa;
    background:  url(../image-files/aj-nonnav-center.png);
    margin-bottom: 20px;
}

#news .non-nav-top {}

#news .non-nav-center {}

#news .non-nav-bottom {}


#news .nonnav-liner {
}

#news .nonnav-liner h2 {
text-align: center;
margin: 0;
padding: 10px 20px;
}

#news .nonnav-liner p {
margin: 0 auto;
}

.news-item {
vertical-align: top;
position: relative;
display: inline-block;
font-size: 1rem;
color:#333;
background: #fff;
overflow: auto;
box-sizing: border-box;
border: 1px solid #ccc;
padding: 10px; 
border-radius:5px;
box-shadow: 3px 3px 3px #999;
margin:50px 20px;
max-width: 100%;
width: 320px;
overflow: hidden;
}

.news-item img {
max-width: 100%; 
height: auto;
margin:  0 auto;
}

.news-text {
position: absolute;
bottom: 0;
left: 0;
background:  rgba(255, 255, 255, .75);
text-align: left;
width: 100%;
padding: 5px 18px 20px 18px;
}






.news-text p {
font-size: .85rem;
}

#news a {
font-family:"Arial", sans-serif;
font-weight: bold;
font-size: 1.1rem;
text-decoration: none;
text-align: center;
}

/* -- Subscribe Box -- */

#SUBSCRIBE form table {
    margin-bottom: 50px;
}

#SUBSCRIBE  {
}

#SUBSCRIBE {

}

#SUBSCRIBE h2,
#SUBSCRIBE p {
margin: 0;
}

#SUBSCRIBE h2 {
padding: 10px 25px 20px 25px;
}

#SUBSCRIBE p {
padding: 0 25px 20px 25px;
}

#email-box {
position: relative;
width: 628px;
height: 166px;
margin: 0 auto 25px auto;
color: #808080;
background: #ffffff url(../image-files/email-box-bg.png) no-repeat center center;
}

#email-box p {
font-size: .75rem;
padding-top: 10px;
text-align: center;
}

#email-box .button {
position: absolute;
top: 70px;
right: 25px;
}

#email-box .row {
padding: 20px 0 0 25px;
width: 390px;
text-align: right;
}

#email-box input[type="text"] {
width: 190px;
padding: 4px;
margin: 0 10px;
}

#email-box input[type="submit"] {
margin: 0 0 0 20px;
}

/* -- Right Column Boxes -- */

#about input[type="submit"] {
font-size: .75rem;
padding: 3px 10px;
margin: 5px 0 10px 0;
}

#about input[type="text"] {
font-size: .75rem;
padding: 4px;
margin-bottom: 5px;
}

#about,
#subscribe-box,
#sponsors,
#favorites {
padding: 15px;
margin-bottom: 10px;
font-size: .75rem;
background-color: #f2f2f2;
}

#subscribe-box h3 {
margin-bottom: 5px;
}

#subscribe-box .button {
text-align: center;
}

#subscribe-box .button input[type="submit"] {
margin-top: 5px;
}

/*new css id added by aj */
#SPONSORS,
#TEESHIRTS,
#VISITORS {
    margin: 0 auto;
    background: white;
    padding: 20px;
}

#VISITORS {
    border-radius:5px 5px 0 0;
}


#VISITORS {
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 3px #ccc;
}

.footer-wrap #VISITORS {
    border-radius: 0;
    box-shadow: none;
}


#sponsors,
#favorites {
text-align: center;
}

#sponsors h3,
#favorites h3 {
margin-bottom: 0;
}

#sponsors p {
margin: 10px 0 0 0;
}

#sponsors a,
#favorites a {
font-family: "arial black", sans-serif;
font-size: .9rem;
}

#sponsors img,
#favorites img {
padding: 15px 0 5px 0;
}

/* -- Social Boxes -- */

.SocialBar3 {
   width: 80%;
   margin: 10px auto; 
   text-align: center;
   background: transparent;
   padding: 8px;
}

.SocialBar3 ul li {
display: inline;
margin: 0;
padding: 0 3px;
}

.SocialBar3 img{
 margin:  10px 12px;
 /*
 border: 1px solid lightblue;
 border-radius: 3px;
 padding: 3px;
 background: white;
 */
 background: transparent;

}

.SocialBar3 a:link {
    text-decoration: none !important;
}

#facebook-button {
vertical-align: top;
display:  inline-block;
margin-right: 10px;
position: relative;
padding-bottom: 10px;
}

#instagram-button {
vertical-align: top;
display:  inline-block;
margin-right: 10px;
position: relative;
padding-top:  7px;
padding-bottom: 10px;
}

#google-button {
display:  inline-block;
position: relative;
padding-bottom: 10px;
}

#google-follow {
display:  inline-block;
padding-bottom: 10px;
}

#twitter-button {
vertical-align: top;
display:  inline-block;
margin-right: 10px;
padding-bottom: 10px;
}

#facebook-bubble, #google-bubble {
font-size: .8rem;
position: absolute;
top: 25px;
left: 0;
width: 300px;
background-color: #e9f0ef;
padding: 15px;
z-index: 20;
-webkit-box-shadow: 0px 3px 6px rgba(50, 50, 50, 0.33);
-moz-box-shadow: 0px 3px 6px rgba(50, 50, 50, 0.33);
box-shadow: 0px 3px 6px rgba(50, 50, 50, 0.33);
}

#facebook-box {
    background: transparent;
    margin: 0;
    padding: 10px;
}

#ContentColumn #facebook-box {
margin-top: 50px;
}

/* -- C2 Boxes -- */

/*
.c2inv .non-nav-top {
width: 680px;
height: 10px;
background-image: url(../image-files/nonnav-top2.png);
}

.c2inv .non-nav-bottom {
width: 680px;
height: 11px;
background-image: url(../image-files/nonnav-bottom2.png);
}

.c2_invitation {
padding: 25px;
background-color: #f2f2f2;
}

#INV {
font-size: 2rem;
padding: 0;
margin: 10px 0 30px 0;
line-height: 0.85;
text-align: center;
}

.c2Form {
margin: 0 auto 25px auto;
padding: 25px;
color: #808080;
border: 1px solid #e8e8e8;
background-color: #ffffff;
text-align: center;
}

*/

/* ------ Section 8 - Frequently Used Styles ------ */

.getheretable {}

.getheretable th {}

.getheretable td {}

.getheretable tbody tr:hover td {}

.Clear,
.clear {
clear: both;
}

img {}

/* -- lists -- */

#ContentColumn ul {}

#ContentColumn li {}

#ContentColumn ol {}

#ContentColumn li {}

/* -- floats -- */

.ItemRight {
float: right;
margin: 5px 0 10px 10px;
text-align: left;
}

.ItemCenter {
background: #fafafa;
padding: 15px;
margin: 15px auto;
text-align: center;
clear: both;
max-width: 100%;
}

.button .ItemCenter{
    background: initial !important;
}

/************************
 This is for the youtube videos in an iframe, that are in the ItemCenter box.
 We do NOT need to use these, if we are using the video wrapper and container 
 classses, which is the recommended way to place video iframes on the site.
 ***********************/
 iframe {
    max-width: 100%;
    width: 560px;
    height: 315px;
    margin: 10px auto;
    text-align: center;
}

iframe img {
    bottom: 10px;
}


/***************************
 * This is new css to allow  videos wrapped in these classes to be 
 * responsive while still maintaining aspect ratio.
 * *************************/

.video-wrapper {
text-align:center;
width: 640px;
max-width: 100%;
margin:20px auto;
padding:10px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; 
height: 0; 
overflow: hidden;
background: black;
box-shadow: 0 3px 4px #aaa;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.map-holder{
    max-width: 610px;
    position: relative;
    margin: 20px auto;
    text-align: center;
}

.map-holder img {
    border: 4px solid lightblue !important;
}

.map-caption {
    font-size: 13px;
    color: #999;
    font-style:  italic;
    text-align: center;
    margin: 0 auto;
}

.map-overlay{
    background: rgba(0,0,0, .4);
    position: absolute;
    top: 0;     
    max-width: 100%;
    width: 610px;
    
    padding: 30px;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    text-shadow:  1px 1px #000;
}

.modal-footer .btn {
    background: lightblue;
    color: #333;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px;

}

.modal-footer .btn:hover {
    background: #393939;
    color: #eee;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px;
    box-shadow: 0 3px 3px #ccc;
}


.ItemLeft {
float: left;
margin: 5px 10px 10px 0;
text-align: left;
}

.MagImageWrapper {}

.mag {}

.center {
text-align: center;
}

.footerboxes h3 {}

#PageWrapper {}

div#sthoverbuttons.sthoverbuttons-pos-left {}

/* -- BlogIt -- */

.blogItItem {
padding: 20px 25px;
margin: 10px 0;
background-color: #f2f2f2;
}

.blogItItem h3 {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.blogItItem h6 {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: .85rem;
margin-bottom: 5px;
}

.blogItThumbnail {
width: 160px;
margin: 3px 30px 10px 0;
float: left;
}

.blogItReadMore {
clear: both;
margin-top: 20px;
}

.gmap {}

/* -- Tabs for subnav in Center Column -- */

#ContentColumn .text-NavBar ul {}

.text-NavBar ul li {}

#ContentColumn .text-NavBar a {}

/* -- ONLY for text-nav in Callout or introBox -- */

#ContentColumn .CalloutBox .text-NavBar ul {}

.text-NavBar ul li {}

#ContentColumn .CalloutBox .text-NavBar a {}

#ContentColumn .IntroBox .text-NavBar ul {}

#ContentColumn .IntroBox .text-NavBar a {}

/* -- Various Elements -- */

.mini-gallery ul {
margin: 25px;
text-align: center;
}

.mini-gallery ul li {
display: inline;
padding: 0;
margin: 0;
}

.imagePreview {
background-color: #f2f2f2;
padding: 25px;
}

.imagePreview p {
font-size: .85rem;
}

table#thumbs {
background-color: #f2f2f2;
width: 660px;
padding: 25px;
margin-bottom: 30px !important;
}

table#thumbs img {
border: 4px solid #ffffff !important;
}

.bottom-line {
margin: 0 10px;
border-top: 1px dashed #cccccc;
}

#TopOfThePage {
    display: none;
    /*
width: 960px;
background: transparent url(../image-files/bottom-bg.png) no-repeat center bottom;
font-family: "Arial Black", sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 20px 0;
*/
}

#TopOfThePage a {
text-decoration: none;
}

#copyright {
font-size: .85rem;
color: #a8a8a8;
text-align: center;
padding: 20px;
background: /*#ffffff url(../image-files/aj-page-bg.jpg) repeat center top*/ transparent;
}


.anchor {
position: relative;
}

.anchor span {
position: absolute;
top: -120px;
}


/***************
 * Buttons and related classes
 **************/
ul  .btn {
    color: blue !important;
    padding: 10px;
    margin: 10px;
    text-shadow: 1px 1px white;
    box-shadow: 1px 2px 3px #999;
}

.button-align {
   text-align: center;
    vertical-align: top!important;
    width: 32%;
    height: 50px;
    display: inline-block;
}

.button-align::after {
  content: "";
  clear: both;
  display: table;
}


/*****
 * these are for the sale button in the nav
 * **********/
.red {color: red; font-weight: bold;}

.btn-bdr {
border:1px solid #ccc;
padding:10px; 
border-radius:5px; 
background:#fff;
box-shadow: 1px 2px 2px #aaa;
}

.btn-bdr:hover {
color: black;
background: white;
border:1px solid #333;
}

.button {
   border-top: 1px solid #93caed;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#70acd4), to(#65a9d7));
   background: -webkit-linear-gradient(top, #70acd4, #65a9d7);
   background: -moz-linear-gradient(top, #70acd4, #65a9d7);
   background: -ms-linear-gradient(top, #70acd4, #65a9d7);
   background: -o-linear-gradient(top, #70acd4, #65a9d7);
   padding: 6px 12px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: .9rem;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   }

.button:hover {
   border-top-color: #56788f;
   background: #56788f;
   color: #ccc;
   }

.button:active {
   border-top-color: #265575;
   background: #265575;
   }
   
.fb_iframe_widget_fluid {
    display: inline-block;
}

.mobileOnly, .mobile-only {
    display: none;
}

.desktopOnly, .desktop-only {
    display: block;
}

.menu-sponsors {display: none !important;}



/****************
 * this is just to move logo 10px from left edge in this screen width range.
 * Above this width, the logo is away from the left edge,
 * and below this range, it changes to centered mobile view. 
 * Also,increase social bar distance by same amount.
 * *************/
@media screen and (max-width: 1023px) and (min-width: 801px) {

#logo {
margin-left: 10px;
}

#SocialBar {
left: 365px;
}

.menu-sponsors{
    display: block !important;
    width: 100%;
    border-top: 3px solid lightblue;
    padding: 10px;
}

#mcmenu.menu-sponsors h3 {
    text-align: center !important;
}

.menu-sponsors::after {
  content: "";
  clear: both;
  display: table;
}

.menu-sponsors img {
    padding: 15px;
}

}/* end of large sized media query */ 

/********************************
NEW css for mobile, breakpoint set to 800px, instead of the tradional iPad size of 
768px. This is because many Sumsung tablets use 800px as their screensize so makes 
sense to include those in the tablet styles.
*********************************/

@media only screen and (max-width: 800px) {

.desktopOnly, .desktop-only {
    display:none;
}
.mobileOnly, .mobile-only {
    display:block;
}

.menu-sponsors{
    display: block !important;
    width: 100%;
    border-top: 3px solid lightblue;
    padding: 10px;
}
.menu-sponsors img {
    padding: 15px;
}

html {
background: #ffffff url(../image-files/aj-page-bg.jpg) repeat center top;
padding: 0;
margin: 0;

}

body {
padding: 0;
margin: 0;
background-attachment: fixed;
background: transparent url(../image-files/aj-body-tablet.jpg) top center no-repeat;

}

h1{font-size: 1.5rem;}
h2{font-size: 1.3rem;}




#PageWrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


#PageTop {
background-color: white;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 100;
border-bottom:  3px solid #97E1DA;
}

#TopBar {
position: relative;
width: 100%;
height: 120px;
margin: 0 auto;
}



#logo {
display: block;
width: 331px;
height: 55px;
padding-top: 0;
margin: 0 auto;
text-align: center;
}

#SocialBar {
position: relative;
display: block;
margin-top: 10px;
width: 100%;
height: auto;
top: initial;
left: initial;
text-align: center;
}



#Header, #Header .Liner {
padding: 0;
position: relative;
width: 100%;
height: 100px;
background: transparent;
}

#facebook-bubble{display: none;}


#ContentWrapper {
margin:  0 auto;
background: rgba(255,255,255, .6);
border-radius: 7px;
width: 98%;
padding-top: 10px;
padding-bottom: 10px;
}


#ContentColumn {
width: 96%;
padding-top: 10px;
padding-bottom: 10px;
margin:  0 auto;
padding:0;
border-radius: 7px;
}

#ContentColumn .Liner {
background: white;
position: relative;
margin: 0;
padding: 30px 20px;
z-index: 10;
}

#ContentWrapper {
margin:  0 auto;
background: rgba(255,255,255, .6);
border-radius: 7px;
width: 98%;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
}



#NavColumn {display: none;}

#ExtraColumn {
display: none;
}

#Footer {
clear: both;
width: 90%;
max-width: 100%;
margin: 0 auto;
background:  transparent;
border-radius:  7px;
margin-top: 20px;
}

.Liner {
padding: 10px;
*zoom: 1;
}



#Footer .Liner {
padding: 1px 0;
background: transparent;
}

.footerbox-inner {
width: 170px;
padding:5px;
margin: 5px;
}


.news-item {
margin:50px 10px;
max-width: 100%;
width: 270px;
overflow: hidden;
}



img {
    max-width: 100%;
    height: auto;
}

} /* end of 800px breakpoint */


@media only screen and (max-width: 767px) {

html {

}

body {
padding: 0;
margin: 0;
background-attachment: fixed;
background: transparent url(../image-files/aj-body-tablet.jpg) top center no-repeat;

}

#search {display: none;}


#PageWrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


#PageTop {
background-color: #ffffff;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 120px;
z-index: 100;
border-bottom:  3px solid #97E1DA;
}

#TopBar {
display: block;
position: relative;
width: 100%;
height: 59px;
margin: 0 auto;
}



#logo {
position: relative;
display: block;
width: 100%;
height: 55px;
padding-top: 0;
margin: 0 auto;
}

#SocialBar {

display: block;
width: auto;
height: auto;
text-align: center;
}



#Header, #Header .Liner {
padding: 0;
position: relative;
width: 100%;
height: 100px;
background: transparent;
}


#ContentWrapper {
margin:  0 auto;
background: rgba(255,255,255, .6);
border-radius: 7px;
width: 98%;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
}


#ContentColumn {
width: 96%;
padding-top: 10px;
padding-bottom: 10px;
margin:  0 auto;
padding:0;
border-radius: 7px;
}

#ContentColumn .Liner {
background: white;
position: relative;
margin: 0;
padding: 10px;
z-index: 10;
}



#NavColumn,
#ExtraColumn {
display: none;
}

 

#Footer {
clear: both;
width: 100%;
max-width: 100%;
margin: 0 auto;
background:  transparent;
border-radius: 0;
margin-top: 0;
}

.Liner {
padding: 10px;
*zoom: 1;
}



#Footer .Liner {
padding: 1px 0;
background: transparent;
}

.footerbox-inner {
width: 190px;
max-width: 45%;
padding:5px;
margin: 5px;
}


.news-item {
    display: block;
    margin: 50px auto;
    max-width: 100%;
    width: 320px;
    overflow: hidden;
}


img {
    max-width: 100%;
    height: auto;
}

#facebook-box {
    background: transparent;
    margin: 0;
    padding: 10px;
}

#ContentColumn #facebook-box {
margin-top: 50px;
}


#SUBSCRIBE form table {
    width: 100%;
    margin: 20px 0;
}

#SUBSCRIBE form input[type="text"],
#SUBSCRIBE form input[type="submit"] {
    width: 80%;
}

#SUBSCRIBE form > table > tr > td{
font-size:  85% !important;
}

}

@media only screen and (max-width: 560px) {
.ItemRight, .ItemLeft {
float: none !important;
display: block;
margin: 20px auto;
text-align: center;
}
}


@media only screen and (max-width: 480px) {

html {

}

body {
padding: 0;
margin: 0;
background-attachment: fixed;
background: transparent url(../image-files/aj-body-tablet.jpg) top center no-repeat;

}

#PageTop {
position: relative;
height: 120px;
background: white;
}

#SocialBar img {
    width: 20px;
    margin: 8px;
}



#Header, #Header .Liner {
padding: 0;
position: relative;
width: 100%;
height: 100px;
background: transparent;
text-align: center;
padding-top: 10px;
}


#ContentColumn .Liner {
background: white;
width: 98%;
margin: 10px auto;
}


.footerboxes {
width: 98%;
max-width: 98%;
margin: 0 auto;
}
}

@media only screen and (max-width:375px) {

html {

}

body {
padding: 0;
margin: 0;
background-attachment: fixed;
background: transparent url(../image-files/aj-body-mobile-big.jpg) top center no-repeat;

}

#PageTop {
position: relative;
height: 110px;
}

#SocialBar img {
    width: 20px !important;
    margin: 0 5px;
}


#Header, #Header .Liner {
padding: 0;
position: relative;
width: 100%;
height: 100px;
background: transparent;
}
*/

#ContentColumn .Liner {
background: white;
width: 98%;
margin: 10px auto;
}

#SPONSORS img,
#TEESHIRTS img,
#VISITORS img{
    max-width: 130px ;
    padding: 5px;
}

.footerbox-inner {
vertical-align: top;
width: 170px;
max-width: 140px;
}

}

/******************
 * THE MENU
 * ****************/

/************
 * this first breakpoint is just to position the menu hambuger
 * in the correct position for large tablet screens
 * **********/
@media only screen and (min-width:768px) and (max-width:800px) {

.menu-icon {
    position: absolute !important;
    top: 30px;
    left: 20px;
}

} /* end of this breakpoint */


#mcmenu
{
    width:auto;
    display:block;
    text-align:center;
    font-family: Arial, sans-serif;
    line-height:1.2;
    border-top: 1px solid #eee;
    border-bottom: 3px solid lightblue;
}
#mcmenu ul
{
    width:auto;
    display:block;
    font-size:0;
    text-align:center;
    color:#000000;
    background-color: #fcfcfc;
    border: transparent;
    margin:0; 
    padding:0;
    list-style:none;
    position:relative;
    z-index:999999990;
    border-radius: 3px;
} 

#mcmenu li
{
    display:inline-block;
    position:relative;   
    font-size:0; 
    margin:0;
    padding:0;
}

#mcmenu img {
    border: 1px solid #999;
    border-radius: 3px;
    padding: 3px;
    background: white;
    box-shadow: 1px 2px 3px #ccc;
    margin: 5px auto;
}

/*Top level items
---------------------------------------*/
#mcmenu .top-item 
{
    font-size:15px;
    color:inherit;
    text-decoration:none;
    padding:10px 8px; 
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:1px; 
    display:block;   
    position:relative;
    transition:all 0.3s;
}

#mcmenu li.over .top-item
{  
    color:#FFFFFF;
    background-color:#77A6F7;
}


/*Sub level items
---------------------------------------*/
#mcmenu .dropdown
{
    text-align:left;
    left:0;
    font-family:inherit;
    color: #222222;
    background-color:#FFFFFF;
    border:none;
    position:absolute;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display:none;
    opacity:0;
    cursor:default;
}

#mcmenu .dropdown li {
    display: block;  
}

#mcmenu .dropdown h3 {
 font-size:18px;
    font-weight:700;
    text-align: left;
    color: steelblue;  
    padding: 10px 0 0 10px; 
}

#mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 
{
    font-size:16px;
    font-weight:400;
    font-family:inherit;
    margin:0;
    padding:8px 20px; 
    display:block;
    color:inherit;
    text-decoration:none;    
}
#mcmenu .clm h3 {
    font-size:22px;
    font-weight:700;
    text-align: left;
    color: steelblue;
}
#mcmenu .sub-item {
    background-color:#FFFFFF;
    position:relative;       
    transition:all 0.3s;
}

#mcmenu li.over > .sub-item, #mcmenu li:hover > .sub-item
{
    color:steelblue;
    background-color:transparent;
    text-decoration: underline;
}

#mcmenu .clm a:hover
{
    color:steelblue;
    background-color:transparent;
    text-decoration: underline;
    /*color:#000000;*/
    transition:color 0.2s;
}

#mcmenu .dropdown.right0 {left:auto;right:0;} 
#mcmenu .dropdown li > .dropdown.right0 {left:auto;right:100%;} 
       
#mcmenu li.full-width{
    position:static;
}
#mcmenu li.full-width .dropdown{
    width:100%;
    left:0;
    box-sizing:border-box;
}  

#mcmenu li.over > .dropdown
{
    display:block;
    opacity:1;
    z-index:1;
}

#mcmenu .dropdown li > .dropdown
{
    left:100%; right:auto;
    top:0;
}

#mcmenu ul.dropdown
{
    min-width:240px; /* Sub level menu min width */
}

#mcmenu div.dropdown  {
    text-align:center;
}

/* each column */
#mcmenu .clm
{
    text-align:left;
    margin:20px;
    border-left: 1px solid #ccc;
    vertical-align:top;/*or middle*/
    width:auto;
    min-width:240px;
    display:inline-block;
    *display:inline;*zoom:1;
}

#mcmenu .clm img{
    max-width: 250px;
    height: auto;
}

#mcmenu .clm a:hover
{
    color:steelblue;
    text-decoration:underline;
}

/*-----------Arrows----------------*/
#mcmenu .arrow {
    color:#aaa;
    border-style:solid; border-width:1px 1px 0 0; 
    padding:3px; 
    transform:rotate(135deg);margin-top:-5px;margin-left:5px;
    position:relative;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align:middle;
    overflow:hidden;/*for IE6*/
}
        
#mcmenu .dropdown .arrow,
#mcmenu.mobile .arrow {
    transform:rotate(45deg);
    top:50%;margin-top:-7px;
    position:absolute;left:auto;right:20px;
} 
#mcmenu.mobile .back-icon {
    margin:2px 10px 2px 4px;
    padding:5px;/*back arrow size*/
    border-width:0 0 2px 2px;/*back arrow thickness*/
    position:static;margin-top:0;
}
#mcmenu .back {
    display:none;
}
#mcmenu.mobile .back.show {
    display:block;
    text-align:center;
    margin:0;
    cursor:pointer;
    padding:20px 20px;
    color:#000000;
    background-color:#FFFFFF;
    font-size:22px;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2px;   
}

/*######## styles for mobile mode ########*/

#mcmenu.mobile  {
    width:100%;
    max-width:100%;
    display:block;
    background-color:#FFFFFF;
    border:1px solid rgba(0,0,0,0.2);
    box-sizing:border-box;
}

/*--begin mark1--*/

#mcmenu.mobile  {
    position:relative;
    left:-130%;
    right:auto; box-shadow:4px 0 18px rgba(0,0,0,0.3);
    transition:all 411ms cubic-bezier(.7, 0,1,.4);
}

#mcmenu.mobile.active {
    left:0;
    transition:all 411ms cubic-bezier(.16,.76,.45,1);
}

#mcmenu.mobile {z-index:99999999;}

.menu-icon.active {z-index:999999994;position:relative;}

/*--end mark1--*/

#mcmenu.mobile ul  {
    background-color:transparent;
    transition:all 411ms ease;
    box-sizing:border-box;
    border:none;
    border-radius: 0;
}

#mcmenu.mobile .mobileHide {
    display:none;
}

#mcmenu.mobile li {
    text-align:center;
}

#mcmenu.mobile .top-item
{       
    font-size:18px;
}

/* #mcmenu.mobile li.over > .top-item
{
    color:#000000;
    background-color:#FFFFFF;
} */

#mcmenu.mobile .dropdown {
    border:none;
    border-radius:0;
    box-shadow:none;
} 
  
#mcmenu.mobile .clm {
    text-align:center;
    width:100%;
    border:none;
    margin:0;
    padding:0;
    display:block;
}

#mcmenu.mobile .clm h3{
    text-align: center;
}

/*----------- menu-icon ----------------*/
.menu-icon-wrapper {
    padding:4px;
    text-align:left;
}
.menu-icon {
    padding:6px;
    display:none;
    cursor: pointer;
    outline: none;
    background-color:transparent;
    border:1px solid transparent;
    border-radius:3px;
    transition: all 0.25s ease-out;
    user-select:none;
    box-sizing:content-box;
    font-size:0;
    position:relative;
}

.menu-icon.mobile {display:inline-block;}

.menu-icon.active{
    background-color:transparent;
}

.three-line{
  width: 28px;
  height: 18px;
  position: relative;
  display: inline-block;
  font-size: 0;
}
.three-line span{
  background-color:#333333;
  position: absolute;
  border-radius: 2px;
  transition: transform .5s ease-in-out;
  width:100%;
  height: 2px;
  left: 0;
  transform: rotate(0);
}
.three-line span:nth-child(1){
  top:0;
}
.three-line span:nth-child(2){
  top:8px;
  visibility:visible;
}
.three-line span:nth-child(3){
  bottom:0;
}

.menu-icon.active .three-line span:nth-child(1){
  transform: rotate(225deg);
  top: 8px;

}
.menu-icon.active .three-line span:nth-child(2){
  transform: rotate(180deg);
  visibility:hidden;
}
.menu-icon.active .three-line span:nth-child(3){
  transform: rotate(315deg);
  top: 8px;
}

@keyframes topItemAnimation{
  from {opacity: 0;  transform:translate3d(-16%, 0, 0);}
  to {opacity: 1; transform:translate3d(0, 0, 0);}
}



/****************
CONTACT FORM STYLES
****************/

.contact-form a:link, 
.contact-form a:hover {
color: black;
}

.contact-form{
max-width:100%; /* I don't want form to fill an entire column */
margin:20px auto; 
overflow-x:hidden; /*just in case form is narrower than form fields */
border:1px solid #eee; /* the border around the form */
padding:10px;
border-radius:3px; /* rounding off the corners */
background:#f3f3f3;
box-shadow: 0 2px 3px #999;
}

 .contact-form h2 {color:steelblue;}

.contact-form form table{
width:96%!important; /*set the width of the table that holds the form */
padding:0 2%;
overflow-x:hidden;}

.contact-form label, .contact-form .formbody{ /* this gives  small white text */
width:90%; margin:10px auto;
font-family:arial,san-serif;
color:black;
font-size:14px;
font-weight:normal;}

.contact-form form input{
    width: 100%!important;
}

.contact-form form select{
    width: 100%!important;
    margin-bottom: 20px;
}
.contact-form form textarea{
    width: 100%!important;
    margin-top: 20px;
  
}
/**** 
Below is the colors for the privacy policy link in the form 
****/

.contact-form a,
.contact-form a:visited {color:black;}

img.captcha_img {margin-bottom:10px !important; border-radius:3px;}

.contact-form input[type="submit"] {
    font-weight:bold;
    background:darksteelblue;
    font-size:18px;
    color:white;
    border:none;
    border-radius:5px;
    padding:8px;
    cursor: pointer;
    font-size:18px;
    cursor:pointer;
}

.contact-form input[type="submit"]:hover{
   background:lightblue; 
   color: #333;
}

/***********************
THESE ARE THE BLOGIT PAGE STYLES
***********************/

.blogItItem .blogItReadMore {
clear: both;
}

.blogItItem {
margin:20px auto;
padding:12px;
border:1px solid #ccc;
border-radius:5px;
background:#fff;
box-shadow:2px 2px 2px #ccc;
}

.blogItItem h3 {
    font-size:20px;
    text-align: center;
    margin-top: 0;
}

.blogItItem h6 {
    font-size: 12px;
    color:#666;
    font-weight: normal;
    margin-bottom: -10px;
}

.blogItItem .blogItThumbnail img {
float:left;
margin-right:10px;
margin-bottom:10px;
padding:3px;
border:1px solid #ccc;
background: white;
border-radius:3px;
}

.blogItItem p {
    font-size:.9rem;
    color:black;

}


/****************************
 * this is for the C2 template and submission stuff.
 * some adjustments needed for smaller screens to make things full width.
 * We use the !important css property, as the form is placed on the page 
 * after the stylesheet is loaded, and uses inline styling.
 * 
 * If you prefer to keep iPad view the same as desktop, the media query
 * can be changed to max-width: 767px;
 ***************************/


/*********
 * these first classes for C2 submissions are for all device views
 * *******/
.imagePreview {
    background: white;
}

table#thumbs {
    background-color: white;
    width: 100% ;
    max-width: 100%;
    padding: 5px;
}

table#comments {
    width: 100% !important;
    max-width: 100% !important;
}

table#comments td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


table p > img,
table #comments  img,
table#comments td.date img  {   
    margin: 0 2px;
    border: none!important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.othervisitors img {
    max-width: 100%;
    display: inline-block !important;
    border: none !important;
    padding: 0;
    margin: 0 2px;
   -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/**************
 * this is for the stuff on the comments page
 * ***********/
 #comment_form table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

#comment_form table tbody tr td p input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
}



form textarea[name="comment_body"]{
    width: 100% !important;
    max-width: 100% !important;   
} 

.#comment_form  table tbody tr td p,
.#comment_form  table tbody tr td label {
    text-align: left !important;
    font-size: 12px;
    position: relative;
    top: 0;
}


#comment_form form table tbody tr td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}



table tbody tr td #capture_div input[type="text"] {
    margin-top: 10px !important;
    width: 100% !important;
    max-width: 100% !important;   
}

#comment_form li.gdpr_field {
    font-size:  12px !important;
}
form p.otherText {
    font-size: 12px !important;
}

 input[name="submission_challenge"] {
    margin: 20px auto !important;
    width: 80%;
}

form textarea[name="submission_text"].storyInput {
    width: 100% !important;
    max-width: 100% !important;  
    border: 1px solid lightblue; 
    border-radius: 4px !important;
    background:  #fefefe;
}

form textarea[name="submission_text"]:focus{
    width: 80% !important;
    max-width: 80% !important;  
    border-radius: 4px !important; 
    background:  #fefefe;
}


@media only screen and (max-width:800px) {

.c2Form  table {
    width: 100% !important;
    max-width: 100% !important;
}

.c2Form  table tbody tr td p input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
}

 


#submission_challenge input[type="text"] {
    width: 100% !important;
    max-width: 100% !important; 
    margin-top: 10px !important;  
} 


form textarea input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;   
} 

.c2Form  table tbody tr td p{
    text-align: left !important;
    font-size: 12px;
    position: relative;
    top: 0;
}

.c2Form table tbody tr td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}


.c2Form table tbody tr td:nth-child(odd) {background: white}
.c2Form table tbody tr td:nth-child(even) {background: #fafafa}


} /* end of the media query */




/***************************
 * SCROLLBAR STYLES
 *************************/

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #eee #ccc;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #edf2fa;
}

*::-webkit-scrollbar-thumb {
  background-color: #eee;
  border-radius: 2px;
  border: 1px solid #ccc;
}