/*****************************************************************/
/* Style Sheet for blog.bjornmoren.com */


/****** FONTS ****************************************************/

@font-face 
{
    font-family:"droid_sans";
    src: url("Include/droidsans-webfont.eot");
    src: url("Include/droidsans-webfont.eot?#iefix") format("embedded-opentype"),
         url("Include/droidsans-webfont.woff") format("woff"),
         url("Include/droidsans-webfont.ttf") format("truetype"),
         url("Include/droidsans-webfont.svg#droid_sansbold") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face 
{
    font-family:"droid_sans";
    src: url("Include/droidsans-bold-webfont.eot");
    src: url("Include/droidsans-bold-webfont.eot?#iefix") format("embedded-opentype"),
         url("Include/droidsans-bold-webfont.woff") format("woff"),
         url("Include/droidsans-bold-webfont.ttf") format("truetype"),
         url("Include/droidsans-bold-webfont.svg#droid_sansbold") format("svg");
    font-weight: bold;
    font-style: normal;
}


/****** GENERAL **************************************************/

body, html 
{
	margin:0px;
	padding:0px;
	color:#000000;
	background-color:#dbdbdb; 
	/* background-image:url("Images/BackgroundTexture.jpg"); */
	background-position:center top; 
	font-family:droid_sans, Sans-Serif; 
	font-size:16px; 
}

.mainContainer									/* Main container 1000px wide */
{
	margin:0px auto 0px auto;
	width:1000px; 
	max-width:1000px;
}

#headerContainer, .post, .postEdit, .widget, .postPreview /* Regions with shadow */
{
	box-shadow:0px 0px 15px #aaaaaa;
}

.post, .postEdit, .postPreview, .widget			/* Regions with top right rounded corner */
{
	border-top-right-radius:14px;
}

#headerContainer								/* Page header (top picture) */
{
	margin:6px 0 0 0;
	border-bottom:16px solid #ffffff;
}

#footerContainer								/* Page footer area */							
{
	clear:both;
	padding:20px 0px 20px 0px;
}

.footer											/* Footer text (copyright text) */
{
	color:#555555;
	padding:12px 0px 12px 0px;
	text-align:center;
}

#postsContainer									/* Posts column */
{
	float:left;
	width:700px;
}

#contentIframe									/* Content list loading frame */
{
	display:none;
}


/****** TAGS AND GENERAL FORMATTING ******************************/

a
{
	text-decoration:none;
	color:#2e65b3;
}
a:hover
{
	text-decoration:underline;
	color:#2e65b3;
}

h1
{
	color:#444444;
	margin:25px 30px 10px 30px;
	font-size:28px;
	font-weight:normal;
}
h1 a
{
	text-decoration:none;
	color:#444444;
}
h1 a:hover
{
	text-decoration:underline;
	color:#2e65b3;
}

h2
{
	color:#333333;
	font-size:22px;
	font-weight:bold;
	margin:25px 0px 5px 0px;
}

h3
{
	color:#333333;
	font-size:18px;
	font-weight:bold;
	font-style:italic;
	margin:20px 0px 5px 0px;
}

h6										/* Post folding line (excludes content from index page) */
{
	color:#ffffff;
	background-color:#ffffff;
	font-size:6px;
	padding:0px 0px 0px 0px;
	margin:-10px 0px 0px 0px;
}

p
{
	font-size:100%;
	font-weight:normal;
	margin:15px 0px 15px 0px;
}

blockquote
{
	font-style:italic;
	margin:0px;
	padding-left:10px;
	border-left:25px solid #ecd6bc;
	padding-right:16px;
}

blockquote:before {
	content:url("Images/Quote.png");
    position:relative;
    display:inline;
    width:18px; 
    height:14px;
    margin-left:-18px;
    left:-12px;
}

pre
{
	font-family:"Courier New";
	font-size:14px;
	line-height:110%;
	white-space:pre;
	background-color:#f0f0f0;
	border:1px solid #d0d0d0;
	padding:10px;
    word-break: break-word;
}

li
{
	margin:0px 0px 10px 0px;
}

.imageLeft
{
	border:0px;
	float:left;
	margin:5px 20px 10px 0px;
	outline:4px solid #dddddd;
}

.imageLeftClear
{
	border:0px;
	display:block;
	margin:5px auto 10px 0px;
	outline:4px solid #dddddd;
}

.imageCenter
{
	border:0px;
	display:block;
	margin:5px auto 10px auto;
	outline:4px solid #dddddd;
}

.imageRight
{
	border:0px;
	float:right;
	margin:5px 0px 15px 20px;
	outline:4px solid #dddddd;
}

.imageRightClear
{
	border:0px;
	display:block;
	margin:5px 0px 10px auto;
	outline:4px solid #dddddd;
}

.imageInline
{
	border:0px;
	display:inline;
}

/****** POSTS ****************************************************/

.post, .postEdit, .postPreview					/* Post wrapper. postEdit = when in edit mode (shows additional content). postPreview = the preview on Index.html */
{
	width:700px; 
	background-color:#ffffff; 
	margin:20px 0px 0px 0px;
	padding:0px 0px 20px 0px;
	border-bottom-left-radius:14px;
}

.postTop										/* Top colored bar of the post (topics and date) */
{
	margin:0px;
	padding:4px 30px 6px 30px;
	font-size:18px;
	color:#6c5a4c;
	background-color:#e9c6aa;
	text-align:right;
	border-top-right-radius:12px;
	border:1px solid #f2ceb1;
}

.post img, .postEdit img, .postPreview img		/* Post images */
{
	max-width:640px;
}

.post iframe
{
	outline:4px solid #dddddd;
}

.post .postText a, .postEdit .postText a, .postReadMore a
{
	text-decoration:underline;
}

.postPreview .postText a
{
	color:#000000;
}

.post h1
{
	text-decoration:none;
}

.postEdit h6		
{
	background-color:#e5e5e5;
}

.postText, .postReadMore, .postBottom
{
	margin:5px 30px 5px 30px;
}

.post .postBottom, .postEdit .postBottom
{
	clear:both;
	text-align:center;
	font-weight:bold;
}

.postPreview .postBottom
{
	margin:0px;
	padding:0px;
	height:1px;
	clear:both;
}

.postText:focus, .postHTML:focus, h1:focus, .postTopics:focus, .postDate:focus, 
.postText[contenteditable=true], .postHTML[contenteditable=true], h1[contenteditable=true], .postTopics[contenteditable=true], .postDate[contenteditable=true]
{
	outline:4px solid rgba(0,0,0,0.1);   
}

.postTopics
{
	padding-top:2px;
	float:left;
	font-size:16px;
	font-weight:normal;
}

.postDate
{
	font-size:16px;
	font-weight:normal;
}

.postMetaData
{
	margin:5px 30px 5px 30px;
}

.postHTML
{
	font-family:"Courier New";
	margin:5px 30px 5px 30px;
	font-size:14px;
	line-height:110%;
}

.postReadMore
{
	text-align:right;
}

.postContent
{
	margin:0px 30px 0px 30px;
}


/****** WIDGETS **************************************************/

#widgetsContainer								/* Side widgets column */
{
	float:right;
	width:300px;
}

.widget											/* Widget wrapper */
{
	margin:0px 0px 0px auto; 
	width:275px; 
	max-width:275px;
	min-height:100px;
	background-color:#ffffff; 
	margin:20px 0px 0px auto;
	padding:0px 0px 8px 0px;
	border-bottom-left-radius:14px;
}

.widgetHeader									/* Widget header with colored background */
{
	margin:0px;
	padding:5px 10px 5px 10px;
	color:#445063;
	background-color:#bfd0ed;
	font-size:18px;
	font-weight:bold;
	border-top-right-radius:12px;
	border:1px solid #c6d8f6;
}

.widgetText										/* Text in a widget */
{
	margin:7px 10px 7px 10px;
}

.widgetSubHeader								/* Widget sub header (for topics of posts) */
{
	margin:0px;
	padding:7px 10px 7px 10px;
	background-color:#dce6f6;
}

.widgetSubHeader a								/* Links in the topics list */
{
    white-space:nowrap;
}

.widgetList										/* Widget list, long lists get a scrollbar */
{
	min-height:70px;
}

.widgetListItem									/* Widget list item, horizontal overflow get ellipses */
{
	margin:7px 10px 7px 10px;
	overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.haddockContainer
{
	background-image:url("Images/CaptainHaddock.jpg");
	width:235px;
	height:82px;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	padding:0px 20px 178px 20px;
	font-weight:bold;
}

.widgetArt										/* Widget with artful picture */
{
	width:275px; 
	margin:15px 2px 9px 0px;
}

.widgetSubText
{
	font-size:18px;
	font-weight:bold;
	text-align:center;
}


/****** ADMIN INTERFACE ******************************************/

#adminContainer									/* Container for the admin bar */
{
	height:20px; 
}

.adminBar										/* Admin bar with button tools */
{
	position:fixed;
	z-index:2;
	left:0px;
	padding:10px 10px 10px 10px;
	width:100%;
	text-align:center;
	background-color:#000000;
	color:#ffffff;
}

#loadingAnimation									/* Animation that shows the page is loading data from the server */
{
	width:24px; 
	height:24px; 
	position:fixed; 
	display:block;
	left:12px;
	top:8px;
	z-index:4;
}

.buttonGroup									/* Group of admin buttons */
{
	margin:0px 5px 0px 5px;
}

.adminButton									/* Primary admin button (New, Remove, Publish) */
{
	color:#ffffff;
	background-color:#72aa78;
	padding:2px 5px 2px 5px;
	margin:0px 3px 0px 3px;
	border:2px solid #4e7452;
	border-radius:6px;
	cursor:pointer;
}
.adminButton:hover
{
	background-color:#83c38a;
}
.adminButton:active
{
	background-color:#4e7452;
}

.popupButton									/* Popup tool admin button  (Content) */
{
	color:#ffffff;
	background-color:#ad917a;
	padding:2px 5px 2px 5px;
	margin:0px 3px 0px 3px;
	border:2px solid #887260;
	border-radius:6px;
	cursor:pointer;
}
.popupButton:hover
{
	background-color:#c9a88e;
}
.popupButton:active
{
	background-color:#887260;
}

.popupButton2									/* Popup tool admin button  (Media) */
{
	color:#ffffff;
	background-color:#9f79ae;
	padding:2px 5px 2px 5px;
	margin:0px 3px 0px 3px;
	border:2px solid #815891;
	border-radius:6px;
	cursor:pointer;
}
.popupButton2:hover
{
	background-color:#b58ac6;
}
.popupButton2:active
{
	background-color:#815891;
}

.toolButton										/* Admin tool button (Text formatting) */
{
	color:#ffffff;
	background-color:#888888;
	padding:2px 5px 2px 5px;
	margin:0px 3px 0px 3px;
	border-radius:2px;
	cursor:pointer;
}
.toolButton:hover
{
	background-color:#a2a2a2;
}
.toolButton:active
{
	background-color:#717171;
}

.closeButton									/* Close button (red cross) */
{
	background-color:#ab5757;
	padding:2px 10px 2px 10px;
	margin:0px 3px 0px 3px;
	border-radius:2px;
	cursor:pointer;
}
.closeButton:hover
{
	background-color:#c36363;
}
.closeButton:active
{
	background-color:#974d4d;
}


/****** POPUP PAGES (CONTENT, MEDIA) *****************************/

#popupPageContainer								/* Container with dark backdrop */
{
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	z-index:3;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
}

#popupIframe									/* Iframe that loads the popup content (Content.aspx, Media.aspx) */
{
	background-color:#ffffff;
	border:0px;
	width:900px; 
	display:block;
	height:90%; 
	margin:50px auto 0px auto;
}