/* Button Styling
------------------------------------------------------------ */
a.button {
  background: var(--link-color);
  font-size: 1rem;
  text-shadow: none;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: none;
  border: 0;
  display: inline-block;
  font-family: inherit;
  padding: 0.75rem 1rem;
  color: white;
  transition: .1s ease-in-out;
  text-decoration: none;
}

.button:hover {
  text-decoration: none;
  background-color: var(--link-hover-color);
  color: white;
}

.button:active {
    position: relative;
    top: 1px;
}

.button-large {
    padding: 8px 32px 9px;
}

.button-small {
    padding: 3px 8px 4px;
}

/* Button Colors
------------------------------------------------------------ */

/* Black
------------------------------------------------------------ */
.button-black {
    color: #d7d7d7 !important;
    border: solid 1px #333;
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
    background: -moz-linear-gradient(top,  #666,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.button-black:hover {
    background: #000 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -moz-linear-gradient(top,  #444,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.button-black:active {
    color: #666 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top,  #000,  #444);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* Green
------------------------------------------------------------ */
.button-green {
    color: #e8f0de !important;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.button-green:hover {
    background: #538018 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.button-green:active {
    color: #a9c08c !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* Grey (or Gray)
------------------------------------------------------------ */
.button-grey,
.button-gray {
    color: #e9e9e9 !important;
    border: solid 1px #555;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top,  #888,  #575757);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.button-grey:hover,
.button-gray:hover {
    background: #616161 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
    background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.button-grey:active,
.button-gray:active {
    color: #afafaf !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
    background: -moz-linear-gradient(top,  #575757,  #888);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* Orange
------------------------------------------------------------ */
.button-orange {
    color: #fef4e9 !important;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button-orange:hover {
    background: #f47c20 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button-orange:active {
    color: #fcd3a5 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* Pink
------------------------------------------------------------ */
.button-pink {
    color: #feeef5 !important;
    border: solid 1px #d2729e;
    background: #f895c2;
    background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
    background: -moz-linear-gradient(top, #feb1d3, #f171ab);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.button-pink:hover {
    background: #d57ea5 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
    background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.button-pink:active {
    color: #f3c3d9 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
    background: -moz-linear-gradient(top, #f171ab, #feb1d3);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}

/* Red
------------------------------------------------------------ */
.button-red {
    color: #faddde !important;
    border: solid 1px #980c10;
    background: #d81b21;
    background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.button-red:hover {
    background: #b61318 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
    background: -moz-linear-gradient(top,  #c9151b,  #a11115);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.button-red:active {
    color: #de898c !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* White
------------------------------------------------------------ */
.button-white {
    color: #606060 !important;
    border: solid 1px #b7b7b7;
    background: #fff;
    background: -webkit-gradient(linear,left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.button-white:hover {
    background: #ededed !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top, #fff, #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.button-white:active {
    color: #999 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top, #ededed, #fff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* Allegheny Gold
--------------------------------------------------------------*/

.button-gold {
    color: #002144 !important;
    border: none;
    background: #fff;
    background: -webkit-gradient(linear,left top, left bottom, from(#FEDA48), to(#EAC220));
  background: -moz-linear-gradient(center top , #FEDA48, #EAC220) repeat scroll 0 0 transparent;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA48', endColorstr='#EAC220');
  color: white !important;
  
}
.button-gold:hover {
    background: #feda48 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#feda48), to(#feda48));
    background: -moz-linear-gradient(top, #feda48, #feda48);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feda48', endColorstr='#feda48');
}
.button-gold:active {
    color: #feda48 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#feda48), to(#feda48));
    background: -moz-linear-gradient(top, #feda48, #feda48);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feda48', endColorstr='#feda48');
}

/* Box Styling
------------------------------------------------------------ */
.box {
    border: 1px solid #cccccc;
    clear: both;
    margin: 15px 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 0px 0 #FFFFFF inset, 0 0px 0 #FFFFFF inset;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 0px 0 #FFFFFF inset, 0 0px 0 #FFFFFF inset;
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 0px 0 #FFFFFF inset, 0 0px 0 #FFFFFF inset;
    padding: 10px;
}

div.box .box-header {
background-repeat: no-repeat;
background-position: 2px 3px;
border: 1px solid #CCCCCC;
font-weight: normal !important;
height: 21px;
padding: 3px 3px 3px 35px;
font-size: 15px;
background-size: 21px;
}

#content-main div.box p {
margin: 0px;
}



.box-blue .box-content,
.box-green .box-content,
.box-grey .box-content,
.box-red .box-content,
.box-tan .box-content,
.box-yellow .box-content {
padding: 0;
}



.box-blue {
    background-color: #E0EAF5;
}

.box-green {
    background-color: #f2f9e5;
    
}

.box-grey {
    background-color: #f2f2f2;
 
}

.box-red {
    background-color: #ffdfdf;

}

.box-tan {
    background-color: #fef8e1;

}

.box-yellow {
    background-color: #ffffd5;

}

.box-alert,
.box-comment,
.box-download,
.box-info,
.box-tip,
.box-code { 
background-position: 5px 7px;
background-repeat: no-repeat;
padding-left: 40px }

.box-alert {  
}

.box-alert {
background-color: #ffdfdf;
background-image: url("./images/box-alert.png");
}

.box-comment {
background-color: #fef8e1;
background-image: url("./images/box-comment.png");
}

.box-download {
background-color: #f2f9e5;
background-image: url("./images/box-download.png");
}

.box-info { 
background-color: #dbe7f8;
background-image: url("./images/box-info.png");
}

.box-tip {
background-color: #ffffd5;
background-image: url("./images/box-tip.png");
}

.box-code {
background-color: #F2F2F2;
background-image: url("./images/box-code.png");
}

/* Column Classes - Modern CSS Grid System
------------------------------------------------------------ */

/* Grid container - wrap your columns in this */
.columns-container {
  display: grid;
  gap: 3%;
  margin-bottom: 20px;
}

/* Grid layout classes for easy setup */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Fraction-based layouts */
.grid-halves { grid-template-columns: 1fr 1fr; }
.grid-thirds { grid-template-columns: 1fr 2fr; }
.grid-thirds-reverse { grid-template-columns: 2fr 1fr; }
.grid-quarters { grid-template-columns: 1fr 3fr; }
.grid-quarters-reverse { grid-template-columns: 3fr 1fr; }
.grid-fifths { grid-template-columns: 2fr 3fr; }
.grid-fifths-reverse { grid-template-columns: 3fr 2fr; }

/* Individual column classes - work inside .columns-container */
.column-one-half { grid-column: span 1; }
.column-two-fourths { grid-column: span 1; }
.column-one-third { grid-column: span 1; }
.column-two-thirds { grid-column: span 2; }
.column-one-fourth { grid-column: span 1; }
.column-three-fourths { grid-column: span 3; }
.column-one-fifth { grid-column: span 1; }
.column-two-fifths { grid-column: span 2; }
.column-three-fifths { grid-column: span 3; }
.column-four-fifths { grid-column: span 4; }

/* Mobile-first: stack all columns on small screens */
@media screen and (max-width: 767px) {
    .columns-container {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .column-one-half,
    .column-two-fourths,
    .column-one-third,
    .column-two-thirds,
    .column-one-fourth,
    .column-three-fourths,
    .column-one-fifth,
    .column-two-fifths,
    .column-three-fifths,
    .column-four-fifths {
        grid-column: span 1;
    }
}

/* Legacy support - column-last class still works but not needed */
.column-last {
    /* No special styling needed with flexbox */
}



/* Mobile Shortcode
------------------------------------------------------------ */

.mobile {
display: none;
}

/* Sidebar Shortcode
------------------------------------------------------------ */

.shortside {
  float: right;
  margin-bottom: -15px;
}

.shortside #sidebar {
  border-left: 1px solid #E5E5E5;
    margin-left: 15px;
    margin-top: 0;
    padding: 0 0 0 15px;
    width: 209px;
    float: none;
}

.shortside #sidebar ul, .shortside #sidebar ol {
  list-style: none;
  margin: 0;
}

.shortside #sidebar ul li {
}

.shortside #sidebar ul li ul {
list-style-position: outside;
list-style-type: square;
margin-bottom: 15px;
margin-left: 15px;
}

.shortside #sidebar ul li ul li {
  padding: 0;
}

.section-break {
border-top: 1px solid #eee;
clear: both;
display: block;
margin: 10px 0 0 0;
padding-bottom: 20px;
}