/* =======================================================================
   CSS Stylesheet
   
   Site: PlanktonMedia.com,

         PlanktonAdventure.com,
		 PlanktonAquatics.com, 
         PlanktonTechnics.com
         PlanktonTravel.com,
         PlanktonTriathlon.com
         PlanktonWear.com,
         PFConsulting.ch 
          
   margin: erzwungener Abstand zwischen Element und Elternelement
   padding: Innenabstand zwischen Elementinhalt und Elementgrenze
   border: rechteckiger Rahmen um die Elemente
   
            4 = oben, rechts, unten, links
            3 = oben, rechts/links, unten
			2 = oben/unten, rechts/links
			1 = oben/unten/rechts/links

======================================================================= */


/* =========================== Setup (ALL) ============================ */

*{
	border: 0;
	margin: 0;
	padding: 0
}

body{
	background: #D9E4CA; /* Pathfinder Consulting */ 
	background: #8397BA; /* Plankton Aquatics by PSDXHTML */ 
	background: #6D95B2; /* Plankton Aquatics, company colors: #6D95B2/#6C94B1/#6D94B1 or #7d9eb8 */
	background: #EAE4B2; /* Plankton Technics */ 
	background: #6D95B2; /* Plankton Triathlon */
	background: #BBCC73; /* Plankton Media */ 
	font: .7em Verdana,Arial,Helvetica,Sans-Serif; /* PSDXHTML */
	font: 12px Verdana,Arial,Helvetica,Sans-Serif;  
	font: 11px Verdana,Arial,Helvetica,Sans-Serif;
    line-height: 1.2em;
    line-height: 15px;
	color: #333333
}

a{
	color: #D9E4CA; /* Pathfinder Consulting */
	color: #6D95B2; /* Plankton Aquatics */
	color: #EAE4B2; /* Plankton Technics */
	color: #6D95B2; /* Plankton Triathlon */
	color: #73803A; /* Plankton Media */
	text-decoration: none
}

a:hover{
	text-decoration: underline
}

a:active{
	text-decoration: underline
}
    
input,select,textarea{
	border: #999999 1px solid;
	padding: 2px
}

li{
	list-style: none
}

h2{
	font-size: 1.2em;
	margin: 0 0 .8em
}

h3{
	background: #eae8ea;
	font-size: 1.2em;
	font-weight:bold;
	margin: 0 0 .5em
	/* padding: .1em .3em */
}

h3 a{
	color: #333333
}

h4{
	font-size: 1.1em;
	margin: 0 0 .3em
}

h5{
	font-size: 1.1em;
	font-weight: normal;
	margin: -5px 0 .8em /* psdxhtml margin: 0 0 .8em */
}

h6{
	font-size: .95em;
	font-weight: normal;
	margin: 0 0 .8em
}

p{
    padding: 0 0 1.5em 
}

/* =========================== Layout (ALL) =========================== */

#page, #header, #footer{
	background: url(../images/layout/page-bgr.gif) repeat-y;
	margin: 0 auto;
	padding: 0 14px 0 8px;
	width: 800px
}

#page-top{
	background: url(../images/layout/page-top.gif) no-repeat top;
	height: 30px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 34px 0 18px;
	width: 770px
}

/* =========================== Header (ALL) =========================== */

#header{
	background: url(../images/layout/header-bgr.gif) no-repeat top;
	height: 100px
}
#header .spacer{
	color: #333333;
	float: left;
	width: 400px
}
#header .spacer a{
	color: #333333;
	font-weight: bold;
	padding: 0 3px
}

/* ---------------------------- Logo (ALL) ---------------------------- */

#header h1{
	background: url(../images/logo/plankton_aquatics_logo.gif) no-repeat; /* Plankton Aquatics */
	background: url(../images/logo/plankton_technics_logo.gif) no-repeat; /* Plankton Technics */
	background: url(../images/logo/plankton_triathlon_logo.gif) no-repeat; /* Plankton Triathlon */
	background: url(../images/logo/plankton_media_logo.gif) no-repeat; /* Plankton Media */
	float: right;
	text-indent: -9999px;
	width: 346px
}

#header h1 a{
	display: block;
	height: 100px
}

#header h1 a:hover{
	text-decoration: none
}

/* ------------------------- Languages (ALL) -------------------------- */

.languages{
    font-size: 11px; /* set fixed size */
	height: 29px;
	padding: 10px 0 0 45px
}
                                           
/* ========================= Navigation (ALL) ========================= */

/* ---------------------------- Nav1 (ALL) ---------------------------- */

#nav1{
	float: left;
	font: bold 12px Arial, Helvetica, sans-serif;
	height: 30px
}

#nav1 ul{
}

#nav1 li{
	float: left;
	line-height: 30px;
	text-transform: uppercase
}

#nav1 li a{
	background: url(../images/navigation/nav1-ico.gif) no-repeat left;
	color: #ffffff;
	display: block;
	float: left;
	padding: 0 10px 0 19px
}

#nav1 li a:hover,
#nav1 li.active a{
	background: url(../images/navigation/nav1-ico-.gif) no-repeat left;
	color: #D9E4CA; /* Pathfinder Consulting */
	color: #6D95B2; /* Plankton Aquatics */
	color: #EAE4B2; /* Plankton Technics */
	color: #6D95B2; /* Plankton Triathlon */
	color: #BBCC73; /* Plankton Media */
	text-decoration: none
}

/* ------------------- Nav2 (Wear, Adventure, Travel ------------------ */

#nav2{
	background: #636468;
	font: bold 13px Arial, Helvetica, sans-serif;
	height: 25px;
	padding: 16px 0 0;
	text-transform: uppercase
}

#nav2 ul{
	height: 25px;
	overflow: hidden;
	padding: 0 0 0 2px
}

#nav2 li{
	float: left;
	line-height: 27px;
	margin: 0 0 0 -2px;
	position: relative
}

* html #nav2 li{
	line-height: 25px
}

#nav2 li a{
	background: url(../images/navigation/nav2-normal.gif) no-repeat left;
	color: #333333;
	display: block;
	float: left;
	padding: 0 0 0 15px;
	text-decoration: none
}

#nav2 li a span{
	background: url(../images/navigation/nav2-normal.gif) no-repeat right;
	display: block;
	float: left;
	height: 25px;
	padding: 0 15px 0 0
}

#nav2 li.active a,
#nav2 li a:hover{
	background: url(../images/navigation/nav2-hover.gif) no-repeat left;
	color: #333333;
	cursor: pointer;
	text-decoration: none
}

#nav2 li.active a span,
#nav2 li a:hover span{
	background: url(../images/navigation/nav2-hover.gif) no-repeat right
}

/* ============================ All Columns =========================== */

#columns{
	height: 1%;
	padding: 20px 10px 10px 20px
}

/* ============================ Sub Columns =========================== */

.col1{
	float: left;
	width: 610px 
}

.col2{
	float: right;
	width: 140px
}

.col3{
	float: left;
	width: 400px /* width: 330px */
}

.col4{
	float: right;
	width: 385px /* width: 445px */
}

.col5{
	float: left;
	width: 550px
}

.col6{
	float: right;
	width: 235px
}

.col7{
	float: left;
	width: 790px
}

/* =========================== Styling Boxes ========================== */

/* ---------------------------- Box1 (ALL) ---------------------------- */

.box{
	margin: 0 0 5px /* oben, links/rechts, unten */
}

.box-top{
	background: url(../images/layout/box-top.gif) no-repeat left top;
	height: 5px;
	line-height: 5px;
	overflow: hidden
}

.box-top-{
	background: url(../images/layout/box-top-.gif) no-repeat right top;
	height: 5px
}

.box-bgr{
	background: url(../images/layout/box-bgr.gif) #ffffff repeat-y left /* grey 5% = #f3f1f3 */
}

.box-bgr-{
	background: url(../images/layout/box-bgr-.gif) repeat-y right;
	height: 1%;
	padding: 5px 10px 0
}

/* 2 Bilder = 2 x 176Pixel Höhe + 1 x 5Pixel Zwischenraum - 15 Pixel Korrektur*/
.box-342{ 
	height: 342px
}

/* 4 Bilder = 4 Bilder x 176Pixel Höhe + 3 x 5Pixel Zwischenraum - 10 Pixel Anfang */
.box-709{ 
	height: 709px
}

/* 9 Bilder = 9 x 176Pixel Höhe + 8 x 5Pixel Zwischenraum - 10 Pixel Anfang */
.box-1629{ 
	height: 1629px
}

/* Zweiter Frame beim Impressum */
.box-171{ 
	height: 171px
}

/* Zweiter Frame beim Kontakt */
.box-655{ 
	height: 655px
}

.box-bot{
	background: url(../images/layout/box-bot.gif) no-repeat left top;
	clear: both;
	overflow: hidden
}

.box-bot-{
	background: url(../images/layout/box-bot-.gif) no-repeat right top;
	height: 5px
}

/* ----------------------- Box2 (ALL Bottom-Advert) ------------------- */

.box2{
	background: url(../images/layout/box2-bgr.gif) repeat-y;
	font-size: 11px; /* originally font-size: .9em; */
	width: 204px
}

.box2 .top,.box2 .bot{
	background: url(../images/layout/box2-top.gif) no-repeat top;
	clear: both;
	height: 25px;
	overflow: hidden
}

.box2 .bot{
	background: url(../images/layout/box2-bot.gif) no-repeat top;
	height: 30px
}

.box2 .spacer{
	display: table-cell;
	display: block;
	height: 1%;
	height: auto !important;
	height: 80px;
	min-height: 80px;
	padding: 0 27px 0 30px
}

/* ------------------------------- Box3 ------------------------------- */

.box3{
	background: url(../images/layout/box3-bgr.gif) repeat-y;
	margin: 0 0 10px;
	width: 140px
}

.box3 .top,.box3 .bot{
	background: url(../images/layout/box3-top.gif) no-repeat top;
	clear: both;
	height: 5px;
	overflow: hidden
}

.box3 .bot{
	background: url(../images/layout/box3-bot.gif) no-repeat top
}

.box3 .spacer{
	height: 1%;
	padding: 0 5px
}

/* ------------------------------- Box4 ------------------------------- */

.box4{
	margin: 0 0 0 5px; /* oben, rechts, unten, links */
}

/* ----------------------------- Post Info ---------------------------- */

.post-info{
	font-size: 1.1em;
	height: 1.4em;
	margin: 0 0 .5em
}

/* ----------------------------- Ads, Pics ---------------------------- */

.pic img{
	display: block;
	margin: 0 0 .8em
}

.pic.fl img{
	margin-right: 10px
}

.pic.fr img{
	margin-left: 15px
}

.ads{
	margin: 0 auto;
	width: 820px
}

.ads .box2{
	float: left
}

/* ------------------------ Wrappers (Aquatics) ----------------------- */

.wrap{
	margin: 0 0 10px /* oben, links/rechts, unten */
}

.wrap img{
	margin: 0 7px 0 0 /* oben, rechts, unten, links */
}

.wrap2{
	margin: 0 0 12px 
}

.wrap2 img{
	margin: 0 12px 0 0
}

.wrap3 img{
	margin: 0 10px 0 0
}

.wrap4 img{
	margin: 0 0 0 30px
}

.wrap5 img{
	margin: 0 0 5px 5px
}

/* =========================== Styling Lists ========================== */

/* ------------------------------- List1 ------------------------------ */

.list1 li{
	background: url(../images/navigation/ico-list.gif) no-repeat 0 4px;
	margin: 0 0 .2em;
	padding: 0 0 0 9px
}

.list1 li a{
	color: #333333
}

/* =========================== Styling Forms ========================== */

/* ------------------------------- Search ----------------------------- */

#search{
	background: url(../images/navigation/search-bgr.gif) no-repeat top right;
	float: right;
	height: 24px;
	padding: 6px 3px 0 0;
	width: 147px
}

#search input{
	background: transparent;
	border: 0;
	float: right;
	font-size: 10px;
	width: 120px
}

#search .btn{
	float: left;
	padding: 0;
	width: auto
}

/* ========================== Styling Buttons ========================= */

.btn-more{
	margin: -20px 0 10px; /* received: margin: -20px 0 10px; */
	position: relative
}

.btn-more-aquatics-wear{
	margin: 16px 0 0 0;
	position: relative
}

.btn-more-aquatics-adventure{
	margin: 5px 0 5px 0;
	position: relative
}

.btn-more-aquatics-travel{
	margin: -30px 0 20px 0;
	position: relative
}

a.more{
	color: #333333;
	font-weight: bolder
}

a.komment{
	background: url(../images/navigation/ico-komment.gif) no-repeat left;
	color: #333333;
	padding: 0 0 0 23px
}

/* =============================== Footer ============================= */

#footer{
	background: url(../images/layout/page-bot.gif) no-repeat top;
	clear: both;
	color: #ffffff;
	font-size: 11px;
	height: 50px
}

#footer a{
	color: #ffffff
}

#footer a:hover{
	color: #6D95B2; /* Plankton Aquatics */
	color: #D9E4CA; /* Pathfinder Consulting */
	color: #EAE4B2; /* Plankton Technics */
	color: #BBCC73; /* Plankton Media */
	text-decoration: none
}

#footer ul{
	font-weight: bold;
	padding: 0 0 0 10px;
	text-transform: lowercase
}

#footer li{
	background: url(../images/layout/footer-li-bgr.gif) no-repeat right;
	float: left;
	line-height: 21px;
	padding: 0 6px
}

#footer li a{
	float: left;
	padding: 0 2px
}

#footer li.last{
	background: none
}

#footer .spacer{
	height: 30px;
	overflow: hidden
}

/* ----------------------------- Copyright ---------------------------- */

.copyright{
	clear: both;
	font-size: 9px;
	padding: 5px 10px 0;
	padding: 1px 10px 0;
	text-align: right
}

.webdesign{
	clear: both;
	font-size: 9px;
	padding: 5px 10px 0;
	padding: 1px 10px 0;
	text-align: left
}

/* ======================= Aquatics Page Specific ===================== */

#columns.aquatics{
	padding: 5px 5px 0
}

.aquatics h2{
	font-size: 1.7em;
	margin: 0 0 .6em;
	text-transform: lowercase
}

.aquatics h3{
	background: none;
	font-size: 1.2em;
	font-weight: normal;
	margin: 0 0 .3em
}
.aquatics h6{
	margin: 0 0 .2em
}

.aquatics p{
	padding: 0 0 .8em
}

.aquatics big{
	font-size: 1.2em
}

.aquatics .box-bgr-{
	padding: 10px 23px 0
}

/* ======================= Media Page Specific ===================== */

#columns.media{
	padding: 5px 5px 0
}

.media h2{
	font-size: 1.7em;
	font-size: 1.5em;
	margin: 0 0 .6em;
	/* text-transform: lowercase */
}

.media h3{
	background: none;
	font-size: 1.2em;
	font-size: 1.0em;
	font-weight: normal;
	font-weight: bold;
	margin: 0 0 .3em;
}

.media h6{
	margin: 0 0 .2em
}

.media p{
	padding: 0 0 .8em
}

.media big{
	font-size: 1.2em
}

.media .box-bgr-{
	padding: 10px 23px 0
}

/* ======================= Title with Background ===================== */

#columns.title{
	padding: 0 0 0
}

.title h3{
    background: #eae8ea;
	font-size: 1.0em;
	font-weight: bold;
	margin: 0 0 .3em;
}

/* ================================ Misc. ============================= */

.fix{
	clear: both;
	height: 1px;
	margin: -1px 0 0;
	overflow: hidden
}

.fl{
	float: left
}

.fr{
	float: right
}

.ar{
	text-align: right
}

/* ==================================================================== */