/*
 * This file sets up the common typography for www.telia.se
 *
 * Any changes or additions to the file must be cleard with:
 * Mikael Nilsson (mikael.n.nilsson@teliasonera.com) and/or
 * Calle Bokedal (calle.bokedal@teliasonera.com)
 *
 * Usage: 
 *  - Use camelCase naming


/* Font
-------------------------------------------------------------------------- */
@font-face {
	font-family: teliaFont;
}

@font-face {
	font-family: teliaFontBold;
}

@font-face {
	font-family: teliaFontItalic;
}

/* Body
-------------------------------------------------------------------------- */

body {
	font-family: teliaFont, sans-serif;
	font-size: 13px;
	line-height: 17px;
	color: #121214;
}

/* Headings
-------------------------------------------------------------------------- */


h1, h2, h3, h4, h5, h6 {
	font-family: teliaFont, sans-serif;
}


h1 {
	font-size: 20px;
	line-height: 21px;
	margin-bottom: 21px;
	color: #29003E;
	font-weight:bold;
	}

h2 {
	font-size: 15px;
	line-height: 19px;
	margin-bottom: 19px;
	margin: 0.4em 0;
	padding: 0;
	color: #29003E;
}

h3 {
	font-size: 15px;
	line-height: 19px;
    font-weight: normal;
    margin: 0.4em 0;
    padding: 0;
	color: #29003E;
	}
	

h4 {
	font-size: 17px;
	line-height: 19px;
	margin-bottom: 19px;
	color: #29003E;
	font-weight:bold;
	}

h5 {
	font-size: 19px;
	line-height: 21px;
	margin-bottom: 21px;
	color: #29003E;
}

h6 {
	font-size: 19px;
	line-height: 21px;
	margin-bottom: 21px;
	color: #29003E;
}
	

/* Text elements
-------------------------------------------------------------------------- */

p			{ margin:0 0 15px; }
p img.left	{ float:left; margin:0 15px 15px 0 }
p img.right { float:right; margin:0 0 15px 15px; }


blockquote {
	font: teliaFontItalic;
	margin: 0 15px 15px;
	quotes: inherit;
}
blockquote:before, blockquote:after {
	content:open-quote;
	font-size:16px;
	font-weight:bold;
	margin:0 5px 0 0;
}
blockquote:after {
	content:close-quote;
	margin:0 0 0 5px;
}

strong		{ font-weight:bold; }
em, dfn		{ font-style:italic }
dfn			{ font-weight:bold }
sub			{ vertical-align:sub; }
sup			{ vertical-align:super; }


/* Anchors
-------------------------------------------------------------------------- */
a, a:visited  {
	color: #652d86;
	}

a:active {
	color: #584861;
	}

a:hover {
	color: #b887d4;
	}


/* Text elements
-------------------------------------------------------------------------- */
p			{ margin:0 0 15px; }
p img.left	{ float:left; margin:0 15px 15px 0 }
p img.right { float:right; margin:0 0 15px 15px; }

blockquote {
	font: teliaFontItalic;
	margin: 0 15px 15px;
	quotes: inherit;
}
blockquote:before, blockquote:after {
	content:open-quote;
	font-size:16px;
	font-weight:bold;
	margin:0 5px 0 0;
}
blockquote:after {
	content:close-quote;
	margin:0 0 0 5px;
}

strong {
	font: teliaFontBold;
}
em, dfn {
	font: teliaFontItalic
}
dfn {
	font: teliaFontBold

}
sub			{ vertical-align:sub; }
sup			{ vertical-align:super; }

/* Paragraph types
-------------------------------------------------------------------------- */
p {
	font-size: 13px;
	line-height: 17px;
	margin: 0 0 1em;
	padding: 0;
	color: #121214;
}

.tsIngress {
	font-size: 13px;
	line-height: 17px;
	margin: 0 0 1em;
	font-weight: bold;
	color: #121214;
}


/* Lists
-------------------------------------------------------------------------- */
ul #typography {
	list-style-type: disc;
	font-family: teliaFont, sans-serif;
	color: #121214;
	font-size: 13px;
	line-height: 17px;
}

ul #typography  li {
	list-style-type:disc;
}

ol li {
	list-style-type:decimal;
}

ol, ul #typography {
	margin:0 0 25px 0;
}

ul #typography li {
    padding-left: 5px;
	width:auto;	
	
	line-height:16px;
	list-style-position:outside;
	margin:0 0 4px 30px;
}


ol, ul {
	margin:0 0 30px 0;
}

li {
	line-height:16px;
	list-style-position:outside;
	margin:0 0 4px 40px;
}

ol li {
	list-style-type:decimal;
}

ul li {
	list-style-type:disc;
}


/* Paragraph types
-------------------------------------------------------------------------- */
p.abstract { font-weight:bold; }


 /* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

 /* `HTML example on webpage 
----------------------------------------------------------------------------------------------------*/
	pre {
        display: block;
        border: #999 solid 1px;
        overflow:auto;
        max-height:340px;
        font-size: 12px;
        width: auto;
        padding: 5px 10px 10px 10px;
        background:#FFF;
        margin:0 10px 10px 10px;
        color:#0080FF
}