pinion.de.tl

the finest page

lotion girl

Design "Lotion girl"

Das ist ein design wenn man auf Menü klickt
kommt eine lightbox mit dem link..
Voll cool.
Viel Spass!

Allgemeine Daten

Designname:	lotion girl
Kategorie:	CSS Profi / HPBK
Aktuelle Version:	3.0
Erscheinung:	16.01.2010

Getestet auf:	»Firefox

text über dem design:

<div id="top_with_search">
			<div class="pathway">
				<div class="only_path">
					<span class="pathway">Hosting </span>
				</div>
							<table class="moduletable" cellpadding="0" cellspacing="0">
						<tbody><tr>
				<td>
				
<form action="index.php" method="post">

<input name="option" value="search" type="hidden">
</form>				</td>
			</tr>
			</tbody></table>
						</div>
		</div>
		<div id="headertop"></div>
	<div id="header">
		<div id="image">
			<div id="sitename">
				<p>itslio girl</p>
			</div>
		</div>
	</div>
	<div id="headerbottom"></div>
	
	<div class="center">
		<div id="wrapper">
			<div id="content">
				<div id="leftmenu">
					
<div class="module"><div><div><div>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr align="left"><td><a href="index.htm" class="mainlevel" id="active_menu"> Hosting</a></td></tr>
<tr align="left"><td><a href="index.htm" class="mainlevel"> Tutorial</a></td></tr>
<tr align="left"><td><a href="index.htm" class="mainlevel"> Templates</a></td></tr>
<tr align="left"><td><a href="index.htm" class="mainlevel"> Extensions</a></td></tr>
</tbody></table>

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

<div class="module"><div><div><div><h3>Template Chooser</h3>
<img src="templates/siteground89/template_thumbnail.png" name="preview" alt="siteground89" width="140" border="1" height="90">
<script language="JavaScript1.2" type="text/javascript">
<!--
	function showimage() {
		//if (!document.images) return;
		document.images.preview.src = 'templates/' + getSelectedValue( 'templateform', 'mos_change_template' ) + '/template_thumbnail.png';
	}
	function getSelectedValue( frmName, srcListName ) {
		var form = eval( 'document.' + frmName );
		var srcList = eval( 'form.' + srcListName );

i = srcList.selectedIndex;
		if (i != null && i > -1) {
			return srcList.options[i].value;
		} else {
			return null;
		}
	}
-->
</script>
<br><br>

css code:

/*Design copyright by pinion yakup das entfernen vom copyright ist strengstens verboten!!!*/

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;}

body {
	font-family: Tahoma, Verdana, sans-serif;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #000;
	background: #f3f2e7;
	text-align: center;
}

.clr {
	clear: both;
}

body.contentpane {
	background: #FEFEFE;
	text-align: left;
}

body.contentpane .contentpaneopen {
	width: 97%;
}

body.contentpane .contentpaneopen .contentheading {
	
}

.moduletable {
	margin: 0 auto;
}

select.button {
	width: auto;
	padding: 0;
}

td {
	font-family: Tahoma, Verdana, sans-serif;
	color: #000;
	font-size: 11px;
}

.sectiontableentry1 {
	background: #eae8d8;
}

.sectiontableentry2 {
	color: #666;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li{
	line-height: 20px;
	padding-left: 12px;
	padding-top: 0px;
}

a:link, a:visited {
	text-decoration: underline;
	font-weight: bold;
	color: #5b4848;
	outline: none;
	font-size: 11px;
}

a:hover {
	text-decoration: none;
	font-weight: bold;
	color: #5b4848;
	font-size: 11px;
}

p {
	margin-top: 0;
	margin-bottom: 5px;
	text-align: justify;
}

.center {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	width: 906px;
}

div#wrapper {
	margin: 0 auto;
	width: 906px;
	text-align: left;
	background: url(https://img.webme.com/pic/p/pinion/content.jpg) top center repeat-y;
}

#area {
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

.pathway table.moduletable form {
	margin: 0;
	padding: 0;
}

.pathway table.moduletable {
	margin: 0;
	padding: 0;
}

.search {
	padding: 10px 0 0 42px;
	float: left;
}

.search .inputbox {
	background: transparent url(https://img.webme.com/pic/p/pinion/search_field.jpg) top center no-repeat;
	width: 136px;
	height: 14px;
	font-size: 10px;
	color: #666;
	padding: 1px 2px;
	border: none;
}

.search .button {
	background: transparent url(https://img.webme.com/pic/p/pinion/searchbut.jpg) top center no-repeat;
	width: 51px;
	height: 16px;
	color: #453f33;
	border: none;
	padding: 0 4px;
	margin: 0 0 0 4px;
	text-align: center;
	font-family: Georgia, serif;
	font-size: 10px;
	text-transform: uppercase;
	line-height: 14px;
}

#top {
	background: url(top.jpg) top center no-repeat;
	margin: 0 auto;
	width: 970px;
	height: 41px;
}

#top_with_search {
	background: url(https://img.webme.com/pic/p/pinion/top_with_search.jpg) top center no-repeat;
	margin: 0 auto;
	width: 946px;
	height: 67px;
}

#top_without_search {
	background: url(https://img.webme.com/pic/p/pinion/top_without_search.jpg) top center no-repeat;
	margin: 0 auto;
	width: 946px;
	height: 67px;
}

.pathway {
	font-family: Georgia, Tahoma, serif;
	padding: 36px 0 0 0px;
	text-align: left;
	margin: 0 auto;
}

.only_path {
	width: 670px;
	height: 36px;
	float: left;
}

span.pathway {
	color: #5b4848;
	display: block;
	padding: 10px 0 0 34px;
	font-size: 11px;
	font-weight: bold;
	width: 636px;
	float: left;
}

span.pathway a {
	text-decoration: underline;
}

span.pathway a:hover {
	text-decoration: none;
}

.pathway span img {
	height: 5px;
	padding: 0 0 1px 0;
}

#headertop {
	background: url(https://img.webme.com/pic/p/pinion/headertop.jpg) top center no-repeat;
	width: 946px;
	height: 6px;
	margin: 0 auto;
	font-size: 0;
}

#header {
	background: url(https://img.webme.com/pic/p/pinion/header.jpg) top center repeat-y;
	margin: 0 auto;
	width: 946px;
}

#image {
	background: url(https://img.webme.com/pic/p/pinion/headerimg.jpg) top center no-repeat;
	width: 928px;
	height: 208px;
	margin: 0 auto;
	text-align: left;
}

#headerbottom {
	background: url(https://img.webme.com/pic/p/pinion/headerbottom.jpg) top center no-repeat;
	margin: 0 auto;
	height: 9px;
	width: 946px;
	font-size: 0;
}

.maintable {
	margin: 0 auto;
	width: 906px;
	text-align: left;
}

#sitename {
	padding: 120px 0 0 90px;
	text-align: left;
	width: 600px;
}

#sitename p {
    font-weight: normal;
	font-family: Georgia, Verdana, Arial, sans-serif;
	font-size: 20px;
	padding: 0;
	margin: 0;
	letter-spacing: 1px;
	color: #f0f0f0;
	text-decoration: none;
	outline: none;
	line-height: 20px;
}

#menucenter {
	text-align: left;
	margin: 0 auto;
	padding: 0;
	background: url(menu.jpg) top center no-repeat;
	width: 970px;
	height: 29px;
}

#menucenter .menu_m {
	float: left;
	padding: 0;
	margin: 0;
}

#topnavi{
}

#topnavi ul {
	margin: 0;
	padding: 0 28px;
	list-style: none;
}

#topnavi ul li {
	float: left;
	margin: 0;
	padding: 0;
	height: 29px;
	background: url(https://img.webme.com/pic/p/pinion/menu_row.jpg) bottom right no-repeat;
}

#topnavi ul li a{
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 12px;
	float: left;
	display: block;
	line-height: 26px;
	padding: 0 10px;
	color: #999;
	text-decoration: none;
	font-weight: normal;
	text-transform: lowercase;
	height: 29px;
}

#topnavi ul li a:hover,#topnavi ul li a.current{
	color: #666;
	cursor: pointer;
}

#topnavi ul li a span{

}
#topnavi ul li a:hover span,#topnavi ul li a.current span {

}

#leftmenu, #rightmenu {
	margin: 0;
	width: 180px;
	float: left;
	text-align: left;
	padding: 0;
}

#main {
	float: left;
	width: 494px;
	padding: 0 6px;
	text-align: left;
}

#main_full {
	float: left;
	width: 666px;
	padding: 0 0 0 10px;
	text-align: left;
}

#pagecontent {
	width: 866px;
	margin: 0 auto;
	text-align: center;
	padding: 10px 20px 10px 20px;
}

#content_bottom {
	background: url(https://img.webme.com/pic/p/pinion/content_bottom.jpg) top center no-repeat;
	height: 10px;
}

#footer {
	margin: 0 auto;
	width: 906px;
	height: 10px;
	text-align: center;
	vertical-align: top;
	padding: 10px 0;
}

a.mainlevel:link, a.mainlevel:visited {
	font-family: Georgia, Verdana, serif;
	line-height: 20px;
	padding: 0 0 0 14px;
	text-decoration: none;
	color: #333;
	font-weight: normal;
	font-size: 11px;
	background: url(https://img.webme.com/pic/p/pinion/menu_row.jpg) bottom left no-repeat;
	margin: 0;
	height: 20px;
	display: block;
}

a#active_menu.mainlevel:link, a#active_menu.mainlevel:visited {
	color: #000;
}

a#active_menu.sublevel:link, a#active_menu.sublevel:visited {
	color: #000;
}

a.mainlevel:hover {
	color: #000;
}

a.sublevel:link, a.sublevel:visited {
	font-family: Georgia, Verdana, serif;
	text-decoration: none;
	color: #333;
	margin: 0;
	font-size: 11px;
	background: url(https://img.webme.com/pic/p/pinion/submenu_row.jpg) center left no-repeat;
	font-weight: normal;
	display: block;
	line-height: 20px;
	padding: 0 0 0 24px;
	border: none;
	height: 20px;
	display: block;
	text-align: left;
}

a.sublevel:hover {
	color: #000;
}

table.contentpaneopen {
	margin: 2px 8px;
	border-spacing: 0;
	padding: 0;
	border-collapse: collapse;
	text-align: justify;
}

#header table.contentpaneopen {
	margin: 2px 0;
	border-spacing: 0;
	padding: 0;
	border-collapse: collapse;
	text-align: justify;
}

table.contentpaneopen td.contentheading {
	color: #333333;
	font-family: Tahoma,Arial,sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	text-align:	left;
	vertical-align: middle;
}

.button {
	color: #453f33;
	font-size: 10px;
	border: 1px solid #cbc8b5;
	background: url(button-bp.jpg) top center repeat-x;
}

.inputbox {
	border: 1px solid #555;
	color: #333;
	padding: 2px;
}

input[type="checkbox"] { 
	border: none; 
}

.copyright {
	color: #555;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 11px;
	padding: 0;
	margin: 0 23px;
	text-align: center;
}

.back_button {
	float: left;
	text-align: center;
	font-size: 11px;
	font-weight: normal;
	width: auto;
	padding: 0px 10px;
	line-height: 20px;
	margin: 10px 0 50px 0;
}

.componentheading {
	height: 22px;
	padding: 8px 0 0 10px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 14px;
	margin: 0;	
	text-align: left;
	color: #555;
}

.wrapper {
	width: 670px;
	height: 550px;
}

.module div div div h3 {
	color: #666;
	font-family: Georgia, Verdana, Tahoma, Arial, sans-serif;
	font-size: 14px;
	text-align: left;
	height: 30px;
	text-decoration: none;
	padding: 0 0 4px 10px;
	background: url(h3.jpg) top center no-repeat;
	font-weight: normal;
	line-height: 31px;
	margin: 0;
	text-transform: uppercase;
}

.module {
	padding: 0;
	margin: 0;
}

.module div {
	padding: 0;
	margin: 0 0 14px 0;
}

.module div div {
	margin:0;
	width: 100%;
	padding: 0;
}

.module div div div {
	margin:0;
	padding: 0 0 4px 0;
	text-align: center;
}

.module div div div div{
	border: none;
	padding: 0;
	margin: 0;	
}

.module div div div table {
	margin: 4px 0 0 0;
	padding: 0 3px;
	list-style: none;
	background: none;
}

.module div div div div {
	padding: 0 0 1px 0;
	background: none;
}

.module div div div div.syndicate {
	margin: 0;
	padding: 10px 0;
}

.module div div div form {
	padding: 0;
	margin: 0;
	text-align: center;
}

.module div div div form table {
	padding: 0 10px;
	width: 100%;
	text-align: left;
}

/* footer links*/
a.sgfooter:link, a.sgfooter:visited {
	color: #555;
	font-size: 11px;
	font-family: Tahoma, Verdana, sans-serif;
	text-decoration: none;
	font-weight: normal;
}
a.sgfooter:hover {
	color: #555;
	font-size: 11px;
	font-family: Tahoma, Verdana, sans-serif;
	text-decoration: none;
	font-weight: normal;
}
/**/
/*banner*/
.sgf {
	font-size: 11px;
	font-family: Tahoma, Verdana, sans-serif;
	color: #555;
	text-decoration: none;
}
.sgf1 {
	font-size: 11px;
	font-family: Tahoma, Verdana, sans-serif;
	color: #555;
	text-align: left;
}

a.sglink:link, a.sglink:visited {
	color: #FFF;
	font-size: 11px;
	font-family: Tahoma, Verdana, sans-serif;
	text-decoration: none;
}
a.sglink:hover {
	text-decoration: none;
}

a img {
	border: 0;
}

.pagenav {
	font-size:12px;
	font-weight:normal;
}

#topnavigation a.topnavigation:link, a.topnavigation:visited {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 10px;
	font-weight: normal;
	letter-spacing : 1px;
	color: #fefefe;
	padding-right:5px;
	text-decoration:none;
}

#topnavigation a.topnavigation:hover {
	color: #b9f15d;
	border-bottom: none;
	text-decoration:none;	
}
#topnavigation a.topnavigation:active {
	color: #51c0f5;
	text-decoration:none;	
}

a.toclink:link, a.toclink:visited {
	line-height:normal;
	font-size:11px;
	font-family: Tahoma, Verdana, sans-serif;
	color: #000000;
	text-decoration: underline;
}

a.toclink:hover {
	text-decoration: none;
}

table.contenttoc {
	padding: 2px;
	margin-left: 2px;
	margin-bottom: 2px;
}

table.contenttoc th {
	color: #333;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: normal;
	font-size: 11px;
	text-transform: uppercase;
}

.sectiontableheader {
	height: 20px;
	padding-right:3px;
	font-weight :normal;
}

table.contentpane td.contentdescription {
	font-size:12px;
	line-height:18px;
}

table.contentpane td.componentheading {
	height: 20px;
	padding: 0 0 3px 0;
	color: #555;
	text-align: left;
	padding-bottom:3px;
	white-space: nowrap;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 14px;
	font-weight: normal;
}

table.contentpane td {
	padding-top:1px;
	padding-bottom:2px;
	font-size:12px;
}

table.contentpaneopen td {
	line-height: 14px;
	font-size: 12px;
}

.height {
	height: 100%;
}

.small {
	font-size: 10px;
	color: #555;
	font-weight: normal;
	text-align: left;
}

table.contentpaneopen td.createdate {
	color: #555555;
	font-size: 10px;
	font-weight: normal;
	height: 20px;
	padding-top: 0;
	vertical-align: top;
}

table.contentpaneopen td.modifydate {
	color: #555555;
	font-size: 10px;
	font-weight: normal;
	height: 20px;
	text-align: right;
	vertical-align: bottom;
}

table.contentpaneopen td a.readon{
	display: block;
	float: right;
	line-height: 14px;
	font-size: 10px;
	text-decoration: none;
	padding: 1px 2px 1px 2px;
}

table.contentpaneopen td a.readon:hover{
	color: #333;
}

h4 {
	font-size: 10px;
	text-transform: uppercase;
}
table.contentpaneopen td.buttonheading {
	}
	
.pagenav_next, .pagenav_prev {
	font-size: 12px;
	color: #666;
}

<!--[if lte IE 6]>
#pagecontent {
	width: 888px;
	margin: 0 auto;
	text-align: center;
	padding: 10px 20px 10px 20px;
}

#main {
	float: left;
	width: 508px;
	padding: 0 6px;
	text-align: left;
}

.search {
	padding: 10px 0 0 72px;
	float: left;
}

.search .inputbox {
	background: transparent url(https://img.webme.com/pic/p/pinion/search_field.jpg) top center no-repeat;
	width: 140px;
	height: 16px;
	font-size: 10px;
	color: #666;
	padding: 1px 2px;
	border: none;
}

wir haben ein neues design

pinion