



#tabs

{

  overflow: auto;

  width: 100%;

  list-style: none;

  margin: 0;

  padding: 0;

}



#tabs li

{

    margin: 0;

    padding: 0;

    float: left;

}



#tabs a

{

    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);

    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);

    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);

    background: #6277f7;

    background:    -moz-linear-gradient(220deg, transparent 10px, #6277f7 10px);

    background:    -webkit-linear-gradient(220deg, transparent 10px, #6277f7 10px);     

    background:     -ms-linear-gradient(220deg, transparent 10px, #6277f7 10px); 

    background:      -o-linear-gradient(220deg, transparent 10px, #6277f7 10px); 

    background:         linear-gradient(220deg, transparent 10px, #6277f7 10px);

    text-shadow: 0 1px 0 rgba(0,0,0,.5);

    color: #fff;

    float: left;

    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;

    height: 35px;

    padding: 0 30px;

    text-decoration: none;

}



#tabs a:hover

{

    background: #c93434;

    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);

    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);     

    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px); 

    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px); 

    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);     

}



#tabs a:focus

{

    outline: 0;

}



#tabs #current a

{

    background: #1030f2;

    background:    -moz-linear-gradient(220deg, transparent 10px, #1030f2 10px);

    background:    -webkit-linear-gradient(220deg, transparent 10px, #1030f2 10px);     

    background:     -ms-linear-gradient(220deg, transparent 10px, #1030f2 10px); 

    background:      -o-linear-gradient(220deg, transparent 10px, #1030f2 10px); 

    background:         linear-gradient(220deg, transparent 10px, #1030f2 10px);

    text-shadow: none;    

    color: #fff;

}



#content

{

    background-color: #fff;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

    background-image: -webkit-linear-gradient(top, #fff, #ddd); 

    background-image:    -moz-linear-gradient(top, #fff, #ddd); 

    background-image:     -ms-linear-gradient(top, #fff, #ddd); 

    background-image:      -o-linear-gradient(top, #fff, #ddd); 

    background-image:         linear-gradient(top, #fff, #ddd);

    -moz-border-radius: 0 2px 2px 2px;

    -webkit-border-radius: 0 2px 2px 2px;

    border-radius: 0 2px 2px 2px;

   

    padding: 30px;

}



/* Remove the rule below if you want the content to be "organic" */

#content div

{

    height: 150px;

}



/* --- */

#about

{

    color: #999;

}



#about a

{

    color: #eee;

}

@media (min-width: 150px) and (max-width: 767px) { 

#content div

{

    height: 350px;

}
}