/* 
    Document   : style
    Created on : May 30, 2011, 1:23:05 PM
    Author     : Asif Chowdhury
    Description:
        Main Stylesheet for the BandX site
*/
body { background-color: #000000; color: #aaaaaa; font: normal 12px arial, helvetica, sans-serif; padding: 0px; margin: 0px;}

/** Generic stuff **/
.button {
    color: #bc627a;; text-decoration: underline; font-weight: bold; text-align: center;
    background-color: #000000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px;
    background: -webkit-gradient(linear, left bottom,left top,color-stop(0.26, #3333333), color-stop(0.74, #000000));
    background: -moz-linear-gradient(center bottom, #333333 26%, #000000 74%);
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 1px #cccccc;
}
.button:hover {
    color: #3366ff; text-decoration: underline; font-weight: bold; text-align: center; background-color: #dde3f3;
    padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px;
    background: -webkit-gradient(linear, left bottom,left top,color-stop(0.26, #000000), color-stop(0.74, #333333));
    background: -moz-linear-gradient(center bottom,#000000 26%, #333333 74%);
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 1px #d1d9ec;
}
.navBuffer { padding-left: 25px; padding-right: 25px; width: 850px; font-weight: bold; padding-top: 5px; padding-bottom: 5px; margin: auto; }
.navButtWrapper { display: block; width: 100px; float: left; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; margin: 5px; }
.navMenu { position: absolute; display: none; border: solid 1px #aaaaaa; z-index: 10; }
.rightHandMenu { left: 160px; top: -5px;}
.data { position: relative; width: 100%; padding: 0px; margin: auto; text-align: left; }
.menuBar { position: relative; width: 99%; padding-left: 5px; padding-right: 5px; 
           padding-top: 5px; padding-bottom: 5px; background-color: #000066; 
           color: #ffffff; font-weight: bold; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; 
           border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff; }
.menuItem { position: relative; float: left; border-left: 1px solid #ffffff;
            border-right: 1px solid #ffffff;
            width: 24%; text-align: center; }
a:link.menuItem { color: #cccccc; }
a:visited.menuItem { color: #aaaaaa; }
a:hover.menuItem { color: #ffffff; }
a:active.menuItem { color: #ffffff; }
.center { text-align: center; }
.block { padding: 0px; width: 50%; margin: 0px; border-width: 0px; float: left; }
.blockRight { position: relative; text-align: left; width: 50%; padding: 0px; margin: 0px; border-width: 0px; float: right; }
.blockCenter { width: 50%; margin: auto; }
.endRow { position: relative; width: 1px; height: 1px; display: block; visibility: hidden; clear: both; }
.mainWrapper { width: 950px; margin: auto; text-align: left;}
.topBorder { border-top: solid 1px #aaaaaa; }
.bottomBorder { border-bottom: solid 1px #aaaaaa; }
.leftBorder { border-left: solid 1px #aaaaaa; }
.rightBorder { border-right: solid 1px #aaaaaa; }
.titleText { font-size: 16px; font-weight: bold; padding-left: 10px; color: #666666;}
.hugeTopPadding { padding-top: 20px; }
.largeTopPadding { padding-top: 10px; }
.mediumTopPadding { padding-top: 5px; }
.smallTopPadding { padding-top: 2px; }
.hugeBottomPadding { padding-bottom: 20px; }
.largeBottomPadding { padding-bottom: 10px; }
.mediumBottomPadding { padding-bottom: 5px; }
.smallBottomPadding { padding-bottom: 2px; }
.leftSmallPadding { padding-left: 5px; }
.leftMediumPadding { padding-left: 10px; }
.leftLargePadding { padding-left: 20px; }
.leftHugePadding { padding-left: 50px; }
.rightSmallPadding { padding-right: 5px; }
.rightMediumPadding { padding-right: 10px; }
.rightLargePadding { padding-right: 20px; }
.rightHugePadding { padding-right: 50px; }
.titleBar { border-top: ridge 2px #aaaaaa; border-bottom: ridge 2px #aaaaaa; background-color: #5f5f5f; }
.error { font-weight: bold; color: #ff0000; }
.formLabel { font-weight: bold; text-align: right; width: 48%; padding-right: 2px; }
.formInput { font-weight: normal; text-align: left; width: 48%; padding-left: 5px; }
.greyback {
    color: #eeeeee;
    background: -webkit-gradient(linear, left bottom,left top,color-stop(0.26, #444444), color-stop(0.74, #000000));
    background: -moz-linear-gradient(center bottom, #444444 26%, #000000 74%);
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 1px #d1d9ec;
    background-color: #444444
}
.darkgreyback {
    background: -webkit-gradient(linear, left bottom,left top,color-stop(0.26, #3333333), color-stop(0.74, #000000));
    background: -moz-linear-gradient(center bottom, #333333 26%, #000000 74%);
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 1px #d1d9ec;
    background-color: #333333;
}
.blueback {
    background: -webkit-gradient(linear, left bottom,left top,color-stop(0.26, #dde3f3), color-stop(0.74, #ffffff));
    background: -moz-linear-gradient(center bottom, #dde3f3 26%, #ffffff 74%);
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 1px #d1d9ec;
    background-color: #ffffff;
}
.darkback {
    background-color: #222222; height: 220px; padding-top: 10px; padding-bottom: 10px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid 1px #d1d9ec;
}
.rightLine {text-align: right;}
.searchLink {color: #666666;}
.searchLabel {color:#000066; padding-bottom: 5px; padding-top: 5px; font-size: 12px;}
.latestItemRow {background-color: #ccccff; border-bottom: solid 1px #aaaaaa;}
.randomItem {position: absolute; top: 0px; left: 0px; width: 400px; height: 420px; background-color: #F8F8FF; overflow: auto; text-align: center; margin-top: 0px; border: solid 1px #666666;}
.loginDialog {position: absolute; top: 140px; left: 120px; width: 400px; height: 200px; background-color: #F8F8FF; overflow: auto; text-align: center; margin-top: 0px; border: solid 1px #666666;}
.hidden {display: none;}
.formButton {background-color: #B9D3DF;}
.small {font-size: 9px;}

/** link stuff **/
a:link { color: #ccccff; }
a:visited { color: #aaaaff; }
a:hover { color: #ccffff; }
a:active { color: #ccffff; }


/** Table Stuff **/
table { width: 100%; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; 
        text-align: center; }
thead { font-weight: bold; font-size: 14pt; color: #ffffff; }
tbody { font-weight: normal; font-size: 11pt; }
td { border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; 
     text-align: center; vertical-align: middle;  padding-top: 5px; 
     padding-bottom: 5px; }
td#ranking { width: 20%; }
td#username { text-align: left; padding-left: 10px; width: 40%; }
a:link#user { color: #ccccff; }
a:visited#user { color: #aaaaff; }
a:hover#user { color: #ccffff; }
a:active#user { color: #ccffff; }
td#points { color: #ffffff; text-align: right; 
            padding-right: 10px; width: 40%; }

td#date { text-align: left; padding-left: 10px; width: 10%; }
td#challenge { text-align: left; padding-left: 10px; width: 25%; }
td#from { text-align: left; padding-left: 10px; width: 25%; }
td#to { text-align: left; padding-left: 10px; width: 25%; }
td#ridePoints { text-align: right; padding-right: 10px; width: 10%; }

a:link#rideInfoDate { color: #ccccff; }
a:visited#rideInfoDate { color: #aaaaff; }
a:hover#rideInfoDate { color: #ccffff; }
a:active#rideInfoDate { color: #ccffff; }
td#challengeName { font-weight: bold; text-align: left; padding-left: 10px; width: 30%; }
td#challengeDescription { text-align: left; padding-left: 10px; width: 60%; 
                          word-wrap: break-word; overflow-wrap: break-word; }
td#challengePoints { font-weight: bold; text-align: right; padding-right: 10px; width: 10%; }

/** Form Input background colors **/
input { background-color: #aaaaaa; }
select { background-color: #aaaaaa; }
textarea { background-color: #aaaaaa; }