/*Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

body { font-family: Helvetica, Arial, sans-serif; padding: 0; margin: 0; background-color: #fff; } h1, h2, h3, h4, h5, h6 { margin: 5px 0 0 0; padding: 0; } p { margin: 0.5em 0 1em 0; padding: 0; font-size: 100%; line-height: 1.5em; } .uppdatum{ float: right; margin: 0.5em 0 1em 0; padding: 0; font-size: 73%; line-height: 1.0em; } img { display: block; max-width: 90%; max-height: 80%; height: auto; margin: auto; border-radius: 5px; }
/*Header banner*/
.banner { width: 100%; height: 50px; position: fixed; padding: 5px; top: 0; left: 0; z-index: 100; background-color: #008000; background: -webkit-linear-gradient(0deg, green, yellow); background: -moz-linear-gradient(0deg, green, yellow); background: -o-linear-gradient(0deg, green, yellow); background: linear-gradient(0deg, green, yellow); color: white; -webkit-box-shadow: inset 3px 3px 3px rgba(255,255,255,0.7), inset -3px -3px 3px rgba(0,0,0,0.5), 5px 5px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 3px 3px 3px rgba(255,255,255,0.7), inset -3px -3px 3px rgba(0,0,0,0.5), 5px 5px 5px rgba(0,0,0,0.5); -o-box-shadow: inset 3px 3px 3px rgba(255,255,255,0.7), inset -3px -3px 3px rgba(0,0,0,0.5), 5px 5px 5px rgba(0,0,0,0.5); box-shadow: inset 3px 3px 3px rgba(255,255,255,0.7), inset -3px -3px 3px rgba(0,0,0,0.5), 5px 5px 5px rgba(0,0,0,0.5); }
.banner h1{ display: inline; font-size: 2em; margin-left: 10px; color: #fff; padding: auto; line-height: 1.15em; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }
/*Menu*/
#menu-icon { display: hidden; width: 40px; height: 40px; background-image: url(../images/menu.png); } a:hover#menu-icon { border-radius: 4px 4px 0 0; } a { color: #000; text-decoration: none; font-weight: bold; } a:hover { text-decoration: none; font-weight: bold; } section a:hover { text-decoration: none; font-weight: bold; } a img { filter: opacity(80%); } a img:hover { filter: opacity(100%); } nav { float: right; padding: 0px; } nav ul { margin-right: 15px; padding: 0; } nav ul li { list-style: none; float: left; font-size: 100%; display: inline-block; float: left; padding:10px; } nav ul li a:link, nav ul li a:visited { display: block; padding: 10px 10px; text-decoration: none; color: #000; }
/*Main*/
main { max-width: 1200px; padding: 5px auto; margin: 5px auto; background-color: #FFF; } section { clear: both; padding: 5px 25px; margin: 5px auto; background-color: #FFF; } .pagetop { clear: both; position: relative; background-color: rgba(214,214,214,0.5); background: -webkit-linear-gradient(0deg, #D6D6D6, #A7A7A7); background: -moz-linear-gradient(0deg, #D6D6D6, #A7A7A7); background: -o-linear-gradient(0deg, #D6D6D6, #A7A7A7); background: linear-gradient(0deg, #D6D6D6, #A7A7A7); border-radius: 15px; max-width: 900px; margin: 80px auto 0 auto; }

div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*Box-sizing reset*/
.masonry { margin: 1em auto; max-width: 800px; column-gap: 1em; } /*Masonry Container*/
.item { background-color: #00c900; background: -webkit-linear-gradient(0deg, #00c900, #00e300); background: -moz-linear-gradient(0deg, #00c900, #00e300); background: -o-linear-gradient(0deg, #00c900, #00e300); background: linear-gradient(0deg, #00c900, #00e300); color: black; display: inline-block; padding: 5px 1px; margin: 5px; border-radius: 10px; width: 100%; } /*Masonry Brick*/

@media only screen and (min-width:1024px) { .masonry { column-count:3;} } /*Masonry large screens*/
@media only screen and (max-width:1023px) and (min-width:768px) { .masonry {column-count:3;} } /*Masonry medium-sized screens*/
@media only screen and (max-width:767px) and (min-width:540px) { .masonry {column-count:2;} } /*Masonry small screens*/

article { padding: 5px; margin: 5px; } .articles { float: left; width: 30%; margin-right: 5%; } .artstitle { text-align: center; padding: 5px; } .two-arts { clear: both; position: relative; max-width: 900px; margin: 10px auto 0 auto; } .halfs { float: left; width: 47.5%; margin-right: 5%; background-color: rgba(242,242,242,1); background: -webkit-linear-gradient(0deg, #F2F2F2, #E6E6E6); background: -moz-linear-gradient(0deg, #F2F2F2, #E6E6E6); background: -o-linear-gradient(0deg, #F2F2F2, #E6E6E6); background: linear-gradient(0deg, #F2F2F2, #E6E6E6); border-radius: 10px; } .halfs-last { margin-right: 0; margin: 0 0 50px 0; } .halfs p { margin: 5px 0; text-align: center; } .first-row-last { margin: 0 0 10px 0; } .one-third-last { margin: 0 0 50px 0; } p a:link { text-decoration: none; font-weight: normal; } 

/*Contact*/
section.contact { visibility: hidden; } .cont-area { width: 100%; } .cont-area textarea{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } #ascode { display: block; width: 20%;	margin: 10px auto 5px; border: none; border-radius: 10px; }

/*Footer*/
footer { width: 100%; position: fixed; bottom: 0; left: 0; text-align: center; height: 30px; line-height: 30px; background-color: #008000; background: -webkit-linear-gradient(180deg, green, yellow); background: -moz-linear-gradient(180deg, green, yellow); background: -o-linear-gradient(180deg, green, yellow); background: linear-gradient(180deg, green, yellow); border-radius: 5px; color: white; font-weight: bold; padding: 5px 0 0 0; margin-top: 5px; -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.5); -moz-box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.5); -o-box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.5); box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7), inset -1px -1px 1px rgba(0,0,0,0.5), 3px 3px 3px rgba(0,0,0,0.5); }

.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }