/* =Common
----------------------------------------------- */
body {
    font-family: 'Trebuchet MS',trebuchet,sans-serif;
    font-size: 13px;
    background: #fff url(../images/bg_body.png) repeat-x top;
    color: #295C6B;
}

input,
textarea {
    font-family: 'Trebuchet MS',trebuchet,sans-serif;
}

a       { text-decoration: none }
a:hover { text-decoration: underline }

#content strong { font-weight: bold }
#content em     { font-style: italic }

/* =Header
----------------------------------------------- */
#header {
    background-color: #295C6B;
}

    #header h1 {
        font-size: 17px;
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px 1px black;
    }
    
    #header ul {
        background: #E2F0F3 url(../images/header_void_right.png) no-repeat right;
    }
    
        #header ul li:first-child {
            background: url(../images/header_void_left.png) no-repeat left;
        }
        
            #header ul a {
                margin: 1px;
                border: 1px solid #B1D5DE;
            }
            
            #header ul a:hover {
                margin: 0;
                border-width: 2px;
            }
            
            #header ul a.selected {
                margin: 0;
                border: 2px solid #FF9900;
            }

/* =Content
----------------------------------------------- */
#user {
  text-transform: lowercase;
}

#content .notice {
    font-size: 20px;
    background: #FFFFCC url(../images/icon_warning.png) no-repeat right;
    border: 1px solid #FFCC00;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    color: #FF9900;
}

#content .notice.error {
    background: #FFE6E6 url(../images/icon_error.png) no-repeat right;
    border-color: #CC0000;
    color: #CC0000;
}
    
#content a {
    color: #FF9900;
}

    #content form li          { background: url(../images/tab_light.png) no-repeat left }
    #content form li.selected { background: url(../images/tab_dark.png) no-repeat left }
    
        #content form li > span          { background: url(../images/tab_light.png) no-repeat right }
        #content form li.selected > span { background: url(../images/tab_dark.png) no-repeat right  }
        
            #content form li a {
                font-size: 13px;
                font-weight: bold;
                color: #295C6B;
            }
            
            #content form li.selected a {
                color: #fff;
            }
        
            #content form li a.ssl {
                background: url(../images/icon_lock.png) no-repeat left;
            }

    #content fieldset {
        background-color: #295C6B;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
    
        #content form label {
            font-size: 15px;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 1px black;
        }
    
        #content form input,
        #content form fieldset > div > select {
            font-size: 15px;
            -moz-box-shadow: inset 0px 3px 5px #b0b0b0;
            box-shadow: inset 0px 1px 1px #b0b0b0;
            border: 1px solid #fff;
            border-radius: 8px;
        }
        
        #content form .error {
            background-color: #FFD7D7;
            border-color: #cc0000;
            color: #cc0000;
        }
        
        #content form input + p {
            text-align: right;
            font-size: 12px;
            color: #FFD7D7;
        }
        
        #content form .submit {
			display: block;
			background: #ffa84c; /* Old browsers */
			background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
			background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%); /* W3C */
			color: #fff;
			font-size: 15px;
			text-decoration: none;
			border-radius: 5px;
			border: 1px solid #ff7b0d;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
			font-family: 'Trebuchet MS',trebuchet,sans-serif;
			cursor: pointer;
        }
        
         #content form .submit_success {
         	-webkit-transition: all 0.5s;  
		    -moz-transition: all 0.5s;  
		    -o-transition: all 0.5s;  
		    transition: all 0.5s;
			display: block;
			background: #c4dd7c; /* Old browsers */
			color: green;
			text-shadow: 2px 2px #000000;
			font-size: 15px;
			text-decoration: none;
			border-radius: 5px;
			border: 1px solid green;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
			font-family: 'Trebuchet MS',trebuchet,sans-serif;
        }
        
        .button {
			width: 100%;
			line-height: 1;
			padding: 8px 12px;
			display: block;
			background: #ffa84c; /* Old browsers */
			background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
			background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%); /* W3C */
			color: #fff;
			font-size: 15px;
			text-decoration: none;
			border-radius: 5px;
			border: 1px solid #ff7b0d;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
			font-family: 'Trebuchet MS',trebuchet,sans-serif;
			cursor: pointer;
        }
        
        .button[disabled] {
        	background: #ababab;
        	border-color: #ababab;
        	-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			cursor: default;
        }
        
        /* Cart */
        #content fieldset > table {
            background: #B1D5DE url(../images/pack.png) no-repeat 12px 16px;
            color: #295C6B;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
        }
        
            #tr_total td {
                font-size: 14px;
                font-weight: bold;
                border-top: 1px solid #fff;
            }

    #content h2 {
        font-size: 15px;
        font-weight: bold;
        color: #295C6B;
    }
    
    #content > div > p.connected {
        background: url(../images/connected.png) no-repeat top left;
    }

    #content .login_message {
        background: url('/static/common/images/thumbtack-yellow.png') 10px 0px no-repeat;
        background-color: #B1D5DE;
	}
	
		#content .login_message a {
			color: rgb(41, 92, 107);
			text-decoration: underline;
		}
		
	#content .autotext {
        background-color: #295C6B;
        color: white;
	}
	
	#content .autotext .title {
                line-height: 2;
                margin-bottom: 24px;
                font-size: 15px;
                font-weight: bold;
                text-shadow: 1px 1px 1px black;
                color: #fff;
	}
	
    #content .links a {
        text-decoration: none;
        background-color: #B1D5DE;
        color: #295C6B;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
    
    #content .links a:hover {
        background-color: #295C6B;
        color: #fff;
    }
        
        #content .links a span {
            font-size: 11px;
            color: #fff;
        }
        
        #content .links a:hover span {
            color: #B1D5DE;
        }

        #content .summary {
            background-color: #B1D5DE;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
        }

.gradient {
  background: #002C61;
  background: -moz-linear-gradient(top, #3380A8 0%, #00214D 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3380A8), color-stop(100%,#00214D));
  background: -webkit-linear-gradient(top, #3380A8 0%,#00214D 100%);
  background: -o-linear-gradient(top, #3380A8 0%,#00214D 100%);
  background: -ms-linear-gradient(top, #3380A8 0%,#00214D 100%);
  background: linear-gradient(to bottom, #3380A8 0%,#00214D 100%);
}


#loader {
  width: 100px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px -50px;
}
#loader div {
    width: 20px;
    height: 20px;
    background: #FFF;
    border-radius: 50%;
    position: absolute; 
}

#d1{
	-webkit-animation:animate 2s linear infinite;
	-moz-animation:animate 2s linear infinite;
	-ms-animation:animate 2s linear infinite;
	-o-animation:animate 2s linear infinite;
	animation:animate 2s linear infinite;
}
#d2{
	-webkit-animation:animate 2s linear infinite -.4s;
	-moz-animation:animate 2s linear infinite -.4s;
	-ms-animation:animate 2s linear infinite -.4s;
	-o-animation:animate 2s linear infinite -.4s;
	animation:animate 2s linear infinite -.4s;
}
#d3{
	-webkit-animation:animate 2s linear infinite -.8s;
	-moz-animation:animate 2s linear infinite -.8s;
	-ms-animation:animate 2s linear infinite -.8s;
	-o-animation:animate 2s linear infinite -.8s;
	animation:animate 2s linear infinite -.8s;
}
#d4{
	-webkit-animation:animate 2s linear infinite -1.2s;
	-moz-animation:animate 2s linear infinite -1.2s;
	-ms-animation:animate 2s linear infinite -1.2s;
	-o-animation:animate 2s linear infinite -1.2s;
	animation:animate 2s linear infinite -1.2s;
}
#d5{
	-webkit-animation:animate 2s linear infinite -1.6s;
	-moz-animation:animate 2s linear infinite -1.6s;
	-ms-animation:animate 2s linear infinite -1.6s;
	-o-animation:animate 2s linear infinite -1.6s;
	animation:animate 2s linear infinite -1.6s;
}

@-webkit-keyframes animate{
0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}

@-moz-keyframes animate{
0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}

@-o-keyframes animate{
0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}

@-ms-keyframes animate{
0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}

@keyframes animate{
0% { left: 100px; top:0}
  80% { left: 0; top:0;}
  85% { left: 0; top: -20px; width: 20px; height: 20px;}
  90% { width: 40px; height: 15px; }
  95% { left: 100px; top: -20px; width: 20px; height: 20px;}
  100% { left: 100px; top:0; }
}      
/* =Footer
----------------------------------------------- */
#footer {
    border-bottom: 10px solid #295C6B;
}

    #footer p {
        font-size: 12px;
        background: url(../images/tab_dark.png) no-repeat left;
    }

        #footer span {
            background-color: #295C6B;
            color: #B1D5DE;
        }

        #footer a {
            background: url(../images/tab_dark.png) no-repeat right;
            color: #fff;
        }