/*buttons.css: styling for the buttons at the bottom of the page.*/

/*alignment and spacing*/

#buttons .buttonrow {
    display: inline-block;
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px 2px;
    width: 100%;
    padding: 2px 0px;
}

/*The buttons themselves*/

.buttonleft {
    display: inline-block !important;
    text-align: right;
    width: 30%;
}

.buttonleft a {
    padding: 0px 20px 0px 10px;
}

.buttonright {
    display: inline-block !important;
    text-align: left;
    width: 30%;
}

.buttonright a {
    padding: 0px 10px 0px 20px;
}

#knockout-buttons a {
    padding: 0px 10px 0px 10px;
}

.glossybutton {
    height: 20px;
    font-size: small;
    display: inline-block !important;
    white-space: nowrap;
    vertical-align: center;
    cursor: pointer;
    border: 1px solid #4864a9;  
    position: relative;
    margin: 0px 2px;
    
    -webkit-border-radius: 20px;  
    -moz-border-radius: 20px;  
    border-radius: 20px;  
}

.glossybutton a { 
    margin: 0px;
    text-decoration: none;  
    position: relative;
    top: 2px;
    z-index: 1;
}

/*before pseudo-element adds some sheen.*/
.glossybutton::before {  
    content: "";  
    height: 12px; 
    // display: block;  
    position: absolute;
    left: 5px; 

    -webkit-border-radius: 6px;  
    -moz-border-radius: 6px;  
    border-radius: 6px;  
     
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);  
    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));  
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);  
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);  
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);  
    background: linear-gradient(to bottombottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);  
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );  
}

/*Qatar flag pattern*/
.buttonleft .glossybutton {
    text-align: right;
    background-image: url('../images/button-background.png');
    background-position: right;
    background-repeat: repeat-y;
}

.buttonright .glossybutton {
    background: #8A1538;
    color: #fff;
}

/*: hover and :active selector styling give an impression of the button being pressed. This is done symmetrically, using :first-child
 *  *and : last-child selectors -- buttons on the left go down and to the left, buttons to the right go down and to the right. The button
 *   *on a row by itself goes down and to the middle.*/

.buttonleft .glossybutton:hover {
    -webkit-box-shadow:  -3px 2px 2px 0px rgba(85,85,85,1);
    -moz-box-shadow: -3px 2px 2px 0px rgba(85,85,85,1);
    box-shadow:  -3px 2px 2px 0px rgba(85,85,85,1);
}

.buttonright .glossybutton:hover {
    -webkit-box-shadow:  3px 2px 2px 0px rgba(85,85,85,1);
    -moz-box-shadow: 3px 2px 2px 0px rgba(85,85,85,1);
    box-shadow:  3px 2px 2px 0px rgba(85,85,85,1);
}

#knockout-buttons .glossybutton:hover {
    -webkit-box-shadow:  0px 2px 2px 0px rgba(85,85,85,1);
    -moz-box-shadow: 0px 2px 2px 0px rgba(85,85,85,1);
    box-shadow:  0px 2px 2px 0px rgba(85,85,85,1);
}

.buttonleft .glossybutton:active {
    left: -3px;
    top: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.buttonright .glossybutton:active {
    left: 3px;
    top: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#knockout-buttons .glossybutton:active {
    left: 0px;
    top: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*The buttons in row 2 change based on what tab is selected*/
#buttons #row2 > div {
    display: none;
}