body {
    background-image: url(../images/gradients.png);
    background-repeat: repeat-x;
    background-position: 0px -400px;
}

div#xc-outer-wrapper {
    padding: 25px 25px 15px 25px;
    position:relative;
}

div#xc-leftbg-wrapper {
    width: auto;
    background-image: url(../images/contentbackground.png);
    background-repeat: repeat-y;
    background-position: left top;
}

div#xc-rightbg-wrapper {
    width: auto;
    background-image: url(../images/contentbackground.png);
    background-repeat: repeat-y;
    background-position: right top;
}

div#xc-outermargin-wrapper {
    width: auto;
    margin-left: 210px;
    margin-right: 210px;    
}

div#xc-outermargin-noright-wrapper {
    width: auto;
    margin-left: 210px;
}

div#xc-outermargin-noleft-wrapper {
    width: auto;
    margin-right: 210px;
}

div#xc-inner-wrapper {
    margin: 0;
    width: 100%;
    background-color: #ffffff;
}

div#xc-left {
    float: left;
    position: relative;
    width: 200px;
    margin-left: -210px;
    background-color: transparent;
    z-index: 10;
}

div#xc-right {
    float: right;
    position: relative;
    width: 200px;
    margin-right: -210px;
    background-color: transparent;
    z-index: 11;
}

div.xc-side-content {
    margin: 0 10px;
    padding: 10px 0;
    background-color: transparent;
}

div#xc-center-wrapper {
    float: left;
    position: relative;
    width: 100%;
    z-index: 12;
    margin:0;
}

div#xc-center {
    padding: 5px 10px;
    position: relative;
}

div#xc-header {
    position: relative;
    z-index: 13;
    height: 100px;
    margin: 0 25px 4px 25px;
    background-color: transparent;
    background-image: url(../images/gradients.png);
    background-repeat: repeat-x;
    background-position: 0px -200px;
}

div#xc-header-rightbevel {
    float: right;
    width: 27px;
    height: 100px;
    margin-right:-25px;
    background-color: transparent;
    background-image: url(../images/gradients.png);
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

div#xc-header h1 {
    float: left;
    position: relative;
    width: 220px;
    height: 100px;
    margin: 0;
    padding: 0;
    background-image: url(../images/gradients.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin-left: -25px;
}

/* actual logo image (not used atm) and its link are taken out of the document flow */
div#xc-header h1 a, div#xc-header h1 a:hover {
    position: absolute;
    width: 250px;
    height: 100px;
    background-color: transparent;
}

/* the textual part of header (sitename) is taken off-screen completely */
div#xc-header h1 a span {
    position: absolute;
    left: -9000px;
}

div#classicthemecontrols {
    float: right;
    position: relative;
    width: 180px;
    height:30px;
    padding: 0;
    margin: 65px -20px 0 0;
    background-image: url(../images/switcherctrls.png);
    background-repeat: no-repeat;
    background-position: 0px -30px;
}

div#classicthemecontrols a {
    float:left;
    height:25px;
    width:25px;
}

div#classicthemecontrols a:hover {
    float: left;
    height: 30px;
    width: 25px;
    background-image: url(../images/switcherctrls.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
div#classicthemecontrols a#xc-switch-green:hover { background-position: -25px 0px; }
div#classicthemecontrols a#xc-switch-orange:hover { background-position: -50px 0px; }
div#classicthemecontrols a#xc-switch-grey:hover { background-position: -75px 0px; }
div#classicthemecontrols a#xc-switch-small:hover { background-position: -100px 0px; }
div#classicthemecontrols a#xc-switch-medium:hover { background-position: -125px 0px; }
div#classicthemecontrols a#xc-switch-large:hover { background-position: -150px 0px; }

/* hide anchored text (not anchors) while viewing with css on (TODO: use common class) */
div#classicthemecontrols a span { display:none; }

/* slogan is part of the header now (if you upgraded from previous version) */
p#xc-slogan {
    position: absolute;
    z-index:13;
    top: 20px;
    right: 0px;
    font-weight: bold;
}

div#xc-footer {
    position: relative;
    z-index: 14;
    height: 60px;
    margin-top: 0px;
}

#xc-clear {
    clear: both;
    height: 1px;
    font-size:1px;
}

div#xc-outer-wrapper {
    min-width: 740px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: left;
}

div#xc-left { margin-right: 20px; }
div#xc-right { margin-left: 20px; }
div#xc-center-wrapper { margin: 0 -10px 0 -10px; }
/* small correction to allow center be centered without the left column */
div#xc-outermargin-noleft-wrapper  div#xc-center-wrapper { margin: 0 -10px 0 0; }

/*
positioning and minimal styling of footer 
-------------------------------------------------------------------------[comment] */
div#xc-footer-leftbevel {
    float: left;
    width: 12px;
    height:60px;
    overflow:hidden;
    margin-left: -10px;
    background-image: url(../images/gradients.png);
    background-position: 0px -140px;
    background-repeat: no-repeat;
}

div#xc-footer-rightbevel {
    float: right;
    width: 12px;
    height:60px;
    overflow:hidden;
    margin-right: -10px;
    background-image: url(../images/gradients.png);
    background-position: 100% -140px;
    background-repeat: no-repeat;
}

div#xc-footer {
    margin-left: 10px;
    margin-right: 10px;
    background-image: url(../images/gradients.png);
    background-position: 0px -340px;
    background-repeat: repeat-x;
}

/*
footer container itself - watch for the explicit height and width limitations
-------------------------------------------------------------------------[comment] */
p#footermsg {
    float: left;
    position: relative;
    padding: 0;
    margin: 0;
    width: 45%;
    padding-top: 20px;
    text-align: left;
    font-weight: bold;
}

/* hide old powered by image when css is enabled */
p#footermsg img { display:none; }

div.badges {
    float: right;
    position:relative;
    height: 60px;
    width: 50%;
    text-align: right;
}

div.badges a { text-decoration: none; }

/*
it is a kind of modern trend to display links to w3c validators and a bunch of micro-badges
-------------------------------------------------------------------------[comment] */
div.badges img {
    position:relative;
    top:23px;
    padding:0;
}
