/* Τα body,div.wrapper,h1,article δεν αφορούν το article -
 ακολουθούν το μέγεθος και style του υπάροντος css οπότε στην τελική έκδοση θα αφαιρεθεί. 
 Εδώ τα ορίζω για να έχω ένα σημείο αναφοράς. 
 Προσοχή, όλο το άρθρο όμως χτίζεται με βάση το body {font-size:20px;line-height:1.7;font-family:"Open Sans";}
 Οπότε ίσως αυτά πρέπει να μεταφερθούν στον wrapper του άρθρου.
 Ομοίως και για το slice2: Υπάρχει απλά γιατί έπρεπε κάπως να αναπαράγω το λευκό πλαίσιο στο template μου - στο τελικό δεν χρειάζεται να υπάρχει
 */

body {
	 padding: 50px 0;
	 font-size: 20px;
	 font-family: "Roboto","Open Sans","Arial",Sans-Serif;
	 background: url('http://www.titroo.gr/img/background01.png') no-repeat center center fixed;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
	 line-height: 1.5em;
	 font-weight: 300;
	 font-style: normal;
	 color:#535353;
}

div.wrapper {
	 margin: 0 auto;
	 display: block;
	 white-space: nowrap;
	 text-align: center;
	 padding-bottom: 20px;
	 min-height: 100%;
	 width: auto;
	 max-width: none;
}

section.slice2 {
	 position: relative;
	 background-color: #FFF;
	 width: 760px;
	 margin-left: -600px;
	 padding: 0px 450px 0px 600px;
}

h1 {
	 font-size: 3rem;
	 line-height: 1.25em;
	 color: #535353;
	 text-align: center;
	 margin: 0px 0px 1.4rem 0px;
	 font-weight: 300;
	 font-style: normal;
}

article {
	 width: 760px;
}



/*  
Σημειώσεις:
- το τυπικό bottom-margin είναι 1.4rem 
- η τυπική γραμματοσειρά είναι font-weight:300;
- οι τίτλοι είναι open sans condensed light
- υπάρχουν 9 χρώματα βασικά στο τιτρώω:
	white: #ffffff;
	v.light gray: #f2f2f2; (πολύ αχνό - πχ placeholder, zero state)
	light gray: #787878; (ανοιχτό γκρι πχ κείμενο)
	dark gray: #535353; (ανθρακί - τυπικό κείμενο)
	black: #000000; (έντονο κείμενο)
	titroo red: #D66C6E; (το σομόν)
	titroo yellow: #F1C40F; (κίτρινο)
	titroo beige: #c8bfa6; (μπεζ)
	titroo green:#79c497; (πράσινο - πιο σπάνιο)
*/


div {
	 text-align: left;
	 display: inline-block;
	 white-space: normal;
	 vertical-align: top;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 padding: 0 0% 0 0px;
	 max-width: 760px;
	 width: 760px;
}


p {
	 color: #535353; /*titroo Ανθρακί*/
	 text-align: left;
	 letter-spacing: 0px;
	 hyphens: auto;
	 -webkit-hyphens: auto;
	 -ie-hyphens: auto;
	 -moz-hypehns: auto;
	 margin: 0px 0px 1.4rem 0px;
}

p.intro {
	 font-size: 1.6rem;
	 line-height: 1.25em;
	 font-family: "OpenSans-CondensedLight","Open Sans Condensed","Arial Narrow","Roboto",Sans-Serif;
	 color: #535353;
	 text-align: justify;
	 hyphens: auto;
	 -webkit-hyphens: auto;
	 -moz-hyphens: auto;
	 -ms-hyphens: auto;
	 margin: 0px 3.5rem 1.4rem 3.5rem;
	 letter-spacing: 0px;
	 font-weight: 200;
	 font-style: normal;
}

span.dropcap {
	 float: left;
	 color: #F1C40f; /*titroo κίτρινο*/
	 font-size: 6em;
	 padding-top: 2rem;
	 padding-right: 12px;
	 padding-left: 3px;
	 padding-bottom: 1rem;
	 font-family: "Times New Roman",Serif;
}

p.two-col {
	 -webkit-column-count: 2;
	 -o-column-count: 2;
	 -moz-column-count: 2;
	 -ms-column-count: 2;
	 -webkit-column-gap: 20px;
	 -o-column-gap: 20px;
	 -moz-column-gap: 20px;
	 -ms-column-gap: 20px;
	 column-count: 2;
	 column-gap: 20px;
	 margin: 0px 0px 1.4em 0px;
}

img {
	 max-width: 100%;
	 margin: 0px 0px 1.4rem 0px;
}

figure {
	display: block;
	background:#535353;
	max-width: 100%;
	margin: 0px 0px 1.4rem 0px;
}


figure img {
	clear:both;
	margin-bottom:0rem;
}

/* δεν μου αρέσει πολύ η κατακόρυφη στοίχιση της λεζάντας- δες αν μπορείς να την φέρεις πιο κεντραρισμένη*/
figure figcaption {
	display: block;
    color: #f2f2f2;
    font-size: 0.8rem;
    line-height: 1.25em;
    padding: 0.4rem;
}

/* Το 100% wide quote (κόκκινο) */
div.pull-quote-p {
	 width: auto;
	 margin: 0;
}

div.pull-quote-p:before {
	 content: "";
	 display: table;
}

div.pull-quote-p:after {
	 content: "";
	 display: table;
	 clear: both;
}

p.pullquote {
	 font-size: 1.7rem;
	 line-height: 1.3em;
	 padding-left: 15px;
	 border-width: 0px 0px 0px 8px;
	 border-style: solid;
	 letter-spacing: 1px;
	 margin: 1rem 1rem 2.46rem 1rem;
	 border-color:#D66C6E;
}


/*Το sidepanel quote (κίτρινο)*/

blockquote {
	 text-align: right;
	 font-size: 20px;
}

blockquote.pull-quote-left {
	 margin: 0.7rem 1rem 2.46rem -1rem;
	 width: 250px;
	 float: left;
	 padding: 0em 0.0em 0em 15px;
	 border-left: 4px solid #F1C40F;
}

.pull-quote-left p {
	margin: 0px 0px 0em 0em;
    font-size: 26px;
    line-height: 1.3em;
    font-weight: 300;
    color: #535353;
    padding: 0px 0px 0px 0.5rem;
    letter-spacing: -0.6px;
}

h2 {
	 font-family: "OpenSans-Condensed","Open Sans Condensed","Arial Narrow","haettenschweiler","Roboto",Sans-Serif;
	 font-size: 1.7rem;
	 margin: 1.4rem 0px 0.35rem 0px;
	 line-height: 1.25em;
	 color:  #535353;
	 font-weight: 700;
	 font-style: normal;
}

h3 {
	 font-size: 1.4rem;
	 font-family: "OpenSans-Condensed","Open Sans Condensed","Arial Narrow","haettenschweiler","Roboto",Sans-Serif;
	 font-weight: 700;
	 font-style: normal;
	 margin: 0.7rem 0px 0rem 0px;
	 color: #535353;
}

h2 + h3 {
	 margin-top: 0.35rem;
}


ul {
	 margin: -1.05rem 1rem 1.4rem 1rem;
	 padding: 0.7rem 1rem;
	 list-style-type: square;
}

ol {
	 margin: -1.05rem 1rem 1.4rem 1rem;
	 padding:0.7rem 1rem;
	 list-style-type: decimal; 
}


li {
	 margin: 0px 0px 0.7rem 0px;
	 padding: 0;
}



em {
	 font-weight: 400;
	 font-style: italic;
	 letter-spacing: 0.5px;
}

strong {
	 font-weight: 600;
	 font-style: normal;
}

.references {
	margin: 1.4rem 0;
	list-style-type: decimal;
}
.references li
{
	font-size:1rem;
	margin:0 0 0.7em 0em;
	word-break:break-all;
	line-height:1.25em;
}

.infobox-attention {
    background-image: url("http://playground.doctor-kalafatis.gr/images/attentionw.svg");
    background-repeat: no-repeat;
    background-position: 1.5em center;
    background-size: contain;
    background-color: #D66C6E;
    padding: 2.8rem 2.8rem;
    margin: 2.1rem 1rem;
    font-weight: 300;
    text-align: left;
    padding-left: 9rem;
    min-height: 4.2rem;
    line-height: 1.4rem;
    color: white;
    font-style: italic;
    background-origin: padding-box;
}

.infobox-tip {
	background-image: url("http://playground.doctor-kalafatis.gr/images/noticew.svg");
    background-repeat: no-repeat;
    background-position: 1.5em center;
    background-size: contain;
    background-color: #F1C40F;
    padding: 2.8rem 2.8rem;
    margin: 2.1rem 1rem;
    font-weight: 300;
    text-align: left;
    padding-left: 9rem;
    min-height: 4.2rem;
    line-height: 1.4rem;
    color: #535353;
    font-style: italic;
    background-origin: padding-box;
}

/*
      ---------------------------------- responsiveness --------------------------------
*/
@media only screen and (max-width: 480px) {

/* Ομοίως τα body, div.wrapper, div, slice2, h1 δεν χρειάζεται να υπάρχουν στο css αφού ήδη υπάρχουν στο έγγραφο. 
Εξαίρεση το body που κάπου πρέπει να οριστεί το base size της γραμματοσειράς. */
/* Ομοίως το h1: Το h1 δεν αφορά το article - ακολουθεί το μέγεθος και style του υπάροντος css οπότε στην τελική έκδοση θα αφαιρεθεί*/
	 body {
	 	font-size:18px;
	 }

	div {
		 width: 409.75px;
	}

	div.wrapper {
		 width: 478px;
	}

	section.slice2 {
		 width: 398px;
		 margin-left: -40px;
		 padding-left: 40px;
		 padding-right: 40px;
	}


	h1 {
		font-size:;
	}

	article {
		 width: 417.4375px;
	}


/* ακολουθούν οι ουσιαστικές κλάσεις προς υλοποίηση: */
	 p {
		 hyphens: auto;
		 -webkit-hyphens: auto;
		 -moz-hyphens: auto;
		 text-align: left;
		 line-height:1.5em;
	}

	p.intro {
		font-size:1.2rem;
		 word-break: break-all;
		 margin-left:1rem;
		 margin-right:1rem;
	}

	p.two-col {
		 -webkit-column-count: 1;
		 -o-column-count: 1;
		 -moz-column-count: 1;
		 -ms-column-count: 1;
		 column-count: 1;
	}

	span.dropcap {
		 font-size: 6.73em;
		 line-height: 0.5em;
		 padding-top: 1.4rem;
    	padding-bottom: 0.5rem;
	}

	/* κόκκινο quote */
	p.pullquote {
		 margin: 1rem 0rem 2.46rem 0rem;
	}

	/* κίτρινο quote */
	blockquote.pull-quote-left {
		 width: auto;
		 margin: 1rem 0rem 2.46rem 0rem;
	}

	ul, ol {
		 margin: -1.05rem 0rem 1.4rem 0rem;
	 	 padding: 0rem 0rem 0.35rem 1rem;
		 font-size: 1em;
		 list-style-type: square; 
	}

	em {
		 letter-spacing: 0.75px;
	}

	.infobox-attention, .infobox-tip {
	    padding: 1.4rem 1.4rem;
	    margin: 2.8rem 0rem;
	    text-align: left;
	    background-position: center;
	    font-weight: bolder;
	    background-origin: padding-box;
	    background-size: cover;
	}
	


}