﻿/*
--------------------------------------
        Cascading Style Sheets 
            Θρησκευτικά
            B' Γυμνασίου
            21-0189-01
            ΙΤΥΕ ΔΙΟΦΑΝΤΟΣ
            Μάρτιος 2018
--------------------------------------
*/

/*
--------------------------------------
        General Styles 
--------------------------------------
*/
div, dl, dt, dd, ul, ol, li {
	margin: 0;
	padding: 0;
	border-width: 0;
}
body {
    color: #000;
    background-color: #fff;
	font-family: "Calibri", sans-serif;
	font-size: 12pt;
    margin: 0;
    padding: 0;
    text-align: justify;
}
p {
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-right: 0;   
}
caption{
    font-family: "Century-Gothic",sans-serif;
    text-align: left;
    padding: 1%;
}
.footnote{
    font-size: 12pt;
    text-align: right;
}
.footnote span{
    font-style: italic;
}
.italics{
    font-style: italic;
}
.table-p8 caption {
    background-color: #CEEBF1;    
}
td{
    vertical-align: middle;    
}
.table-p8{
    border-collapse: collapse;
    width: inherit;
}
.table-p8 td:first-child{
    background-color: #CEEBF1; 
    padding: 0 2% 0 2%;
    text-align: center;    
}
.translation{
    border-collapse: collapse;
}
.translation td{
    padding-left: 1%;
}
.translation td:first-child{
    border-right: solid 1px;
}
.table-p21 {
    border-collapse: collapse;
    margin: 2% 0;
    width: 100%;
}
.table-p21 caption {
    background-color: #CEEBF1;
    font-family: "Century Gothic", sans-serif;
    font-size: 12pt; 
    font-weight: normal;
    text-align: left;    
}
.table-p21 td{
    border-top: 1px solid;
    padding: 1%;
    width: 50%;
}
.table-p21 tr > td:first-child{
    border-right: 1px solid;
}
.table-p21 td{
    border-top: 1px solid;
    width: 50%;
}
.indent-text{
    text-indent: 5%;
}
.table-no-border{
    width: 100%;
}
.table-no-border td{   
    width: 50%;    
}
.table-no-border td:first-of-type{
    padding-right: 2%;
}
.table-no-border td:last-of-type{
    padding-left: 2%;
}
.table-p97{
    border-spacing: 5px 10px; 
    width: 100%;
}
.table-p97 caption{
    background-color: #FECB6C;
    border: 1px solid #722F05;
}
.table-p97 td{
    border: 1px solid #722F05;   
    padding: 1%;
    text-align: left;
}
.table-p97 thead tr td{
    background-color: #FECB6C;
    text-align: center;
    width: 33%;
}
ul.colored > li{
    list-style-position: inside;
    margin-left: 0;
}
/*
--------------------------------------
        Chapter Styles 
--------------------------------------
*/
.ch1 h1, .ch1 h2, .ch1 h4, .ch1 h4 + p, .ch1 .colored{
    color: #006061;    
}
.ch1 h3{
    background-color: #006061; 
    border-top: #D2232A solid 2px;  
    box-shadow: 
        0 -2px 0  #fff,
        0 -5px 0  #D7193E;
    color: #CEEBF1;
}
.ch1 h5{
    background-color: #CEEBF1;  
}
.ch2 h1, .ch2 h2, .ch2 h4, .ch2 h4 + p, .ch2 .colored{
    color: #B8292F;
}
.ch2 h3{
    background-color: #B8292F; 
    border-top: #FDB820 solid 2px;  
    box-shadow: 
        0 -2px 0  #fff,
        0 -5px 0  #FDB820;
    color: #FDE2D1;
}
.ch2 h5{
    background-color: #FDE2D1;  
}
.ch3 h1, .ch3 h2, .ch3 h4, .ch3 h4 + p, .ch3 .colored{
    color: #6F459B;
}
.ch3 h3{
    background-color: #6F459B; 
    border-top: #ED1C24 solid 2px;  
    box-shadow: 
        0 -2px 0  #fff,
        0 -5px 0  #ED1C24;
    color: #EBE6EE;
}
.ch3 h5{
    background-color: #E0D9EC;  
}
.ch4 h1, .ch4 h2, .ch4 h4, .ch4 h4 + p, .ch4 .colored{
    color: #722F05;
}
.ch4 h3{
    background-color: #722F05; 
    border-top: #ED1C24 solid 2px;  
    box-shadow: 
        0 -2px 0  #fff,
        0 -5px 0  #ED1C24;
    color: #FDB820;
}
.ch4 h5{
    background-color: #FECB6C;  
}
.ch5 h1, .ch5 h2, .ch5 h4, .ch5 h4 + p, .ch5 .colored{
    color: #006061;
}
.ch5 h3{
    background-color: #006061; 
    border-top: #ED1C24 solid 2px;  
    box-shadow: 
        0 -2px 0  #fff,
        0 -5px 0  #ED1C24;
    color: #DFEFD8;
}
.ch5 h5{
    background-color: #DFEFD8;  
}
.ch6 h1, .ch6 h2, .ch6 h4, .ch6 h4 + p, .ch6 .colored{
    color: #003975;
}
.ch6 h3{
    background-color: #003975; 
    border-top: #ED1C24 solid 2px;  
    box-shadow: 
        0 -2px 0  #fff,
        0 -5px 0  #ED1C24;
    color: #CCE0EE;
}
.ch6 h5{
    background-color: #CCE0EE;  
}
.ch1 ul > li, .ch5 ul > li {
    list-style-image: url('../images/list-symbol1.png');    
}
.ch2 ul > li {
    list-style-image: url('../images/list-symbol2.png');    
}
.ch3 ul > li {
    list-style-image: url('../images/list-symbol3.png');    
}
.ch4 ul > li {
    list-style-image: url('../images/list-symbol4.png');    
}
.ch6 ul > li {
    list-style-image: url('../images/list-symbol6.png');    
}
/*
--------------------------------------
        Heading Styles 
--------------------------------------
*/
h1{
	font-family: "Century Gothic", sans-serif;    
    font-size: 14pt;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;    
    margin-top: 7%;    
    padding-bottom: 2%;
    padding-left: auto;
    padding-right: auto;
    padding-top: 1%;
    text-align: center;
}
h1 span{
    font-size: 28pt;
    font-weight: bold;
}
h2{ 
	font-family: "Century Gothic", sans-serif;    
    font-size: 13pt;
    font-weight: normal; 
    padding: 1% 0;    
    text-align: left;
}
h3{
    font-size: 14pt;  
    padding: 1%;
    text-align: center;    
}
h4{
    font-size: 14pt;
    text-align: right;
    margin: 1% 0 0 0;
}
h5{
    font-family: "Century Gothic", sans-serif;
    font-size: 12pt; 
    font-weight: normal;
    margin: 2% 0 1% 0;
    padding: 1%;
}
h6{
    font-size: 12pt;
}
/*
--------------------------------------
        Page container 
--------------------------------------
*/
.page-container{
    background-color: #fff; 
	margin: 20px auto;
    overflow: auto;    
	padding: 100px;    
	width: 700px;   
}
.per .page-container{
    height: 900px;
    overflow: hidden;
}
/*
--------------------------------------
        Images 
--------------------------------------
*/
.cover img, .page-container img {
	display: block;
    width:100%;
}
.figure{
    margin: 2%;
}
.figcaption {
    font-size: 10pt;
    text-align: left;
}

/*
--------------------------------------
        Contents 
--------------------------------------
*/
.ch1 ol.contents > li, .ch5 ol.contents > li{
    color: #006061;    
}
.ch2 ol.contents > li{
    color: #B8292F;    
}
.ch3 ol.contents > li{
    color: #6F459B;    
}
.ch4 ol.contents > li{
    color: #722F05;    
}
.ch6 ol.contents > li{
    color: #003975;    
}

ol.contents > li {
    list-style-type: upper-roman;
    margin: 2% 0 2% 3%;
    text-align: justify;
}
ol.contents ul {
    color: #000;
}
.contents li p{
    font-weight: normal;
}
.contents ul > li::before {
    margin-right: 1%;    
}
.contents ul > li > ul > li{
    font-weight: normal;    
    margin-right: 4%;
    margin-left: 0;     
    list-style-type: none;  
    list-style-image: none;
}
.contents ul > li > ul > li::before {
    content: none;
    margin-right: 1%;        
}
/*
--------------------------------------
        List Small Greek 
--------------------------------------
*/
ol.sm-greek {
    counter-reset: list;    
}
ol.sm-greek > li {
    list-style: none;

}
ol.sm-greek > li:before {
      content: "[" counter(list, lower-greek) "] ";
      counter-increment: list;
}
ol.greek {
    counter-reset: list;    
}
ol.greek > li {
    list-style: none;
}
ol.greek > li:before {
      content: counter(list, lower-greek) ".";
      counter-increment: list;
}
/*
--------------------------------------
        List Roman 
--------------------------------------
*/
ol.roman {
    counter-reset: list;
}
ol.roman > li {
    list-style: none;
    padding: 2%;
}
ol.roman > li:before {
    content: counter(list, upper-roman )"." ;
    counter-increment: list;
}
ol.roman ul{
    padding-left: 6%;
}
ol.roman ul li{
    list-style-position: outside;
}
/*
--------------------------------------
        Floats and alignment 
--------------------------------------
*/
.center {
    margin: auto;
}
.fright{
    float: right;
}
.fleft{
    float: left;
}
.clear-both{
    clear: both;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.clear-left{
    clear: left;
}
.clear-right{
    clear: right;
}
.tcenter{
    text-align: center;
}
.tright{
    text-align: right;
}
.tleft{
    text-align: left;
}
/*
--------------------------------------
        Exercises: 
Για το πλαίσιο των ασκήσεων
--------------------------------------
*/
.ch1 .exercises{
    background-color: #CEEBF1;
    border-top: 1px solid #006061;
    border-bottom: 1px solid #006061;    
}
.ch2 .exercises{
    background-color: #FDE2D1;
    border-top: 1px solid #B8292F;
    border-bottom: 1px solid #B8292F;     
}
.ch3 .exercises{
    background-color: #E0D9EC;
    border-top: 1px solid #6F459B;
    border-bottom: 1px solid #6F459B;    
}
.ch4 .exercises{
    background-color: #FECB6C;
    border-top: 1px solid #722F05;
    border-bottom: 1px solid #722F05;    
}
.ch5 .exercises{
    background-color: #DFEFD8;
    border-top: 1px solid #006061;
    border-bottom: 1px solid #006061;    
}
.ch6 .exercises{
    background-color: #CCE0EE;
    border-top: 1px solid #003975;
    border-bottom: 1px solid #003975;    
}
.ch1 .exerc-title, .ch5 .exerc-title{
    color: #006061;    
}
.ch2 .exerc-title{
    color: #B8292F;    
}
.ch3 .exerc-title{
    color: #6F459B;    
}
.ch4 .exerc-title{
    color: #722F05;    
}
.ch6 .exerc-title{
    color: #003975;    
}
.exercises{
    margin: 3% 0;
    padding: 1% 2% 1%;
}
.exerc-title{
    font-size: 12pt;
    font-weight: bold;
    padding: 1%;
    text-align: left;
}
.exercises ul > li {      
    list-style-type: none; 
    list-style-position: inside;    
    margin-left: 3%;
}
ul > li{
    list-style-position: outside;
    margin-left: 5%;
}
.exercises li::before{     
    margin-left: 3%; 
    list-style-type: none;    
}
.exercises ol li{
    margin-left: 35px;
}

/*
--------------------------------------
        Width and Padding Styles
--------------------------------------
*/
.widthinherit{
    width: inherit;
}
.width100{
    width: 100%;
}
.width85{
    width: 85%;
}
.width70{
    width: 70%;
}
.width60{
    width: 60%;
}
.width55{
    width: 55%;
}
.width50{
    width: 50%;
}
.width47{
    width: 47%;
}
.width42{
    width: 42%;
}
.width38{
    width: 38%;
}
.width35{
    width: 35%;
}
.width30{
    width: 30%;
}
.width25{
    width: 25%;
}
.width20{
    width: 20%;
}
.width15{
    width: 15%;
}
.padding-bottom-30{
    padding-bottom:30%;
}
.padding-bottom-40{
    padding-bottom:30%;
}
.padding-top-60{
    padding-top:60%;
}
.padding-top-50{
    padding-top:50%;
}
.padding-top-40{
    padding-top:40%;
}
.padding-top-35{
    padding-top:35%;
}
.padding-top-30{
    padding-top:30%;
}
.padding-top-25{
    padding-top:25%;
}
.padding-top-20{
    padding-top:20%;
}
.padding-top-10{
    padding-top:10%;
}
.padding-top-5{
    padding-top:5%;
}
/*
--------------------------------------
        Index
--------------------------------------
*/
.book-title-1{
    font-size: 18pt; 
    margin: 15%;
    padding-top: 25%;
	text-align: center;    
}
.book-title-2{
    font-size: 18pt; 
    font-weight: bold;
    margin: 10% 0 0 0;    
	text-align: center;    
}
.book-title-3{
    font-size: 18pt;   
    font-weight: bold;    
    padding-top: 2%;
    padding-bottom: 45%; 
	text-align: center;
}
.book-title-4{
	text-align: center;    
}
.book-title-5{
    font-size: 14pt;
	font-weight: bold; 
    padding-top: 15%;    
	text-align: center;    
}
.book-title-6{
    font-size: 16pt;
	font-weight: bold; 
    padding-top: 25%;    
    padding-bottom: 35%;
	text-align: center;    
}
.book-title-7{
    font-size: 12pt;     
	text-align: center;    
}
.book-title-8{
    font-size: 12pt; 
    margin-top: 5%;  
    margin-bottom: 5%;
	text-align: center;    
}
.book-title-9{
    font-size: 12pt; 
    font-family: "Century Gothic", sans-serif;
}
.chapters{
    background-color: #298DCC;
    color: #fff;
    font-size: 16pt;
    font-weight: bold;
    padding: 2%;
}
.cover{
    margin: 0 auto;
    width: 900px;
}
.date {
	font-size:14pt;
	text-align:center;
}
.institute {
	font-size: 14pt;
    margin-top: 25%;
	text-align: center;
}
.index-heading{
    color: #298DCC;
    font-size: 20pt;
    font-weight: bold;
}
.index-law{
    font-family: "Arial", sans-serif;
    font-size: 9.8pt; 
    line-height: 1.5;
}
.per .footnote{
    font-style: italic;    
    letter-spacing: 3px;
    margin: 5% 0;
}
.periexomena{
    font-family: "Century Gothic", sans-serif;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
}
.prolog{
    font-family: "Century Gothic", sans-serif;
    font-size: 14pt;
    text-align: center;
}
.prolog-sub{
    font-style: italic;
    padding: 5% 0;
    text-align: center;
    
}
.publication {
	font-size: 14pt;
	text-align: center;
}
.shadow{
	box-shadow: 5px 5px 5px #D1D2D4;    
}
.unit-wrap1{
    background-color: #D8E8EA;
    box-shadow: 
    0 0 0 3px #006061,
    0 0 0 4px #fff,        
    0 0 0 7px #006061;
    color: #006061;
    font-family: "Century Gothic";
    font-size: 12pt;
    font-weight: bold;
    padding-top: 3%;
    padding-bottom: 3%;    
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
}
.unit-wrap2{
    background-color: #FDE7DD;    
    box-shadow: 
    0 0 0 3px #ED1C24,
    0 0 0 4px #fff,        
    0 0 0 7px #ED1C24;
    color: #B8292F;
    font-family: "Century Gothic";
    font-size: 12pt;
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;    
    padding-top: 3%;
    padding-bottom: 3%;    
    text-align: center;    
}
.unit-wrap3{
    background-color: #EBE6F2;    
    box-shadow: 
    0 0 0 3px #DC82B6,
    0 0 0 4px #fff,        
    0 0 0 7px #DC82B6;
    color: #006061;
    font-family: "Century Gothic";
    font-size: 12pt;
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;    
    padding-top: 3%;
    padding-bottom: 3%;    
    text-align: center;    
}
.unit-wrap4{
    background-color: #FDB820;    
    box-shadow: 
    0 0 0 3px #423D22,
    0 0 0 4px #fff,        
    0 0 0 7px #423D22;
    color: #423D22;
    font-family: "Century Gothic";
    font-size: 12pt;
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;    
    padding-top: 3%;
    padding-bottom: 3%;    
    text-align: center;    
}
.unit-wrap5{
    background-color: #D9EAD3;    
    box-shadow: 
    0 0 0 3px #006061,
    0 0 0 4px #fff,        
    0 0 0 7px #006061;
    color: #006061;
    font-family: "Century Gothic";
    font-size: 12pt;
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;    
    padding-top: 3%;
    padding-bottom: 3%;    
    text-align: center;    
}
.unit-wrap6{
    background-color: #C7EAFC;    
    box-shadow: 
    0 0 0 3px #006061,
    0 0 0 4px #fff,        
    0 0 0 7px #006061;
    color: #006061;
    font-family: "Century Gothic";
    font-size: 12pt;
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;    
    padding-top: 3%;
    padding-bottom: 3%;    
    text-align: center;    
}
.unit-wrap-padding{
    padding-top: 1%;
    padding-bottom: 1%;
        
}
.writer{
    font-style: italic;
    font-weight: bold;
}
/*
--------------------------------------
        Parartima
--------------------------------------
*/
.par p{
    font-size: 9pt;
}
.index-law{
    font-family: "Arial", sans-serif;
    font-size: 9.8pt; 
    line-height: 2;
    padding: 25%;
}
.par .par-subtitle{
    color: #000;
    font-family: "Century Gothic", sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-align: left;
}
.par-right{
    float: right;
    width: 47%;
}
.par-left{
    border-right: 1px solid;    
    float: left;
    padding-right: 3%;    
    width: 47%;    
}
.par li{
    font-size: 9pt; 
    margin-left: 0;
}
.par-title{
    font-weight: bold;
    font-size: 14pt;
    text-align: center;
}
.par .ch1 ul > li {
    list-style-image: url('../images/list-symbol1-sm.png');    
    list-style-position: inside;
}
.par .ch2 ul > li {
    list-style-image: url('../images/list-symbol2-sm.png');    
    list-style-position: inside;    
}
.par .ch3 ul > li {
    list-style-image: url('../images/list-symbol3-sm.png');    
    list-style-position: inside;    
}
.par .ch4 ul > li {
    list-style-image: url('../images/list-symbol4-sm.png');    
    list-style-position: inside;    
}
.par .ch6 ul > li {
    list-style-image: url('../images/list-symbol6-sm.png');    
    list-style-position: inside;    
}
.par .ch1{
    color: #006061;     
}
.par .ch2{
    color: #B8292F;    
}
.par .ch3{
    color: #6F459B;    
}
.par .ch4{
    color: #984A22;    
}
.par .ch6{
    color: #003975;    
}
.par ul.plain > li{
    list-style-type: none;
    list-style-image: none;
}