/*
  CSS SYTLE FOR PROFESSIONAL MINI-SITE
  
  Author: Iszuddin Ismail (kidino)
  Date: 29 September 2009
  Website: http://www.minisitegallery.com

*/

/* MAIN LAYOUT */

    * { margin: 0px; padding: 0px; }
    
    body { margin: 0px; padding: 0px;
        background-color: #ededed;
        font-family: Arial;
    }

img, div, td, input { behavior: url(iepngfix.htc); }

    #wrapper {
        width: 960px;
        background-image: url(img/bodybg.png);
        margin: auto;
        padding-top: 1px;
        margin-top: 240px;
        min-height: 800px;
        display: table;
    }

    #content {
        position: relative;
        margin-top: -240px;
        background-image: url(img/header.png);
        min-height: 240px;
	background-repeat: no-repeat;
    }
    
    #footer {
        position: relative;
        width: 960px;
        background-image: url(img/bodyfooter.png);
        background-repeat: no-repeat;
        margin: auto;
        padding-top: 20px;
        min-height: 100px;
        color: #aaa;
        font-size: 9pt;
        font-weight: normal;
        text-align: center;
        padding-top: 70px;
    }
    
/* TEXT FORMATING - footer */

    #footer p {
        margin-bottom: 20px;
    }

    ul#footerlinks {
        top: 19px;
	left: 0px;
	width: 960px;
        position: absolute;
        list-style: none;
    }
    
    #footerlinks li {
        display: inline;
        margin: 0px 5px 0px 5px;
    }

    #footerlinks li a {
        color: #fff;
    }
    
    .just {
        margin: 0px 100px 20px 100px;
        text-align: justify;
    }

/* TOP MENU */

    #menu {
        position: absolute;
        list-style: none;
        right: 20px;
        top: 55px;
        font-size: 11pt;
        font-weight: bold;
    }
    
    #menu li {
        float: left;
        padding: 0px 10px 0px 10px;
        border-right: 1px dotted #aaa;
        color: #0a517d;
    }

    #menu li a, #menu li a:visited {
        color: #0a517d;
        text-decoration: none;
    }
    
    #menu li a:hover {
        text-decoration: underline;        
    }

    #menu li.last {
        padding-right: 0px;
        border-right: none;
    }

/* SIDEBAR */

    #sidebar {
        float: right;
        width: 220px;
        margin-right: 30px;
        margin-top: 175px;
        padding-top: 1px;
    }
    
    #sidebar p {
        font-size: 9pt;
        color: #757575;
        margin-bottom: 15px;
    }

    #sidebar h3 {
        color: #4991be;
        font-size: 18pt;
        font-weight: normal;
        margin-bottom: 10px;
    }

    .divider {
        background-image: url(img/divider.jpg);
        width: 200px; height: 14px;
        margin: auto;
        margin-bottom: 10px;
    }
    
    #sidebar .sbblue {
        background-color: #86bbdb;
        color: #fff;
        padding: 5px 10px 10px 10px;
        margin-bottom: 10px;
    }
    
    #sidebar .sbblue p {
        color: #fff;
    }

    #sidebar .sbblue h3 {
        font-weight: normal;
        margin-bottom: 15px;        
        color: #fff;
    }

/* MAIN CONTENT */

    #maincontent {
        float: left;
        width: 630px;
        margin-left: 40px;
        margin-top: 220px;
    }
    
    #maincontent p {
        font-size: 11pt;
        color: #232323;
        margin-bottom: 20px;
    }

    #maincontent h3 {
        color: #4991be;
        font-size: 16pt;
        text-align: center;
        padding: 10px;
        background-color: #f2f2f2;
        font-weight: normal;
        margin-bottom: 20px;
    }

    #maincontent h2 {
        color: #a90e02;
        font-size: 22pt;
        text-align: center;
        font-weight: normal;
        margin-bottom: 20px;
    }
    
    #maincontent h1 {
        color: #a90e02;
        font-size: 22pt;
        text-align: center;
        margin-bottom: 20px;
        font-style: italic;
    }

/* BLOCKQUOTE */

    blockquote {
        border-top: 3px solid #c4e0fb;
        border-left: 3px solid #c4e0fb;
        border-right: 1px dotted #c4e0fb;
        border-bottom: 15px solid #c4e0fb;
        padding: 15px;
        padding-bottom: 0px;
        background-color: #d2e8fc;
        margin: 0px 20px 20px 20px;
        background-image: url(img/quotebg.gif);
        background-position: top left;
        background-repeat: no-repeat;
    }

    #maincontent blockquote * {
        color: #1e5b95;
        font-style: italic;
    }
    
/* JOHNSON BOX or MODULE BOX */
  
    .module {
        background-color: #fef9df;
        border-left: 3px solid #bfad4a;
        border-bottom: 3px solid #bfad4a;
        border-right: 1px solid #bfad4a;
        padding: 20px;
        padding-bottom: 0px;
        margin: 0px 20px 20px 20px;
    }
    
    #maincontent .module p {
        color: #73630c;
    }
    
    .module h4 {
        font-weight: normal;
        font-size: 18pt;
        color: #fff;
        border-top: 3px solid #5b4f0b;
        background-color: #bfad4a;
        margin-top: -20px;
        margin-left: -23px;
        margin-right: -21px;
        margin-bottom: 20px;
        padding: 3px;
        padding-left: 23px;
        background-image: url(img/modulebg.gif);
        background-position: left center;
        background-repeat: no-repeat;
        font-style: italic;
    }
    
/* NORMAL NUMBERED LIST */

    ol {
        margin-left: 40px;
        margin-bottom: 20px;
    }
    
    ol li {
        margin-bottom: 5px;
        padding: 4px;
        font-size: 11pt;
        color: #232323;
    }

/* NORMAL UNORDERED LIST */

    ul {
        list-style-type: square;
        margin-left: 40px;
        margin-bottom: 20px;
    }
    
    ul li {
        margin-bottom: 5px;
        padding: 4px;
        font-size: 11pt;
        color: #232323;
    }

/* YES LIST */

    ul.yes {
        list-style-type: none;
        margin: 20px;
    }
    
    ul.yes li {
        margin-bottom: 5px;
        background-color: #f3fce3;
        padding: 4px;
        font-size: 11pt;
        color: #232323;
        background-image: url(img/accept.png);
        background-repeat: no-repeat;
        background-position: 8px 4px;
        padding-left: 32px;
    }

/* NO LIST */

    ul.no {
        list-style-type: none;
        margin: 20px;
    }
    
    ul.no li {
        margin-bottom: 5px;
        background-color: #ffefef;
        padding: 4px;
        font-size: 11pt;
        color: #232323;
        background-image: url(img/cross.png);
        background-repeat: no-repeat;
        background-position: 8px 4px;
        padding-left: 32px;
    }
    
/* TEXT FIELD */

    .txt {
        font-family:Arial, Helvetica;
        color: #000;
        font-size:10pt;
        background: transparent url(img/txt.png) no-repeat fixed;
        width: 190px; height: 33px;
        border: none;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
    }

    *>.txt { background: transparent url(img/txt.png) no-repeat; }
    
/* ORDER BOX */

    .order {
        text-align: center;
        font-size: 10pt;
        font-weight: bold;
    }
    
/* HIGHLIGHT */

    .highlight {
        background-color: #f5d500;
    }
    
/* CENTERING HEADLINE IMAGE */

    .headline { text-align: center; }
    
/* TOP QUALIFYER or ATTENTION */

    .qualifyer {
        font-weight: bold;
        font-style: italic;
    }
    
/* TOGGLE FOR FULL WIDE LAYOUT */

    body.full #wrapper {
        width: 960px;
        background-image: url(img/bodybg-full.png);
        margin: auto;
        padding-top: 1px;
        margin-top: 240px;
        min-height: 800px;
        display: table;
    }
       
    body.full #content {
        position: relative;
        margin-top: -240px;
        background-image: url(img/header-full.png);
        min-height: 240px;
    }
    
    body.full #footer {
        position: relative;
        width: 960px;
        background-image: url(img/footer-full.png);
        background-repeat: no-repeat;
        margin: auto;
        padding-top: 20px;
        min-height: 100px;
        color: #aaa;
        font-size: 9pt;
        font-weight: normal;
        text-align: center;
        padding-top: 70px;
    }
    
    body.full #content #maincontent {

        width: 740px;
        margin-left: 110px;
        margin-top: 220px;
    }
    
    body.full #content #sidebar {
        display: none;
    }

/* TOGGLE FOR SLIM LAYOUT */

    body.slim #wrapper {
        width: 760px;
        background-image: url(img/bodybg-slim.png);
        margin: auto;
        padding-top: 1px;
        margin-top: 240px;
        min-height: 800px;
        display: table;
    }
       
    body.slim #content {
        position: relative;
        margin-top: -240px;
        background-image: url(img/header-slim.png);
        min-height: 240px;
    }
    
    body.slim #footer {
        position: relative;
        width: 760px;
        background-image: url(img/footer-slim.png);
        background-repeat: no-repeat;
        margin: auto;
        padding-top: 20px;
        min-height: 100px;
        color: #aaa;
        font-size: 9pt;
        font-weight: normal;
        text-align: center;
        padding-top: 70px;
    }
    
    body.slim #footer #footerlinks {
        top: 19px;
        position: absolute;
        list-style: none;
        margin: auto;
        width: 760px;
    }

    body.slim #content #maincontent {

        width: 660px;
        margin-left: 50px;
        margin-top: 220px;
    }
    
    body.slim #content #sidebar {
        display: none;
    }

/* IE6 FIX */

    #ie6header {
        position: absolute;
        width: 100%;
        display: none;
        background-image: url(img/header.png);
        background-position: center;
        background-repeat: no-repeat;
        left: 0px;
        top: 0px;
        height: 240px;
        z-index: 100;
        top: 0px;
        display: none;
    }

    #ie6header ul#menu {
	position: relative;
        top: 55px;
        font-size: 11pt;
        font-weight: bold;
	width: 960px;
	margin: auto;
	display: block;
	text-align: right;
    }
    
    #ie6header #menu li {
	float: none;
        padding-left: 10px;
        padding-right: 10px;
        border-right: 1px dotted #aaa;
        color: #0a517d;
	display: inline;
    }

    #ie6header #menu li a, #ie6header #menu li a:visited {
        color: #0a517d;
        text-decoration: none;
    }
    
    #ie6header #menu li a:hover {
        text-decoration: underline;        
    }

    #ie6header #menu li.last {
        padding-right: 0px;
        border-right: none;
    }