/*
 * screen.css
 * 
 * CSS stylesheet (media: screen)
 * 
 * @version 1.0; May the 7th, 2008
 * @author Jeroen Oosterlaar <jeroen.oosterlaar@marganza.nl>
 * @copyright 2008, Marganza
 */

body {
    margin: 0px;
    background-color: #E6E7E8;
    background-image: url("/images/wallpaper.gif");
    background-repeat: repeat-x;
    font-family: verdana, arial;
}

#wrapper {
    width: 900px;
    margin: 0px auto 0px auto;
}

hr {
    display: none;
}

.rssFeedIcon {
    float: right;
    border-width: 0px;
    margin-top: 5px;
}

/* ############################################################################
 * Header
 * ############################################################################
 */

#header {
    height: 130px;
    position: relative;
}

#logo {
    margin: 0px;
}

#logo a {
    border-width: 0px;
    position: absolute;
    left: 30px;
    top: 28px;
    width: 191px;
    height: 73px;
    position: absolute;
    background-image: url("/images/logo.jpg");
    text-decoration: none;
}

#logo span {
    visibility: hidden;
}

/* Division menu */

#divisionMenu {
    list-style-type: none;
    font-size: 11px;    
    text-align: right;    
    line-height: 25px;
    margin-right: 30px;
    margin-top: 30px;
    float: right;
}

#divisionMenu a {
    color: #F78F1E;
    text-decoration: none;
}

#divisionMenu a:hover {
    color: #4C5B52;
}

/* ############################################################################
 * Main menu
 * ############################################################################
 */

#mainMenuBar {
    height: 36px;
    background-image: url("/images/menuBackground.gif");
}

#mainMenu {
    list-style-type: none;
    margin: 0px;
    position: relative;
    left: 20px;
    padding: 0px;
    float: left;
}

#mainMenu li {
    float: left;    
    background-image: url("/images/mainMenuButtonRightBorder.gif");
    background-repeat: no-repeat;
    background-position: right top;
    height: 36px;
    padding-right: 8px;
}

#mainMenu li a {
    float: left;
    color: #FFFFFF;
    font-size: 12px;
    text-decoration: none;
    height: 21px;
    display: block;
    line-height: 19px;
    padding-left: 9px;
    padding-right: 9px;
    margin-left: 8px;
    margin-top: 8px;
    background-image: none;
}

#mainMenu li a:hover {
    background-image: url("/images/mainMenuButtonBackground.gif");
}

#mainMenu li a.current {
    background-image: url("/images/mainMenuButtonBackground.gif");
}

/* Drop down menu */

#mainMenu li ul {
    display: none;
    position: absolute;
    top: 36px;
    margin: 0px;
    padding: 0px;
    margin-left: 8px;
    background-color: #434040;
    width: 150px;
    list-style-type: none;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-color: #ADABAB;
    border-style: solid;
    border-top-width: 0px;
    clear: both;
}

#mainMenu li ul li {
    display: block;
    width: 100%;
    text-align: left;
    background-image: none;
    height: auto;
    border-bottom: 1px solid #7B7979;
    padding: 0px;
}

#mainMenu li ul li a {
	margin: 0px;   
    display: block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}

#mainMenu li ul li a:hover {
    background-image: none;
    color: #F78F1E;    
}

#mainMenu li:hover ul,#mainMenu li.over ul {
    display: block;
}

/* ############################################################################
 * Left container
 * ############################################################################
 */

#leftContainer {
    width: 600px;
    float: left;
    padding-top: 2px;
    margin-bottom: 30px;    
}

#leftContainer #content {
    position: relative;    
    left: 30px;
    width: 540px;
}

#leftContainer #content #leftContent {
    float: left;
    width: 240px;
}

#leftContainer #content h1 {
    font-size: 17px;
    color: #434040;    
    margin: 0px;
    font-weight: normal;
    background-image: url("/images/3dBorder.gif");
    background-repeat: repeat-x;
    background-position: bottom left;
    padding-bottom: 7px;    
}

#leftContainer #content h2 {
    font-size: 17px;
    color: #434040;    
    margin: 0px;
    font-weight: normal;
    margin-top: 15px;
}

#leftContainer #content img {
    border-width: 0px;
}

#leftContainer #content p {
    color: #4C5B52;
    font-size: 10px;
    margin: 0px;
    margin-top: 20px;
    line-height: 18px;
}

#leftContainer #content a {
    color: #F78F1E;
}

#leftContainer #content a:hover {
    text-decoration: none;
}

#leftContainer #content ul {
    margin-bottom: 0px;
    margin-top: 20px;
    margin-left: 15px;
    padding: 0px;
    line-height: 18px;
    list-style-type: square;
    font-size: 10px;    
}

#leftContainer #content li {
    color: #4C5B52;
}

#leftContainer #content ul ul {
    margin-top: 0px;
}

#leftContainer #content table {
    border-collapse: collapse;
}

#leftContainer #content th {
    font-size: 10px;
    text-align: left;
    vertical-align: top;
    color: #4C5B52;    
    line-height: 18px;    
}

#leftContainer #content td {
    font-size: 10px;
    text-align: left;
    vertical-align: top;
    color: #4C5B52;
    line-height: 18px;    
}

/* News content */

#leftContainer #newsContent {
    float: left;
    width: 240px;
    position: relative;
    left: 60px;
}

#leftContainer #newsContent h2 {
    font-size: 17px;
    color: #434040;    
    margin: 0px;
    font-weight: normal;
    background-image: url("/images/3dBorder.gif");
    background-repeat: repeat-x;
    background-position: bottom left;
    padding-bottom: 7px;    
}

#leftContainer #newsContent p {
    margin-bottom: 30px;
}

#leftContainer #newsContent p .date {
    color: #F78F1E;
}

#leftContainer #newsContent p a {
    color: #F78F1E;
}

#leftContainer #newsContent p a:hover {
    text-decoration: none;
}

#leftContainer #newsContent table {
    border-collapse: collapse;
    font-size: 10px;
    width: 100%;
    line-height: 18px;
}

#leftContainer #newsContent table th {
    color: #F78F1E;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    width: 80px;
}

#leftContainer #newsContent table td {
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}

#leftContainer #newsContent table td a {
    color: #4C5B52;
    text-decoration: none;
}

#leftContainer #newsContent table td a:hover {
    text-decoration: underline;
}

#leftContainer #content .newsDate {
    color: #F78F1E;
    display: block;
    float: left;
    width: 90px;
}

/* Mood board */

#moodBoardBig {
    height: 260px;
}

#moodBoardSmall {
    height: 144px;
    background-image: url('/resources/moodImages/small/headers_small_1.jpg');
}

/* Location path */

#locPath {
    position: relative;
    left: 30px; 
    top: 90px;
    font-size: 10px;
    color: #4C5B52;
    margin: 0px;
    padding: 0px;
}

#locPath a {
    color: #4C5B52;
}    

#locPath a:hover {
    text-decoration: none;
}

/* ############################################################################
 * Right container
 * ############################################################################
 */

#rightContainer {
    width: 240px;
    float: left;
    margin-left: 30px;
    padding-top: 32px;
}

/* Banner blocks */

#rightContainer #dellPartnerDirect {
    margin-bottom: 30px;
}

#rightContainer #avgAntiVirus {
    background-image: url("/resources/bannerBlocks/avgAntiVirus.jpg");
    height: 85px;
    color: #231F20;
    line-height: 13px;
    font-size: 9px;
    margin-bottom: 30px;    
}

#rightContainer #avgAntiVirus div {
    padding: 10px;
    padding-top: 35px;
}

/* Text panels */

#rightContainer .textPanel h2 {
    font-size: 17px;
    color: #434040;    
    margin: 0px;
    font-weight: normal;
    background-image: url("/images/3dBorder.gif");
    background-repeat: repeat-x;
    background-position: bottom left;
    padding-bottom: 7px;    
}

#rightContainer .textPanel p {
    color: #4C5B52;
    font-size: 10px;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 25px;
    line-height: 18px;
}


#rightContainer .textPanel p a {
    color: #F78F1E;
}

#rightContainer .textPanel p a:hover {
    text-decoration: none;
}

#rightContainer .textPanel ul {
    color: #4C5B52;
    font-size: 10px;
    margin: 0px;
    margin-top: 15px;
    margin-bottom: 25px;
    list-style-type: none;
    line-height: 18px;    
    padding: 0px;
}

#rightContainer .textPanel ul a {
    font-weight: bold;
    text-decoration: none;
    color: #4C5B52;
}

#rightContainer .textPanel ul a:hover {
    text-decoration: underline;
}

#rightContainer ul#navTree {	
}

#rightContainer ul#navTree li a {
    font-weight: bold;
    text-decoration: none;
    color: #F78F1E;	
    font-size: 12px;
}

#rightContainer ul#navTree li a:hover {
	text-decoration: underline;
}

#rightContainer ul#navTree ul {
	margin-top: 0px;
	margin-left: 5px;
	padding-left: 12px;
	border-left: 1px solid #E8EAE9;
}

#rightContainer ul#navTree ul li {
	margin-top: 10px;
}	

#rightContainer ul#navTree ul a {
    color: #4C5B52;
    font-size: 10px;
}

#rightContainer ul#navTree ul a.current {
	color: #F78F1E;
}

#rightContainer ul#navTree ul ul {
    margin: 0px;
    margin-left: 5px;
    padding-left: 12px;
    border-left: 1px solid #ACAEB0;    
}

#rightContainer ul#navTree ul ul a {
    color: #808285;
}

#rightContainer ul#navTree ul ul li {
    margin-top: 5px;
}

#orderSteps span.current {
	font-weight: bold;
	color: #F78F1E;
}

#orderSteps span.done {
    font-weight: bold;
}


/* ############################################################################
 * Footer
 * ############################################################################
 */

#footer {
    float: left;
    width: 900px;
    background-image: url("/images/3dBorder.gif");
    background-repeat: repeat-x;
    padding-top: 15px;
    font-size: 10px;   
    line-height: 15px;     
}

/* Column block */

#footer .columnBlock {
    width: 150px;
    float: left;
    color: #4C5B52;
    position: relative;
    left: 30px;    
    margin: 0px;
}

#footer .columnBlock span {
    color: #F78F1E;
    font-weight: bold;
    width: 15px;
    float: left;
    display: block;
}

#footer .columnBlock a {
    color: #4C5B52;    
}

#footer .columnBlock a:hover {
    text-decoration: none;
}

/* Footer menu */

#footer #footerMenu {
    position: relative;
    right: 30px;
    float: right;
    color: #4C5B52;
    font-weight: bold;    
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#footer #footerMenu li {
    float: left;
    border-right: 1px solid #4C5B52;
    padding-right: 7px;
    margin-left: 7px;
}

#footer #footerMenu a {
    color: #4C5B52;
    text-decoration: none;
}

#footer #footerMenu a:hover {
    text-decoration: underline;
}

/* ############################################################################
 * Form
 * ############################################################################
 */

.formTextField {
    font-family: verdana, arial;
    font-size: 10px;
    color: #4C5B52;
    padding: 2px;
    border: 1px solid #4C5B52;
}

.formButton {
    font-family: verdana, arial;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #F78F1E;
    border-width: 1px;
    padding: 2px;
    text-transform: uppercase;
}

/* ############################################################################
 * Webshop
 * ############################################################################
 */

#leftContainer #content ul.categories {
    list-style-type: none;    
    margin: 0px;
    padding: 0px;
    margin-top: 20px;
    float: left;
}

#leftContainer #content ul.categories li {
    float: left;
}

#leftContainer #content ul.categories li a {
    width: 104px;
    height: 30px;
    display: block;
    background-image: url("/images/webshop/tab.gif");
    margin-right: 1px;
    text-align: center;
    line-height: 30px;
    font-size: 11px;
    font-weight: bold;
    color: #595657;
    text-decoration: none;
    text-transform: lowercase;
}

#leftContainer #content ul.categories li a.notCurrent:hover {    
}

#leftContainer #content ul.categories li a.current {
    color: #E8EAE9;
    background-image: url("/images/webshop/tabCurrent.gif");    
}

#leftContainer #content ul.subCategories {
    list-style-type: none;    
    margin: 0px;
    padding: 0px;
    width: 540px;
    height: 30px;
    background-image: url("/images/webshop/subMenuBackground.gif");
    float: left;
}

#leftContainer #content ul.subCategories li {
    float: left;
}

#leftContainer #content ul.subCategories li a {
    color: #E8EAE9;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    padding: 0px 20px 0px 20px;
    border-right: 1px solid #E8EAE9;
    text-transform: lowercase;
    line-height: 30px;    
}

#leftContainer #content ul.subCategories li a.notCurrent:hover {
    color: #F78F1E;
}    

#leftContainer #content ul.subCategories li a.current {
    color: #F78F1E;
}

#leftContainer #content .productPanelSmall {
    height: 145px;
    background-image: url("/images/webshop/productSmallBackground.gif");
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 20px;    
}

#leftContainer #content .productPanelSmall img {
    border-width: 0px;
}

#leftContainer #content .productPanelSmall .productImage {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
}

#leftContainer #content .productPanelSmall .details {
    position: absolute;
    left: 135px;
    top: 0px;
}

#leftContainer #content .productPanelSmall .details h2 {
    font-size: 13px;
    margin: 0px;
    font-weight: normal;
    color: #434040;
    letter-spacing: -1px;
}

#leftContainer #content .productPanelSmall .details h2 a {
    color: #4C5B52;    
    text-decoration: none;    
}

#leftContainer #content .productPanelSmall .details h2 a:hover {
    text-decoration: underline;
}

#leftContainer #content .productPanelSmall .details p {
    margin: 5px 0px 0px 0px;
    margin-top: 56px;
}

#leftContainer #content .productPanelSmall .priceLabels {
    position: absolute;
    left: 394px;
    top: 33px;
    width: 70px;
    font-size: 11px;
    /*font-weight: bold;*/
    color: #4C5B52;
    text-align: right;
    line-height: 16px;    
}

.priceLabels span {
	color: #DD0000;
}

#leftContainer #content .productPanelSmall .prices {
    position: absolute;
    left: 464px;
    top: 33px;
    width: 74px;
    font-size: 11px;
    /*font-weight: bold;*/
    color: #4C5B52;
    text-align: right;
    line-height: 16px;    
}

.prices span {
    color: #DD0000;
}

.prices strong {
	font-size: 12px;
}	

#leftContainer #content .productPanelSmall .orderButton {
    position: absolute;
    left: 411px;
    top: 115px;
}

#leftContainer #content .productPanelSmall .moreInfoButton {
    position: absolute;
    left: 247px;
    top: 115px;
}

#leftContainer #content .productDescription {
    width: 250px;
    margin-left: 135px;
}

#leftContainer #content .productDescription p {
    margin: 0px 0px 20px 0px;
}

#leftContainer #content .backButton {
    border-width: 0px;
    float: right;
}

/* Cart */

#cart {
    height: 85px;
    background-color: #F78F1E;   
    margin-bottom: 33px;
    color: #FFFFFF;
    cursor: pointer;
}

#cart h2 {
    font-size: 22px;
    margin: 7px;
    font-weight: normal;
}

#cart p {
    font-size: 10px;
    margin: 7px;
    margin-top: 14px;
    line-height: 16px;
}

#cart span {
    width: 75px;
    display: block;
    float: left;
    font-weight: normal;
}

#cart img {
    float: right;
    margin: 10px;
}

#leftContainer #content table.productTable {
    background-image: url("/images/webshop/tableHeaderBackground.gif");
    background-repeat: no-repeat;    
    margin-top: 20px;
    width: 100%;
}

#leftContainer #content table.productTable th {
    color: #FFFFFF;
    padding: 5px;
    font-weight: normal;
    padding-top: 7px;
    border-right: 1px solid #FFFFFF;
}

#leftContainer #content table.productTable td {
    font-size: 11px;
    padding: 5px;
    border-bottom: 1px solid #C6C8C7;    
}

#leftContainer #content table.orderFormTable {
    width: 100%;
}

#leftContainer #content table.orderFormTable td {
    border-bottom: 1px dashed #B5B7B6;    
}

/**
 * Form
 */

form {
    margin: 0px;
    padding: 0px;
}

.formTextField {
    font-family: verdana, arial;
    color: #4C5B52;
    font-size: 10px;
    border: 1px solid #4C5B52;
}

.errorMessage {
    font-weight: bold;
    color: #DD0000;
}