/*
 * Inspired by http://www.pathf.com/blogs/2008/12/ask-a-ui-guy-how-should-i-structure-my-stylesheets
 */

/************************************************************
	page layout
************************************************************/

body {
    text-align: center;     /* ie6 */
}

#page {
    margin: 10px auto 0 auto;
    text-align: left;       /* ie6 */
    width: 960px;
}

#header {
    background-color: #ffffff;
    height: 144px;
    position: relative;
}

#header.withTeaser {
    height: 351px;
}

#body {
    background: #b4b3b3 url(../images/main_background.png) repeat-y;
}

#body .columnMain {
    background: #ffffff url(../images/content_background.png) repeat-x;
    padding-left: 26px;
    padding-right: 26px;
    width: 548px;
}

* html #body .columnMain {
    width: 600px;        /* ie6 */
}

#body .columnLeft {
    display: none;
}

#body .columnRight {
    width: 360px;
}

#footer {
    background: transparent url(../images/footer_background.png) repeat-x;
    clear: both;
    height: 110px;
    margin-bottom: 20px;
    position: relative;
}

#footer #contentFooter {
    background: transparent url(../images/footer_content_background.png) repeat-x;
    height: 85px;
    text-align: right;
    padding-top: 20px;
    width: 600px;
}

/************************************************************
	section: header
************************************************************/

/* logos */

#header img#sapLogo {
    left: 21px;
    position: absolute;
    top: 20px;
}

#header img#sapSlogan {
    left: 146px;
    position: absolute;
    top: 67px;
}

#header img#smsLogo {
    left: 737px;
    position: absolute;
    top: 34px;
}

/************************************************************
	section: teaser
************************************************************/

#header .teaser {
    height: 205px;
    position: absolute;
    top: 145px;
}

#header .teaser .teaserBox {
    background-color: #f4b900;
}

#header .teaser .teaserBox .boxBody {
    padding: 14px 20px 10px 20px;
}

#header .teaser .columnMain {
    width: 600px;
}

#header .teaser .columnRight {
    width: 360px;
}

/* text styles */

#header .teaser h1 {
    color: #ffffff;
}

#header .teaser h2 {
    color: #666666;
}

#header .teaser a.linkGo {
    background: transparent url(../images/button_go_yellow.png) no-repeat center right;
    color: #1c6888;
    padding-right: 38px;
}

/************************************************************
	section: main navigation
************************************************************/

#mainNavigation {
    position: absolute;
    top: 120px;
    width: 960px;
}

/************************************************************
	section: sub navigation
************************************************************/

#subNavigation {
    left: -26px;
    position: relative;
    top: -23px;
    width: 600px;
}

* html #subNavigation {
    width: 548px;
}

/* html #body .columnMain {
    padding-left: 0px;
    padding-right: 0px;
} */

/************************************************************
	section: main content
************************************************************/

#main {
    margin-top: 29px;
}

* html #main {
    border-top: 1px solid #347FA5;
}

/************************************************************
	section: sidebar
************************************************************/

#sidebar {
}

#sidebar .box {
    margin: 28px 20px;
}

#sidebar .box .boxBody {
    background-color: #797979;
    display: block;
    padding: 17px;
}

#sidebar .box .boxFooter {
    background: transparent url(../images/box_shadow_grey.jpg) no-repeat;
    height: 20px;
}

#sidebar .boxHighlight a.linkGo {
    background: transparent url(../images/button_go_blue.png) no-repeat center right;
}

#sidebar .boxHighlight .boxBody {
    background-color: #1c6888;
    color: #e4e4e4;
}

#sidebar .boxHighlight .boxFooter {
    background: transparent url(../images/box_shadow_blue.jpg) no-repeat;
}

/* text styles */
#sidebar .box .boxBody h1 {
    color: #ffffff;
    font-size: 14px;
}

#sidebar .box .boxBody {
    color: #e4e4e4;
}

#sidebar .box .boxBody a {
    color: #f4b900;
}

#sidebar .box .boxBody li {
    margin-top: 10px;
}

#sidebar a.linkGo {
    background: transparent url(../images/button_go_grey.png) no-repeat center right;
    color: #1c6888;
    padding-right: 38px;
}

/************************************************************
	section: footer
************************************************************/

#footer {
}

#footer #copyright {
    clear: both;
    display: block;
    font-size: 10px;
    padding-left: 7px;
    position: absolute;
    top: 88px;
}

#footer #pageNavigation {
    /* left: 813px; */
    left: 0;
    position: absolute;
    top: 55px;
    width: 100%;
}

#footer #pageNavigation ul {
    float: right;
    margin-right: 18px;
}

* html #footer #pageNavigation {
    left: 0px;      /* ie6 */
}

/************************************************************
	section: theme (component overrides)
************************************************************/

/* link to top */
.linkToTop {
    background: transparent url(../images/arrow_up.png) no-repeat center right;
    color: #ffffff;
    margin-right: 10px;
    padding-right: 12px;
}

/* horizontal navigation */

.horizontalNavigation {
    background-color: #797979;
}

.horizontalNavigation a {
    color: #e0e0e0;
}

.horizontalNavigation a:hover {
    color: #ffffff;
    text-decoration: none;
}

.horizontalNavigation .active a,
.horizontalNavigation .trail a {
    background-color: #666666;
    color: #ffffff;
}

/* tab navigation */

.tabNavigation {
    background: transparent;
    border-bottom: 1px solid #347fa5;
}

.tabNavigation a {
    background: #c9d8de url(../images/tab_background.png) repeat-x;
    color: #1c6888;
}

.tabNavigation .active a {
    background: #c9d8de url(../images/tab_active_background.png) repeat-x;
    color: #ffffff;
}

.tabNavigation a:hover {
    color: #000000;
    text-decoration: none;
}

/* inline navigation */

.inlineNavigation ul {
    background: transparent url(../images/separator_blue.png) no-repeat center left;
}

.inlineNavigation a {
    color: #ffffff;
}

.inlineNavigation ul li {
    background: transparent url(../images/separator_blue.png) no-repeat center right;
}