/*
Styles for MARITIME HISTORY website (www.marehist.gr)
Modified by Andreas Giannakoulopoulos - July 2009
andreas@utopia.gr

Original credits follow:
Project: CrystalX
URL: http://www.nuvio.cz    
Author: Vit Dlouhy (vit.dlouhy@nuvio.cz); Nuvio (www.nuvio.cz)
Last revision: 2006-12-05
*/

/* ---- genaral media types [SCREEN, PROJECTION] */

@media screen, projection {

html { overflow-y: scroll;}
body {border:0; margin:0; padding:0; font-family: arial, sans-serif; color:#000; background: #8fa5c7; font-size: 12px; }
a {color:#637a9d; text-decoration: none;}
a:hover {color:#202d64; text-decoration: underline;}
img {border:0;  }
h2 {font-size:16px; background: #e2e2e2; padding: 9px 0 3px 0; margin: 0; text-indent: 10px; font-weight:900; color: #343434; }
ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
ol {list-style-type:decimal;}
li {display:list-item; border:0; margin:0; padding:0;}
ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}

#mainContainer {margin: auto; width: 980px; padding-top: 6px; position: relative;}
.contentDiv {padding: 10px; margin: 0; text-align : justify;}
.contentDiv p {padding: 6px 0; margin: 0; }
.contentDivHome {padding: 10px; margin: 0; border-style: solid; border-color: #e2e2e2; border-width:  9px 0 0 0;}
.mainTable {margin:0; border-style: solid; border-color: #e2e2e2; border-width: 0 0 0 9px;   padding:0; width: 960px; line-height:1.4; background: #eee9d6; }
.mainTable td#headerCell {border: solid 0 red; margin-left: -9px;}
.mainCellLeft {padding: 0; width: 660px;  border-style: solid; border-color: #e2e2e2; border-width: 0 9px 13px 0; }
.mainCellRight {padding: 0 10px; width: 280px; border-style: solid; border-color: #e2e2e2; border-width: 0 0 13px 0;  }
.innerTable {width: 100%; border-collapse: collapse; padding: 0; margin: 0; }
.innerTableLeft {width: 309px; padding: 0; margin: 0; }
.innerTableRightWide {width: 180px; padding: 0 10px; margin: 0; }
.innerTableRightNarrow {width: 1px; padding: 0; margin: 0; }
.summary {font-weight: 900; padding: 3px 0 6px 0; border-bottom: dotted 1px #fff; }

.breadcrumbs {font-family: verdana, sans-serif; font-size: 11px; padding: 3px 0 6px 0; margin: 2px 0 15px 0; border-bottom: dotted 1px #fff; color: #555; }
.breadcrumbs a {text-decoration: none; padding: 1px 1px 2px 2px;  background: transparent; border-bottom: solid 1px #eee9d6;}
.breadcrumbs a:hover {text-decoration: none; padding: 1px 1px 2px 2px;  background: #8fa5c7; border-bottom: solid 1px #202d64; color: #fff;}

#sitemap { font-family: verdana, sans-serif; line-height:1.4;}
#sitemap li {margin-bottom: 2px; }
#sitemap a { text-decoration: none; padding: 1px 1px 2px 2px; background: transparent; border-bottom: solid 1px #eee9d6; }
#sitemap a:hover { text-decoration: none; padding: 1px 1px 2px 2px; background: #637a9d; border-bottom: solid 1px #202d64; color: #fff; }
#sitemap a.category  {color: #202d64; font-weight: 900;}
#sitemap a.category:hover {color: #fff; font-weight: 900;}
#sitemap ul {list-style-type: none;}

.nav {font-size: 11px; font-weight: 100; font-family: verdana, sans-serif;  width: 270px; }
.nav ul { padding-left: 0; margin-left: 3px; list-style-type: none;}
.nav li a {display:block; text-decoration: none; background: transparent; padding: 0 0 1px 0;}

.nav li.parentN a, .nav li.parentA a, .nav li.parentS a {background: transparent url(../images/layout/bullet.png) no-repeat 4px 5px; padding-left:15px; font-weight: 900; border-left: solid 0px #eee9d6; border-bottom: solid 2px #eee9d6; border-top: solid 2px #eee9d6; color: #0c2b55; font-size: 12px;  margin: 1px 0 2px 0;}
.nav li.parentA a { background: #8fa5c7 url(../images/layout/bullet.png) no-repeat 4px 5px; border-left: solid 0px #0c2b55; border-bottom: solid 2px #0c2b55; border-top: solid 2px #eee9d6; color: #fff;}
.nav li.parentS a { background: transparent url(../images/layout/bullet.png) no-repeat 4px 5px; border-left: solid 0px #0c2b55;  border-bottom: dotted 2px #8fa5c7; border-top: dotted 2px #8fa5c7;}
.nav li.parentN a:hover, .nav li.parentA a:hover, .nav li.parentS a:hover {background: #fff url(../images/layout/bullet.png) no-repeat 4px 5px; border-left: solid 0px #0c2b55; border-bottom: solid 2px #0c2b55; color: #0c2b55; border-top: solid 2px #eee9d6;}

.nav li.childN a { color: #637a9d; border-left: solid 0px #eee9d6; border-bottom: solid 2px #eee9d6; padding-left: 15px; margin-bottom: 1px;}
.nav li.childA a { background: #8fa5c7; border-left: solid 0px #0c2b55; border-bottom: solid 2px #0c2b55; color: #fff; padding-left: 15px;}
.nav li.childN a:hover, .nav li.childA a:hover {background: #fff; border-left: solid 0px #0c2b55; border-bottom: solid 2px #0c2b55; color: #0c2b55;  padding-left: 15px;}


/* Floating */
.f-left {float:left;}
.f-right {float:right;}

/* Text align and size */
.t-left {text-align:left;}
.t-center {text-align:center;}
.t-right {text-align:right;}
.centered { text-align : center; }
.justified { text-align : justify; }
.rightAlign { text-align : right; }
.smallerSize { font-size: 11px;}
.largerSize {font-size: 13px; }

.va-middle {vertical-align:middle;}

.clear {clear:both;}
.noDisplay { display: none;}

.nom {margin:0;}
.noscreen {display:none;}

/* ----------------- */

/* header */
#ionioLogo {position: absolute; top: 13px; left: 835px; width:151px; border: 0;}
#top_icons {text-align: right; margin: 1px 153px 7px 0; border-bottom: dotted 1px #c0cfe7;}
/* Main menu (tabs) */
#tabs {padding:5px 0 17px 0; font-size: 12px; font-family: verdana, sans-serif; border: solid 0 black}
#tabs ul { list-style:none; margin:0; }
#tabs ul li { float:left;  color:#fff; display:block;}
#tabs ul li a {position: relative;  padding:2px 4px 3px 4px; color:#fff; font-weight:bold; text-decoration:none; cursor:pointer; border-right: solid 1px #fff;}

/* Main menu (tabs - link) */

/* Main menu (tabs - hover) */
#tabs ul li a:hover {background:#202d64; color:#fff; border-right: solid 1px #202d64;}

/* Main menu (tabs - active) */
#tabs ul li.active a {color:#202d64; background: #f7f4ed; border-right: solid 1px #f7f4ed;}
#tabs ul li.active a:hover {background:#202d64; color:#fff; border-right: solid 1px #202d64;}

/* Footer */
#footer {position:relative; clear:both; top:0; margin: auto; width:966px; padding: 0 20px 0 0; border: 0; }

/* Footer - "back home" */
#home {position:absolute; top:0; left:790px;}
#home p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
#home p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("../images/layout/ico_home.png") 0 0 no-repeat; cursor:pointer;}
#home a:hover span {background:url("../images/layout/ico_home.png") -30px 0 no-repeat;} 

/* Footer - "back on top" */
#up {position:absolute; top:0; left:820px;}
#up p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
#up p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("../images/layout/ico_top.png") 0 0 no-repeat; cursor:pointer;}
#up a:hover span {background:url("../images/layout/ico_top.png") -30px 0 no-repeat;}

/* Footer - "navigation" */
#footerTable {width:100%; margin: 7px auto;  color: #eee9d6; font-size: 12px; line-height: 1.5; font-weight: 100; border: 0;}
#footerTable td { width: 50%; border: 0;}
#footerTable a {color: #fff;}
#footerTable a:hover {color: #202d64;}
#footerTable a.active {color:#202d64;}


/* additional custom styles */
.underC { font-size : 127%; color : #5D891F; text-align : center; width : 80%; margin: 25px auto; padding : 9px; border : 2px dotted #5D891F; line-height: 1.5; }
.underC a, .underC a:hover { font-size : 100%; font-weight : 900; }
.underC_title { font-size: 160%; display: block; font-weight: 900; text-align : center;}
#viewer { margin: 15px auto; text-align: center; font-weight: bold; font-size: 120%; }
#viewer img { margin: 10px 1px; }
.borderedLink { padding: 2px 5px; background-color: #ffffff; border: solid 2px #ff9000; }
.borderedLink  a {text-decoration: none;}
.validationImg {border:0; width:60px; height:21px; margin-top: 7px;}
.iconImg {border:0; height:21px; margin-top: 7px;}
.frontImg img { margin: 0 auto; text-align: center; border: solid 5px #e2e2e2; padding: 0;}
.frontImg a:hover  { text-decoration:none; background: #e2e2e2;}
#welcomeEdPix { float: right; margin: 0 10px 5px 17px; }
#welcomeEdDiv { text-align:justify; margin-top: 10px; padding-bottom: 1px; border-bottom: solid 2px #555; }
#welcomeEdDiv  ul {padding-left: 15px; font-weight: 900; line-height: 1.4; }
.pageEdTitle { color: #202d64; font-size: 15pt; font-style: normal; letter-spacing: 1px; font-weight: 900;  margin: 6px 0 33px 13px; }
.titleLink { font-weight: 900; font-size: 13px; margin: 0 0 7px 0;}
.innerTitle { font-weight: 900; font-size: 14px; color: #555; text-decoration: underline; }
.innerSubtitle { font-weight: 900; color: #555; text-decoration: underline; }
.readDetails { text-align: right; padding: 0 0 4px 0; margin: 0 0 3px 0; border-bottom: dotted 1px #fff;}
}

/* forms */
.formsInline { display: inline;  }
.textInputWidth {color: #202d64; width:158px; }
.selectorNoWidth { color: #eee9d6; font-weight: 100;  background-color:#202d64; border: solid 1px #ccc;}
.buttonWidth {cursor: pointer; font-weight: 900;   border: solid 1px #eee9d6; background-color:#202d64; color:#fff; margin: 0 6px 0 0; padding: 1px; width: 93px;}
.textInput { background-color:#e0f5b0; color: #000; width: 145px;}
.selectorNoWidth { color: #eee9d6; font-weight: 100;  background-color:#202d64; }
.button {cursor: pointer; font-weight: 900; letter-spacing: 1px;  border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 2px solid #555; border-bottom: 2px solid #555; background-color:#202d64; color:#eee9d6;}

/* EDITOR SECTION */
.standardTable { width: 100%;}
.innerCentralTable { width: 100%; border-left: 1px dashed #637a9d;  }
.formsInline { display: inline; }
.innerCentralTable { width: 100%; }
.innerCentralTable td { padding: 0 4px; border-right: 1px dashed #637a9d;}
.innerCentralTable a:hover { background-color: transparent; border:0; text-decoration: underline;}
#centralFirstCell { width: 40px;  }
#centralSecondCell { width: auto;  }
#centralThirdCell { width: 190px;  }
#centralDateCell { width: 180px;  }
#centralLastCell { width: 160px; }
.imgInline { vertical-align: -8px; }
.editorMessage {color : #444; text-align : center; width : 80%; margin : 36px auto; padding : 13px; border : 2px dotted #777; line-height: 1.5; font-size: 1.2em; display: block; font-weight: 900; }
.alertMsg {color : #663300; background: #faf5e1; margin: 0 0 13px 0; padding: 7px; border : 1px dotted #777; line-height: 1.3; font-size: 13px; display: block; font-weight: 900; }
.readOnly {background-color: #ccc;}
.redAlert { color: #ff0000; }
.redStar { font-weight: 900; color: #ff0000; }
.formSeparatorCell { border-bottom: dotted 1px #555; }
.textAreaBig { width: 580px; height: 140px; }
.textAreaContact { width: 348px; height: 70px; }
.textAreaSmall { width: 460px; height: 70px; }
.textInput { width: 460px; }
.textInputSmall { width: 100px; }
.textPixInput { width: 500px; }
.textAreaWidth { width: 460px; }
.textInputContact { width: 348px; }
.buttonAdd {border: 1px solid #444; padding: 1px; background-color:#eee;}

.topEdLinks {color: #eee9d6; font-family: verdana, sans-serif; font-size: 11px; text-align: right; margin: 1px 196px 7px 0; border-bottom: dotted 1px #c0cfe7; padding: 3px 0 8px 0;}
.topEdLinks a { color: #202d64; text-decoration: none; padding: 2px 4px;  background: #eee9d6; border-bottom: solid 2px #eee9d6;}
.topEdLinks a:hover {text-decoration: none; padding: 2px 4px;  background: #8fa5c7; border-bottom: solid 2px #202d64; color: #fff;}
.topEdLinks a.activeEd  {text-decoration: none; padding: 2px 4px;  background: #fff; border-bottom: solid 2px #fff; color: #202d64; }
#tabs ul li.activeEd a {color:#202d64; background: #f7f4ed; border-right: solid 1px #f7f4ed;}
#tabs ul li.activeEd a:hover {background:#202d64; color:#fff; border-right: solid 1px #202d64;}
#footer a.activeEd  {text-decoration: none; color: #202d64; }

/* TABBER SECTION */
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}

/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber { background: transparent;
}
.tabberlive {
margin: 0;       
padding:0;
background: transparent;
border: 0;
}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
p.tabbernav
{
margin:0;
}
ul.tabbernav
{
margin:5px 0 0 0;
padding:  0;
font: bold 14px Arial, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
padding:  0;
display: inline;
}

ul.tabbernav li a
{
padding: 5px;
margin-right: 5px;
border: 1px solid #fff;
background: #e2e2e2;
text-decoration: none;
}

ul.tabbernav li a:hover
{
color: #fff;
background: #202d64;
border: solid 1px #fff;
}

ul.tabbernav li.tabberactive a
{
color: #202d64;
background-color: #eee9d6;
border: solid 1px #fff;
border-bottom: solid 1px #eee9d6;
}



/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
margin:5px 0 0 0;        
padding:5px;
border: solid 1px #fff;
border-top: solid 1px #fff;


/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

/* height:200px; */

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

/* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}


/* ---- special media types [PRINT] */

@media print { 

body {border:0; margin:0; padding:0; font-size:12pt}

a {color:#000; text-decoration:none;}

h1, h2, h3 {page-break-after:avoid; page-break-inside:avoid;}

table {border-collapse: collapse; border-width:1px; border-style:solid;}
th, td {display:table-cell; border-width:1px; border-style:solid;}


hr {display:block; height:2px; margin:0; padding:0; background:#000; border:0 solid #000; color:#000;}

blockquote {page-break-inside:avoid}
ul, ol, dl {page-break-before:avoid}

.noprint {display:none;}

}