[ryf-theme.git] / css / style.css

/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

body { margin: 0; min-width: 320px; }

a { transition: 0.3s; }


/* etcetera */


.feed-icons,
.more-link {
  margin-top: 15px;
  clear: both;
}
.more-link {
  font-weight: bold;
}

.block-views {
  margin-top: 20px;
}

/* Navbar */


.navbar-default {
  background: #000;
  color: #FFF;
  border: none;
  border-radius: 0px;
  box-sizing: content-box;
  align-items: center;
  margin-bottom: 100px;
  min-height: 100px;
}

.navbar-header,
#navbar-collapse {
  max-width: 1150px;
  padding: 0;
  margin: 0 auto;
  border: none;
  overflow: hidden;
}

.navbar-default .navbar-toggle { display: none; }

.navbar-header {
  position: absolute;
  top: 5px;
}

.navbar-brand { display: none; }

#block-ryf-main-menu .navbar-nav { margin-left: 180px; }

.navbar-default .navbar-nav > li > a:focus {
  outline: none;
}

.navbar-default .navbar-nav > li      > a,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li      > a:link,
.navbar-default .navbar-nav > .active > a:link,
.navbar-default .navbar-nav > li      > a:visited,
.navbar-default .navbar-nav > .active > a:visited {
  color: #FFF;
  background: #000;
  border-bottom: 2px solid transparent;
  padding-bottom: 10px;
  margin-bottom: 5px;
}

.navbar-default .navbar-nav > li      > a:hover,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li      > a:active,
.navbar-default .navbar-nav > .active > a:active {
  color: #edd400;
  background: #000;
  border-bottom: 2px solid #edd400;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.page-header {
  border-bottom: 2px solid #000;
  font-size: 2em;
}

.region-header .search-block-form {
  width: 300px;
  float: right;
}

@media screen and (min-width: 520px) and (max-width: 599px) {
  .logo img { margin-left: 50px; }
  #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
}

@media screen and (min-width: 600px) and (max-width: 767px) {
  .logo img { margin-left: 100px; }
  #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
}

@media screen and (max-width: 767px) {
  .logo img { height: 150px; margin-top: 25px; }
  .navbar-default { min-height: 230px; margin-bottom: 30px; }
  #block-ryf-main-menu .navbar-nav { max-width: 130px; }
}

@media screen and (min-width: 768px) {
  .navbar-nav { margin-top: 40px; }
}


/* Selectors */


@media screen and (min-width: 768px) {
  .form-inline .form-item .select-wrapper {
    display: block;
  }
  .form-inline .form-actions {
    margin-top: 21px;
  }
}


/* RYF List */


.ryf-list-row {
  padding: 0;
  margin: 0 auto;
  overflow: auto;
}

.ryf-list {
  float: left;
  margin: 0;
  padding: 0.5em;
  position:relative;
  list-style: none;
}

.ryf-list article {
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 1em;
  box-shadow: 2px 2px 5px #ddd;
  transition: 0.3s;
}

.ryf-list article:hover {
  box-shadow: 0px 0px 5px #aaa;
}

.ryf-list .field--type-image {
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
}

.ryf-list .field--name-field-image {
  margin: 0 auto 10px auto;
}

.ryf-list img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  overflow: hidden;
}

.ryf-list img:hover {
  border-radius: 0;
}

.ryf-list h2 {
  text-align: left;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  padding-bottom: 1em;
}

.ryf-list a {
  color: #118991;
  text-decoration: none;
}

.ryf-list a:hover {
  color: #000;
}

.ryf-list .node-readmore,
.ryf-list .tags,
.ryf-list .supplier {
  width: 100%;
  float: left;
  font-size: 0.9em;
  border-top: 1px solid #ccc4c4;
  margin-top: 5px;
  padding-top: 5px;
  color: #afadad;
}

.ryf-list .node-readmore {
  text-align: right;
}

@media screen and (min-width: 450px) and (max-width: 659px) {
  .ryf-list-row {
    max-width: 600px;
  }
  .ryf-list {
    max-width: 300px;
    float: none;
    margin: 0 auto;
  }
}
@media screen and (min-width: 660px) and (max-width: 767px) {
  .ryf-list-row {
    max-width: 600px;
  }
  .ryf-list-row {
    margin: 0 auto;
    max-width: 660px;
  }
  .ryf-list {
    max-width: 300px;
    float: left;
  }
}


/* Vendors list */


.vendors-list-row {
  padding: 10px;
  margin: 0 auto;
  overflow: auto;
}

@media screen and (max-width: 767px) {
  .vendors-list-row {
    margin: 0px auto;
  }

  .vendors-list {
    margin-bottom: 40px;
    list-style: none;

    overflow: auto;
  }

  .vendors-list .views-field-field-icon {
    width: 220px;

    margin: 0px auto 20px auto;
  }

  .vendors-list .views-field-field-icon img {
    margin: 0 auto;
  }

  .vendors-list .views-field-name,
  .vendors-list .views-field-description__value {
    max-width: 300px;
    margin: 0 auto 10px auto;
  }

  .vendors-list .views-field-name {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }

}

@media screen and (min-width: 768px) {
  .vendors-list-row {
    width: 600px;
    margin: 0px auto;
  }

  .vendors-list {
    list-style: none;
    clear: left;

    overflow: auto;
  }

  .vendors-list .views-field-field-icon {
    width: 220px;
    height: 220px;

    margin-bottom: 40px;

    float: left;
  }

  .vendors-list .views-field-field-icon img {
    margin: 0 auto;
  }

  .vendors-list .views-field-name,
  .vendors-list .views-field-description__value {
    margin-left: 300px;
  }

  .vendors-list .views-field-name {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }
}


/* Sidebars */


@media screen and (max-width: 767px) {
  .path-products #block-views-block-categories-categories-block { display: none; }
}


/* Vendor and Category taxonomy term pages */


.view-taxonomy-term .view-header .field--name-field-icon img {
  margin: 0 auto;
}

.view-filters {
  clear: left;
}

@media screen and (max-width: 559px) {
  .view-taxonomy-term .view-header {
    margin: 0 auto 40px auto;

    overflow: auto;
  }

  .view-taxonomy-term .view-header .field--name-field-icon {
    margin: 0 auto 20px auto;
    width: 220px;
  }

  .view-taxonomy-term .view-header .field--name-description {
    max-width: 360px;
    margin: 0 auto;
    padding: 0 10px;
  }

}

@media screen and (min-width: 560px) {
  .view-taxonomy-term .view-header {
    margin: 0 0 40px 0;

    overflow: auto;
  }

  .view-taxonomy-term .view-header .field--name-field-icon {
    width: 220px;

    float: left;
  }

  .view-taxonomy-term .view-header .field--name-description {
    margin-left: 260px;
  }

}

@media screen and (min-width: 768px) {
  .view-taxonomy-term .view-header {
    max-width: 700px;
  }
}


/* Product */


@media screen and (max-width: 767px) {
  .page-node-type-product .product {
    max-width: 382px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .page-node-type-product .product {
    width: 700px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 992px) {
  .page-node-type-product .product {
    width: 800px;
    margin: 0 auto;
  }
}

.page-node-type-product .product .field--name-field-image {
  padding: 10px;

  border: 1px solid #888;
  border-radius: 10px;
}

.page-node-type-product .product .field--name-field-image img {
  margin: 0 auto;
}

.page-node-type-product .product .field--name-field-extra-images {
  padding: 5px;

  display: flex;
  align-items: center;

  border: 1px solid #888;
  border-radius: 10px;
}

.page-node-type-product .product .field--name-field-extra-images .field--item {
  display: inline-block;
  margin: auto;
  padding: 5px;
}

.page-node-type-product .product .field--name-field-categories,
.page-node-type-product .product .field--name-field-vendor {
  margin: 10px 10px 20px 0px;
  padding: 10px;
  border: 1px solid #888;
  border-radius: 10px;
}

.page-node-type-product .product .field--name-field-categories .field--item {
  display: list-item;
  list-style: circle;
  margin-left: 15px;
}

/* product page colors */
.page-node-type-product .product .field--name-field-image {
  background-color: #fff;
  border-color: #aaa;
}
.page-node-type-product .product .field--name-field-extra-images {
  background-color: #f3f3f3;
  border-color: #aaa;
}
.page-node-type-product .product .field--name-field-categories {
  background-color: #def;
  border-color: #8ad;
}
.page-node-type-product .product .field--name-field-vendor {
  background-color: #dfe;
  border-color: #8da;
}

@media screen and (max-width: 767px) {
  .page-node-type-product .product .field--name-field-extra-images {
    margin: 10px auto 0px auto;
  }

  .page-node-type-product .product .field--name-body,
  .page-node-type-product .product .field--name-field-vendor-product-link,
  .page-node-type-product .product .field--name-field-certification-details,
  .page-node-type-product .product .field--name-field-certification-date,
  .page-node-type-product .product .field--name-field-source-code-links {
    margin-bottom: 20px;
  }

  .page-node-type-product .product .field--name-field-categories,
  .page-node-type-product .product .field--name-field-vendor {
    margin-bottom: 0px;
    float: left;
  }

  .page-node-type-product .product .field--name-body {
    padding-top: 20px;
    clear: both;
  }
}


@media screen and (min-width: 768px) {
  .page-node-type-product .product .field--name-field-image {
    width: 382px;
    float: left;
  }

  .page-node-type-product .product .field--name-field-extra-images {
    float: left;
    clear: left;

    width: 382px;
    margin-top: 10px;
  }

  .page-node-type-product .product .field--name-body,
  .page-node-type-product .product .field--name-field-vendor-product-link,
  .page-node-type-product .product .field--name-field-certification-details,
  .page-node-type-product .product .field--name-field-certification-date,
  .page-node-type-product .product .field--name-field-source-code-links {
    margin-left: 400px;
    margin-bottom: 20px;
  }

  .page-node-type-product .product .field--name-field-categories {
    float: left;
    clear: left;
  }

  .page-node-type-product .product .field--name-field-vendor {
    float: left;
  }

}


/* News and Product Announcements */


.page-node-type-product-announcement .page-header,
.page-node-type-product-announcement .tabs--primary,
.page-node-type-product-announcement .region-content,
.page-node-type-general-news-item .page-header,
.page-node-type-general-news-item .tabs--primary,
.page-node-type-general-news-item .region-content,
.page-node-type-page .page-header,
.page-node-type-page .tabs--primary,
.page-node-type-page .region-content,
.path-news .page-header,
.path-news .tabs--primary,
.path-news .region-content {
  max-width: 800px;
  margin: 0 auto;
}

/* don't apply above max-width rule to main page */
.path-frontpage .page-header,
.path-frontpage .tabs--primary,
.path-frontpage .region-content {
  max-width: 2000px; /* high number beyond the max */
}

.page-node-type-page .page-header {
  margin-bottom: 20px;
}

.path-news h2,
.block-views-blocknews-news-block article h2 {
  font-size: 25px;
}

.page-node-type-product-announcement .author,
.page-node-type-general-news-item .author {
  margin: 10px 0 20px 0;
  font-style: oblique;
}

.page-node-type-product-announcement .field--name-body,
.page-node-type-general-news-item .field--name-body {
  margin-bottom: 20px;
}

.page-node-type-product-announcement .field--name-field-external-news-link,
.page-node-type-general-news-item .field--name-field-external-news-link {
  margin-bottom: 20px;
}

.page-node-type-product-announcement .field--name-field-vendor-page,
.page-node-type-product-announcement .field--name-field-announced-products {
  margin-bottom: 20px;
}


/* Search Results */


@media screen and (max-width: 600px) {
  .path-search .region-content > ol {
    width: 300px;
  }
}
@media screen and (min-width: 601px) and (max-width 1000px) {
  .path-search .region-content > ol {
    width: 560px;
  }
}
@media screen and (min-width: 1001px) {
  .path-search .region-content > ol {
    width: 900px;
  }
}

.path-search .region-content > ol {
  margin: 0 auto;
  padding-left: 0;
  overflow: auto;
}

.path-search .region-content > ol li {
  width: 280px;
  height: 280px;
  margin: 0px auto;
  padding: 10px;

  float: left;

  list-style: none;
  overflow: hidden;
}

.path-search .region-content > ol li h3 {
  text-align: center;
}

.path-search .region-content > ol li .search-image {
  width: 100px;
  height: 100px;

  margin: 0 auto;

  display: flex;
  align-items: center;
}

.path-search .region-content > ol li img {
}


/* Footer */


.footer {
  background: #333;
  color: #FFF;
}

/* full page width for footer */
.footer {
  width: 100%;
}

.footer a { color: #edd400; }

.footer a:hover { color: #FFF; }

.footer h4 { font-weight: bold; }

.footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }

#fsf-logo-footer { margin-bottom: 10px; }

@media print { #fsf-logo-footer { filter: invert(100%) } }
Commit	Line	Data
1e7a45c4 VSB	1	/**
	2	* If using a CSS pre-processor, tell it to overwrite this file. If not, place
	3	* your custom CSS modifications here.
	4	*/
	5
658e30ec	6	body { margin: 0; min-width: 320px; }
1e7a45c4	7
b4ed810a VSB	8	a { transition: 0.3s; }
b4ed810a VSB	9
bbb30910 AE	10
	11	/* etcetera */
	12
	13
	14	.feed-icons,
	15	.more-link {
	16	margin-top: 15px;
	17	clear: both;
	18	}
	19	.more-link {
	20	font-weight: bold;
	21	}
	22
	23	.block-views {
	24	margin-top: 20px;
	25	}
	26
	27	/* Navbar */
	28
	29
1e7a45c4 VSB	30	.navbar-default {
	31	background: #000;
	32	color: #FFF;
	33	border: none;
	34	border-radius: 0px;
	35	box-sizing: content-box;
1e7a45c4 VSB	36	align-items: center;
	37	margin-bottom: 100px;
	38	min-height: 100px;
	39	}
	40
b766958e AE	41	.navbar-header,
b766958e AE	42	#navbar-collapse {
1e7a45c4 VSB	43	max-width: 1150px;
	44	padding: 0;
	45	margin: 0 auto;
bfc9c2d3 VSB	46	border: none;
bfc9c2d3 VSB	47	overflow: hidden;
1e7a45c4 VSB	48	}
1e7a45c4 VSB	49
67263bd5	50	.navbar-default .navbar-toggle { display: none; }
bfc9c2d3	51
1e7a45c4 VSB	52	.navbar-header {
	53	position: absolute;
	54	top: 5px;
	55	}
	56
67263bd5	57	.navbar-brand { display: none; }
ccc0e97e VSB	58
	59	#block-ryf-main-menu .navbar-nav { margin-left: 180px; }
	60
ee748803 AE	61	.navbar-default .navbar-nav > li > a:focus {
	62	outline: none;
	63	}
	64
	65	.navbar-default .navbar-nav > li > a,
0af85f8e	66	.navbar-default .navbar-nav > .active > a,
ee748803 AE	67	.navbar-default .navbar-nav > li > a:link,
	68	.navbar-default .navbar-nav > .active > a:link,
	69	.navbar-default .navbar-nav > li > a:visited,
	70	.navbar-default .navbar-nav > .active > a:visited {
b4ed810a	71	color: #FFF;
0af85f8e	72	background: #000;
b4ed810a	73	border-bottom: 2px solid transparent;
0af85f8e AE	74	padding-bottom: 10px;
0af85f8e AE	75	margin-bottom: 5px;
b4ed810a VSB	76	}
b4ed810a VSB	77
ee748803	78	.navbar-default .navbar-nav > li > a:hover,
0af85f8e	79	.navbar-default .navbar-nav > .active > a:hover,
ee748803 AE	80	.navbar-default .navbar-nav > li > a:active,
ee748803 AE	81	.navbar-default .navbar-nav > .active > a:active {
b4ed810a	82	color: #edd400;
ee748803	83	background: #000;
b4ed810a VSB	84	border-bottom: 2px solid #edd400;
b4ed810a VSB	85	padding-bottom: 5px;
0af85f8e	86	margin-bottom: 10px;
b4ed810a VSB	87	}
b4ed810a VSB	88
cafdcde8	89	.page-header {
357e6db1	90	border-bottom: 2px solid #000;
cafdcde8 VSB	91	font-size: 2em;
	92	}
	93
2cbded31 VSB	94	.region-header .search-block-form {
	95	width: 300px;
	96	float: right;
	97	}
	98
2f113c95 AE	99	@media screen and (min-width: 520px) and (max-width: 599px) {
	100	.logo img { margin-left: 50px; }
	101	#block-ryf-main-menu .navbar-nav { margin-left: 230px; }
	102	}
aa4eefa7	103
2f113c95 AE	104	@media screen and (min-width: 600px) and (max-width: 767px) {
	105	.logo img { margin-left: 100px; }
	106	#block-ryf-main-menu .navbar-nav { margin-left: 280px; }
	107	}
	108
	109	@media screen and (max-width: 767px) {
	110	.logo img { height: 150px; margin-top: 25px; }
	111	.navbar-default { min-height: 230px; margin-bottom: 30px; }
	112	#block-ryf-main-menu .navbar-nav { max-width: 130px; }
	113	}
	114
81342c63 AE	115	@media screen and (min-width: 768px) {
	116	.navbar-nav { margin-top: 40px; }
	117	}
	118
5235611e	119
cd0efca0 AE	120	/* Selectors */
cd0efca0 AE	121
5235611e	122
cd0efca0 AE	123	@media screen and (min-width: 768px) {
	124	.form-inline .form-item .select-wrapper {
	125	display: block;
	126	}
	127	.form-inline .form-actions {
	128	margin-top: 21px;
	129	}
	130	}
	131
5235611e	132
16670121	133	/* RYF List */
b4ed810a	134
5235611e	135
bd3568e1	136	.ryf-list-row {
aa68642c AE	137	padding: 0;
	138	margin: 0 auto;
	139	overflow: auto;
	140	}
	141
16670121 VSB	142	.ryf-list {
	143	float: left;
	144	margin: 0;
	145	padding: 0.5em;
	146	position:relative;
	147	list-style: none;
	148	}
b4ed810a	149
16670121 VSB	150	.ryf-list article {
	151	border: 1px solid #ececec;
	152	border-radius: 5px;
	153	padding: 1em;
	154	box-shadow: 2px 2px 5px #ddd;
	155	transition: 0.3s;
	156	}
1e7a45c4	157
16670121 VSB	158	.ryf-list article:hover {
16670121 VSB	159	box-shadow: 0px 0px 5px #aaa;
b4ed810a	160	}
1e7a45c4	161
16670121	162	.ryf-list .field--type-image {
c51f46de	163	width: 150px;
de63e943	164	height: 150px;
16670121 VSB	165	background: #fff;
	166	border-radius: 10px;
	167	display: flex;
c51f46de AE	168	align-items: center;
	169	}
	170
	171	.ryf-list .field--name-field-image {
00e72ccd	172	margin: 0 auto 10px auto;
1e7a45c4	173	}
b4ed810a	174
16670121 VSB	175	.ryf-list img {
16670121 VSB	176	max-width: 150px;
00e72ccd AE	177	max-height: 150px;
00e72ccd AE	178	object-fit: contain;
16670121 VSB	179	overflow: hidden;
	180	}
	181
	182	.ryf-list img:hover {
	183	border-radius: 0;
ccc0e97e	184	}
b4ed810a	185
ccc0e97e	186	.ryf-list h2 {
b4ed810a VSB	187	text-align: left;
	188	font-size: 1.5em;
	189	font-weight: 500;
	190	line-height: 1.2em;
16670121 VSB	191	margin: 0;
	192	padding: 0;
	193	padding-bottom: 1em;
b4ed810a VSB	194	}
	195
	196	.ryf-list a {
	197	color: #118991;
	198	text-decoration: none;
	199	}
	200
	201	.ryf-list a:hover {
	202	color: #000;
	203	}
1e7a45c4	204
ccc0e97e VSB	205	.ryf-list .node-readmore,
	206	.ryf-list .tags,
	207	.ryf-list .supplier {
b4ed810a VSB	208	width: 100%;
	209	float: left;
	210	font-size: 0.9em;
	211	border-top: 1px solid #ccc4c4;
	212	margin-top: 5px;
	213	padding-top: 5px;
	214	color: #afadad;
	215	}
16670121 VSB	216
	217	.ryf-list .node-readmore {
	218	text-align: right;
	219	}
	220
e3fe14a1	221	@media screen and (min-width: 450px) and (max-width: 659px) {
bd3568e1	222	.ryf-list-row {
aa68642c AE	223	max-width: 600px;
aa68642c AE	224	}
e3fe14a1 AE	225	.ryf-list {
	226	max-width: 300px;
	227	float: none;
	228	margin: 0 auto;
	229	}
	230	}
	231	@media screen and (min-width: 660px) and (max-width: 767px) {
bd3568e1	232	.ryf-list-row {
aa68642c AE	233	max-width: 600px;
aa68642c AE	234	}
e3fe14a1 AE	235	.ryf-list-row {
	236	margin: 0 auto;
	237	max-width: 660px;
	238	}
	239	.ryf-list {
	240	max-width: 300px;
	241	float: left;
	242	}
	243	}
	244
16670121	245
dbd9476a AE	246	/* Vendors list */
dbd9476a AE	247
5235611e	248
bd3568e1	249	.vendors-list-row {
df611aac	250	padding: 10px;
00227dc4 AE	251	margin: 0 auto;
	252	overflow: auto;
	253	}
	254
dbd9476a AE	255	@media screen and (max-width: 767px) {
	256	.vendors-list-row {
	257	margin: 0px auto;
	258	}
	259
	260	.vendors-list {
	261	margin-bottom: 40px;
	262	list-style: none;
9203a4fd AE	263
9203a4fd AE	264	overflow: auto;
dbd9476a AE	265	}
	266
	267	.vendors-list .views-field-field-icon {
	268	width: 220px;
	269
	270	margin: 0px auto 20px auto;
	271	}
	272
	273	.vendors-list .views-field-field-icon img {
	274	margin: 0 auto;
	275	}
	276
b766958e AE	277	.vendors-list .views-field-name,
b766958e AE	278	.vendors-list .views-field-description__value {
dbd9476a AE	279	max-width: 300px;
	280	margin: 0 auto 10px auto;
	281	}
	282
	283	.vendors-list .views-field-name {
	284	font-weight: bold;
	285	font-size: 18px;
	286	text-align: center;
	287	}
	288
	289	}
	290
	291	@media screen and (min-width: 768px) {
	292	.vendors-list-row {
	293	width: 600px;
	294	margin: 0px auto;
	295	}
	296
	297	.vendors-list {
	298	list-style: none;
	299	clear: left;
9203a4fd AE	300
9203a4fd AE	301	overflow: auto;
dbd9476a AE	302	}
	303
	304	.vendors-list .views-field-field-icon {
	305	width: 220px;
	306	height: 220px;
	307
	308	margin-bottom: 40px;
	309
	310	float: left;
	311	}
	312
	313	.vendors-list .views-field-field-icon img {
	314	margin: 0 auto;
	315	}
	316
b766958e AE	317	.vendors-list .views-field-name,
b766958e AE	318	.vendors-list .views-field-description__value {
dbd9476a AE	319	margin-left: 300px;
	320	}
	321
	322	.vendors-list .views-field-name {
	323	margin-bottom: 10px;
	324	font-weight: bold;
	325	font-size: 18px;
	326	}
	327	}
	328
	329
f39cdbbc AE	330	/* Sidebars */
	331
	332
	333	@media screen and (max-width: 767px) {
	334	.path-products #block-views-block-categories-categories-block { display: none; }
	335	}
	336
	337
222cefba AE	338	/* Vendor and Category taxonomy term pages */
	339
	340
5df3859d AE	341	.view-taxonomy-term .view-header .field--name-field-icon img {
	342	margin: 0 auto;
	343	}
	344
	345	.view-filters {
	346	clear: left;
	347	}
	348
222cefba AE	349	@media screen and (max-width: 559px) {
	350	.view-taxonomy-term .view-header {
	351	margin: 0 auto 40px auto;
	352
	353	overflow: auto;
	354	}
	355
	356	.view-taxonomy-term .view-header .field--name-field-icon {
	357	margin: 0 auto 20px auto;
	358	width: 220px;
	359	}
	360
222cefba AE	361	.view-taxonomy-term .view-header .field--name-description {
	362	max-width: 360px;
	363	margin: 0 auto;
	364	padding: 0 10px;
	365	}
	366
222cefba AE	367	}
222cefba AE	368
5df3859d	369	@media screen and (min-width: 560px) {
222cefba AE	370	.view-taxonomy-term .view-header {
	371	margin: 0 0 40px 0;
	372
	373	overflow: auto;
	374	}
	375
	376	.view-taxonomy-term .view-header .field--name-field-icon {
	377	width: 220px;
	378
	379	float: left;
	380	}
	381
222cefba AE	382	.view-taxonomy-term .view-header .field--name-description {
	383	margin-left: 260px;
	384	}
	385
222cefba AE	386	}
	387
	388	@media screen and (min-width: 768px) {
	389	.view-taxonomy-term .view-header {
300bf8f5	390	max-width: 700px;
222cefba AE	391	}
	392	}
	393
	394
4d7da022 AE	395	/* Product */
4d7da022 AE	396
5235611e	397
d679ca4e AE	398	@media screen and (max-width: 767px) {
	399	.page-node-type-product .product {
	400	max-width: 382px;
	401	margin: 0 auto;
	402	}
	403	}
	404
21d9e444 AE	405	@media screen and (min-width: 768px) and (max-width: 991px) {
	406	.page-node-type-product .product {
	407	width: 700px;
	408	margin: 0 auto;
	409	}
4d7da022 AE	410	}
4d7da022 AE	411
21d9e444 AE	412	@media screen and (min-width: 992px) {
	413	.page-node-type-product .product {
	414	width: 800px;
	415	margin: 0 auto;
	416	}
	417	}
4d7da022	418
d679ca4e AE	419	.page-node-type-product .product .field--name-field-image {
d679ca4e AE	420	padding: 10px;
4d7da022	421
d679ca4e AE	422	border: 1px solid #888;
	423	border-radius: 10px;
	424	}
4d7da022	425
aa0f7f3d AE	426	.page-node-type-product .product .field--name-field-image img {
	427	margin: 0 auto;
	428	}
	429
d679ca4e AE	430	.page-node-type-product .product .field--name-field-extra-images {
d679ca4e AE	431	padding: 5px;
4d7da022	432
d679ca4e AE	433	display: flex;
d679ca4e AE	434	align-items: center;
4d7da022	435
d679ca4e AE	436	border: 1px solid #888;
	437	border-radius: 10px;
	438	}
4d7da022	439
d679ca4e AE	440	.page-node-type-product .product .field--name-field-extra-images .field--item {
	441	display: inline-block;
	442	margin: auto;
	443	padding: 5px;
	444	}
4d7da022	445
b766958e AE	446	.page-node-type-product .product .field--name-field-categories,
b766958e AE	447	.page-node-type-product .product .field--name-field-vendor {
d679ca4e AE	448	margin: 10px 10px 20px 0px;
	449	padding: 10px;
	450	border: 1px solid #888;
	451	border-radius: 10px;
	452	}
	453
433e107d AE	454	.page-node-type-product .product .field--name-field-categories .field--item {
	455	display: list-item;
	456	list-style: circle;
	457	margin-left: 15px;
	458	}
	459
28ff698e AE	460	/* product page colors */
28ff698e AE	461	.page-node-type-product .product .field--name-field-image {
eee49201	462	background-color: #fff;
28ff698e AE	463	border-color: #aaa;
	464	}
	465	.page-node-type-product .product .field--name-field-extra-images {
ebebd91d	466	background-color: #f3f3f3;
28ff698e AE	467	border-color: #aaa;
	468	}
	469	.page-node-type-product .product .field--name-field-categories {
8be2a870 AE	470	background-color: #def;
8be2a870 AE	471	border-color: #8ad;
28ff698e AE	472	}
28ff698e AE	473	.page-node-type-product .product .field--name-field-vendor {
8be2a870 AE	474	background-color: #dfe;
8be2a870 AE	475	border-color: #8da;
28ff698e AE	476	}
28ff698e AE	477
d679ca4e AE	478	@media screen and (max-width: 767px) {
	479	.page-node-type-product .product .field--name-field-extra-images {
	480	margin: 10px auto 0px auto;
21d9e444	481	}
4d7da022	482
b766958e AE	483	.page-node-type-product .product .field--name-body,
	484	.page-node-type-product .product .field--name-field-vendor-product-link,
	485	.page-node-type-product .product .field--name-field-certification-details,
	486	.page-node-type-product .product .field--name-field-certification-date,
	487	.page-node-type-product .product .field--name-field-source-code-links {
21d9e444 AE	488	margin-bottom: 20px;
21d9e444 AE	489	}
4d7da022	490
b766958e AE	491	.page-node-type-product .product .field--name-field-categories,
b766958e AE	492	.page-node-type-product .product .field--name-field-vendor {
9b263139	493	margin-bottom: 0px;
21d9e444	494	float: left;
21d9e444	495	}
4d7da022	496
21d9e444	497	.page-node-type-product .product .field--name-body {
9b263139	498	padding-top: 20px;
21d9e444 AE	499	clear: both;
21d9e444 AE	500	}
4d7da022 AE	501	}
4d7da022 AE	502
21d9e444 AE	503
	504	@media screen and (min-width: 768px) {
	505	.page-node-type-product .product .field--name-field-image {
	506	width: 382px;
21d9e444	507	float: left;
21d9e444 AE	508	}
	509
	510	.page-node-type-product .product .field--name-field-extra-images {
	511	float: left;
	512	clear: left;
	513
	514	width: 382px;
21d9e444	515	margin-top: 10px;
21d9e444 AE	516	}
21d9e444 AE	517
b766958e AE	518	.page-node-type-product .product .field--name-body,
	519	.page-node-type-product .product .field--name-field-vendor-product-link,
	520	.page-node-type-product .product .field--name-field-certification-details,
	521	.page-node-type-product .product .field--name-field-certification-date,
	522	.page-node-type-product .product .field--name-field-source-code-links {
21d9e444 AE	523	margin-left: 400px;
	524	margin-bottom: 20px;
	525	}
	526
	527	.page-node-type-product .product .field--name-field-categories {
	528	float: left;
	529	clear: left;
	530	}
	531
	532	.page-node-type-product .product .field--name-field-vendor {
	533	float: left;
	534	}
	535
4d7da022 AE	536	}
	537
	538
9f8b2429 AE	539	/* News and Product Announcements */
	540
	541
	542	.page-node-type-product-announcement .page-header,
fa74cee2	543	.page-node-type-product-announcement .tabs--primary,
9f8b2429 AE	544	.page-node-type-product-announcement .region-content,
9f8b2429 AE	545	.page-node-type-general-news-item .page-header,
fa74cee2	546	.page-node-type-general-news-item .tabs--primary,
dca6d2ea AE	547	.page-node-type-general-news-item .region-content,
dca6d2ea AE	548	.page-node-type-page .page-header,
fa74cee2	549	.page-node-type-page .tabs--primary,
dca6d2ea	550	.page-node-type-page .region-content,
9f8b2429	551	.path-news .page-header,
fa74cee2	552	.path-news .tabs--primary,
9f8b2429 AE	553	.path-news .region-content {
	554	max-width: 800px;
	555	margin: 0 auto;
	556	}
	557
8499d9cd AE	558	/* don't apply above max-width rule to main page */
8499d9cd AE	559	.path-frontpage .page-header,
fa74cee2	560	.path-frontpage .tabs--primary,
8499d9cd AE	561	.path-frontpage .region-content {
	562	max-width: 2000px; /* high number beyond the max */
	563	}
	564
dca6d2ea AE	565	.page-node-type-page .page-header {
	566	margin-bottom: 20px;
	567	}
	568
e9d294a4 AE	569	.path-news h2,
e9d294a4 AE	570	.block-views-blocknews-news-block article h2 {
9f8b2429 AE	571	font-size: 25px;
	572	}
	573
	574	.page-node-type-product-announcement .author,
	575	.page-node-type-general-news-item .author {
	576	margin: 10px 0 20px 0;
	577	font-style: oblique;
	578	}
	579
	580	.page-node-type-product-announcement .field--name-body,
	581	.page-node-type-general-news-item .field--name-body {
	582	margin-bottom: 20px;
	583	}
	584
	585	.page-node-type-product-announcement .field--name-field-external-news-link,
	586	.page-node-type-general-news-item .field--name-field-external-news-link {
	587	margin-bottom: 20px;
	588	}
	589
	590	.page-node-type-product-announcement .field--name-field-vendor-page,
	591	.page-node-type-product-announcement .field--name-field-announced-products {
	592	margin-bottom: 20px;
	593	}
	594
	595
41399eb4 AE	596	/* Search Results */
	597
	598
	599	@media screen and (max-width: 600px) {
f12cbe51	600	.path-search .region-content > ol {
41399eb4 AE	601	width: 300px;
	602	}
	603	}
	604	@media screen and (min-width: 601px) and (max-width 1000px) {
f12cbe51	605	.path-search .region-content > ol {
41399eb4 AE	606	width: 560px;
	607	}
	608	}
	609	@media screen and (min-width: 1001px) {
f12cbe51	610	.path-search .region-content > ol {
41399eb4 AE	611	width: 900px;
	612	}
	613	}
	614
f12cbe51	615	.path-search .region-content > ol {
41399eb4 AE	616	margin: 0 auto;
	617	padding-left: 0;
	618	overflow: auto;
	619	}
	620
f12cbe51	621	.path-search .region-content > ol li {
41399eb4 AE	622	width: 280px;
	623	height: 280px;
	624	margin: 0px auto;
	625	padding: 10px;
	626
	627	float: left;
	628
	629	list-style: none;
	630	overflow: hidden;
	631	}
	632
f12cbe51	633	.path-search .region-content > ol li h3 {
41399eb4 AE	634	text-align: center;
	635	}
	636
f12cbe51	637	.path-search .region-content > ol li .search-image {
41399eb4 AE	638	width: 100px;
	639	height: 100px;
	640
	641	margin: 0 auto;
	642
	643	display: flex;
	644	align-items: center;
	645	}
	646
f12cbe51	647	.path-search .region-content > ol li img {
41399eb4 AE	648	}
	649
	650
16670121 VSB	651	/* Footer */
16670121 VSB	652
5235611e	653
16670121 VSB	654	.footer {
	655	background: #333;
	656	color: #FFF;
	657	}
	658
06d8ab9f	659	/* full page width for footer */
c900f9d4	660	.footer {
c900f9d4 AE	661	width: 100%;
	662	}
	663
16670121 VSB	664	.footer a { color: #edd400; }
	665
	666	.footer a:hover { color: #FFF; }
	667
	668	.footer h4 { font-weight: bold; }
	669
	670	.footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
	671
0bd91ac3 AE	672	#fsf-logo-footer { margin-bottom: 10px; }
0bd91ac3 AE	673
18f8d3b1 AE	674	@media print { #fsf-logo-footer { filter: invert(100%) } }
18f8d3b1 AE	675