@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.nav.css");
@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.generics.css");
@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.forms.css");
@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.grists.css");
@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.panels.css");
@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.promotion.css");
@import url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/CSS/lib.apps.css");

@media screen, all {

/*-------------------------------------------------------
 LAYOUT
---------------------------------------------------------*/

/* whole page container */
#sx-wrapper { }
.sx-wo { }
.sx-wi { width: 1280px; background: #fff; margin: auto; }

/* masthead */
#sx-masthead { width: 1280px; background: #fff; margin: 0 auto; }
.sx-mo {}
.sx-mi {}

/* avatar */
#sx-avatar { float: left; margin: 5px auto 15px; }
    
/* social */
#social { float: left; margin: 60px 0 0 100px; }
#social a { display: block; float: left; margin-right: 7px; }
#social img { display: block; }

/* mobile menu button */
#mobile-menu { display: none; float: right; margin: 35px 10px 0 0; width: 59px; height: 59px; background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/mobile-nav-button.png") no-repeat top left; text-indent: -999em; }
    
/* header buttons */
#header-buttons { float: right; margin: 30px 0 0; }
/* needs extra margin when logout button hidden */
.not-logged-in #header-buttons { margin: 60px 0 0; }
#header-buttons a { display: block; float: left; margin-right: 50px; text-decoration: none; color: #0696d7; font-size: 1.071em; font-weight: 600; height: 46px; line-height: 46px; }
#header-buttons a#search-button { background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/search-button.png") no-repeat top left; padding-left: 58px; }
#header-buttons a#login-button { background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/login-button.png") no-repeat top left; padding-left: 60px; margin-right: 43px; }
#header-buttons a#basket-button { background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/basket-button.png") no-repeat top left; padding-left: 67px; }
#header-buttons a#contact-button { background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/contact-button.png") no-repeat top left; padding-left: 54px; margin-right: 30px; }
/* hide 'login' from link when already logged in */
.logged-in .loggedin { display: none; }    
/* and alter image */
.logged-in #header-buttons a#login-button { background: url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/login-button-orange.png") no-repeat top left; color: #e28521; }
/* log out button */
/* the left margin prevents the buttons floating up beside it */
.log-out { float: right; clear: right; margin: 10px 10px 0 200px; }
.log-out a { padding: 10px 25px; background: #e28521; color: #fff; font-weight: bold; }
.not-logged-in .log-out { display: none; }

/* nav + content */
#sx-body { clear: both; background: #fff; margin: auto; }
.sx-bdo { background: #fff; padding: 0; width: 1280px; margin: auto; border: none; }
.sx-bdi { width: 1280px; margin: auto; padding: 0 0 20px 0; }

/* content */
#sx-content { float: right; width: 75%; }
.sx-co { padding: 0 0 0 60px; }
.sx-ci {}

/* generator */
#sx-generator {}

/*-------------------------------------------------------
 SEARCH
---------------------------------------------------------*/
/* search box */
#sx-search { float: none; width: 100%; margin: 0; clear: both; border: none; padding: 0; background: #078bc6; position: absolute; top: -84px; transition: top 0.5s ease-out; }
#sx-search.show-searchbar { top: 0; transition: top 0.25s ease-in; }
#sx-search .sx-si { width: 1280px; margin: 0 auto; }
#sx-search form { width: 33%; margin-left: 33%; background: #0a6d98; float: left; }
#sx-search fieldset { border: 0; padding: 0; margin: 0; }
#sx-search fieldset legend, #sx-search fieldset .question { display: none; }
#sx-search fieldset .fields { float: left; width: 75%; }
#sx-search fieldset .buttons { float: left; width: 25%; text-align: right; }
#sx-search .answer { width: 99%; }
#sx-search .textbox { border: 0; background: #0a6d98; color: #fff; font-size: 1.286em; font-weight: 300; padding: 12px 0 8px 20px; border-left: 1px solid #fff; width: 90%; }
#sx-search .button { display: block; float: right; border: 0; height: 84px; width: 84px; background: transparent url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/search-dropdown-button.png") no-repeat right center; cursor: pointer; text-indent: -999em; padding: 0; }
#sx-search .element { margin: 20px 0 0 30px; }

a#search-close { display: block; float: right; background: transparent url("/EasySiteWeb/EasySite/StyleData/IGEM_Master/Images/search-close-button.png") no-repeat right center; width: 29px; height: 29px; text-indent: -999em; margin-top: 27px; }

/*-------------------------------------------------------
 BREADCRUMB 
---------------------------------------------------------*/
#sx-bct { clear: both; padding: 10px 20px 9px 20px; background: #f4f4f4; margin-bottom: 30px; }
.sx-bi a { text-decoration: none; color: #e28521; }
.sx-bi a:hover { text-decoration: underline; }
.sx-bi a:last-child { color: #005093; }
.sx-bi .sep { color: #aaa; display: inline-block; padding: 0 15px; }

/*-------------------------------------------------------
 FOOTER
---------------------------------------------------------*/
#sx-extras { clear: both; background: #fff; font-size: 1em; padding: 0 0 30px 0; color: #636363; }
#sx-extras .sx-eo { width: 1280px; margin: auto; }
#sx-extras .footer-contact { width: 34%; float: left; }
#sx-extras .footer-links { width: 41%; float: left; }
#sx-extras .footer-contact h2, #sx-extras .footer-links h2 { font-weight: 300; font-size: 2.143em; color: #6895bc; margin: 0 0 0.75em 0; }
#sx-extras .footer-contact p { width: 40%; float: left; line-height: 2; }
#sx-extras .footer-contact p:last-child { width: auto; }

#sx-extras .footer-links ul { margin: 0; padding: 0; list-style-type: none; }
#sx-extras .footer-links li { display: block; width: 50%; float: left; line-height: 2; }
#sx-extras .footer-links a { text-decoration: none; color: #00498e; }
#sx-extras .footer-links a:hover, #sx-extras .footer-links a:active { text-decoration: underline; }

#sx-extras .footer-logos { padding-top: 30px; }
#sx-extras .footer-logos a { display: block; }

/*-------------------------------------------------------
 COLUMNS
---------------------------------------------------------*/
.columns-alpha .column-inner { margin-right: 10px; }

/* use columns beta to remove the right margin on the second of two columns */
.columns-beta .column-alpha .column-inner { margin-right: 10px; }
.columns-beta .column-beta .column-inner { margin: 0; }

/* columns sigma - same as beta but with some added margin at the top of the right column, used on news content page */
.columns-sigma .column-alpha .column-inner { margin-right: 10px; }
.columns-sigma .column-beta .column-inner { margin: 20px 0 0 0; }

/* columns mu are used when we need to switch to a different view for an element for rwd */
.columns-mu .column-outer { width: 100% !important; }
.columns-mu .column-inner { margin: 0; }
.columns-mu .column-beta { display: none; }
/* enable editing */
.loggedin .columns-mu .column-beta { display: block; }

/* columns psi - contact us page */
.columns-psi .column-inner { margin-right: 10px; }
.columns-psi .column-delta .column-inner { margin: 0; }

}

@media print {
/* print friendly */
#sx-help, sx-masthead, #sx-extras, #sx-bct { display: none; }
#sx-nav { width: 0; display: none; }
#sx-content { margin-left: 0px; }

}