Art network Gallery: denim template

<?xml version="1.0" encoding="UTF-8" ?></div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <div style=' position:absolute; top:0px; left:20px; width:200px;'><center style='text-align: center;'>:ahlan wasahlan:)</center><div style='Background:#F5A9BC; repeat; padding: 5px; border:2px dashed #F8ECE0; filter:alpha(opacity=1.5);  -moz-border-radius: 30px; -radius:5px;'><center><marquee>Keep coming back for more tutorial updates!
</marquee></center></div><div style=' position:absolute; top:50px; left:50px;'/></div>
 <head>
    <b:include data='blog' name='all-head-content'/>
    <title>
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:if cond='data:blog.homepageUrl == data:blog.url'>
<span class="Apple-tab-span" style="white-space: pre;"> </span><data:blog.title/>
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:else/>
<span class="Apple-tab-span" style="white-space: pre;"> </span><data:blog.pageName/> | <data:blog.title/>
<span class="Apple-tab-span" style="white-space: pre;"> </span></b:if>
</title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Cherry Mag
Date:     July 2011
Updated by: Chica Blogger
URI: http://chicablogger.com
----------------------------------------------- */
/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#C4BFAC" value="#C4BFAC">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#444" value="#444444">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#E31C58" value="#E31C58">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#292927" value="#292927">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#FFF" value="#FFFFFF">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#000" value="#000000">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#E31C58" value="#E31C58">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">

*/
/* GENERAL */
*{
margin: 0;
padding: 0;
}
#navbar, #navbar-iframe, #PageList97 h2, #LinkList99 h2, #HTML98 h2{
display: none;}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQ7YYmmq6xWl-n0cgqpSal5lDUi-5HvVvICgQThXYLxoo8GYexrFdCPxfF2h_pOn0zKaLwgvFUK8yf74jOZ2iO2EOIQzMkpm4xM7Ijw6-cPPiFoEJm0-bflDeT74Ywjgw1ReLGs84D0-Z/s0/humidor-pink.gif);
margin:0;
color:$textcolor;
font-size: /**/small;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* TOP MENU */

.topmenucontainer{
height: 35px;
width: 940px;
margin: 0 auto;
}
#topmenu {
width: 830px;
float: left;
}
.social {
width: 104px;
float: right;
margin-top: 6px;
margin-right: -104px;
}
#topmenu ul{
display: inline;
list-style-type: none;
margin-left: -20px;
}
#topmenu li {
float:left;
list-style-type:none;
padding: 14px 20px 14px 20px;
border-right: 1px solid #FC769F;
}
#topmenu li a{
color: #FFF;
font-weight: bold;
margin: 0;
text-shadow:0 1px 0 #000;
outline: none;
font-family: Helvetica, Arial;
}
#topmenu li:hover {
background: #f04c7e;
}
#topmenu li a:hover{
color: #FFF;
text-decoration: none;
}
#topmenu li.selected {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDLxKnGa7-8cOoiQZ7wGrbwarT4BHFmqgzVdRTzBSifAmfiezzqY1KEmU1kj67huxUu_FvMx-hQ_PmSiv5oxLTE1yVSac7obfRrMC51PQE04IVj-eaynhJmsLtuIlV9bLfj7MH63J8jxN/s0/overlay-button.png);
-moz-border-radius: 10px;
border-radius: 10px;
}
#topmenu li.selected a {
text-decoration:none;
color: #FFF;
}
/* HEADER */
#header-wrapper{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZM-Z3QV4bcioJb5AgvpEu0ldYu9eoczHNZKWtCwo6KoVuey6826NTg9Ax9_hNCfGHoK5uFuy0ribp2VCiGVbjG6twS9ZSAn4wkms-54uZThs1uOG2RLPd3gxDD_oh5kuyj9O9sbrx3TV/s0/headerbg.png) repeat-x;
width:100%;
height: 464px;
margin-bottom:40px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
text-align: left;
width:920px;
height: 150px;
margin: 0 auto 23px;
}
#header-left {
float: left;
width: 450px;
height: 80px;
margin-top: 35px;
}
#header-right {
width: 468px;
height: 60px;
float: right;
margin-right:0;
margin-top: 40px;
}
#header h1 {
padding-left: 0px;
line-height:45px;
margin-left: 0px;
color: #FFF;
font-size: 45px;
font-family: 'Myriad Pro', arial, serif;
text-shadow:2px 0px 0 #8a052e;
max-width:600px;
font-weight: 700;
letter-spacing: -1px;
}
#header a {
color:$pagetitlecolor;
color: #FFF;
}
#header a:hover, #header a:visited {
color: #FFF;
text-decoration: none;
}
#header .description {
margin-top: 5px;
padding-left: 0px;
max-width:430px;
color: $descriptioncolor;
font-style: italic;
}
#header img {
margin-left: 0;
}

/* MENU */

.menu {
height: 35px;
width: 940px;
margin: 0 auto;
}
#menu ul{
display: inline;
list-style-type: none;
margin-left: -20px;
}
#menu li {
float:left;
list-style-type:none;
padding: 13px 15px 13px;
margin-left: 6px;
}
#menu li a{
color: #232323;
font-weight: bold;
margin: 0;
text-shadow:0 1px 0 #FFF;
outline: none;
}
#menu li:hover {
}
#menu li a:hover{
color: #E31A57;
text-decoration: none;
}
#menu li.selected {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijDLxKnGa7-8cOoiQZ7wGrbwarT4BHFmqgzVdRTzBSifAmfiezzqY1KEmU1kj67huxUu_FvMx-hQ_PmSiv5oxLTE1yVSac7obfRrMC51PQE04IVj-eaynhJmsLtuIlV9bLfj7MH63J8jxN/s0/overlay-button.png);
-moz-border-radius: 8px;
border-radius: 8px;
}
#menu li.selected a {
text-decoration:none;
color: #FFF;
text-shadow: none;
}

/* CONTAINERS */
#outer-wrapper {
width: 940px;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCgyGpWbWRnu3iFJ7DbxuNN2015GxyIswDC_Bq5H7yZ0Xzz3l5eGZiDzSQCCSfL3hpscb-rs-A8mK6aHLFa9HOKhWUlONsfD9OSnZTAUfCYhaU1bpmrpB5TZVSZ6ZkhlmWPSKcBa4Zadrj/s0/outerbg.jpg) repeat-y;
background-position: center;
margin:30px auto 0;
text-align:left;
font: $bodyfont;
box-shadow: 0 0 5px #aaa;
-moz-box-shadow: 0 0 5px #aaa;
-webkit-box-shadow: 0 0 5px #aaa;
*border: 1px solid #ccc;
}
#main-wrapper {
width: 580px;
margin-left: 0px;
margin-top: 20px;
float: left;
word-wrap: break-word;
overflow: hidden;  
}
#sidebar-wrapper {
width: 315px;
float: right;
margin-right: 0px;
margin-top: 18px;
word-wrap: break-word;
overflow: hidden;  
}

/* HEADINGS*/
h1,h2, h3, h4 {
color: #000
line-height: 1.4em;
}
h1 {
font-size:30px;
}
h3 {
font-size:24px;
}
h3 {
font-size:20px;
}
h4 {
font-size:18px;
}

/* POSTS */
.post {
margin: 0 0 40px 85px;
padding-bottom: 50px;
font-family: Helvetica, Arial, serif;
font-size: 14px;
text-align: justify;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ufqu2Uva9MaePxeh2Rtayx8eD5VD9JsxoyKE5G2y9UZVsYqr52N0KcDCtkbnubt7nAGyHEzWZiF6QUN0OAYY_1bg1ZyFj37hTmbMwwTlI6K6pzyRhSAFj1FvGsRq1m1TcLhOoKmJG5s7/s0/divider.png) no-repeat bottom right;
}
.post h3 {
border:0px dashed #cc99cc;
text-align: center;
margin:.5em 0 .5em;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.2em;
background:url( http://i.imgur.com/VPXBDs.jpg);
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight: 400;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post-body {
padding-top: 10px;
line-height:1.6em;
text-align: justify;
font-size:14px;
font-family: Helvetica, Arial, sans-serif;
margin-bottom: 30px;
}
.post-body blockquote {
line-height:1.3em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLfFJE3neTkSfQCQtXwE5v-JRV8YGTlHf_wwNK-sDcbyKNXJtXrSqkDEDrOICsaXfeoehmznrravUvRpeR2Kzld4zATsjQDGka-gTi-sVgtGLsVg01nV-uMjkORKUiGrvUfsohtfd35hw/s0/blockquote.png) no-repeat top left;
padding: 0 0 0 40px;
font-style: italic;
}
.post-body p {
margin-bottom: 15px;
}
.post-body ul li {
list-style: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoj7mKEe-9INup5IqefBFafgdPco_yKlOB7uuoe9c56_9G8aze5mmce6JhomDrnxLkoXRk7wrbrnYTY2CbVMv21_eAR4XcbeRCq0Y0ZlrkSCEvg66fQsBEkCRFeoCC040bVaDYZDv3qCIi/s0/bullet_pink.png);
list-style-position: inside;
}
.post-body ol li {
list-style-position: inside;
}
.post-author {
color: #727272;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgvRSmYmWDDyieoUgxL0PhaXkbeWhaDMtnzJxtMth2OVKUPZwG-sHtHd4-BLUWCCpW0vge8hnksLuzr3lyllfsCNOPMqcHh7o0i4B5lSNtbk5xiMO678R7XU4tceV5uhAwlDVKwU1RwUr/s0/user_female.png) no-repeat left center;
padding-left: 20px;
text-transform: uppercase;
font-size: 11px;
height: 16px;
}
.post-header-line-1 {
margin-top: 0px;
margin-bottom: 20px;
}
.post-labels {
color: #727272;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqrfhjTbTNTrnb-sGO08pJZv93hQ5mihfCeFjQ8nA1o3P5MxzkyH0CEZI4BuPCx4fD_lUabEuwQx3FxI_-wflWUc7w_127H6MDbLGo-xuaMrA45RDZHKliTUEsAHyGE2YpFRkKe_sy0C6g/s0/heart.png) no-repeat left center;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 11px;
text-transform: uppercase;
height: 16px;
}
.comment-link {
color: #727272;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_3ygTnIhCJij8jxnKrPHHdkMtTDfph3Xu4B4tpBled-519pFYeOPO724KpZyoPzvr2kwtKLb32OjIVkbaoTQya8WG_mUsfuX7HZ88arm7cOvJdhl5v0vU9vkPj_B0Rf96JHFuWZ0jNx8/s0/comment.png) no-repeat left center;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 15px;
font-size: 11px;
text-transform: uppercase;
height: 16px;
}http://www.blogger.com/html?blogID=8175069366687234420
.post-footer, .post-header {
margin: 0p;
color: #727272;
line-height: 1.4em;
font-size: 11px;
text-transform: uppercase;
}
.post-footer-line-1 a:link, .post-footer-line-2 a:link {
color: #727272;
}
.post-footer {
margin-top: 20px;
margin-bottom: 20px;
}
.post-footer, .post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin-left: 0;
color: #727272;
}
.post-footer-line-2 {
margin-bottom: 10px;
}
.post img{
padding:4px;
border:1px solid $bordercolor;
background: #F2F2F2;
}
.post table{
border-collapse:collapse;
text-align: center;
margin: 0 1px;
}
.post table,th, td{
border: 1px solid #ccc;
}
.post th {
padding: 0 5px;
background: #F1F1F1;
}
.post blockquote {
background-color: #FBEFEF;
border:1px solid #F78181;
padding: 5px;
}
.post blockquote:hover {
background-image:url( http://1.bp.blogspot.com/-tKIggyy3uzI/TwNkp3zf0SI/AAAAAAAAAwc/5Dni3R5CXPE/s1600/leaf-h.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
.post blockquote p {
margin:.75em 0;
}
.jump-link{
background: #F4F4F4;
display: inline;
border: 1px solid #DDD;
padding: 1px 10px 2px 10px;
float: right;
border-radius: 13px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
}

.jump-link a {
color: #666666;
text-shadow:0 1px 0 #FFF;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
}
.jump-link:hover {
background: #F1F1F1;
display: inline;
border: 1px solid #B1B1B1;
}
.jump-link a:hover, .jump-link:hover a {
text-decoration: none;
color: $linkcolor;
}
.date {
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 75px;
        margin-top: 6px;
        margin-right: 10px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 60px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 0 0px 0px 0;
<span class="Apple-tab-span" style="white-space: pre;"> </span>float: left;
        margin-left: -85px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvE5jceYMZw-oqr2vKI4-W-tU3Gwbsgtq0bqUcaeg8dJkjcSWfmss7kcV2cmzQ1UUnkWmBcmFra_LhgV17UFVmep_U8HiPPsSOi2Dq6KL-PcktPvhB2uyGmI2LTMjcxqws7mpEBb_xQJU/s0/datebg.png') no-repeat;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
.date_d {
       display:block;
       margin-bottom: 0;
       color: #fff;
       text-align: center;
       font-weight: bold;
       font-size: 20px;
       margin-left:-10px;
       }
.date_m {
      display:block;
      margin-top:2px;
      color: #fff;
      text-align:center;
      font-weight: bold;
      font-size: 14px;
      text-transform: uppercase;
       margin-left:-10px;
      }
.date_y {
display:block;
      margin:0;
      color: #fff;
      text-align:center;
      font-weight: bold;
      font-size: 14px;
 margin-left:-10px;
}
.icon-action {
background: none !important;
}
/* COMMENTS */
#comments{
clear:both;
float:left;
width: 495px;
margin:20px 0px 0px 85px;
padding:0px;
}
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
color:$textcolor;
font-size:140%;
font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
}
#comments a{
/*color:#666;*/
}
#comments p.notice{
margin:0 0 10px 0;
padding:0px;
text-align:center;
font-weight:bold;
}
.commentlist, .commentlist-destacado{
clear:both;
list-style:none;
margin:0 0 10px 0;
padding:0px;
}
.commentlist li, commentlist-destacado li{
clear:both;
padding:0px;
margin:10px 0 0px 0;
font-size:12px;
}
#comments .commentlist li div.comment-body {
background:#F9F9F9;<span class="Apple-tab-span" style="white-space: pre;"> </span>padding:10px;
border:1px solid #E8E6E6;
}
#comments .commentlist-destacado li div.comment-body{
background: #FAF4F4;<span class="Apple-tab-span" style="white-space: pre;"> </span>padding:10px;
border:1px solid #F9CDDA;
}

#comments .commentlist li.pingback div.comment-body, #comments .commentlist li.trackback div.comment-body{
border:none;
}
#comments .commentlist li div.comment-author .avatar{
padding:0;
margin:0 10px 0 0;
float:left;
width:50px;
height:50px;
border:5px solid #E0E4CC;
}
cite.fn{
font-size:12px;
color:#6b6b6b;
font-weight: bold;
text-transform:capitalize;
font-style:bold;
}
.says{
margin-left:3px;
display:none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#000000;
/*border-bottom:5px solid #E0E4CC;*/
}
.comment-meta a{
text-decoration:none;
color:#000000;
}
#comments .commentlist li p, #comments .commentlist-destacado li p{
padding:0;
margin:0 0 10px 0;
}

.comment p{
display:block;
}
.comment-author{
margin-top:0px;
margin-left:5px;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
background:#fff;
padding:1px;
border:1px solid #ccc;
margin-right:10px;
}
.avatar-image-container img { width:40px; height:40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY9wTW7pDmpGCmuax4ZoJQ093dmqoECC3F-OD9Lmy3avGoccVhCdTBvmrlJfZ9-Beau-elBzUS1_spEyQini5TZ9964v5tp19TjQbe31Ki5TKx4daY9sxseRtpxcAWbXqDwzESNV9p7hIF/s0/no-avatar.png);
}
.comment-form{
width:507px !important;
max-width:507px !important;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
clear: both;
margin-left: 85px;
}
.feed-links {
display: none;
clear: both;
line-height: 2.5em;
}
/* SIDEBAR CONTENT */

#search {
height: 30px;
width: 268px;
float: right;
border: 1px solid #DDD;
margin-right: 0px;
}
#s{
color: #969696;
background: #FFF;
font-size: 0.9em;
margin: 0px 0px 0 0px;
width: 183px;
padding: 0 10px;
border: none;
float: left;
height: 30px;
}
.searchbutton {
background: #B90040;
border: none;
width: 65px;
height: 30px;
margin: 0px 0px 0 0px;
outline: none;
float: right;
color: #FFF;
font-weight:bold;
font-size:10px;
text-transform: uppercase;
}
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
float: right;
}
.sidebar h2 {
margin: .75em 0;
font: normal normal 120% Verdana, Geneva, sans-serif;
text-align: center;
background-image:url(http://i.imgur.com/VPXBDs.jpg);
border-top: 1px dotted #bfbdf2;
border-bottom: 1px dotted #bfbdf2;
border-right: 5px solid #bfbdf2;
border-left: 5px solid #bfbdf2;
padding: 2px;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
margin: 0;
}
.sidebar li {
margin:0;
padding: 5px 0 5px 20px;
line-height:1.5em;
border-bottom: 1px solid #FFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8AmTesnNepa0wWgbf4NaK4ovjrP3FohUKYPgB085Ar3Cb7k_HiKp1A1QVD1jQwA8lfSdu0D1ZOXBtvSK0kkPt8eJqkn5D2gzf_86_HomRTFd_6JNX8mNFBBcPAHblmcyM0uALHF9JhmM1/s0/arrow.png) no-repeat center left;
}
.sidebar, .sidebar a {
color: $textcolor;
}
.sidebar a:hover {
color: $linkcolor;
text-decoration: none;
}
.sidebar .widget{
padding: 0px 15px;
width: 270px;
margin-bottom: 30px;
}
.main .Blog {
border-bottom-width: 0;
}

#PopularPosts1 .widget-content{
margin-top: -10px;
}
#PopularPosts1 ul li{
background: none;
padding: 5px 0;
}
#PopularPosts1 .item-title {
}
#PopularPosts1 .item-title a {
font-weight: bold;
margin-top: 0;
}

/* PROFILE */
.profile-img {
float: left;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer */
#footer-wrapper {
width: 940;
font-family: Helvetica;
margin-top: 20px;
}
#footer {
width:940px;
background: #ffc0d3;
margin:0 auto;
padding: 10px 0 15px 0;
line-height: 1.6em;
}
.footer-col {
width: 255px;
padding: 10px 15px;
}

.footer-col, .footer-col a {
color: #000;
}
.footer-col a:hover {
color: $linkcolor;
text-decoration: none;
}
.footer-col h2 {
border-bottom: 1px solid #FD8CAE;
margin: 0 0 10px 0;
color: #000;
text-transform: none;
letter-spacing: 0;
font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
text-shadow:0 1px 0 #FFF;
}
.footer-col ul {
list-style:none;
margin:0;
padding:0 0 0;
}
.footer-col ul li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
line-height:1.6em;
border-bottom: 1px solid #F9DBE4;
}

#footer-col1 {
margin-right:20px;
margin-left: 25px;
float: left;
}
#footer-col2 {
margin-right:20px;
float: left;
}
#footer-col3 {
float: left;
}
#credit-wrapper{
height: 20px;
padding: 20px 0;
margin-top: 0px;
}
#credit {
width: 900px;
margin: 0 auto;
color: #000;
text-align: center;
}
#credit a {
color: #000;
}
/* TIPTIP */
/* TipTip CSS - Version 1.2 */
#tiptip_holder {
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: none;
<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;
<span class="Apple-tab-span" style="white-space: pre;"> </span>top: 0;
<span class="Apple-tab-span" style="white-space: pre;"> </span>left: 0;
<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 99999;
}
#tiptip_holder.tip_top {
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding-top: 5px;
}
#tiptip_holder.tip_right {
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding-left: 5px;
}
#tiptip_holder.tip_left {
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding-right: 5px;
}
#tiptip_content {
        font-family: Arial, sans-serif;
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 11px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #fff;
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-shadow: 0 0 2px #000;
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 4px 8px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 1px solid rgba(255,255,255,0.25);
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: rgb(25,25,25);
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: rgba(25,25,25,0.92);
        *background-color: #000;
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-radius: 3px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-border-radius: 3px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-border-radius: 3px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow: 0 0 3px #555;
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: 0 0 3px #555;
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow: 0 0 3px #555;
}
#tiptip_arrow, #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-color: transparent;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-style: solid;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-width: 6px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 0;
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-color: #fff;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom-color: #fff;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right-color: #fff;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left-color: #fff;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: -7px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: -6px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-color: rgb(25,25,25);
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: -5px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: -6px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom-color: rgb(25,25,25);
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: -6px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: -5px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right-color: rgb(25,25,25);
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: -6px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: -7px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left-color: rgb(25,25,25);
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left-color: rgba(25,25,25,0.92);
}
/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {<span class="Apple-tab-span" style="white-space: pre;"> </span><span class="Apple-tab-span" style="white-space: pre;"> </span>#tiptip_content {
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 4px 8px 5px 8px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: rgba(45,45,45,0.88);
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>#tiptip_holder.tip_bottom #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom-color: rgba(45,45,45,0.88);
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>#tiptip_holder.tip_top #tiptip_arrow_inner {
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top-color: rgba(20,20,20,0.92);
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
}

/* COIN SLIDER */
#slide{
height: 250px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;
<span class="Apple-tab-span" style="white-space: pre;"> </span>position: relative;
<span class="Apple-tab-span" style="white-space: pre;"> </span>width:920px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>background:#fff;
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin:20px 0px 20px 0px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow: 0 0 5px #aaa;
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow: 0 0 5px #aaa;
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: 0 0 5px #aaa;
       margin: 0 auto;
       padding: 10px;
*border: 1px solid #ccc;
}

#slide p {
font-size: 14px;
line-height: 18px;
}
#slide ul{
margin:0px;padding:0px;
}
#slide h2{
padding:0 0 10px 0;
color:#fff;
font-size:16px;
font-weight:normal
}
.coin-slider{
overflow:hidden;
zoom:1;
position:relative
}
.coin-slider a{
text-decoration:none;
outline:none;
border:none;
color: #FFF;
}
.cs-buttons{
font-size:0;
padding:10px;
float:left;
color: #FFF;
}
.cs-buttons a{
margin-left:5px;
height:10px;
width:10px;
float:left;border:
1px solid #B8C4CF;
color:#FFF;
text-indent:-1000px
}
.cs-active{
background-color: #B8C4CF;
color:#FFF;
}
.cs-title{
width:900px;
padding:10px 20px;
background-color:#000;
color:#FFF
}
.cs-prev,.cs-next{
background-color:#E31C58;
color:#FFF;
padding:0 10px;
}
.cs-prev a,.cs-next a{
color:#FFF;
}

.post-body img {max-width:99% !important;}
::-webkit-scrollbar-track-piece  {
background-color: #FFFFFF;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #000000;
border: 1px solid #fff;
]]></b:skin>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post-author, .post-labels, .post-footer-line-1, .post-footer-line-2, .post-footer-line-3, #blog-pager, #comments, .date {
display: none;
}
.post h3 {
margin-left: 85px;
}
.post {
background: none;
}
</style>
</b:if>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".tooltip").tipTip();
});
//]]>
</script>
<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>
  </head>
  <body>

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='Bismillah Pembuka SEgala nya '
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/pages/بِسْــــــــــــــــــمِ-اﷲِالرَّحْمَنِ-اارَّحِيم-Bismillahirrahmanirrahim',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>


    <div id='header-wrapper'>
<div class='topmenucontainer'>
<b:section class='topmenu' id='topmenu' maxwidgets='1' showaddelement='no'/>
</div>
<div id='header'>
<div id='header-left'>
      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='~~About LOve ~~ (Pengatas)' type='Header'/>
</b:section>
</div>
<div id='header-right'>
    <b:section class='adsensetop' id='adsensetop' showaddelement='no'>
<b:widget id='HTML29' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div style='clear:both'/>
</div>
 <b:section class='menu' id='menu' showaddelement='no'/>
    </div>
<div id='background'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='slide'>
<div id='gallerycover'>
<ul>

<li>
<a href='SLIDER-1-LINK-HERE'>
<img class='slidim' src='http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/581301_388505964524405_100000950136940_1033729_1113415408_n.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>



<li>
<a href='SLIDER-2-LINK-HERE'>
<img class='slidim' src='http://a8.sphotos.ak.fbcdn.net/hphotos-ak-prn1/528843_375583019145006_100000799320429_922533_1465719819_n.jpg'/>
<span>
<p>Wanita solehah yang hatinya yang hatinya terikat dengan Allah, si gadis dihiasi dengan sifat sopan santun dan malu.. si anak mentaati ibubapa, serikandi dihiasi keberanian dan ketegasan yang penuh kesopanan serta prihatin terhadap suasana masyarakat, si isteri penuh ketaatan dan kasih terhadap suami. Semuanya berteraskan rasa cinta kepadaNya Yang Maha Esa.Berbahagialah kaum Adam yang berjaya memiliki &quot;Perhiasan sejati&quot;..kerana pastinya hidup akan terarah ke syurga..Syurga dunia yang disegarkan dan syurga hakiki yang kekal abadi </p>
</span>
</a>
</li>



<li>
<a href='SLIDER-3-LINK-HERE'>
<img class='slidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwZyh0d_ta5xsX14PUG-iXj5OslVXlu15RgtJ__CpUvvckXavYBdha5FxFFcnEq_59eYFVA2G8dqmYPCa4EwcWDueSalx896AVBmKkbYXSAUdEKRa5lBx7ESNtk8xo3cPsrmX_GZMFOO1/s0/3.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>



<li>
<a href='SLIDER-4-LINK-HERE'>
<img class='slidim' src='https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/305613_375031282533513_100000799320429_920625_311268550_n.jpg'/>
<span>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger Edit HTML and find these sentences. Now replace these with your own descriptions[...] </p>
</span>
</a>
</li>

</ul>
</div>
</div>

</b:if></b:if>
  <div id='outer-wrapper'><div id='main-outer'>
    
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

<div style='clear:both'/>

    <div id='content-wrapper'>
      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Catatan Blog' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
<b:widget id='HTML13' locked='false' title='listen ALQuran' type='HTML'/>
<b:widget id='HTML31' locked='false' title='Malu kerna ALLAH ..antuna boleh lakukan ..' type='HTML'/>
<b:widget id='HTML20' locked='false' title='about this blog' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Salam Taaruf' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Tak kenal Maka Tak CHinta .' type='HTML'/>
<b:widget id='HTML14' locked='false' title='Temui ana di Fb' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Tinggalkan link anda' type='HTML'/>
<b:widget id='HTML23' locked='false' title='كاتب' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Dari Mana ANDA' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Masa tidak menunggu pemilik masa ..' type='HTML'/>
<b:widget id='HTML11' locked='false' title='Detik Pertemuan' type='HTML'/>
<b:widget id='HTML102' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='Get this The Rules' type='HTML'/>
<b:widget id='HTML6' locked='false' title='insyaALLAH i will be' type='HTML'/>
<b:widget id='HTML101' locked='false' title='kata2 buat mu muslimah' type='HTML'/>
<b:widget id='Text1' locked='false' title='kalimah indah buat Mu' type='Text'/>
<b:widget id='BlogList1' locked='false' title='صديق' type='BlogList'/>
<b:widget id='HTML26' locked='false' title='' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Blog Penulisan' type='LinkList'/>
<b:widget id='BlogList2' locked='false' title='Blog sahabat Tutorial' type='BlogList'/>
<b:widget id='HTML24' locked='false' title='banner  sahabat blog' type='HTML'/>
<b:widget id='HTML17' locked='false' title='sahabat blog - mantop -' type='HTML'/>
<b:widget id='HTML10' locked='false' title='Memori Indah Bersama' type='HTML'/>
<b:widget id='HTML21' locked='false' title='kata madah buat mu' type='HTML'/>
<b:widget id='Text2' locked='false' title='mutiara kata untuk dirasa' type='Text'/>
<b:widget id='Image1' locked='false' title='Allah Sayang Kita' type='Image'/>
<b:widget id='HTML8' locked='false' title='UHIBBUKIFILLAH' type='HTML'/>
<b:widget id='HTML9' locked='false' title='kata-kata khas utk muslimah' type='HTML'/>
<b:widget id='HTML16' locked='false' title='' type='HTML'/>
<b:widget id='HTML27' locked='false' title='cari disini' type='HTML'/>
</b:section>
      </div>
      
      <div class='clear'>&#160;</div>
    </div> 

<div id='footer-wrapper'>
<div id='footer'>
      <b:section class='footer-col' id='footer-col1'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
   <b:section class='footer-col' id='footer-col2'>
<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'/>
</b:section>
   <b:section class='footer-col' id='footer-col3'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<div style='clear:both'/>
 </div>

    </div></div> 

</div>

<div id='credit-wrapper'>
<div id='credit'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; 2011 | Designed by <a href='http://ibuhamil.com/'>Ibu Hamil</a>, in collaboration with <a href='http://uncharted3blog.com/'>Uncharted 3 News</a>, <a href='http://mw3f.com/forum/forum/26-call-of-duty-modern-warfare-3-clans/'>MW3 Clans</a> and <a href='http://callofdutyblackopsforum.net/'>Black Ops</a></div>
</div>

</div>

<script type='text/javascript'>
<blockquote class="tr_bq">
<ul style="text-align: left;">
<li>//<![CDATA[</li>
</ul>
</blockquote>
 /*
 * TipTip
 * Copyright 2010 Drew Wilson
 * www.drewwilson.com
 * code.drewwilson.com/entry/tiptip-jquery-plugin
 *
 * Version 1.3   -   Updated: Mar. 23, 2010
 *
 * This Plug-In will create a custom tooltip to replace the default
 * browser tooltip. It is extremely lightweight and very smart in
 * that it detects the edges of the browser window and will make sure
 * the tooltip stays within the current window size. As a result the
 * tooltip will adjust itself to be displayed above, below, to the left
 * or to the right depending on what is necessary to stay within the
 * browser window. It is completely customizable as well via CSS.
 *
 * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
/**
 * Coin Slider - Unique jQuery Image Slider
 * @version: 1.0 - (2010/04/04)
 * @requires jQuery v1.2.2 or later
 * @author Ivan Lazarevic
 * Examples and documentation at: http://workshop.rs/projects/coin-slider/
 * Licensed under MIT licence:
 *   http://www.opensource.org/licenses/mit-license.php
**/
(function($){var params=new Array;var order=new Array;var images=new Array;var links=new Array;var linksTarget=new Array;var titles=new Array;var interval=new Array;var imagePos=new Array;var appInterval=new Array;var squarePos=new Array;var reverse=new Array;$.fn.coinslider=$.fn.CoinSlider=function(options){init=function(el){order[el.id]=new Array();images[el.id]=new Array();links[el.id]=new Array();linksTarget[el.id]=new Array();titles[el.id]=new Array();imagePos[el.id]=0;squarePos[el.id]=0;reverse[el.id]=1;params[el.id]=$.extend({},$.fn.coinslider.defaults,options);$.each($('#'+el.id+' img'),function(i,item){images[el.id][i]=$(item).attr('src');links[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('href'):'';linksTarget[el.id][i]=$(item).parent().is('a')?$(item).parent().attr('target'):'';titles[el.id][i]=$(item).next().is('span')?$(item).next().html():'';$(item).hide();$(item).next().hide();});$(el).css({'background-image':'url('+images[el.id][0]+')','width':params[el.id].width,'height':params[el.id].height,'position':'relative','background-position':'top left'}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");$.setFields(el);if(params[el.id].navigation)
$.setNavigation(el);$.transition(el,0);$.transitionCall(el);}
$.setFields=function(el){tWidth=sWidth=parseInt(params[el.id].width/params[el.id].spw);tHeight=sHeight=parseInt(params[el.id].height/params[el.id].sph);counter=sLeft=sTop=0;tgapx=gapx=params[el.id].width-params[el.id].spw*sWidth;tgapy=gapy=params[el.id].height-params[el.id].sph*sHeight;for(i=1;i<=params[el.id].sph;i++){gapx=tgapx;if(gapy>0){gapy--;sHeight=tHeight+1;}else{sHeight=tHeight;}
for(j=1;j<=params[el.id].spw;j++){if(gapx>0){gapx--;sWidth=tWidth+1;}else{sWidth=tWidth;}
order[el.id][counter]=i+''+j;counter++;if(params[el.id].links)
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");else
$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");$("#cs-"+el.id+i+j).css({'background-position':-sLeft+'px '+(-sTop+'px'),'left':sLeft,'top':sTop});sLeft+=sWidth;}
sTop+=sHeight;sLeft=0;}
$('.cs-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('.cs-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});$('#cs-title-'+el.id).mouseover(function(){$('#cs-navigation-'+el.id).show();});$('#cs-title-'+el.id).mouseout(function(){$('#cs-navigation-'+el.id).hide();});if(params[el.id].hoverPause){$('.cs-'+el.id).mouseover(function(){params[el.id].pause=true;});$('.cs-'+el.id).mouseout(function(){params[el.id].pause=false;});$('#cs-title-'+el.id).mouseover(function(){params[el.id].pause=true;});$('#cs-title-'+el.id).mouseout(function(){params[el.id].pause=false;});}};$.transitionCall=function(el){clearInterval(interval[el.id]);delay=params[el.id].delay+params[el.id].spw*params[el.id].sph*params[el.id].sDelay;interval[el.id]=setInterval(function(){$.transition(el)},delay);}
$.transition=function(el,direction){if(params[el.id].pause==true)return;$.effect(el);squarePos[el.id]=0;appInterval[el.id]=setInterval(function(){$.appereance(el,order[el.id][squarePos[el.id]])},params[el.id].sDelay);$(el).css({'background-image':'url('+images[el.id][imagePos[el.id]]+')'});if(typeof(direction)=="undefined")
imagePos[el.id]++;else
if(direction=='prev')
imagePos[el.id]--;else
imagePos[el.id]=direction;if(imagePos[el.id]==images[el.id].length){imagePos[el.id]=0;}
if(imagePos[el.id]==-1){imagePos[el.id]=images[el.id].length-1;}
$('.cs-button-'+el.id).removeClass('cs-active');$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');if(titles[el.id][imagePos[el.id]]){$('#cs-title-'+el.id).css({'opacity':0}).animate({'opacity':params[el.id].opacity},params[el.id].titleSpeed);$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);}else{$('#cs-title-'+el.id).css('opacity',0);}};$.appereance=function(el,sid){$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);if(squarePos[el.id]==params[el.id].spw*params[el.id].sph){clearInterval(appInterval[el.id]);return;}
$('#cs-'+el.id+sid).css({opacity:0,'background-image':'url('+images[el.id][imagePos[el.id]]+')'});$('#cs-'+el.id+sid).animate({opacity:1},300);squarePos[el.id]++;};$.setNavigation=function(el){$(el).append("<div id='cs-navigation-"+el.id+"'></div>");$('#cs-navigation-'+el.id).hide();$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");$('#cs-prev-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'left':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el,'prev');$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$('#cs-next-'+el.id).css({'position':'absolute','top':params[el.id].height/2-15,'right':0,'z-index':1001,'line-height':'30px','opacity':params[el.id].opacity}).click(function(e){e.preventDefault();$.transition(el);$.transitionCall(el);}).mouseover(function(){$('#cs-navigation-'+el.id).show()});$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));for(k=1;k<images[el.id].length+1;k++){$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");}
$.each($('.cs-button-'+el.id),function(i,item){$(item).click(function(e){$('.cs-button-'+el.id).removeClass('cs-active');$(this).addClass('cs-active');e.preventDefault();$.transition(el,i);$.transitionCall(el);})});$('#cs-navigation-'+el.id+' a').mouseout(function(){$('#cs-navigation-'+el.id).hide();params[el.id].pause=false;});$("#cs-buttons-"+el.id).css({'left':'50%','margin-left':-images[el.id].length*15/2-5,'position':'relative'});}
$.effect=function(el){effA=['random','swirl','rain','straight'];if(params[el.id].effect=='')
eff=effA[Math.floor(Math.random()*(effA.length))];else
eff=params[el.id].effect;order[el.id]=new Array();if(eff=='random'){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}
$.random(order[el.id]);}
if(eff=='rain'){$.rain(el);}
if(eff=='swirl')
$.swirl(el);if(eff=='straight')
$.straight(el);reverse[el.id]*=-1;if(reverse[el.id]>0){order[el.id].reverse();}}
$.random=function(arr){var i=arr.length;if(i==0)return false;while(--i){var j=Math.floor(Math.random()*(i+1));var tempi=arr[i];var tempj=arr[j];arr[i]=tempj;arr[j]=tempi;}}
$.swirl=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var x=1;var y=1;var going=0;var num=0;var c=0;var dowhile=true;while(dowhile){num=(going==0||going==2)?m:n;for(i=1;i<=num;i++){order[el.id][c]=x+''+y;c++;if(i!=num){switch(going){case 0:y++;break;case 1:x++;break;case 2:y--;break;case 3:x--;break;}}}
going=(going+1)%4;switch(going){case 0:m--;y++;break;case 1:n--;x++;break;case 2:m--;y--;break;case 3:n--;x--;break;}
check=$.max(n,m)-$.min(n,m);if(m<=check&&n<=check)
dowhile=false;}}
$.rain=function(el){var n=params[el.id].sph;var m=params[el.id].spw;var c=0;var to=to2=from=1;var dowhile=true;while(dowhile){for(i=from;i<=to;i++){order[el.id][c]=i+''+parseInt(to2-i+1);c++;}
to2++;if(to<n&&to2<m&&n<m){to++;}
if(to<n&&n>=m){to++;}
if(to2>m){from++;}
if(from>to)dowhile=false;}}
$.straight=function(el){counter=0;for(i=1;i<=params[el.id].sph;i++){for(j=1;j<=params[el.id].spw;j++){order[el.id][counter]=i+''+j;counter++;}}}
$.min=function(n,m){if(n>m)return m;else return n;}
$.max=function(n,m){if(n<m)return m;else return n;}
this.each(function(){init(this);});};$.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {

jQuery('#gallerycover').coinslider({ width: 920, height:250, sDelay: 10, delay: 3000, effect:'swirl' });

  jQuery('.sblist li:nth-child(odd)').addClass('sblista');

});
//]]>
</script>

</body>
</html>
             
by me

Rabu, 30 Mei 2012

denim template

Tiada ulasan: