Salahsatu kanal detik mobile adalah detikfood mobile, yang warna themenya didominasi warna hijau segar. Kode Css berikut sudah saya rapihkan, sehingga kawan bisa mempelajarinya. Namun, supaya tak ketinggalan cerita, ada baiknya kawan pelajari dulu artikel: “Cara Membuat Website Mobile Seperti Detik Mobile“, tapi jika sudah paham, sila lanjut baca artikel ini.
Screenshoot:

Inilah kode css detik food mobile:

@charset "utf-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
color: #333;
}
.clearfix { clear: both }
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
p { margin: 10px 0 }
.fl { float: left }
.fr { float: right }
.header {
background: url(f-1076065356bg_header.jpg) bottom repeat-x #f5f5f5;
border-top: 1px solid #f0f0f0;
}
.header .logo {
float: left;
padding-left: 5px;
}
.header .tgl {
float: right;
font-size: .8em;
color: #666;
padding-right: 10px;
padding-top: 20px;
}
.menu {
padding: 7px 5px;
font-size: 1.10em;
color: #FFF;
text-align: center;
background: #acbc2b;
background: -moz-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(172,188,43,1)),color-stop(100%,rgba(96,170,52,1)));
background: -webkit-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: -o-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: -ms-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acbc2b',endColorstr='#60aa34',GradientType=0);
border-bottom: 1px solid #5f8a42;
}
.menu a {
color: white;
text-decoration: none;
line-height: 130%;
font-weight: bold;
display: inline-block;
padding: 1px 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 1px;
}
.menu a:hover,
.menu a.selected { background: #5f8a42 }
.menu3 {
text-align: center;
border-bottom: 1px solid #CCC;
padding: 5px;
}
.menu3 a {
color: #063;
text-decoration: none;
line-height: 130%;
font-weight: bold;
display: inline-block;
padding: 2px 6px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.menu3 a:hover,
.menu3 a.selected {
background: #063;
color: white;
}
.search {
padding: 5px;
text-align: center;
height: 27px;
border-top: 1px solid #ffd800;
border-bottom: 1px solid #ff5a00;
background: #d9b721;
background: -moz-linear-gradient(top,rgba(217,183,33,1) 0,rgba(242,132,16,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(217,183,33,1)),color-stop(100%,rgba(242,132,16,1)));
background: -webkit-linear-gradient(top,rgba(217,183,33,1) 0,rgba(242,132,16,1) 100%);
background: -o-linear-gradient(top,rgba(217,183,33,1) 0,rgba(242,132,16,1) 100%);
background: -ms-linear-gradient(top,rgba(217,183,33,1) 0,rgba(242,132,16,1) 100%);
background: linear-gradient(top,rgba(217,183,33,1) 0,rgba(242,132,16,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9b721',endColorstr='#f28410',GradientType=0);
}
.search2 {
padding: 3px 5px 6px 5px;
text-align: center;
color: #fff;
border-top: 1px solid #53ac38;
border-bottom: 1px solid #419627;
background: #5db641;
background: -moz-linear-gradient(top,#5db641 0,#49a02e 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5db641),color-stop(100%,#49a02e));
background: -webkit-linear-gradient(top,#5db641 0,#49a02e 100%);
background: -o-linear-gradient(top,#5db641 0,#49a02e 100%);
background: -ms-linear-gradient(top,#5db641 0,#49a02e 100%);
background: linear-gradient(top,#5db641 0,#49a02e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5db641',endColorstr='#49a02e',GradientType=0);
}
.search_detik {
padding-top: 3px;
margin: auto;
}
.search_detik .input {
float: left;
background: 0;
font-size: 13px;
font-family: Arial,Helvetica,sans-serif;
background: 0;
border: 0;
width: 85%;
color: #666;
clear: none;
height: 23px;
padding: 0 0 0 10px;
margin: 0;
}
.search_detik form {
width: 300px;
height: 23px;
width: 95%;
background: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin: auto;
-moz-box-shadow: inset 0 0 5px #999;
-webkit-box-shadow: inset 0 0 5px #999;
box-shadow: inset 0 0 5px #999;
}
.search_detik .btn {
width: 28px;
height: 23px;
background: 0;
border: 0;
cursor: pointer;
float: right;
background: url(f-1638184697btn_search.gif) no-repeat left center;
margin: 0;
}
.search_detik .btn:hover { opacity: .50 }
.foot_menu {
background: #acbc2b;
background: -moz-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(172,188,43,1)),color-stop(100%,rgba(96,170,52,1)));
background: -webkit-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: -o-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: -ms-linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
background: linear-gradient(top,rgba(172,188,43,1) 0,rgba(96,170,52,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acbc2b',endColorstr='#60aa34',GradientType=0);
padding: 5px;
font-size: 1.15em;
color: #FFF;
text-align: center;
border-bottom: 1px solid #597d27;
}
.foot_menu a {
color: white;
text-decoration: none;
line-height: 130%;
display: inline-block;
padding: 0 3px;
}
.foot_menu a:hover { text-decoration: underline }
.breadcrumb {
padding: 5px 8px;
background: #ceefa0;
color: #1f7500;
border-bottom: 1px solid #7faa43;
}
.breadcrumb a {
color: #1f7500;
font-weight: bold;
text-decoration: none;
font-size: 1em;
display: inline-block;
}
.breadcrumb a.home {
float: left;
display: block;
padding-right: 5px;
padding-top: 2px;
}
.list_1 {
list-style: none;
padding: 0;
margin: 0;
}
.list_1 li {
padding: 6px 15px 6px 8px;
border-bottom: 1px solid #e6e6e6;
background: url(f-460716104bg_1.png) right center no-repeat;
}
.list_1 li:hover { background: url(../image/bg_1.png) right center no-repeat #f0f0f0 }
.list_1 li .date {
font-weight: normal;
font-size: .75em;
color: #99 9;
}
.list_1 li h4 {
font-size: .95em;
color: #ff6000;
}
.hl {
background: #d8e8c0!important;
background: -moz-linear-gradient(top,rgba(216,232,192,1) 0,rgba(204,229,167,1) 100%)!important;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(216,232,192,1)),color-stop(100%,rgba(204,229,167,1)))!important;
background: -webkit-linear-gradient(top,rgba(216,232,192,1) 0,rgba(204,229,167,1) 100%)!important;
background: -o-linear-gradient(top,rgba(216,232,192,1) 0,rgba(204,229,167,1) 100%)!important;
background: -ms-linear-gradient(top,rgba(216,232,192,1) 0,rgba(204,229,167,1) 100%)!important;
background: linear-gradient(top,rgba(216,232,192,1) 0,rgba(204,229,167,1) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8e8c0',endColorstr='#cce5a7',GradientType=0)!important;
color: white;
padding: 8px;
border-top: 1px solid #c4df9f!important;
border-bottom: 1px solid #82b660!important;
}
.hl h4 {
font-size: .9em;
color: #ff6000;
}
.hl a {
line-height: 130%;
padding-bottom: 3px;
color: #2b5311;
text-decoration: none;
font-size: 1.1em;
}
.hl a:hover {
color: #063;
text-decoration: none;
}
.edisi,
.kotaks {
border-bottom: 1px solid #82b660!important;
background: #d8e8c0 url(f-460716104bg_1.png) right center no-repeat!important;
}
.edisi:hover {
border-bottom: 1px solid #82b660!important;
background: #c9dcad url(f-460716104bg_1.png) right center no-repeat!important;
}
.premium {
border-bottom: 1px solid #82b660!important;
background: #d8e8c0;
}
.pic {
float: left;
margin-right: 10px;
display: table-cell;
text-align: center;
vertical-align: middle;
white-space: nowrap;
border: 1px solid #bfbfbf;
background-color: #e6e6e6;
width: 90px;
height: 65px;
overflow: hidden;
}
.pic img {
max-height: 65px;
max-width: 98px;
}
.list_1 li a {
color: #2b5311;
text-decoration: none;
}
.harilalu {
text-align: right;
background: #b3c23d!important;
}
.selanjutnya {
text-align: center;
background: #6c8f43!important;
color: #FFF;
}
.selanjutnya:hover,
.selanjutnya a:hover,
.harilalu:hover { color: yellow }
.selanjutnya a,
.harilalu a {
font-size: .9em;
font-weight: bold;
color: #FFF!important;
}
.list_1 li.app {
background: #ff3019;
background: -moz-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,48,25,1)),color-stop(100%,rgba(207,4,4,1)));
background: -webkit-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -o-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -ms-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);
text-align: center;
color: white;
font-size: .9em;
}
.list_1 li.app a {
color: yellow;
font-weight: bold;
}
.list_2 {
list-style: none;
padding: 0;
margin: 0;
}
.list_2 li {
padding: 5px 8px;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid white;
}
.list_2 li .date {
font-weight: normal;
font-size: .9em;
opacity: .7;
}
.list_2 li h4 {
font-size: .95em;
color: #F00;
}
.list_2 li h3 {
font-size: 1.1em;
color: #2b5311;
}
.list_2 li a {
line-height: 130%;
padding-bottom: 3px;
color: #2b5311;
text-decoration: none;
font-size: .9em;
}
.list_2 li a:hover {
color: #3b7018;
text-decoration: none;
}
.list_2 li.app {
background: #ff3019;
background: -moz-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,48,25,1)),color-stop(100%,rgba(207,4,4,1)));
background: -webkit-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -o-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -ms-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);
text-align: center;
color: white;
font-size: .9em;
}
.list_2 li.app a {
color: yellow;
font-weight: bold;
}
.promo_but {
background-color: #e00;
border: 1px solid #e00;
border-radius: 5px 5px 5px 5px;
color: #fff!important;
font-size: 10px;
font-weight: bold;
margin: 3px 0;
padding: 3px 3px 2px 3px;
text-align: center;
}
.title {
background: #d1f45f!important;
background: -moz-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(209,244,95,1)),color-stop(100%,rgba(171,220,40,1)))!important;
background: -webkit-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: -o-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: -ms-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1f45f',endColorstr='#abdc28',GradientType=0);
!important padding: 4px 8px;
border-bottom: 2px solid #fc9caa!important;
color: #527312!important;
font-weight: bold;
}
.title2 {
background: #d1f45f!important;
background: -moz-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(209,244,95,1)),color-stop(100%,rgba(171,220,40,1)))!important;
background: -webkit-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: -o-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: -ms-linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
background: linear-gradient(top,rgba(209,244,95,1) 0,rgba(171,220,40,1) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1f45f',endColorstr='#abdc28',GradientType=0);
!important border-bottom: 2px solid #b3c23d!important;
color: #527312!important;
font-weight: bold!important;
padding: 7px 10px!important;
}
.title2 .more {
float: right;
color: white;
font-size: 12px;
}
.title2 .more:hover { color: #FF0!important }
.title2 a.btn_kirim {
float: right;
display: inline-block;
padding: 3px 5px;
background: red;
color: white;
font-weight: bold;
font-size: .7em;
}
.editor {
line-height: 130%;
color: #333;
}
.area_1 {
background: #ffde8d;
background: -moz-linear-gradient(top,rgba(255,222,141,1) 0,rgba(239,198,17,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,222,141,1)),color-stop(100%,rgba(239,198,1 7,1)));
background: -webkit-linear-gradient(top,rgba(255,222,141,1) 0,rgba(239,198,17,1) 100%);
background: -o-linear-gradient(top,rgba(255,222,141,1) 0,rgba(239,198,17,1) 100%);
background: -ms-linear-gradient(top,rgba(255,222,141,1) 0,rgba(239,198,17,1) 100%);
background: linear-gradient(top,rgba(255,222,141,1) 0,rgba(239,198,17,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffde8d',endColorstr='#efc611',GradientType=0);
border-bottom: 1px solid #fc9caa!important;
}
.l_none { background: none!important }
.list_2 li.title3 {
background: #ffd65e!important;
background: -moz-linear-gradient(top,rgba(255,214,94,1) 0,rgba(254,191,4,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,214,94,1)),color-stop(100%,rgba(254,191,4,1)));
background: -webkit-linear-gradient(top,rgba(255,214,94,1) 0,rgba(254,191,4,1) 100%);
background: -o-linear-gradient(top,rgba(255,214,94,1) 0,rgba(254,191,4,1) 100%);
background: -ms-linear-gradient(top,rgba(255,214,94,1) 0,rgba(254,191,4,1) 100%);
background: linear-gradient(top,rgba(255,214,94,1) 0,rgba(254,191,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd65e',endColorstr='#febf04',GradientType=0);
border-bottom: 1px solid #fc9caa;
color: #000;
font-weight: bold;
padding: 5px 10px!important;
text-align: center;
}
.list_2 li.title3 span {
display: inline-block;
padding: 7px 10px!important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #F00;
color: yellow;
font-weight: bold;
font-size: 12px;
margin-right: 10px;
text-transform: uppercase;
}
.list_2 li.title3 span a {
color: white;
display: inline-block;
padding: 0 5px;
}
.list_2 li.title3 span a:hover { text-decoration: underline }
.list_2 li.bbc {
background: #a90329;
background: -moz-linear-gradient(top,rgba(169,3,41,1) 0,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(169,3,41,1)),color-stop(44%,rgba(143,2,34,1)),color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top,rgba(169,3,41,1) 0,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top,rgba(169,3,41,1) 0,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top,rgba(169,3,41,1) 0,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top,rgba(169,3,41,1) 0,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329',endColorstr='#6d0019',GradientType=0);
padding: 4px 8px;
text-transform: uppercase;
border-bottom: 2px solid #8b0000;
color: #f5ff88;
font-weight: bold;
}
.list_2 li.aci {
background: #ff3019;
background: -moz-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,48,25,1)),color-stop(100%,rgba(207,4,4,1)));
background: -webkit-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -o-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: -ms-linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
background: linear-gradient(top,rgba(255,48,25,1) 0,rgba(207,4,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019',endColorstr='#cf0404',GradientType=0);
padding: 4px 8px;
text-transform: uppercase;
border-bottom: 2px solid #ce0000;
color: #f5ff88;
font-weight: bold;
}
.list_2 li.alamat {
background: #f1e767;
background: -moz-linear-gradient(top,rgba(241,231,103,1) 0,rgba(254,182,69,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(241,231,103,1)),color-stop(100%,rgba(254,182,69,1)));
background: -webkit-linear-gradient(top,rgba(241,231,103,1) 0,rgba(254,182,69,1) 100%);
background: -o-linear-gradient(top,rgba(241,231,103,1) 0,rgba(254,182,69,1) 100%);
background: -ms-linear-gradient(top,rgba(241,231,103,1) 0,rgba(254,182,69,1) 100%);
background: linear-gradient(top,rgba(241,231,103,1) 0,rgba(254,182,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767',endColorstr='#feb645',GradientType=0);
text-align: center;
}
.list_2 li.alamat h3 {
padding-bottom: 3px;
font-size: .9em;
}
.list_2 li.satu { background: #f0f0f0 }
.list_2 li.fitur { text-align: center }
.list_2 li.fitur a {
display: inline-block;
margin: 2px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
color: white;
padding: 7px 13px;
background: #ff9c23;
background: -moz-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,156,35,1)),color-stop(100%,rgba(252,126,0,1)));
background: -webkit-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: -o-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: -ms-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9c23',endColorstr='#fc7e00',GradientType=0);
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.list_2 li.fitur a:hover { opacity: .8 }
.list_2 li.menu_tab {
text-align: center;
border-bottom: #fc7e00 1px solid;
padding-bottom: 0;
margin-bottom: 5px;
background: #fbe8d6;
}
.list_2 li.menu_tab a {
display: inline-block;
background: #03654b;
padding: 5px 13px 5px 13px;
margin-right: 4px;
margin-top: 0;
color: #fff!important;
font-weight: bold;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.list_2 li.menu_tab a:hover { opacity: .8 }
.list_2 li.menu_tab a.selected { background: #fc7e00 }
.list_2 li .tlt {
display: inline-block;
padding: 1px 10px!important;
margin-bottom: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #F00;
color: white;
font-weight: bold;
font-size: 12px;
margin-right: 10px;
text-transform: uppercase;
}
.list_3 {
padding: 5px 0;
text-align: left;
font-size: .9em!important;
}
.list_3 a {
text-decoration: none;
color: #666;
float: left;
font-size: 1.1em!important;
background: url(f-1127216203bullet_1.png) 0 5px no-repeat;
padding: 0 10px 0 15px;
width: 45%;
}
.list_3 a:hover {
text-decoration: none;
color: #000;
}
.list_3 a span { color: red }
.list_4 {
border-top: 3px solid #ebebeb!important;
padding-bottom: 20px!important;
padding-top: 10px!important;
}
.list_4 a {
display: inline-block;
width: 45%;
padding: 2px 0 2px 5px;
font-size: 1em!important;
}
.list_4 a span { color: #F00 }
.list_5 {
border-top: 3px solid #ebebeb!important;
padding-bottom: 20px!important;
padding-top: 10px!imp ortant;
}
.list_5 a {
display: inline-block;
width: 45%;
padding: 2px 0 2px 5px;
font-size: 1em!important;
}
.list_5 a span { color: #F00 }
.list_info { padding: 0!important }
.list_info:hover { background: none!important }
.list_info a {
display: block;
background: url(f-1127216203bullet_1.png) 5px 10px no-repeat;
padding: 5px 5px 5px 18px;
border-bottom: 1px dotted #CCC;
}
.detail {
padding: 8px;
color: #333;
}
.detail h1 {
color: #F60;
font-size: 1.7em;
padding-bottom: 5px;
line-height: 120%;
}
.detail h1 a {
color: #F60;
text-decoration: none;
}
.detail h2 {
color: #5b8f0c;
font-size: 1.4em;
}
.detail .author {
color: #666;
font-size: 1em;
font-weight: bold;
padding-bottom: 2px;
}
.detail .date {
color: #666;
font-size: .8em;
}
.detail .pic_detail,
.detail .pic_detail_horoscope {
font-size: 1em;
color: #666;
width: 300px;
margin: 0 auto;
padding-top: 10px;
}
.detail .pic_detail_horoscope {
background: #000;
width: 200px;
}
.detail .pic_detail img,
.detail .pic_detail_horoscope img {
margin: 0 auto;
display: block;
padding-bottom: 4px;
max-width: 300px;
}
.detail .pic_detail_horoscope img { width: 200px }
.detail .text_detail {
padding-top: 10px;
font-size: 1.2em;
line-height: 130%;
padding-bottom: 15px;
}
.detail .text_detail a {
color: #006;
text-decoration: none;
font-weight: bold;
}
.detail .share {
border-bottom: 1px solid #CCC;
border-top: 1px solid #CCC;
padding: 8px 0;
font-size: 1em;
color: #333;
}
.detail .share a {
color: #2b5311;
font-weight: bold;
text-decoration: none;
display: inline-block;
padding: 0 2px;
}
.detail .komentar {
border-bottom: 1px solid #CCC;
padding: 8px 0;
font-size: 1em;
color: red;
}
.detail .komentar a {
color: red;
font-weight: bold;
text-decoration: none;
display: inline-block;
padding: 0 2px;
}
.detail .bacajuga strong {
display: block;
padding: 10px 0 0 0;
font-size: 1.3em;
}
.detail .bacajuga a {
display: block;
background: url(f-1127216203bullet_1.png) 0 10px no-repeat;
padding: 5px 5px 2px 13px;
color: #2b5311;
text-decoration: none;
font-size: 1.2em;
}
.noti {
display: block;
background: #FF9;
border: 1px solid #FC6;
color: #F00;
text-decoration: none;
text-align: center;
padding: 5px;
font-weight: bold;
margin: 10px 0;
}
.back {
display: block;
background: #cae6e9;
border: 1px solid #CCC;
color: black;
text-decoration: none;
text-align: right;
padding: 5px;
font-weight: bold;
margin: 10px 0;
}
.back:hover { background: #CCC }
.list_komentar {
list-style: none;
margin: 0;
padding: 0;
}
.list_komentar li {
padding: 7px;
color: #333;
font-size: 1.1em;
border-bottom: 1px solid #e6e6e6;
}
.list_komentar li.satu { background: #f0f0f0 }
.list_komentar .nama { padding-bottom: 4px }
.list_komentar .nama .icon {
float: left;
margin-right: 3px;
}
.list_komentar .nama strong {
color: red;
font-size: 1.1em;
}
.list_komentar .nama .time {
float: right;
color: #666;
font-size: .9em;
}
.list_komentar .k_element {
color: #036;
font-weight: bold;
padding-top: 4px;
border-top: 1px dotted #e6e6e6;
margin-top: 3px;
}
.list_komentar .k_element a {
color: #036;
text-decoration: none;
}
.list_komentar .pro {
float: right;
display: inline-block;
padding: 2px;
background: #090;
color: white;
font-weight: bold;
font-size: .9em;
}
.list_komentar .kontra {
float: right;
display: inline-block;
padding: 2px;
background: #F00;
color: white;
font-weight: bold;
font-size: .9em;
}
.box_komentar .paging {
background: #e6e6e6;
padding: 6px 8px;
text-align: center;
color: grey;
border-top: 1px solid #CCC;
}
.box_komentar .head {
background: #e6e6e6;
padding: 6px 8px;
text-align: left;
color: red;
border-bottom: 1px solid #CCC;
}
.box_komentar .paging a {
color: black;
text-decoration: none;
font-weight: bold;
}
.kirim_komentar {
background: #f0f0f0;
padding: 10px;
margin-top: 15px;
border-top: 1px solid #CCC;
}
.kirim_komentar strong {
display: block;
padding-bottom: 4px;
font-size: 1.2em;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
}
.kirim_komentar textarea {
display: block;
margin-top: 3px;
margin-bottom: 5px;
width: 97%;
height: 150px;
background: white;
border: 1px solid #CCC;
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
padding: 5px;
}
.kirim_komentar .helo { font-weight: bold }
.kirim_komentar .helo a {
color: #039;
text-decoration: none;
}
.kirim_komentar .submit {
display: block;
padding: 5px 10px;
background: red;
color: white;
font-weight: bold;
border: 0;
margin-top: 5px;
cursor: pointer;
}
.kirim_komentar label { font-size: .9em }
.footer {
background: #eeeded;
text-align: center;
padding-bottom: 10px;
color: #666;
font-size: .9em;
}
.footer a {
color: #333;
text-decoration: none;
}
.footer a:hover { text-decoration: underline }
.foot_1 {
background: #648a2e;
padding: 5px;
font-size: 1.2em;
font-weight: bold;
border-top: 1px solid #729e35;
border-bottom: 1px solid #547625;
color: #FFF;
}
.foot_1 a {
color: white;
display: inline-block;
padding: 0 3px;
}
.foot_2 {
padding: 5px;
font-size: 1.3em;
font-weight: bold;
}
.foot_3 {
padding-bottom: 5px;
font-size: 1.1em;
}
.paging_1 {
background: #ccf;
text-align: center;
padding: 5px;
}
.paging_1 a {
color: #006;
text-decoration: none;
font-weight: bold;
display: inline-block;
}
.top_banner {
text-align: center;
margin: auto;
padding: 5px 0;
}
.sponsor_1 {
font-size: 11px;
padding: 2px 0;
background: #d9d9d9;
text-align: center;
}
.sponsor_1 span {
display: block;
padding-bottom: 3px;
color: #666;
}
.sponsor_1 a {
font-size: 1.3em!important;
color: green;
font-weight: bold;
text-decoration: none;
}
.sponsor_1 a:hover {
text-decoration: underline;
color: red;
}
.banner_1 {
background: #d8e8c0;
color: #666!important;
}
.banner_1 span { color: #666!important }
.multipage {
text-align: center;
color: #666;
padding: 5px;
font-size: 12px;
border-top: 1px solid #CCC;
background: #e6e6e6;
}
.multipage2 {
border-top: 0 solid #CCC;
border-bottom: 1px solid #CCC;
}
.multipage .jl {
float: left;
width: 400px;
text-align: left;
font-size: 15px;
color: #666;
font-weight: bold;
padding-top: 5px;
}
.multipage span {
display: inline-block;
padding: 0 5px;
}
.multipage a {
font-family: Arial,Helvetica,sans-serif;
color: #fff;
padding: 5px 8px;
text-decoration: none;
display: inline-block;
font-weight: bold;
background: #ff9c23;
background: -moz-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,156,35,1)),color-stop(100%,rgba(252,126,0,1)));
background: -webkit-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: -o-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: -ms-linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
background: linear-gradient(top,rgba(255,156,35,1) 0,rgba(252,126,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9c23',endColorstr='#fc7e00',GradientType=0);
padding: 5px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.multipage a:hover { opacity: .8 }
.multipage .lihat_indeks {
background: 0;
display: inline-block;
margin-top: 10px;
text-shadow: 0 0 0 #e6e6e6;
color: #333;
border: 0;
}
.list_multi a {
display: block;
padding: 4px 0;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
color: #F30;
}
.list_multi a:hover { text-decoration: underline }
.jdl_multi {
font-size: 18px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCC;
margin-bottom: 5px;
font-weight: bold;
}
.btn_2 {
display: inline-block;
padding: 8px 20px!important;
background: #61d2f4;
background: -moz-linear-gradient(top,rgba(97,210,244,1) 0,rgba(15,180,231,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(97,210,244,1)),color-stop(100%,rgba(15,180,231,1)));
background: -webkit-linear-gradient(top,rgba(97,210,244,1) 0,rgba(15,180,231,1) 100%);
background: -o-linear-gradient(top,rgba(97,210,244,1) 0,rgba(15,180,231,1) 100%);
background: -ms-linear-gradient(top,rgba(97,210,244,1) 0,rgba(15,180,231,1) 100%);
background: linear-gradient(top,rgba(97,210,244,1) 0,rgba(15,180,231,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#61d2f4',endColorstr='#0fb4e7',GradientType=0);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color: white!important;
font-weight: bold;
border: 0;
cursor: pointer;
}
.multi_photo {
text-align: center;
color: #666!important;
padding-bottom: 3px;
font-size: 12px;
border-bottom: 1px solid #d9d9d9;
margin-top: 5px;
}
.multi_photo img { max-width: 300px }
.multi_photo span {
display: block;
padding-top: 3px;
}
.indeksmulti a {
background: 0;
border: 0;
padding: 5px;
color: #666;
font-weight: bold;
}
.list_5 {
margin: 0;
padding: 0;
list-style: none;
color: #333;
}
.list_5 li {
background: url(f-1127216203bullet_1.png) 0 7px no-repeat;
padding: 3px 0 3px 15px;
}
.box_noti {
background: #fff6b9;
padding: 9px;
border: 1px solid #eee293;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: .9em;
line-height: 130%;
color: #333;
}
.box_noti a {
color: #036;
text-decoration: none;
font-weight: bold;
}
.box_noti .login_box { text-align: center }
.box_noti .login_box a { display: block }
@media all and (min-width:500px) {
.box_noti .login_box a {
display: inline-block;
text-align: center;
}
}
.kirim_kirim strong { display: block }
form label { margin: 0 3px 0 0 }
form label,
form { font: normal 13px/1.2em Arial,Helvetica,sans-serif }
form input,
form textarea,
form select {
font: normal 13px/1.5em Arial,Helvetica,sans-serif;
color: #666;
}
form input,
form textarea,
form select {
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 4px 0;
padding: 5px;
border: 1px solid #b3b3b2;
}
form input,
form textarea { background: #fff }
form input[type="submit"],
form input[type="reset"] {
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: yellow;
cursor: pointer;
border: 1px solid #e60000;
}
form input[type="submit"]:hover,
form input[type="reset"]:hover { opacity: .7 }
.button {
display: inline-block;
font-weight: bold;
font-size: 13px;
margin-right: 2px;
text-transform: uppercase;
padding: 7px 10px;
background: #f00;
background: -moz-linear-gradient(top,#f00 0,#c40000 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f00),color-stop(100%,#c40000));
background: -webkit-linear-gradient(top,#f00 0,#c40000 100%);
background: -o-linear-gradient(top,#f00 0,#c40000 100%);
background: -ms-linear-gradient(top,#f00 0,#c40000 100%);
background: linear-gradient(top,#f00 0,#c40000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#c40000',GradientType=0);
}
.inputsubmit { padding: 4px }
.input_1,
.select_1,
.textarea_1 { width: 90% }
.area_1 .input_1,
.hl .input_1 {
width: 65%;
border: 1px solid#999;
padding: 3px;
}
.btn_3 {
background: #F00;
padding: 6px 15px;
color: #FFF;
font-weight: bold;
font-size: 14px;
border: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn_3:hover { opacity: .8 }
.c_love {
background: #fff0f5;
background: -moz-linear-gradient(top,rgba(255,240,245,1) 0,rgba(255,221,232,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,240,245,1)),color-stop(100%,rgba(255,221,232,1)));
background: -webkit-linear-gradient(top,rgba(255,240,245,1) 0,rgba(255,221,232,1) 100%);
background: -o-linear-gradient(top,rgba(255,240,245,1) 0,rgba(255,221,232,1) 100%);
background: -ms-linear-gradient(top,rgba(255,240,245,1) 0,rgba(255,221,232,1) 100%);
background: linear-gradient(top,rgba(255,240,245,1) 0,rgba(255,221,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0f5',endColorstr='#ffdde8',GradientType=0);
}
.form_kirim_div {
background: none!important;
padding: 10px;
margin-top: 0;
border-top: 0 solid #CCC;
font-size: 12px!important;
}
.form_kirim_div form {
padding: 0!important;
font-size: 12px!important;
}
.form_kirim_div strong {
border-bottom: 0;
display: block!important;
padding: 10px 0 3px 0!important;
margin-bottom: 0!important;
}
.user_login {
float: right;
text-align: right;
padding-right: 5px;
color: #333;
padding-top: 7px;
font-size: 12px;
}
.user_login a {
text-decoration: none;
font-weight: bold;
display: block;
padding-top: 3px;
color: green;
}
.user_login a:hover { text-decoration: underline }
.bold { font-weight: bold }
.p t5 { padding-top: 5px }
.noti_dc {
font-size: 13px;
padding: 10px;
background: #FFC;
border: 1px solid #dfe0c4;
margin-bottom: 5px;
}
.noti_dc a { font-weight: bold }
.login_dc .pic_dc {
float: left;
width: 50px;
height: 50px;
background: #FFC;
overflow: hidden;
text-align: center;
border: 1px solid #e6e6e6;
margin-right: 15px;
}
.login_dc .pic_dc img { height: 50px }
.kirim_komentar .submit {
background: red;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
text-decoration: none;
padding: 10px 20px;
font-weight: bold;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
border: 0;
cursor: pointer;
}
.menu a.lipsus { color: #f00 }
.lipsus,
.menu a.lipsus {
background: #f9f29d;
background: -moz-linear-gradient(top,rgba(249,242,157,1) 0,rgba(255,216,0,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(249,242,157,1)),color-stop(100%,rgba(255,216,0,1)));
background: -webkit-linear-gradient(top,rgba(249,242,157,1) 0,rgba(255,216,0,1) 100%);
background: -o-linear-gradient(top,rgba(249,242,157,1) 0,rgba(255,216,0,1) 100%);
background: -ms-linear-gradient(top,rgba(249,242,157,1) 0,rgba(255,216,0,1) 100%);
background: linear-gradient(to bottom,rgba(249,242,157,1) 0,rgba(255,216,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f29d',endColorstr='#ffd800',GradientType=0);
border: none!important;
}
.box_grid {
position: relative;
overflow: hidden;
height: 120px;
margin: 0 auto 5px;
text-align: center;
}
.box_grid h3 { margin-bottom: 3px }
.box_grid span {
width: 97px;
height: 120px;
text-align: center;
display: inline-block;
vertical-align: text-top;
}
li .box_grid .pic {
margin: 5px auto 3px;
background: #fff;
}
.box_grid .pic img {
border: 0;
padding: 0;
margin: 0;
min-width: 90px;
}
.box_grid.vid .pic .play,
.list_1.vid .pic .play,
.hl .pic .play {
margin: -27px 0 0 68px;
height: 19px;
min-width: 18px;
display: block;
opacity: .8;
}
.list_2 li .box_grid a { font-size: 10px }
.list_2 li .box_grid h3 { color: inherit }
.list_2 li .box_grid a:hover { color: #000!important }
.l_grey1,
.l_grey1 a {
color: #252425;
text-decoration: none;
}
.l_grey1 a:hover {
color: #000;
text-decoration: underline;
}
.l_grey,
.l_grey a {
color: #666;
text-decoration: none;
}
.l_grey a:hover { text-decoration: underline }
.l_red,
.l_red a {
color: #F00;
text-decoration: none;
}
.l_red:hover { text-decoration: underline }
.l_blue_detik,
.l_blue_detik a {
color: #00F;
text-decoration: none;
}
.l_blue_detik a:hover {
color: #F00;
text-decoration: underline;
}
.l_blue2_detik,
.l_blue2_detik a {
color: #284296;
text-decoration: none;
}
.l_blue2_detik a:hover {
color: #;
text-decoration: underline;
}
.l_blue3_detik,
.l_blue3_detik a {
color: #105598;
text-decoration: none;
}
.l_blue3_detik a:hover {
color: #105598;
text-decoration: underline;
}
.l_yellow_detik,
.l_yellow_detik a {
color: #f5ff88;
text-decoration: none;
}
.l_yellow_detik a:hover {
color: #FFF;
text-decoration: underline;
}
.l_white_detik,
.l_white_detik a {
color: #FFF;
text-decoration: none;
}
.l_white_detik a:hover {
color: #FF0;
text-decoration: underline;
}
.l_red_detik,
.l_red_detik a {
color: #f00;
text-decoration: none;
}
.l_red_detik a:hover {
color: #009;
text-decoration: underline;
}
.l_green_detik,
.l_green_detik a {
color: green;
text-decoration: none;
}
.l_green_detik a:hover {
color: green;
text-decoration: underline;
}
.l_black_detik,
.l_black_detik a {
color: black;
text-decoration: none;
}
.l_black_detik a:hover {
color: black;
text-decoration: underline;
}
.l_red2_detik,
.l_red2_detik a {
color: #cc181f;
text-decoration: none;
}
.l_red2_detik a:hover {
color: #039;
text-decoration: underline;
}
.l_brown_detik,
.l_brown_detik a {
color: #ffd658;
text-decoration: none;
}
.l_brown_detik a:hover {
color: #fff;
text-decoration: underline;
}