@import url('movieRatings.css');

/** declare upcoming webfonts used for headlines */
@font-face { font-family: 'Century Gothic'; src: url('http://skriblerier.net/fonts/Century Gothic.ttf') }
@font-face { font-family: 'Calibri'; src: url('http://skriblerier.net/fonts/Calibri Bold.ttf') }


/** for 0-349px screens */
@media screen and (max-width: 349px) {
	* { margin: 0; padding: 0 }
	body { font-family: Tahoma, Arial; font-size: 75%; max-width: 349px }
	img { max-width: 100% }
	#header h1 { background: #5992a5 }
	#header h1 img { display: block; float: right }
	#menu { background: #dfebf1 }
	#menu:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
	#menu li { list-style: none }
	#menu a { background: #dfebf1; display: block; color: #256275; padding: 5px 10px; float: left }
	#menu #active { background: #fff; color: #555; text-shadow: none; padding: 3px 5px }
	#right, #left { padding: 15px 5px 5px 5px }
	#left h3.title { font-size: 1.3em; margin-bottom: 5px }
	p { margin: 1em 0 }		
	.eba_article .article_info { color: #999; text-transform: lowercase }
	#copyright { background: #000; color: #fff; padding: 5px }
	#copyright a { color: #fff }
	#subMenu { background: #dfebf1; padding: 1px; text-transform: uppercase; margin-bottom: 15px }
	#subMenu li { list-style: none }
	#subMenu li a { color: #256276; display: block; padding: 3px 5px }
	#subMenu li a, #subMenu li a:visited { color: #256276 }
	#subMenu li a:hover { color: #800000; text-decoration: none }
	#subMenu li.active { background: #fff; padding: 3px 5px }
	#subMenu .seenMoviesForm { display: none }
}
@media screen and (min-width: 350px) and (max-width: 699px) {
	#right, #copyright { padding: 10px !important }
	h1 { margin: 0 !important }
	#header { clear: both; height: 46px !important }
	#header img { display: block !important }
	#menu { clear: both; border-top: 1px solid #fff !important }
	#content { clear: both !important }
	#left { padding: 10px !important }
	#left h3.title { font-size: 1.5em }
	#header ul { margin: 0; padding-left: 0; background: #256275; color: #fff; height: 25px !important }
	#header ul li a { display: block; height: 25px; line-height: 25px !important }
	#right #twitter { padding-top: 10px }
}

@media screen and (min-width: 700px) {
	body { text-align: center }
	#left { width: 600px; float: left; padding: 14px 14px 14px 0 }
	#right { width: 368px; margin-left: 10px; float: right; padding: 14px; margin-top: 15px }
	#header { width: 1020px; margin: auto }
	#header h1 { float: left; margin-top: 10px }
	#header ul { float: right; height: 25px; margin-top: 30px }
	#content { width: 1020px; margin: auto; clear: both }
	#copyright { width: 1020px; margin: auto; clear: both; padding: 10px 0 }
}


h3.title { line-height: 120%; font-family: "Century Gothic" !important; font-size: 1.8em; font-weight: normal; letter-spacing: -.06em; margin: 0 }


.m { margin-top: 30px; padding: 10px 15px; margin: 15px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid transparent; background: #dfebf1; text-shadow: #fff 0 1px 1px }
.m:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
.m .n { width: 5%; float: left; font-size: 18px; color: #800000 }
.m .t { width: 65%; float: left; font-size: 18px; color: #800000; text-transform: uppercase }
.m .d { width: 30%; float: left; font-size: 14px; text-align: right }
.m .d:before { content: "av " }
.m p { margin: 30px 0 0 0 }
.m p img[width="600"] { border: 2px solid #fff; padding: 1px }
.m .t a { color: #800000 !important }

/** horizontal rule */
div.hr, hr { border: 1px solid #c2cfdc; background: #f0f5fa; margin: 15px 0; height: 2px; clear: both }
	
/** IE 6 makes the horizontal rule too big. Defining a font-size solves the issue */
* html div.hr, hr { font-size: 2px }

/** right column */
#right { margin-bottom: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-size: 11px; text-align: left; background: #dfebf1; text-shadow: #fff 0 1px 1px }
#right a { text-decoration: none; border-bottom: 1px dotted #256276; color: #256276 }
#right a:visited { color: #606; border-bottom: 1px dotted #606; text-decoration: none }
#right a:hover { border-bottom: 1px solid #800000; color: #800000 }
#right p { margin-top: -3px; line-height: 16px }
#right h4 { margin: 15px 0 7px 0; font-size: 14px; letter-spacing: -.5px; border-bottom: 1px dotted #999; font-family: Calibri, Tahoma; clear: both }
#right h4 a:hover { border-bottom: 0 }
#right ul { padding-left: 0; margin: -3px 0 15px 0 }
#right li { line-height: 19px; background: transparent url(/bilder/design/listepunkt.png) no-repeat 0 5px; list-style: none; padding-left: 1.8em }
#right #about { margin-top: 0 }
#right #twitter a, #right #icheckmovies a, #right #lastfm a { border-bottom: 0 }

/** contact/info page */
.email { vertical-align: middle; background: url(/bilder/epostadr.jpg); display: inline-block; width: 134px; height: 12px }

@media screen and (min-width: 350px) {
	/** defaults */
	body { margin: 0; padding: 0; font-family: Tahoma, Arial, sans-serif }
	blockquote { margin: 10px 0 0 0; background: #f8f8f8; padding: 10px; font-style: italic; border-top: 1px solid #999; border-bottom: 1px solid #999 }
	input { border: 1px solid #ccc; padding: 3px }
	input:focus { background: #fffbd0 }
	form { margin: 0 }
	a img { border: 0 }
	a { outline: 0 }
	
	/** blog images */
	p img[width="600"] { border: 2px solid #dfdfdf; padding: 1px }
	
	/** header and main menu */
	#header { height: 65px; background-image: url(/bilder/design/headerbg.png) !important }
	#header h1 { font-family: Arial, Tahoma, sans-serif; font-size: 21px }
	#header li { display: block; height: 35px; float: left; list-style-type: none; line-height: 30px; margin-right: 20px; font-size: 13px; padding: 0 8px; text-transform: lowercase }
	#header a { text-decoration: none; color: #fff }
	#header a:hover { color: #f1c702 }
	#menu { text-shadow: #000 0 1px 0}
	#menu #active { border-radius: 7px 7px 0 0; border: 1px solid transparent; background: #fff; color: #555; text-shadow: none }

	/** content */
	#content h4.info { text-transform: lowercase; font-weight: normal; color: #174553; margin-top: 5px }
	
	/** left content (main) */
	#left { text-align: left; font-size: 12px; line-height: 19px; color: #333 }
	#left h3.sub { font-size: 15px }
	#left h4.sub { font-size: 13px }
	#left h3.sub a, #left h4.sub a { color: #800000 }
	#left a, #left a:visited { color: #333; text-decoration: underline }
	#left a:hover { text-decoration: none; color: #800000 }

	/** tables */
	table.style { border: 1px solid #dfebf1; border-collapse: collapse; width: 100%; margin-top: 0; margin-bottom: 10px }
	table.style th { background: #dfebf1; color: #800000; text-align: left; text-transform: uppercase }
	table.style th a:hover { background: none }
	table.style td, table.style th { padding: 4px 7px }
	.border { border-bottom: 1px dotted #dfebf1 }
	.border:hover { background: #ebf2f6; border-bottom: 1px solid #dfebf1; border-top: 1px solid #dfebf1 }
	.border:hover a { color: #800000 }
	.center { text-align: center }
	.odd { background: #f8f8f8 }
	
	/** firefox adjustments */
	#left .sub { margin-bottom: 2px; font-weight: bold }
	#left .sub + p { margin-top: 0 }
	
	/** spam dialog in comment form */
	#commentspaminfo { background: #dfebf1; border: 1px dotted #a3bcc9; padding: 1% }
	
	/** movies */
	.moviesimg:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
	.moviesimg div { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #000; text-align: center; border: 1px solid #e7e7e7; padding: 0 6px; margin: 0 20px 20px 0; float: left; width: 116px; height: 178px }
	.moviesimg div.withRating { height: 200px }
	.moviesimg a { border-bottom: none !important }
	.moviesimg div:hover { background: #eef6fa; border: 1px solid #dfebf1; color: #800000 }
	
	.moviesimg div img { opacity: .7 }
	.moviesimg div:hover img { opacity: 1 }
	
	.moviesimg p + p { font-size: 90%; margin-top: -10px }
	.imdb { font-size: 10px; color: #666 !important; border-bottom: none !important; margin-left: 5px }
	.cover { max-width: 100px; height: 35px }
	.seenMoviesLinkLists { display: none }
	
	/** remove hover effect for feed icon next to comment header at each article page */
	h3#comments a, h3#comments a:hover { border: 0; background: #fff }
	h3.title a { text-decoration: none !important }
	h3.title a:hover { color: #800000 !important }
	
	/** bottom */
	#copyright { font-size: 11px; line-height: 160%; text-transform: uppercase; color: #333; text-align: left; border-top: 1px dotted #ccc; text-decoration: none }
	#copyright a { color: #333 }
	#copyright a:hover { color: #800000 }
	
	/** lists in blog articles */
	.list_blog { list-style-position: inside }
	.list_blog_with_margin li { margin-bottom: 10px }
	.list_blog, .list_blog { padding-left: 0; margin-left: 0 }
	.list_blog li ul, .list_blog li ul { padding-left: 15px; margin-left: 15px }
	.list_blog li { list-style-type: square }
	.list_blog .subHeaderInList { color: #800000; font-weight: bold }
	
	/** movie lists in blog articles */
	.listBlogMovies dd { margin: 0 0 10px 15px }
	.listBlogMovies dt.highlight { font-style: italic; color: #800000; text-transform: uppercase }
	.listBlogMovies dt.highlight a { color: #800000 !important }
	
	/** miscellaneous */
	.right { float: right }
	
	/** last.fm */
	.lastfm li { margin: 5px 0; padding: 3px; line-height: 16px }
	.lastfm li span { color: #800000 }
	.lastfm li em { color: #333; font-style: normal }
	
	/** new boxes */
	.infoBox { border: 1px solid #dfebf1; padding: 10px; font-size: 110%; margin: 5px 0 10px 0 }
	.infoBox h4 { background: #dfebf1; margin: -10px -10px 10px -10px; padding: 5px 10px }
	
	/** cv */
	#cv h4, #cv dt, #cv dd { border-bottom: 1px solid #ececec }
	#cv h4 { margin-top: 20px; font-size: 14px; text-transform: uppercase; margin-bottom: 0; padding: 0 2px }
	#cv dl { margin-top: 1px }
	#cv dl:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
	#cv dt { text-transform: lowercase; width: 22%; float: left; font-weight: bold; background: #f6f6f6; text-align: right; padding: 2px 1% 2px 0 }
	#cv dt:after { content: ":" }
	#cv dd { width: 77%; float: right; margin-left: 0; padding: 2px 0; text-indent: 5px }
	#cv .subItem { margin-left: 15px; font-style: normal; font-style: italic }
	.cvLettersOfRecommandation:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
	.cvLettersOfRecommandation img { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid transparent; background: #dfebf1; padding: 1px; display: block }
	.cvLettersOfRecommandation a { margin-right: 15px; float: left; display: block; width: 150px }
	.cvLettersOfRecommandation a:hover { border-color: #c2d3dc }
	
	/** scales down images when reduzing browser windows size */
	p img, embed { max-width: 100% }
	
	/** archive: months with none articles */
	span.nopost { color: #ccc }
	
	/** information box when a comment has been added */
	.commentmsg { margin: 10px 0; background: #e8e8e8; border: 1px dotted #ccc; padding: 5px; font-weight: bold }
	
	/** feed icon in Internet Explorer */
	#comments a img { border: 0; width: 10px; height: 11px; vertical-align: middle }
	
	/** input fields */
	input { color: #333; font-size: 11px }
	input.fields, textarea.fields { padding: 3px; width: 300px }
	input[disabled] { color: #ccc }
	
	/** article display */
	.eba_article li { list-style-type: square; list-style-position: inside; margin-bottom: 10px }
	.eba_article .illustration { border: 1px solid #ccc; padding: 2px; float: right; margin: 1.5em 0 0.5em 1.2em; background: #fff; font-size: 11px; text-align: left }
	.eba_article .article_info { margin-top: 5px; color: #999; text-transform: lowercase }
	.eba_article .article_info a { color: #999 !important; text-decoration: underline }
	.eba_article .article_info a:hover { text-decoration: none }
	.eba_article:after { content: ""; display: block; clear: both; visibility: hidden }
	.eba_article .illustration img { display: block }

	/** comment display */
	.eba_comment { border: 1px dotted #ccc; margin-bottom: 5px }
	.eba_comment .commentinfo { background: #c0d4df; padding: 5px 10px; height: 19px; border-bottom: 1px dotted #ccc }
	.site_owner { background: #c0d4df }
	.site_owner .commentinfo { border-bottom: 2px solid #fff }
	.site_owner a { text-decoration: underline }
	.site_owner a:hover { text-decoration: none }
	.left { float: left; height: 19px; line-height: 19px; width: 90% }
	.gravatar { float: right; margin-right: -5px; width: 10% }
	.gravatar img { border: 1px solid #ccc; padding: 1px; background: #fff; float: right; margin-left: 5px }
	.commenttext { padding: 0 10px }
	
	/** add comment */
	#eba_post_comment { border: 1px dotted #c0d4df; border-top-style: solid; border-left-width: 2px; border-left-style: solid; padding: 0 5px; margin: 10px 0 }
	#eba_post_comment h3 { padding: 5px; margin: -0 -5px 0 -5px; background: #c0d4df; font-size: 110% }
	#eba_post_comment #hide { display: none }
	#eba_post_comment input[type="text"] { background: url(images/inputborder.png) top left repeat-y; padding: 4px 1%; float: left; width: 31%; border: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-bottom: 2px }
	#eba_post_comment input[type="text"]:focus, #eba_post_comment textarea:focus { background-color: #fff999 }
	#eba_post_comment #smilies { margin-top: 10px }
	#eba_post_comment textarea { border: 1px solid #ccc }
	#eba_post_comment #smilies a img { border: none }
	#eba_post_comment textarea { margin-top: 2px; width: 98%; padding: 3px .5% }
	#eba_post_comment .gray { color: #999 }
	#eba_post_comment input[type="checkbox"] { vertical-align: middle } /** middle-align checkboxes in Fx */
	
	/** middle-align checkboxes in Fx */
	#eba_post_comment input[type="checkbox"] { vertical-align: middle }
	
	/** simple layout archive */
	.simplelayout { padding-left: 0; margin-left: 0 }
	.simplelayout li { list-style: none; margin-bottom: 15px }
	.simplelayout li h3 { font-size: 110% !important; font-weight: bold; display: inline; margin-right: 3px }
	.inline { display: inline }
	.date { color: #999; text-transform: uppercase }
	
	/** category login */
	.login_cat_public div { margin-top: 20px }
	.login_cat_public input[type="submit"] { font-weight: bold }
	.login_cat_public input[type="password"] { width: 150px }
	
	/** search box in right column */
	#searchInputs input[type="text"] { width: 69% }
	#searchInputs input[type="submit"] { width: 26%; margin-left: 2% }

	.login_cat_public input[type="submit"] { font-weight: bold }
	.login_cat_public input[type="password"] { width: 150px }
	
	/** search box in right column */
	#searchInputs input[type="text"] { width: 69% }
	#searchInputs input[type="submit"] { width: 26%; margin-left: 2% }
}

#subMenu { background: #dfebf1; padding: 1px; font-size: 11px; text-transform: uppercase; list-style: none }
#subMenu:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
#subMenu li { float: left; list-style: none }
#subMenu li a { padding: 0 25px; display: block; height: 25px; line-height: 25px }
#subMenu li.active { background: #fff; display: block; height: 25px; line-height: 25px; padding: 0 25px }
#subMenu li ul { margin: 1px 0 0 0; padding: 0; position: absolute; visibility: hidden }
#subMenu li ul li { padding: 0; float: none; display: inline }
#subMenu li ul li a, #jsddm li ul li a:visited { text-decoration: none; display: block; color: #000; border-top: 1px solid #fff; text-align: center; background: #dfebf1; padding: 0 5px; border-right: 1px solid white; width: 94px; white-space: nowrap }
#subMenu li ul li a:hover { color: #ce0000; background: #bfd2dc }

.roundedCorners { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #dfebf1 }