/**
 * Style for www.ruam.com
 *
 * authour: K Vorapol
 *
 *
 *****************************************************/    
    
/**
 * Reset
 *
 *****************************************************/
    
    * {
        padding: 0;
        margin: 0;
        text-decoration: none;
        border: none;
        color: #000;
        list-style: none;
        outline: none;
        /*border: 1px dotted #ccc;*/ /* wire frame */
    }
    
/**
 * Typography
 *
 */

    * {
        font-family: Tahoma, Verdana, sans-serif;
        font-size: 11px;
    }

    h1 {
        font-size: 20px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    h3 {
        font-size: 16px;
    }
    
    h4 {
        font-size: 15px;
    }
    
    h5 {
        font-size: 14px;
    }
    
    h6 {
        font-size: 13px;
    }
    
    p {
        font-size: 12px;
        line-height: 1.8em;
    }
    
    strong {
        font-size: 14px;
    }
    
    blockquote {
        font-size: 12px;
        line-height: 1.7em;
    }
    

/**
 * Link
 *
 */

    a:link, a:visited {
        color: #005b7f;
    }
    
    a:hover, a:active, a:focus {
        color: #f26c4f;
    }
    

/**
 * Input
 *
 */

    input {
        padding: 4px 2px;
        border: 1px solid #ccc;
    }
    
    select {
        margin: 0;
        padding: 3px 2px;
        border: 1px solid #ccc;
    }
    
    
    option {
        margin: 2px;
    }
    

/**
 * List
 *
 */

    ol li{
        list-style: outside decimal;
    }
    
    
/**
 * Page Layout
 *
 *****************************************************/


/**
 * Wrapper
 *
 */

    html {
        background: #fff url(../img/bg/top-bg.jpg) top left repeat-x;
    }
    
    body {
        text-align: center;
    }
    
    #wholepage {
    }
    
    #page-bg {
        background-position: center 101px;
    }
    
    #page-wrapper {
        width: 1005px;
        margin: 0 auto;
    }
    
    #container {
        text-align: left;
    }
    
    
/**
 * Header
 *
 */

    #header-holder {
        height: 60px;
        overflow: hidden;
    }
    
    #header {}
    
    #logo {
        float: left;
    }
    
    #logo h1 {
        display: none;
    }
    
    #top-nav {
        float: right;
        margin: 10px 20px;
    }
    
    #top-nav a:link, #top-nav a:visited {
        color: #666;
        margin: 0 10px;
        padding-right: 15px;
        border-right: 1px solid #ccc;
    }
    
    
/**
 * Top Area
 *
 */
    
    #top-area-holder {
        clear: both;
        padding-top: 25px;
        text-align: center;
        height: 170px; /* use this value for main-nav icon */
        background: transparent url(../img/bg/top-container-bg.png) top center no-repeat;
        /*border: 2px solid aqua;*/
    }
    
    #top-area {
        width: 942px;
        margin: 0 auto;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        /*border: 1px solid orange;*/
    }


/**
 * Main Navigation
 *
 */

    #main-nav-holder {
        clear: both;
        width: 942px;
        margin: 0 auto;
        border-top: 1px solid #fff;
        /*border: 1px solid orange;*/
    }
    
    #main-nav {
        /*width: 914px;*/
        width: 900px;
        height: 90px; /* use this height for icon */
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
        /*border: 1px solid blue;*/
        /*background: transparent url(../img/bg/main-nav-bg.gif) top left repeat-x;*/
    }
    
    #main-nav ul {
        text-align: center;
        overflow: hidden;
        height: 60px;
        margin: 0;
        margin-top: 10px;
        text-align: center;
        /*margin: 10px;*/
    }
    
    #main-nav ul li {
        /*float: left;*/
        display: inline;
        position: relative;
        top: 40px;
        width: 70px;
        /*margin: 0 10px;*/
        /*padding: 20px;*/
    }
    
    #main-nav ul li a {
        /*float: left;*/
        display: inline;
        color: #000;
        padding: 40px;
        margin: 0;
        /*text-shadow: #999 2px 1px 1px;*/
    }
    
    a#nav-ruam {
        background: transparent url(../img/bg/menu-icon/icon-nav-home2.gif) no-repeat center top;
    }
    
    a#nav-football {
        background: transparent url(../img/bg/menu-icon/icon-nav-football2.gif) no-repeat center top;
    }
    
    a#nav-lottery {
        background: transparent url(../img/bg/menu-icon/icon-nav-lottery.gif) no-repeat center top;
    }
    
    a#nav-horoscope {
        background: transparent url(../img/bg/menu-icon/icon-nav-horoscope.gif) no-repeat center top;
    }
    
    a#nav-computer {
        background: transparent url(../img/bg/menu-icon/icon-nav-computer.gif) no-repeat center top;
    }
    
    a#nav-travel {
        background: transparent url(../img/bg/menu-icon/icon-nav-travel.gif) no-repeat center top;
    }
	
	a#nav-health {
		background: transparent url(../img/bg/menu-icon/icon-nav-health.gif) no-repeat center top;
	}


/**
 * Body Holder
 *
 */

    #body-holder {
        position: relative;
        left: 2px;
        clear: both;
        overflow: hidden;
        margin: 0;
        padding-top: 20px;
        background: transparent url(../img/bg/container-bg.png) center center repeat-y;
        /*border: 2px solid red;*/
    }
    

/**
 * A Side
 *
 */
    
    .a-side-holder {
        float: left;
        width: 154px;
        margin-left: 43px;
        margin-right: 10px;
    }
    
    .a-side {}
    
    .a-side-holder div {
        margin-bottom: 10px;
    }
    
/**
 * B Side
 *
 */
    
    .b-side-holder {
        float: right;
        width: 200px;
        margin-right: 47px;
    }
    
    .b-side {}
    
    .b-side div {
        margin-bottom: 10px;
    }
    

/**
 * Content
 *
 */

    .content-holder {
        float: left;
        width: 540px;
        margin: 0;
        overflow: hidden;
    }
	
		.content {}
		
			.content .content-list {
				float: left;
				width: 30%;
				margin: 0 0.7em;
				height: 90px;
				padding-bottom: 5px;
				border-top: 1px dashed #666;
				border-bottom: 1px dashed #666;
			}
			
				.content .content-list p {
					font-size: 11px;
					line-height: 1.4em;
					margin: 0;
					padding: 0;
				}


/**
 * Content Large (One side bar)
 *
 */

    .content-large-holder {
        float: left;
        width: 750px;
        margin: 0;
        overflow: hidden;
    }


/**
 * Bottom Area
 *
 */
    
    #bottom-area-holder {
        clear: both;
        height: 250px;
        padding-top: 20px;
        background: transparent url(../img/bg/bottom-container-bg.png) top center no-repeat;
    }
    
    #bottom-area {
        margin: 0 45px;
        height: 130px;
        padding: 20px;
        background: #6ec1f8;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
    }
    
    #bottom-area h3 {
        color: #fff;
        /*margin-top: 10px;*/
        text-align: center;
    }
    
    #bottom-area h4 {
        color: #eee;
        margin: 10px 0;
        border-bottom: 1px solid #fff;
    }
    
    #bottom-area ul {
        float: left;
        margin: 0 10px;
    }
    
    #bottom-area ul li {

        margin: 5px 0;
        color: #eee;
        list-style: inside disc;
    }
    
    #bottom-area ul li a:link, #bottom-area ul li a:visited {
        color: #eee;
        font-size: 12px;
    }
    
    #bottom-area ul li a:hover, #bottom-area ul li a:active {
        color: #000;
    }
    
/**
 * Footer Navigation
 *
 */
    
    #footer-nav-holder {
        margin: 10px auto 0 auto;
        overflow: hidden;
        border-top: 1px solid #fff;
        background: #f4f4f4;
    }
    
    #footer-nav {}
    
    #footer-nav ul {
        text-align: center;
        margin: 10px auto;
    }
    
    #footer-nav ul li {
        display: inline;
        margin: 0;
        padding: 0 20px;
        border-right: 1px solid #ccc;
    }
    
    #footer-nav ul li a {
        color: #666;
    }


/**
 * Content
 *
 *****************************************************/


/**
 * Center Content
 *
 */

   .content {
        margin: 15px 15px;
        overflow: hidden;
    }
    
    .content h3 {
        padding-bottom: 5px;
        margin-bottom: 15px;
        border-bottom: 1px solid #000;
    }
    
    .content p {
        margin: 15px 0;
    }
    

/**
 * Content Block
 *
 */

    .content-block {
        margin-right: 5px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-top: none;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        -moz-box-shadow: 2px 2px 5px #c7c7c7;
        -webkit-box-shadow: 2px 2px 5px #c7c7c7;
        overflow: hidden;
    }
    
    .content-block h2 {
        color: #fff;
        padding: 5px 10px;
        background-color: #6ec1f8;
        -moz-border-radius-topleft: 7px;
        -moz-border-radius-topright: 7px;
        -webkit-border-top-left-radius: 7px;
        -webkit-border-top-right-radius: 7px;
    }
    

/**
 * Default Side Block
 *
 ************************************/

    .block {
        border: 1px solid #ccc;
        border-top: none;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        -moz-box-shadow: 2px 2px 5px #c7c7c7;
        -webkit-box-shadow: 2px 2px 5px #c7c7c7;
        margin-bottom: 10px;
    }
    
    .block h2 {
        color: #fff;
        padding: 5px 10px;
        background-color: #6ec1f8;
        -moz-border-radius-topleft: 7px;
        -moz-border-radius-topright: 7px;
        -webkit-border-top-left-radius: 7px;
        -webkit-border-top-right-radius: 7px;
        /*background: transparent url(../img/bg/left-heading.gif) top left no-repeat;*/
    }
    
    .block ul {
        /*margin: 10px;*/
        line-height: 1.4em;
    }
    
    .block ul li {
        padding: 3px;
    }
    

/**
 * [BLOCK] Default Menu Style
 *
 */

    .menu {
        
    }
    
    .menu ul {
        /*border: 1px solid red;*/
        padding: 10px;
    }
    
    .menu ul li {
        padding: 0;
        border-bottom: 1px dotted #ccc;
    }
    
    .menu ul li a {
        padding: 5px;
        padding-left: 25px;
        display: block;
    }
    
    .menu ul li a:hover, .menu ul li a:active {
        /*background: #ccc;*/
    }
    
    .menu ul li a {
        background: transparent url(../img/bg/menu-icon/icon-default.gif) center left no-repeat;
    }

    
/**
 * [BLOCK] RSS Breaking News - 01
 *
 */

    .rss-01 {
    }

    #marqueecontainer {
        width: 180px !important;
        margin: 15px auto !important;
    }
    
    .fdpoweredby {
        margin: 0 15px;
    }
    
    
    

/**
 * [BLOCK Football Highlight]
 *
 */

    .block-football-highlight {
        text-align: center;
    }
    
    .block-football-highlight h2 {
        text-align: left;
    }
    
    .block-football-highlight img {
        -moz-box-shadow: 2px 2px 5px #666;
        -webkit-box-shadow: 2px 2px 5px #666;
    }
    
    .block-football-highlight ul {
        margin-top: 15px;
    }
    
    .block-football-highlight ul li {
        margin: 10px 0;
    }
    
    .block-football-highlight p {
        clear: both;
        font-size: inherit;
        color: inherit;
    }
    

/**
 * Special Classes
 *
 ************************************/

    .no-css {
        background: none;
        color: #fff;
        padding: 0;
        margin: 0;
        
    }

    .text-shadow {
        text-shadow: #000 2px 2px 2px;
    }

    .box-shadow {
        -moz-box-shadow: 2px 2px 5px #c7c7c7;
        -webkit-box-shadow: 2px 2px 5px #c7c7c7;
    }
    
    .box-radius {
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 1px solid #ccc;
    }
    
    .align-center {
        text-align: center;
        margin: 0 auto;
    }
    
    .align-left {
        text-align: left;
    }
    
    .align-right {
        text-align: right;
    }
    
    .justify {
        text-align: justify;
    }
    
    .fly-left {
        float: left;
    }
    
    .fly-right {
        float: right;
    }
    
    .away-center {
        margin: 0 auto;
    }
    
    .away-left {
        margin-left: 10px;
    }
    
    .away-right {
        margin-right: 10px;
    }
    
    .away-top {
        margin-top: 10px;
    }
    
    .away-bottom {
        margin-bottom: 10px;
    }
    
    .clear {
        clear: both;
    }
    
    .date {
        text-align: right;
        font-size: 11px;
        color: #666;
    }
    
    .refer {
        text-align: right;
        font-size: 11px;
        color: #666;
    }
    
    .all {
        display: block;
        text-align: right;
    }
    
    .width-60 {
        width: 60%;
    }
    
    .width-70 {
        width: 70%;
    }
    
    .width-40 {
        width: 40%;
    }
    
    .width-30 {
        width: 30%;
    }
    
    .display-block {
        display: block;
    }