Team:Calgary Entrepreneurial/Stylesheets/basicpage.css

From 2013.igem.org

Revision as of 17:08, 28 October 2013

#bodyContent{ background: #FDFDFD; }

#maincontainer{ position: relative; margin: 0 auto 0 auto; max-width: 1150px; width: 100%; }

#sidebar{ background: #FDFDFD; /*weird borders on iOS with background*/ display: inline-block; min-width: 100px; margin-right: 0; margin-top: 9em; max-width: 270px; position: relative; width: 24%; }

/*only cascades when the sidebar hits the top*/ #sidebar.fixed{ margin-top: 4em; position: fixed; z-index: 3; }

#sidebar ul{ border: none; border-right: 3px solid #777777; }

#sidebar ul li{ display: block; margin: 0; padding: 0; text-align: right; }

#sidebar ul li a{ color: #333333 !important; font-size: 1.2rem; line-height: 1.35rem; padding: 0.5em 1em 0.5em 0.5em; margin-right: -3px; /*crosses border for seamless mouseover*/ }

#sidebar ul li a:hover{ background: transparent; color: #7cb83d !important; }

/*submenu*/ #sidebar ul li ul{ border: none; margin-top: -2em; position: absolute; left: 100%; padding: 0; width: 100%;

display: none; z-index: 4; }

#sidebar ul li:hover ul{ background: #FFFFFF; box-shadow: 0px 2px 5px #777777; display: block; }

/*submenu li*/ #sidebar ul li ul li{ margin: 0; }

/*submenu link*/ #sidebar ul li ul li a{ color: #000000 !important; font-size: 1rem; font-weight: 400; line-height: 1.2rem; padding: .75em 1em; text-align: left; }

#maincontent{ display: inline-block; float: right; width: 72%; margin-left: 0; margin-right: 2%; margin-top: 3em; padding-top: 6em; /*used to activate JS menu a little faster*/ padding-bottom: 2em; }

#maincontent p{ padding: 0.5rem 0 0.5rem 1rem; }

#maincontent img{ max-width: 100%; height: auto; }

#abstractcontainer{ position: relative; text-align: right; margin-bottom: 1em; }

/*NOCHALK is true, so we push everything down*/ #abstractcontainer.true{ text-align: inherit; }

#abstractcontainer.true #abstractbox{ bottom: 0; position: relative; }

#abstractbox{ background: #7cb83d; display: inline-block; margin-bottom: 0; padding: 1.5em; position: absolute; bottom: -1em; left: 0;

width: 65%; z-index: 2; }

#abstractbox h1, #abstractbox p{ color: white; padding: 0; text-align: left; }

#abstractbox h1{ font-size: 1.8rem; margin: 0 0 1.5rem 0 !important; }

#abstractbox p + p, #abstractbox p + p + p, #abstractbox + p, #abstractbox + p + p{ padding: 0; }

img.chalk{ max-height: 20em; }

div.thumb{ border: none; margin: 1em 0; }

div.thumb div{ background: #FFFFFF; border: none; }

div.thumb > div{ box-shadow: 0px 2px 5px #AAAAAA; }

/*figure*/ div.thumb div a img{ border: none; }

/*caption*/ div.thumb div div.thumbcaption{ border-top: 2px solid #AAAAAA; color: #333333; font-family: Roboto, sans-serif; font-size: .9rem; font-weight: 500; line-height: 1.2rem; padding-top: .7em !important; }

@media screen and (max-width: 1050px){ #sidebar ul{ border: none; border-right: 3px solid #777777; }

#sidebar ul li{ display: block; padding: 0; text-align: right; }

#sidebar ul li a{ color: #333333 !important; font-size: 1.05rem; line-height: 1.2rem; padding: 0.5em .75em 0.5em 0.5em; }

#sidebar ul li ul{ margin-top: -1.5em; margin-bottom: 0; }

/*submenu li*/ #sidebar ul li ul li{ margin: 0; padding: 0; }

/*submenu link*/ #sidebar ul li ul li a{ color: #000000 !important; font-size: .9rem; font-weight: 500; line-height: 1.1rem; padding: .6em .5em; }

#maincontent{ margin-right: 1.5%; width: 73%; }

#abstractcontainer{ margin-top: 2.5em; }

#abstractbox{ width: 63%; }

img.chalk{ max-width: 60%;

}

div.thumb{ border: none; margin: 1em 0; }

/*figure container*/ div.thumb div{ background: #FFFFFF; border: none; }

div.thumb > div{ box-shadow: 0px 2px 5px #AAAAAA; max-width: 98% !important; }

/*figure*/ div.thumb div a img{ border: none; max-width: 100%; height: auto; }

/*caption*/ div.thumb div div.thumbcaption{ border-top: 2px solid #AAAAAA; color: #333333; font-family: Roboto, sans-serif; font-size: .9rem; font-weight: 500; line-height: 1.2rem; padding-top: .7em !important; } }

@media screen and (max-width: 768px){ #sidebar{ box-shadow: 0px 2px 2px #999999; margin: 5em 0 0 0; max-width: none; padding: 0; width: 100%; }

#sidebar ul{ border: none; float: left; margin: 0 1% 1em 1%; width: 48%; }

#sidebar ul li{ display: block; padding: 0; text-align: center; }

#sidebar ul li a{ color: #333333 !important; font-size: 1.15rem; line-height: 1.4rem; padding: .4em 0; }

/*hide submenu for mobile phones. Not enough space. Sorry.*/ #sidebar ul li ul{ display: none; }

#maincontent{ display: block; margin: 1%; padding-top: 1em; width: 98%; }

#maincontent p{ padding: 1rem }

#abstractcontainer{ margin-top: 0; }

#abstractbox{ margin-top: 0; }

#abstractbox{ bottom: 0; position: relative; /*fix up the spacing that was given to non-existent img.chalk*/ padding: 0; width: 100%; }

#abstractbox h1{ padding: 1rem 1rem 0 1rem; }

#abstractbox p{ padding: 0 1rem 1rem 1rem; }

/*delete padding on empty paragraphs generated by MediaWiki template parameters*/ #abstractbox p + p, #abstractbox p + p + p, #abstractbox + p, #abstractbox + p + p, #abstractcontainer + p{ padding: 0; }

img.chalk{ display: none; } }