- Css Kod 15

CSS POİNT TASARIMI

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 80px; margin-left:-350px; left: 50%; }  body { background-color:#ffffff;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 714px; height: 552px; background-image:url(http://pixelea.com/s/6cc3f621cc.png);}   #content { position: absolute; left: 57%; top: 97px; margin-left:-389px; width: 628px; height: 395px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}     #Uebersicht{ position: absolute; left: 50%; top: 250px; margin-left:-440px; font-color:#cccccc;}     a{ color:#ffffff; text-decoration: none; font-size:14px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #cccccc; font-size: 13px; text-decoration: none;}

CSS OYUN 088 TASARIMI

TASARIMIN ÜSTÜNE

<div  id="menu">  <ul id="nav">    <li class="top"><a href="URL" _fcksavedurl="URL" class="top_link"><span>Link</span></a></li>         <li class="top"><a id="services" class="top_link"><span class="down">Link  <font color="#aad5fd">+</font></span></a>       <ul class="sub">        <li><a href="URL" _fcksavedurl="URL">Nombre</a></li>        <li><a href="URL" _fcksavedurl="URL">Nombre</a></li>        <li><a href="URL" _fcksavedurl="URL">Nombre</a></li>        </ul>    </li>         <li class="top"><a href="URL" _fcksavedurl="URL" id="privacy" class="top_link">    <span>Link</span></a></li>         </ul> </li> </div>  <p><img src="http://pixelea.com/s/6289a69749.png" _fcksavedurl="http://pixelea.com/s/6289a69749.png" border="0" /> </p>   <div class="sidebar" id="link"> <img src="http://pixelea.com/s/9a8d7c3d5c.png" _fcksavedurl="http://pixelea.com/s/9a8d7c3d5c.png" border="0" /> <br />          <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <br /> </div>  <div class="sidebar2" id="link"> <img src="http://pixelea.com/s/9a8d7c3d5c.png" _fcksavedurl="http://pixelea.com/s/9a8d7c3d5c.png" border="0" />             <br />          <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <font color="#aad5fd">+</font> <a href="URL" _fcksavedurl="URL">Nombre</a><br /> <br /> </div>           </div>  <fieldset>

TASARIMIN ALTINA
CSS BÖLÜMÜNE

TAM EKRAN GÖRMEK İÇİN TIKLAYINIZ

TASARIMIN ÜSTÜNE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Fences  by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://www.freecsstemplates.org/previews/thefences/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="logo">
<h1><a href="#">DJ Ceeyme  </a></h1>
<p><em> Tasarım uyarlama: <a href="http://www.frmceeyme.tk">frmceeyme.tk</a></em></p>
</div>
<hr />

<div id="header">
<div id="menu">
<ul>
<li><a href="#" class="first">Home</a></li>
<li class="current_page_item"><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" name="s" id="search-text" size="15" />
<input type="submit" id="search-submit" value="GO" />
</fieldset>
</form>
</div>

</div>


<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to The Fences </a></h2>
<p class="meta">Sunday, April 26, 2009 7:27 AM Posted by <a href="#">Someone</a></p>
<div class="entry">
<p>

TASARIMIN ALTINA

</p>
</div>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<h2>Aliquam tempus</h2>
<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, volutpat.</p>
</li>
<li>
<h2>Pellenteque ornare </h2>
<ul>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Magna lacus bibendum mauris</a></li>
<li><a href="#">Velit semper nisi molestie</a></li>
<li><a href="#">Eget tempor eget nonummy</a></li>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Velit semper nisi molestie</a></li>
<li><a href="#">Eget tempor eget nonummy</a></li>
<li><a href="#">Nec metus sed donec</a></li>
</ul>
</li>
<li>
<h2>Turpis nulla</h2>
<ul>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Magna lacus bibendum mauris</a></li>
<li><a href="#">Velit semper nisi molestie</a></li>
<li><a href="#">Eget tempor eget nonummy</a></li>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Nec metus sed donec</a></li>
<li><a href="#">Magna lacus bibendum mauris</a></li>
<li><a href="#">Velit semper nisi molestie</a></li>
<li><a href="#">Eget tempor eget nonummy</a></li>
<li><a href="#">Nec metus sed donec</a></li>
</ul>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>

<div id="footer">
<p>Copyright (c) 2010 DJ Ceeyme. All rights reserved. Design by <a href="http://www.djceeyme.tr.gg">Free CSS Templates</a>.</p>
</div>

</body>
</html>

CSS BÖLÜMÜNE

TASARIMIN ÜSTÜNE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome » RS18 Template </title>
<link href="http://img43.xooimage.com/files/7/b/8/slider-188de18.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://img4.xooimage.com/files/a/9/3/jquery-b17397.js"></script>
<script type="text/javascript" src="http://img49.xooimage.com/files/d/e/f/jquery-easing-1.3.pack-188dc06.js"></script>
<script type="text/javascript" src="http://img27.xooimage.com/files/b/d/6/jquery-easing-com...1.2.pack-188dc1e.js"></script>
<script type="text/javascript" src="http://img41.xooimage.com/files/f/1/c/coda-slider.1.1.1.pack-188dc2d.js"></script>
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 5 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="sitename">BusinessPortfolio<span id="description">Free CSS Template by RamblingSoul</span></h1>
<div id="topnav">
<ul>
<li id="first" class="active"><a href="/">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="portfolio">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Design Resources</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="headercolumn1">
<p class="description">
We design, develop and promote beautiful & accessible websites and web apps.
Checkout our <a href="portfolio">portfolio</a> or learn more about our <a href="/#">products</a> & <a href="#">services</a></p>
</div>
<div id="headercolumn2">
<div id="search_top">
<form action="/search/search.php" method="get">
<p><input type="text" name="query" id="query" class="keyword"/>   </p>
<p class="button"><input name="" type="image" src="http://img21.xooimage.com/files/0/9/6/searchbutton-188dc52.gif" alt="Search" /></p>
<p class="hide">   <input type="hidden" name="search" value="1" /> </p>
</form>
</div>
<div id="subscribe"><a href="#">Subscribe
</a></div>
</div>
<div class="clear"></div>
</div>
<div id="contents">
<div id="topbar">
<div class="columns">
<h2>First Title</h2>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis. Donec euismod, felis non auctor tempus, ante metus  sollicitudin ante</p>
</div>
<div class="columns">
<h2>Second Title</h2>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis. Donec euismod, felis non auctor tempus, ante metus  sollicitudin ante</p>
</div>
<div class="columns">
<h2>Third Title</h2>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis. Donec euismod, felis non auctor tempus, ante metus  sollicitudin</p>
</div>
<div class="clear"></div>
</div>
<div id="homepage">
<div class="services">
<h2 class="subhead">What we do ?</h2>
<ul>
<li class="idea">Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis.</li>
<li class="design">Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis.</li>
<li class="apps">Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis.</li>
<li class="mobile">Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis.</li>
</ul>
</div>
<div class="portfolio_preview">
<h2><img src="http://img27.xooimage.com/files/0/b/9/fromportfolio-188dcae.gif" alt="From Portfolio" width="130" height="18" /></h2>
<div id="from_portfolio">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="http://img29.xooimage.com/files/1/f/2/kre8ivity-188dd1c.jpg" alt="temp" width="501" height="158" />
<div class="photo-meta-data">
Project : kre8ivity.com(Under Development)<br />
<span>Scope of work : PHP, MySQL, User Interface Design, Marketing and SEO</span>                 </div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="http://img43.xooimage.com/files/6/0/7/real2-188dd4a.jpg" alt="temp" width="501" height="158" />
<div class="photo-meta-data">
Project : RealOne Template (Under Development)<br />
<span>Scope of work : PHP, MySQL, User Interface Design, Marketing and SEO</span>                  </div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="http://img41.xooimage.com/files/4/c/6/ramblingsoul-188dd5c.jpg" alt="scotch egg" width="501" height="158" />
<div class="photo-meta-data">
Project : RamblingSoul.com <br />
<span>Scope of work : PHP, MySQL, WebDesign, Wordpress and SEO</span>                  </div>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="http://img43.xooimage.com/files/6/0/7/real2-188dd4a.jpg" alt="temp" width="501" height="158" />
<div class="photo-meta-data">
Project : RealOne Template (Under Development)<br />
<span>Scope of work : PHP, MySQL, User Interface Design, Marketing and SEO</span>                  </div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="http://img41.xooimage.com/files/4/c/6/ramblingsoul-188dd5c.jpg" alt="scotch egg" width="501" height="158" />
<div class="photo-meta-data">
Project : RamblingSoul.com <br />
<span>Scope of work : PHP, MySQL, WebDesign, Wordpress and SEO</span>                  </div>
</div>
</div>
</div>
</div>
<div id="movers-row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="clear">
</div>
<br />
<div class="blog_column">
<h2 class="subhead">From The Blog</h2>
<div class="post">
<div class="post_head">
<h3><a href="#">Lorem Ipsum Dolor Sit</a></h3>
<span class="meta">Posted on 12 December 2008</span>
<span class="meta"><a href="#">Roshan</a> Blogs about <a href="#">CSS Templates</a></span></div>
<p>Ut ante dolor, eleifend viverra, adipiscing elementum, interdum sit  amet, felis. Donec euismod, felis non auctor tempus, ante metus  sollicitudin ante, in rutrum orci massa ac urna. Cras nisi. Sed ornare  nulla ac odio. Quisque ac nisl non quam feugiat porttitor. Aliquam et  dolor. Curabitur ipsum eros, aliquam eget, ultrices et, semper nec,  ipsum. Mauris fringilla vulputate massa. </p>
<p>Aenean felis metus, interdum  a, pretium vel, rutrum nec, enim. Cras eget augue. Suspendisse dolor.  Duis leo eros, posuere ac, volutpat vitae, pulvinar sit amet, purus.  Praesent nibh arcu, gravida et, ullamcorper quis, suscipit vitae,  turpis. </p>
</div>
</div>
<div class="right_column">
<h2 class="subhead">Resources</h2>
<ul class="resourcelist">
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">CSS Menus</a></li>
<li><a href="#">Free Graphics</a></li>
<li><a href="#">Free Icons</a></li>
<li></li>
</ul>
</div>
<div class="narrow_column">
<h2 class="subhead">Products</h2>
<ul class="products_list">
<li> <a href="#"><img src="http://img42.xooimage.com/files/f/a/c/product-omcms-18a1ca7.gif" alt="OM Opensource CMS" /></a> </li>
<li> <a href="#"><img src="http://img28.xooimage.com/files/d/6/c/product-real2-18a1c86.gif" alt="Real 2 , Real Estate Website , Real Estate Direcotry" /></a> </li>
<li> <a href="#"><img src="http://img26.xooimage.com/files/e/f/9/product-kre8ivity-18a1c74.gif" alt="Kre8ivity - Social Networking" /></a> </li>
</ul>
<br />
<p> <a href="/products"><img src="http://img40.xooimage.com/files/e/9/8/viewmore-18a1c68.jpg" alt="View more" /></a> </p>
</div>

TASARIMIN ALTINA

<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="bottom">
<div class="columns">
<h3>Chat with us</h3>
<p>
<strong><img src="images/irc_protocol.png" alt="Gtalk" width="16" height="16" /> Gtalk :</strong> gtalk( at )gtalk.com    </p>
<p>
<strong><img src="images/yahoo_protocol.png" alt="Yahoo" width="16" height="16" /> Yahoo :</strong> yahoo( at )yahoo.com</p>
<p>
<strong><img src="images/msn_protocol.png" alt="MSN" width="16" height="16" /> MSN :</strong> msnmessenger</p>
<p>
<strong><img src="images/skype.png" alt="Skype" width="16" height="16" /> Skype:</strong> skypeout</p>
</div>
<div class="columns">
<h3>Contact Us</h3>
<p>
<img src="images/telephone.png" alt="Call" width="16" height="16" /> Call : +91 9124563789</p>
<p>
<img src="images/mail_generic.png" alt="email" width="16" height="16" /> General Emails : email( at )server.com</p>
<p>
<img src="images/mail_generic.png" alt="email" width="16" height="16" />  Careers Related Enquiries : hr( at )server.com</p>
<p>
<img src="images/mail_generic.png" alt="email" width="16" height="16" /> Partnership enquiries : Partners( at )server.com</p>
</div>
<div class="columns">
<h3>Reach Us</h3>
<p>1st Floor</p>
<p>ABCD Building, XYZ Street</p>
<p>City of God, State</p>
<p>Country, Zip Code - 123456</p>
</div>
<div class="clear"></div>
</div>
<div id="midbottom"></div>
</div>
<div id="footer">
<div class="footercontent">
<p>Copyright Information Goes Here</p>
<p>Home | Products | Services | Privacy Policy | Terms of use | Contact Us |

<a href="http://www.ramblingsoul.com"> CSS Template</a> by RamblingSoul | Plantilla adaptada por <a href="http://www.kilometro6.es.tl">kilometro6</a </p>
</div>
</div>
</div>
</body>
</html>

CSS BÖLÜMÜNE

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
* { padding:0; margin:0;
}
a {
color: #194896;
text-decoration: none;
}
ul {list-style:none;}
body {background:url(http://img24.xooimage.com/files/1/8/7/bg-188d53c.jpg) repeat; font:11px Verdana, Arial, Helvetica, sans-serif; color:#333;}
#wrap { width:894px; margin:auto;}
.hide {
display: none;
}
#header {background:url(http://img28.xooimage.com/files/f/5/3/header-188d55a.jpg) no-repeat; height:273px; }
#contents {background:url(http://img44.xooimage.com/files/6/a/6/contentbg-188d569.jpg) repeat-y; padding:1px 5px 0 5px;}
.clear {clear:both;}
#bottom {background:url(http://img42.xooimage.com/files/c/d/4/bottombg-188d582.jpg) repeat-x; height:126px;}
#footer {background:url(http://img42.xooimage.com/files/0/e/5/footer-188d593.jpg) no-repeat; height:81px;}
#topbar {background:url(http://img24.xooimage.com/files/a/3/8/topbarbg-188d5a0.jpg) left bottom no-repeat; height:129px;
}
#homepage {padding:15px 0;}
#homepage .services {width:300px; padding:0 5px; float:right;}
#homepage .portfolio_preview { width:565px; height:260px; float:left; background:url(http://img24.xooimage.com/files/7/6/e/featuredprojectbg-188d5b1.jpg) repeat-x;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", halvetica, Verdana, sans-serif; font-weight:bold;}
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4 {font-size:12px;}
.subhead {display:block; background:url(http://img40.xooimage.com/files/c/7/0/subheadbg-188d5be.jpg) repeat-x; height:25px; padding:3px 5px 0 5px;}
.portfolio_preview h2 {display:block; padding:3px 3px 0 5px; color:#fff; height:25px;}
.services li {display:block; padding:3px 5px 3px 40px; margin:5px 0 3px; height:46px; border-bottom:solid 1px #ccc;}
.services li.idea {background:url(http://img42.xooimage.com/files/d/7/e/ideaicon-188d5c7.jpg) no-repeat; }
.services li.design {background: url(http://img42.xooimage.com/files/e/0/a/designicon-188d5e4.jpg) no-repeat; }
.services li.apps {background: url(http://img40.xooimage.com/files/7/4/4/interneticon-188d5f3.jpg) no-repeat; }
.services li.mobile {background: url(http://img40.xooimage.com/files/0/9/d/mobileicon-188d610.jpg) no-repeat; }
#sitename {
display: block;
padding-top: 35px;
height: 73px;
padding-left: 10px;
font:bold italic 30px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; text-shadow:#000 1px 1px 1px;
}
#sitename #description {display:block; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important;}
#topnav{height:56px;}
#topnav ul {padding:14px 15px 0; font: bold 14px "Trebuchet MS", halvetica, Verdana, sans-serif; text-transform:uppercase;}
#topnav li {
display:block;
float:left;
height: 41px;
background: url(http://img46.xooimage.com/files/3/f/2/menu_line-188d61c.gif) no-repeat left top;
padding-left: 5px;
}
#topnav  a {
display: block; height:38px; padding:3px 10px 0 10px; text-decoration:none; color:#7098c6; float:left;}
#topnav li#first {background:none!important;}
#topnav .active a {background:url(http://img40.xooimage.com/files/1/2/c/menuactive-188d62f.gif) no-repeat center 27px; color:#184896;}
#topnav a:visited, #topnav a:active {color:#7098c6; text-decoration:none;}
#topnav a:hover {color:#184896;}
#headercolumn1 {
width: 550px;
padding-left: 15px;
float: left;
}
#headercolumn2 {
width: 290px;
float: right;
padding-right: 15px;
}
.description {
color:#d2e7ff;
font:14px "Trebuchet MS", halvetica, Verdana, sans-serif;
display:block;
padding-top: 25px;
}
.description a {color:#fff; text-decoration:none; border-bottom: dashed 1px #fff;}#search_top {
background: url(http://img42.xooimage.com/files/f/d/8/searchbg-188d643.gif) no-repeat;
height: 36px;
width: 278px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
#search_top p {
display:block;
float: left;
}
#search_top .keyword {
background: transparent;
border-style: none;
display: block;
width: 125px;
float: left;
padding: 5px;
}
#search_top .button {
padding-top: 3px;
display: block;
float: left;
padding-left: 5px;
}
#search_top form {
display: block;
background: url(http://img46.xooimage.com/files/b/6/6/searchfield-188d65d.gif) no-repeat;
height: 30px;
margin-top: 3px;
float: right;
width: 170px;
margin-right: 5px;
}
#subscribe {
background: url(http://img44.xooimage.com/files/0/e/2/rss-188d675.gif) no-repeat;
padding: 10px 5px 5px 40px;
height: 20px;
width: 233px;
margin: auto;
}
#subscribe a {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px dashed #FFFFFF;
}
#topbar .columns {
width: 32%;
float: left;
padding: 3px;
margin: 1px;
color:#999999;
}
.columns .by {
font-weight: bold;
}
#topbar .columns p {
line-height: 16px;
padding: 10px;
}
.blog_column {
width: 400px;
float: left;
padding: 5px;
}
.right_column {
width: 240px;
float: right;
padding: 5px;
}
.narrow_column {
margin-right: 255px;
margin-left: 415px;
padding: 5px;
}
.post p {
line-height: 16px;
margin-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
}
.post_head .meta {
font-size: 10px;
color: #999999;
display: block;
margin-top: 3px;
}
.post .post_head {
background: url(http://img40.xooimage.com/files/5/a/a/blogicon-188d67d.jpg) no-repeat right top;
height: 50px;
margin-bottom: 10px;
padding: 5px;
}
#bottom .columns {
padding: 5px;
float: left;
width: 32%;
}
#footer .footercontent {
text-align: center;
padding-top: 15px;
color: #FFFFFF;
}
.footercontent a {color: #fff;}
.footercontent a:visited, .footercontent a:active  {color: #fff;}
.footercontent p {
margin-bottom: 5px;
}
.portfolio_preview .imageholder {
padding: 35px 5px 5px 15px;
height: 154px;
width: 334px;
float: left;
}
.portfolio_preview .clientinfo {
width: 180px;
float: right;
padding-top: 40px;
padding-left: 15px;
padding-right: 10px;
background: url(http://img46.xooimage.com/files/f/5/d/portfoliodevider-188d696.png) no-repeat left 25px;
}
.portfolio_preview .imageholder img {
background: #194896;
padding: 3px;
display: block;
border: 1px solid #000000;
}
.clientinfo a {
color: #FFFFFF;
border-bottom: 1px dashed #fff;
}
.clientinfo .label {
color: #FFFFFF;
width: 100px;
display: block;
}
.clientinfo p {
display: block;
padding: 3px;
margin-bottom: 8px;
color: #FFFFFF;
}
#contents #left {
padding: 8px;
width: 550px;
float: left;
}
#contents #sidebar {
width: 290px;
float: right;
padding: 8px;
}
#left p {
line-height: 16px;
margin-bottom: 15px;
}
.service_img {
display: block;
float: left;
border-style: none;
margin-right: 5px;
margin-left: 5px;
}
#wrap #contents #left ul li {
display: block;
background: url(http://img44.xooimage.com/files/3/5/b/bullet-188d6a4.jpg) no-repeat 0px 3px;
padding: 5px 5px 5px 10px;
margin-left: 15px;
margin-bottom: 3px;
}
.devider {
background: #FFFFFF;
border-bottom: 1px solid #ccc;
display: block;
color: #FFFFFF;
margin-bottom: 15px;
}
#left .servicetitle {
display: block;
margin-bottom: 10px;
color: #194896;
}
#left .service_p {
padding-left: 60px;
}
#sidebar p {
line-height: 16px;
margin-bottom: 16px;
}
a img {
border : none;
}
a:hover img {border:none;}
a:visited img, a:active img {border:none;}#getaquote #fcf2 .r .f {
display: block;
}
.f input {
display: block;
border: 1px solid #999999;
padding: 5px;
}
#getaquote #fcf2 .r .f #comments {
border: 1px solid #999999;
padding: 5px;
}
.products_list li {display:block; height:70px; width:201px; margin-bottom:3px;}
.products_list a {display:block; background:url(http://img44.xooimage.com/files/2/7/7/productbg1-188d6b7.gif) no-repeat; height:56px; width:201px; text-align:center; padding:12px 0 0 0; text-decoration:none;}
.products_list {padding-top:5px;}
.products_list a:hover {background:url(http://img42.xooimage.com/files/e/c/d/productbg2-188d6c8.gif) no-repeat;}#quote_request {
background-image: url(http://img40.xooimage.com/files/9/8/4/formbg-188d6e0.gif);
background-repeat: repeat;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#quote_request h2 {
display: block;
background: url(http://img46.xooimage.com/files/0/3/f/quote-188d6e8.gif) no-repeat;
height: 61px;
padding-left: 61px;
padding-top: 8px;
}
#quote_request form  p {
display: block;
padding-left: 12px;
}
#quote_request .commentarea {
display: block;
height: 140px;
width: 257px;
border: solid 1px #e0dccb;
}
#quote_request .commentarea:hover {border:solid 1px #908b72;}
#quote_request label {
display: block;
padding: 3px;
font: bold 12px "Trebuchet MS", halvetica, Verdana, sans-serif;
}
#quote_request .textfield {
background: transparent url(http://img44.xooimage.com/files/3/3/3/textfield1-188d6f0.gif) no-repeat;
display: block;
border-style: none;
height: 28px;
width: 241px;
padding:7px 8px 0 8px;
font: bold 14px "Trebuchet MS", halvetica, Verdana, sans-serif; color:#655045;
}
#quote_request .textfield:hover {
background: transparent url(http://img40.xooimage.com/files/a/3/8/textfield2-188d6f9.gif) no-repeat;
}
#quote_request label .info {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
display: block;
}
.success {
background: #d9e7f3 url(http://img26.xooimage.com/files/2/8/2/success-188d709.gif) no-repeat 3px 3px;
display: block;
padding: 5px 5px 5px 55px!important;
height: 60px;
}
.error {
background: #ead2a8 url(http://img44.xooimage.com/files/b/d/b/error-188d711.gif) no-repeat 3px 3px;
display: block;
padding: 5px 5px 5px 55px!important;
height: 60px;
}
.progress {
background: url(http://img40.xooimage.com/files/6/2/f/loading-188d717.gif) no-repeat 3px 3px;
padding: 5px 5px 5px 55px!important;
height: 50px;
}
.bordered {
border-bottom: 1px dashed #999999;
margin-bottom: 15px;
padding-bottom: 10px;
display: block;
}
#midbottom {
background: #333 url(http://img24.xooimage.com/files/d/4/0/footerbg-188d726.png) no-repeat center center;
height: 100px;
padding-bottom: 3px;
border-bottom: 1px solid #FFFFFF;
}
#bottom p {
display: block;
padding: 3px;
}
#bottom .columns h3 {
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
color: #194896;
display: block;
}
#midbottom img {
display: block;
float: left;
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
}
.resourcelist li {
display: block;
height: 25px;
}
.resourcelist a {
display: block;
height: 18px;
padding-top: 6px;
padding-right: 4px;
padding-left: 15px;
background: url(http://img44.xooimage.com/files/3/5/b/bullet-188d6a4.jpg) no-repeat 0px 7px;
border-bottom:dashed 1px #ccc;}
.resourcelist a:hover {color:#000;}.theme_image {
display: block;
margin: auto;
padding: 5px;
background: #f4f4f4;
border: 1px solid #ccc;
}
#widecolumn {
padding: 8px;
}
.nrwcolumn {
float: left;
width: 23%;
margin: 4px;
padding: 4px;
}
#widecolumn #real2 {
background: url(http://img40.xooimage.com/files/1/d/4/real2logo-188d740.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn #omcms {
background: url(http://img44.xooimage.com/files/b/7/8/omlogo-188d74d.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn #kre8ivity {
background: url(http://img26.xooimage.com/files/c/6/2/kre8ivitylogo-188d75b.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn #oet {
background: url(http://img26.xooimage.com/files/f/b/5/oetlogo-188d765.jpg) no-repeat center top;
padding-top: 105px;
}
#widecolumn  p {
line-height: 16px;
margin-bottom: 16px;
}
.blue {
color: #194896;
padding-bottom: 10px;
}
.lists li {
display: block;
background: url(http://img44.xooimage.com/files/3/5/b/bullet-188d6a4.jpg) no-repeat 3px 5px;
padding: 5px 5px 5px 20px;
margin-bottom: 5px;
}
#portfolio .site {
padding: 15px 5px 5px;
background: #E0EEFC url(http://img44.xooimage.com/files/5/c/1/portfoliobg-188d77a.gif) repeat-x left bottom;
border: 1px solid #BDDBF9;
position: relative;
margin-bottom: 5px;
}
.portfolio_image {
display: block;
padding: 9px;
margin: auto;
background: #FFFFFF;
border: 1px solid #B9D9F9;
}
#portfolio .site .layer span {
display: block;
padding-top: 40px;
font: bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
padding-left: 40px;
}
.site .layer {
display: block;
background: url(http://img24.xooimage.com/files/b/7/7/portfoliolayer-188d787.gif) no-repeat;
height: 88px;
width: 80px;
position: absolute;
float: right;
z-index: 99;
right: 8px;
top: 114px;
}
#portfolio .site p {
display: block;
margin: 0px 10px 8px;
padding: 0px 5px 5px;
}
.portfolio_image:hover {
display: block;
padding: 9px;
margin: auto;
background: #ffe;
border: 1px solid #194896;
}
.testimonails blockquote {
background: url(http://img46.xooimage.com/files/2/c/4/dblquotes-188d791.gif) no-repeat 3px 3px;
padding-left: 30px;
}
#results .description {
color: #333333;
padding: 5px;
margin-bottom: 10px;
border-bottom: 1px dashed #ccc;
}
#results .url {
padding: 5px;
background: #f4f4f4;
}
#results {
padding: 5px;
}
#result_report {
padding: 3px;
background: #4891ED;
color: #FFFFFF;
}
.columns h2 {
display: block;
padding-left: 10px;
padding-top: 3px;
height: 20px;
text-shadow:#000 1px 1px 1px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
}
.portfolio_preview h2 img {
display: block;
padding-left: 12px;
padding-top: 3px;
}
br.clear {
display: block;
clear: both;
height: 1px;
}

TAM EKRAN GÖRMEK İÇİN TIKLAYINIZ

TASARIMIN ÜSTÜNE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GamePortal</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/fns.js" type="text/javascript"></script>
</head>
<body>

<div id="page" class="shell">

<div id="header">

<div id="top-nav">
<ul>
<li class="home"><a href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">pc</a></li>
<li><a href="http://www.free-css.com/">xbox</a></li>
<li><a href="http://www.free-css.com/">360</a></li>
<li><a href="http://www.free-css.com/">wii</a></li>
<li><a href="http://www.free-css.com/">ps3</a></li>
<li><a href="http://www.free-css.com/">ps2</a></li>
<li><a href="http://www.free-css.com/">psp</a></li>
<li class="last"><a href="http://www.free-css.com/">ds</a></li>
</ul>
</div>

<div class="cl"> </div>

<div id="logo">
<h1><a href="http://www.free-css.com/">game<span>portal</span></a></h1>
<p class="description">your game zone</p>
</div>


<div id="main-nav">
<div class="bg-right">
<div class="bg-left">
<ul>
<li><a href="http://www.free-css.com/">community</a></li>
<li><a href="http://www.free-css.com/">forum</a></li>
<li><a href="http://www.free-css.com/">video</a></li>
<li><a href="http://www.free-css.com/">cheats</a></li>
<li><a href="http://www.free-css.com/">features</a></li>
<li><a href="http://www.free-css.com/">downloads</a></li>
<li><a href="http://www.free-css.com/">sports</a></li>
<li><a href="http://www.free-css.com/">tech</a></li>
</ul>
</div>
</div>
</div>

<div class="cl"> </div>

<div id="sort-nav">
<div class="bg-right">
<div class="bg-left">
<div class="cl"> </div>
<ul>
<li class="first active first-active"><a href="http://www.free-css.com/">Review</a><span class="sep"> </span></li>
<li><a href="http://www.free-css.com/">Previews </a><span class="sep"> </span></li>
<li><a href="http://www.free-css.com/">New Releases</a><span class="sep"> </span></li>
<li><a href="http://www.free-css.com/">Top Games</a><span class="sep"> </span></li>
<li><a href="http://www.free-css.com/">All Games</a><span class="sep"> </span></li>
</ul>
<div class="cl"> </div>
</div>
</div>
</div>

</div>


<div id="main">
<div id="main-bot">
<div class="cl"> </div>

<div id="content">
<div class="block">
<div class="block-bot">
<div class="block-cnt">
<div id="slider">
<div class="buttons"> <span class="prev">prev</span> <span class="next">next</span> </div>
<div class="holder">
<div class="frame"> </div>
<div class="content">
<ul>
<li class="fragment">
<div class="image">
<img src="http://i49.tinypic.com/107sxv6.jpg" alt="" />
</div>
<div class="cnt">
<div class="cl"> </div>
<div class="side-a">
<h4>StarCraft II</h4>
<ul class="rating">
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star empty-star"> </span></li>
<li><span class="votes">1.456 votes</span></li>
</ul>
</div>
<div class="side-b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condi- mentum. Suspendisse gravida elementum mauris, in vulputate justo ultrices sit amet.</p>
</div>
<div class="cl"> </div>
</div>
</li>
<li class="fragment">
<div class="image"> <img src="http://i49.tinypic.com/107sxv6.jpg" alt=" /> </div>
<div class="cnt">
<div class="cl"> </div>
<div class="side-a">
<h4>StarCraft II</h4>
<ul class="rating">
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star empty-star"> </span></li>
<li><span class="votes">1.456 votes</span></li>
</ul>
</div>
<div class="side-b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condi- mentum. Suspendisse gravida elementum mauris, in vulputate justo ultrices sit amet.</p>
</div>
<div class="cl"> </div>
</div>
</li>
<li class="fragment">
<div class="image"> <img src="http://i49.tinypic.com/107sxv6.jpg" alt=" /> </div>
<div class="cnt">
<div class="cl"> </div>
<div class="side-a">
<h4>StarCraft II</h4>
<ul class="rating">
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star empty-star"> </span></li>
<li><span class="votes">1.456 votes</span></li>
</ul>
</div>
<div class="side-b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condi- mentum. Suspendisse gravida elementum mauris, in vulputate justo ultrices sit amet.</p>
</div>
<div class="cl"> </div>
</div>
</li>
<li class="fragment">
<div class="image"> <img src="http://i49.tinypic.com/107sxv6.jpg" alt=" /> </div>
<div class="cnt">
<div class="cl"> </div>
<div class="side-a">
<h4>StarCraft II</h4>
<ul class="rating">
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star full-star"> </span></li>
<li><span class="star empty-star"> </span></li>
<li><span class="votes">1.456 votes</span></li>
</ul>
</div>
<div class="side-b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum molestie urna, id scelerisque leo sodales sit amet. Curabitur volutpat lorem euismod nunc tincidunt condi- mentum. Suspendisse gravida elementum mauris, in vulputate justo ultrices sit amet.</p>
</div>
<div class="cl"> </div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>


<div id="sidebar">

<div id="search" class="block">
<div class="block-bot">
<div class="block-cnt">
<form action="http://www.free-css.com/" method="post">
<div class="cl"> </div>
<div class="fieldplace">
<input type="text" class="field" value="Search" title="Search" />
</div>
<input type="submit" class="button" value="GO" />
<div class="cl"> </div>
</form>
</div>
</div>
</div>

</div>

<div class="cl"> </div>

TASARIMIN ALTINA

<div id="footer">
<div class="navs">
<div class="navs-bot">
<div class="cl"> </div>
<ul>
<li><a href="http://www.free-css.com/">community</a></li>
<li><a href="http://www.free-css.com/">forum</a></li>
<li><a href="http://www.free-css.com/">video</a></li>
<li><a href="http://www.free-css.com/">cheats</a></li>
<li><a href="http://www.free-css.com/">features</a></li>
<li><a href="http://www.free-css.com/">downloads</a></li>
<li><a href="http://www.free-css.com/">sports</a></li>
<li><a href="http://www.free-css.com/">tech</a></li>
</ul>
<ul>
<li><a href="http://www.free-css.com/">pc</a></li>
<li><a href="http://www.free-css.com/">xbox</a></li>
<li><a href="http://www.free-css.com/">360</a></li>
<li><a href="http://www.free-css.com/">wii</a></li>
<li><a href="http://www.free-css.com/">ps3</a></li>
<li><a href="http://www.free-css.com/">ps2</a></li>
<li><a href="http://www.free-css.com/">psp</a></li>
<li><a href="http://www.free-css.com/">ds</a></li>
</ul>
<div class="cl"> </div>
</div>
</div>
<p class="copy">© Sitename.com. Design by <a href="http://chocotemplates.com">ChocoTemplates.com</a></p>
</div>

</div>
</div>

</div>

</body>
</html>

CSS BÖLÜMÜNE

/*----- Start "Main definitions" -----*/
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(http://i50.tinypic.com/106yfk5.jpg) repeat 0 0;
text-align: left;
}
a img { border: 0; }
a { color: #a0a0a0; text-decoration: underline; }
a:hover { text-decoration: none; }
.left { float: left; display: inline; }
.right { float: right; display: inline; }
.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.field { font-size: 12px; color: #484848; font-family: Arial, "Trebuchet MS", sans-serif; color: #000; border: solid 1px #a0a0a0; width: 140px; padding: 2px 5px; }
/*----- End "Main definitions" -----*/
.shell { width: 914px; margin: 0 auto; }
#page { padding-bottom: 30px; }
#header { width: 100%; position: relative; margin-bottom: 5px; }
#logo { text-transform: uppercase; line-height: 1; padding-bottom: 15px; }
#logo h1 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; font-size: 30px; color: #fff; }
#logo h1 a { color: #fff; text-decoration: none; }
#logo h1 a span { color: #7ab7e2; }
#logo .description { font-size: 10px; color: #cfd2d9; }
#top-nav { float: right; display: inline; margin-bottom: 2px; }
#top-nav ul { float: left; display: inline; font-size: 10px; line-height: 31px; color: #fff; text-transform: uppercase; background: url(http://i46.tinypic.com/282dzd4.jpg) repeat-x 0 0; }
#top-nav ul li { float: left; display: inline; list-style-type: none; }
#top-nav ul li a { float: left; display: inline; color: #fff; text-decoration: none; padding: 0 10px 0 8px; background: url(http://i50.tinypic.com/2whdlsm.gif) no-repeat right 0; }
#top-nav ul li a:hover { text-decoration: underline; }
#top-nav ul li.last { padding-right: 4px; background: url(http://i47.tinypic.com/332owac.gif) no-repeat right 0; }
#top-nav ul li.last a { background: none; }
#top-nav ul li.home { width: 88px; background: url(http://i45.tinypic.com/90oh3n.gif) no-repeat 0 0; }
#top-nav ul li.home a { background: none; width: 67px; height: 31px; line-height: 29px; padding: 0; color: #141414; font-weight: bold; padding-left: 21px; }
#main-nav { float: right; display: inline; line-height: 32px; background: url(http://i49.tinypic.com/t7ddv5.gif) repeat-x 0 0; }
#main-nav .bg-right { background: url(http://i47.tinypic.com/4if1cj.gif) no-repeat right 0; }
#main-nav .bg-left { background: url(http://i49.tinypic.com/2wndba0.gif) no-repeat 0 0; padding-left: 32px; width: 676px; }
#main-nav ul { height: 32px; font-size: 10px; color: #a8a8a8; text-transform: uppercase; }
#main-nav ul li { float: left; display: inline; list-style-type: none; background: url(http://i47.tinypic.com/pxcok.gif) no-repeat right 0; }
#main-nav ul li a { float: left; display: inline; text-decoration: none; color: #a8a8a8; padding: 0 11px 0 9px; }
#main-nav ul li a:hover { text-decoration: underline; }
#sort-nav { line-height: 46px; background: url(http://i50.tinypic.com/zu1aoj.gif) repeat-x 0 0; }
#sort-nav .bg-left { background: url(http://i48.tinypic.com/20rr6mo.gif) no-repeat 0 0; position: relative; height: 46px; }
#sort-nav .bg-right { background: url(http://i49.tinypic.com/2ufyibk.gif) no-repeat right 0; position: relative; height: 46px; }
#sort-nav ul li { float: left; display: inline; list-style-type: none; height: 46px; }
#sort-nav ul li a { float: left; display: inline; font-size: 13px; font-weight: bold; color: #282828; text-decoration: none; padding: 0 19px; }
#sort-nav ul li span.sep { float: left; display: inline; width: 2px; height: 46px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(http://i45.tinypic.com/24yzrjr.gif); }
#sort-nav ul li a:hover { text-decoration: underline; }
#sort-nav ul li.active a { color: #fff; text-decoration: none; }
#sort-nav ul li.active a:hover { text-decoration: none; }
#sort-nav ul li.first-active a { background: url(http://i48.tinypic.com/30hpztf.gif) no-repeat 0 0; }
#sort-nav ul li.active span.sep { background-image: url(http://i47.tinypic.com/pxcok.jpg); }
#sort-nav ul li.active { background: url(http://i50.tinypic.com/k48f11.gif) repeat-x 0 0; }
#main { background: #050505 url(http://i50.tinypic.com/15nrjhs.gif) no-repeat 0 0; padding-top: 10px; }
#main-bot { background: url(http://i47.tinypic.com/2wgyvxj.gif) no-repeat 0 bottom; padding: 0 10px 2px 10px; height: 100%; position: relative; }
#sidebar { float: left; display: inline; width: 226px; }
#content { float: right; display: inline; width: 657px; }
.block { margin-bottom: 10px; background-repeat: no-repeat; background-position: 0 0; }
.block .block-bot { height: 100%; position: relative; background-repeat: no-repeat; background-position: 0 bottom; }
.block .block-cnt { padding: 10px 10px 10px 9px; }
.block .head { background: url(http://i48.tinypic.com/2vkkoiq.gif) no-repeat 0 0; padding-left: 15px; }
.block .head .head-cnt { background: url(http://i48.tinypic.com/2vkkoiq.gif) no-repeat right 0; line-height: 38px; height: 38px; padding-right: 13px; }
.block .head h3 { font-size: 15px; font-weight: bold; color: #262727; }
.block .head .view-all { float: right; display: inline; width: 61px; height: 18px; line-height: 16px; background: url(images/block-head-view-all.gif); margin-top: 12px; }
.block .head .view-all { color: #656565; font-size: 10px; text-decoration: none; text-align: center; }
.block .head .view-all:hover { text-decoration: underline; }
#content .block { background-image: url(ihttp://i49.tinypic.com/rwp1jt.gif); background-color: #313131; width: 657px; }
#content .block .block-bot { background-image: url(http://i49.tinypic.com/24fwi15.gif); }
#sidebar .block { background-image: url(images/sidebar-block-top.gif); background-color: #484848; width: 226px; }
#sidebar .block .block-bot { background-image: url(http://i46.tinypic.com/24277rb.gif); }
#search .block-cnt { padding: 5px 5px 5px 4px; }
#search .fieldplace { float: left; display: inline; width: 170px; height: 22px; background: url(http://i45.tinypic.com/2vbo1vt.gif) no-repeat 0 0; padding-left: 18px; }
#search .fieldplace .field { padding: 3px 6px 4px; width: 158px; border: none; background: none; }
#search .button { float: left; display: inline; width: 29px; height: 22px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; border: 0; }
#search .button { background: url(http://i48.tinypic.com/122n53a.gif) no-repeat 0 0; }
#sign .block-cnt { padding: 6px 5px 5px 5px; }
#sign .button { display: block; font-size: 11px; font-weight: bold; text-align: center; color: #fff; text-decoration: none; text-transform: uppercase; line-height: 29px; }
#sign .button { width: 105px; height: 29px; background: url(http://i49.tinypic.com/ok3l9c.gif) no-repeat 0 0; }
#sign .button:hover { background-position: 0 bottom; }
#sign .button-left { float: left; display: inline; }
#sign .button-right { float: right; display: inline; }
#sign .center { text-align: center; font-size: 11px; line-height: 16px; margin-top: 4px; }
#sign .center a { color: #35cfd9; }
#sidebar .articles .article { padding: 8px 7px; background: url(http://i50.tinypic.com/2akzk9.gif) repeat-x 0 bottom; font-size: 11px; color: #a0a0a0; }
#sidebar .articles h4 { color: #fff; font-weight: bold; font-size: 12px; }
#sidebar .articles h4 a { color: #fff; text-decoration: none; }
#sidebar .articles h4 a:hover { color: #ccc; }
#sidebar .articles .view-all { font-size: 10px; letter-spacing: 0.5px; line-height: 24px; float: right; display: inline; margin-right: 6px; }
#sidebar .image-articles .image { float: left; display: inline; width: 55px; }
#sidebar .image-articles .image img { padding: 1px; border: solid 1px #1e1e1e; width: 51px; height: 51px; }
#sidebar .image-articles .cnt { float: right; display: inline; width: 150px; }
#sidebar .text-articles .article { padding: 8px 10px; font-size: 12px; }
#sidebar .text-articles h4 { font-size: 13px; }
#content .articles h4 { font-size: 19px; font-weight: bold; color: #ccc; margin: 4px 0 2px; }
#content .articles h4 a { text-decoration: none; color: #ccc; }
#content .articles h4 a:hover { color: #fff; }
#content .col-articles .image img { padding: 1px; border: solid 1px #050505; width: 194px; height: 194px; }
#content .col-articles .article { float: left; display: inline; margin: 17px 0 10px 15px; width: 198px; }
#content .row-articles .article { padding: 10px 15px 12px 15px; background: url(http://i48.tinypic.com/35a87r7.gif) repeat-x 0 bottom; }
#content .row-articles .last-article { background: none; }
#content .row-articles .image { float: left; display: inline; width: 194px; }
#content .row-articles .image img { width: 194px; }
#content .row-articles .cnt { float: right; display: inline; width: 420px; }
#content .row-articles h4 { margin-top: 0; line-height: 20px; }
#content .row-articles h4 a { color: #e4e4e4; }
#slider { width: 638px; height: 357px; position: relative; }
#slider .buttons { position: absolute; top: 250px; right: 15px; z-index: 101; }
#slider .buttons span { float: left; display: inline; width: 28px; height: 27px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; margin-left: 2px; }
#slider .buttons span.prev { background: url(http://i50.tinypic.com/10z1p1f.png) no-repeat 0 0; }
#slider .buttons span.next { background: url(http://i46.tinypic.com/9beo2d.png) no-repeat 0 0; }
#slider .holder { width: 638px; height: 357px; position: relative; overflow: hidden; }
#slider .content { height: 357px; width: 100000px; position: absolute; top: 0; left: 0; }
#slider .fragment { float: left; display: inline; width: 638px; height: 357px; list-style-type: none; }
#slider .fragment .image { position: relative; width: 638px; height: 287px; }
#slider .frame { width: 638px; height: 287px; position: absolute; top: 0; left: 0; z-index: 100; background: url(http://i49.tinypic.com/25f5yko.png) no-repeat 0 0; }
#slider .frame { font-size: 0; line-height: 0; text-indent: -4000px; }
#slider .fragment .cnt { margin-top: 5px; height: 49px; background: url(http://i45.tinypic.com/2qtag5c.gif) repeat-x; color: #fff; font-size: 11px; line-height: 1.4; padding: 8px 15px; }
#slider .fragment .cnt .side-a { float: left; display: inline; width: 150px; }
#slider .fragment .cnt .side-b { float: right; display: inline; width: 430px; }
#slider .fragment .cnt h4 { font-size: 19px; font-weight: bold; color: #212121; text-transform: uppercase; margin-bottom: 5px; }
#slider .fragment .cnt .rating li { float: left; display: inline; list-style-type: none; font-size: 9px; color: #050505; text-transform: uppercase; margin-right: 1px; }
#slider .fragment .cnt .rating li .star { float: left; display: inline; width: 15px; height: 15px; font-size: 0; line-height: 0; text-indent: -4000px; }
#slider .fragment .cnt .rating li .empty-star { background: url(http://i47.tinypic.com/rl011u.gif); }
#slider .fragment .cnt .rating li .full-star { background: url(http://i50.tinypic.com/1zf25mr.gif); }
#slider .fragment .cnt .rating li .votes { float: left; display: inline; margin-top: 3px; margin-left: 4px; }
#footer .copy { font-size: 10px; color: #363636; text-transform: uppercase; text-align: right; padding: 20px 0; }
#footer .copy a{ color: #363636; }
#footer .navs { background: #222 url(http://i47.tinypic.com/11slc9k.gif) no-repeat 0 0; text-align: center; font-size: 10px; text-transform: uppercase; color: #656565; height: 100%; position: relative; }
#footer .navs .navs-bot { background: url(http://i45.tinypic.com/110m7ac.gif) no-repeat 0 bottom; height: 100%; position: relative; }
#footer .navs ul { margin: 10px 0; }
#footer .navs ul li { list-style-type: none; display: inline; padding: 0 6px; }
#footer .navs ul li a { color: #656565; text-decoration: none; }
#footer .navs ul li a:hover { text-decoration: underline; }

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}
body {background : #000000 url('http://pixelea.com/s/3cf50cb5d2.png');}
*{ padding: 0; margin: 0; }
#Designmystic {
margin: 0 auto;
width: 700px;
height:600px;
background-image:url(http://img249.imageshack.us/img249/6048/simpsonswebvl1.png);}
#content {
position: absolute;
left: 39%;
top: 253px;
margin-left:-226px;
width: 462px;
height: 340px;
padding:10px;
color: #242424;
font-size:12px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}
#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}
a{
color:#707070;
text-decoration: none;
font-size:13px;}
a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}
a:active {
color: #707070;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #cccccc;
font-size: 13px;
text-decoration: none;}
div.lux
{
position: absolute;
z-index: 3;
top: 58px;
left: 52%;
margin-left: -160px;
width: 100px;
}
.lux a
{
border: 0px solid #xxxxxx;
background-color: #xxxxxx;
background-image:  none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:21px;
color: #FFF;
font-size: 60px;
}

TASARIMIN ÜSTÜNE

TASARIMIN ALTINA

CSS BÖLÜMÜNE

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }
body {
background-color:#000000;}
}
/* links */
a, a:visited {
text-decoration: none;
color: #2180BC;
background: inherit;
}
a:hover {
color: #88ac0b;
background: inherit;
text-decoration: underline;
}
/* headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
}
h1 {
font-size: 150%;
font-weight: normal;
color: #cccccc;
}
h2 {
font-size: 140%;
text-transform: uppercase;
color: #cccccc;
}
h3 {
font-size: 120%;
color: #cccccc;
}
h1, h2, h3, p {
padding: 10px;
margin: 0;
}
ul, ol {
margin: 5px 20px;
padding: 0 20px;
}
/********************************************
Design
********************************************/
#wrap {
width: 838px;
background: url(http://www.fileden.com/files/2008/7/23/2016562/CENTRO-NARANCHA.png) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 10px auto;
}
#header {
width: 838px;
position: relative;
height: 180px;
background: #000 url(http://img128.imageshack.us/img128/9404/logobulletformyvalentinfx7.png) no-repeat center top;
padding: 0;
}
#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
color: #FFF;
text-transform: none;
text-decoration: none;
background: transparent;
/* change the values of top and left to adjust the position of the logo*/
top: 25px; left: 100px;
}
#header p#slogan {
position: absolute;
margin: 0; padding: 0;
font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;
/* change the values of top and left to adjust the position of the slogan*/
top: 15px; left: 630px;
}
/* header links */
#header #header-links {
position: absolute;
top: 20px; right: 30px;
color: #ffffff;
font-size: 10px;
}
#header #header-links a {
color: #FFF;
text-decoration: none;
}
#header #header-links a:hover {
color: #cccccc;
}
/* Menu */
#menu {
clear: both;
margin: 0 auto; padding: 0;
background: url(http://img201.imageshack.us/img201/9393/bfmvbarranavnd3.png) repeat-x 0 0;
font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
height: 30px;
width: 800px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #FFF;
text-decoration: none;
}
#menu ul li.last a {
padding-right: 20px;
}
#menu ul li a:hover {
color: #cccccc;
}
#menu ul li#current a {
color: #ff0000;
}
/* Main Column */
#main {
float: left;
width: 70%;
padding: 0; margin: 5px 0 0 5px;
display: inline;
}
#main h2 {
margin-top: 10px;
font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;
color: #88ac0b;
padding: 5px 0 5px 25px;
border-bottom: 1px solid #EFF0F1;
background: #FFF  none no-repeat 3px 50%;
text-transform: none;
}
#main h2 a {
background: none;
color: #88ac0b;
text-decoration: none;
}
#main ul li {
list-style-image:  none;
}
.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 10px 10px 10px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background:  none no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background:  none no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background:  none no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
/* Sidebar */
#sidebar {
float: right;
width: 26.5%;
padding: 0; margin: 0;
color: #000;
}
#sidebar h3 {
margin-top: 10px;
padding: 20px 20px;
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
color: #00ccff;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 7px 4px 8px 0; padding: 0;
text-decoration: none;
background:  none repeat-x left top;
}
#sidebar ul.sidemenu li {
list-style: none;
background:  none repeat-x left bottom;
padding: 4px 0 4px 5px;
margin: 0 20px;
color: #bc0303;
}
* html body #sidebar ul.sidemenu li {
height: 1%;
}
#sidebar ul.sidemenu li a {
text-decoration: none;
background-image: none;
color: #666666;
}
#sidebar ul.sidemenu li a:hover {
color: #1773BC;
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { background: none; }
/* Footer */
#footer {
color: #C6DDEE;
background: url(http://img201.imageshack.us/img201/8641/bfmvfondoma6.png) no-repeat center top;
clear: both;
width: 838px;
height: 150px;
text-align: center;
font-size: 92%;
}
#footer a {
color: #FFF;
text-decoration: none;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* display and additional classes */
.clear { clear: both; }

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}
body {
background-image: none;background-color:#000000;}
*{ padding: 0; margin: 0; }
#Designmystic {
margin: 0 auto;
width: 765px;
height:623px;
background-image:url(http://img341.imageshack.us/img341/9605/avrillavigneundermyskinxf9.png);}
#content {
position: absolute;
left: 50%;
top: 287px;
margin-left:-322px;
width: 671px;
height: 344px;
padding:10px;
color: #transparent;
font-size:13px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}
#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}
a{
color:#ffffff;
text-decoration: none;
font-size:13px;}
a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}
a:active {
color: #000000;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #000000;
font-size: 13px;
text-decoration: none;}
div.lux
{
position: absolute;
z-index: 3;
top: 172px;
left: 52%;
margin-left:-185px;
width: 647px;
}
.lux a
{
border: 0px solid #xxxxxx;
background-color: #xxxxxx;
background-image:  none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:21px;
color: #ffffff;
font-size: 24px;
}