body {
margin: 0;
}
button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
/*fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}*/
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.animate-item-size-item {
float: left;
}
/* animate-item-size-item is invisible, but used for layout */
.animate-item-size-item, .animate-item-size-item__content {
width: 60px;
height: 60px;
}
/* animate-item-size-item__content is visible, and transitions size */
.animate-item-size-item__content {
background: #8DF;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
.animate-item-size-item:hover .animate-item-size-item__content {
border-color: white;
background: #4BF;
cursor: pointer;
}
/* both animate-item-size-item and animate-item-size-item content change size */
.animate-item-size-item.is-expanded, .animate-item-size-item.is-expanded .animate-item-size-item__content {
width: 180px;
height: 120px;
}
.animate-item-size-item.is-expanded {
z-index: 2;
}
.animate-item-size-item.is-expanded .animate-item-size-item__content {
background: #F90;
}
/* ---- responsive ---- */
.grid--animate-item-size-responsive .animate-item-size-item, .grid--animate-item-size-responsive .grid-sizer {
width: 20%;
}
.grid--animate-item-size-responsive .animate-item-size-item__content, .grid--animate-item-size-responsive .animate-item-size-item.is-expanded .animate-item-size-item__content {
width: 100%;
height: 100%;
}
/* item has expanded size */
.grid--animate-item-size-responsive .animate-item-size-item.is-expanded {
width: 60%;
}
/* BUTTONS */
.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.4em;
font-weight: 100;
color: #666666;
display: inline-block;
padding: 8px 10px;
margin-bottom: 0px;
background: #FFFFFF;
border: none;
border-right-style: solid;
border-color: #EFEFEF;
border-width: thin;
/*border-radius: 7px;*/
/*background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );*/
/*text-shadow: 0 1px white;*/
cursor: pointer;
}
.button:hover {
background-color: #EFEFEF;
/*text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);*/
color: #666666;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
/* ...and now for the proper property */
transition:.2s;
}
.button:active, .button.is-checked, .button.is-selected {
background-color: #EFEFEF;
}
.button.is-checked, .button.is-selected {
color: #666666;/*text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);*/
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* hide radio inputs */
/*.button input[type="radio"] {
display: none;
}*/
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-right: 1px;
}
.button-group .button:first-child {
/*border-radius: 0.5em 0 0 0.5em;*/
border-radius: 0 0 0 0;
}
.button-group .button:last-child {
/*border-radius: 0 0.5em 0.5em 0;
border-radius: 0 0 0 0;*/
}
/* GRID SIZE */
.primary-content {
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.main .primary-content > * {
width: 100%;
}
.main .primary-content .go-wide, .main .primary-content .example {
max-width: none;
}
@media screen and (min-width: 768px) {
.primary-content {
margin-left: 0px;
margin-right: 0px;
}
.main .primary-content > * {
width: 100%;
}
}
/* desktop */
@media screen and (min-width: 960px) {
.primary-content {
margin-right: 6%;
}
}
/* BUTTON GROUP */
.ui-group {
display: inline-block;
}
.ui-group__title {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.4em;
font-weight: 100;
display: inline-block;
vertical-align: top;
margin: 5px 10px 0 0;
}
.ui-group .button-group {
display: inline-block;
margin-right: 0px;
}
/* BOXES */
.color-shape {
height: 300px;
width: 224px;
margin: 5px;
float: left;
}
/* SUBJECTS */
.color-shape.round {
border-radius: 50px;
}
.color-shape.capacityplanning {
border-radius: 50px;
}
.color-shape.server {
border-radius: 50px;
}
.color-shape.optimization {
border-radius: 50px;
}
.color-shape.virtualization {
border-radius: 50px;
}
.color-shape.big.round {
border-radius: 75px;
}
/* TYPES */
/*.color-shape.papers {
background: transparent;
background-image: url('../images/solutions/links/whitepaper.png');
}*/
a.color-shape.papers {
background: transparent;
/*background-image: url('../images/solutions/links/whitepaper.png');*/
}
a:hover.color-shape.papers {
background: transparent;
background-image: url('../images/solutions/links/survey.png');
}
/*.color-shape.factsheets {
background: transparent;
background-image: url('../images/solutions/links/factsheets.png');
}*/
a.color-shape.factsheets {
background: transparent;
background-image: url('../images/solutions/links/factsheets.png');
}
a:hover.color-shape.factsheets {
background: transparent;
background-image: url('../images/solutions/links/survey.png');
}
/*.color-shape.casestudies {
background: transparent;
background-image: url('../images/solutions/links/casestudies.png');
}*/
a.color-shape.casestudies {
background: transparent;
background-image: url('../images/solutions/links/casestudies.png');
}
a:hover.color-shape.casestudies {
background: transparent;
background-image: url('../images/solutions/links/survey.png');
}
/*.color-shape.webinars {
background: transparent;
background-image: url('../images/solutions/links/video.png');
}*/
a.color-shape.webinars {
background: transparent;
background-image: url('../images/solutions/links/video.png');
}
a:hover.color-shape.webinars {
background: transparent;
background-image: url('../images/solutions/links/survey.png');
}
/*.hover:color-shape.tips {
background: transparent;
background-image: url('../images/solutions/links/training.png');
}*/
a.color-shape.tips {
background: transparent;
background-image: url('../images/solutions/links/training.png');
}
a:hover.color-shape.tips {
background: transparent;
background-image: url('../images/solutions/links/survey.png');
}
.color-shape.wide, .color-shape.big {
width: 150px;
}
.color-shape.tall, .color-shape.big {
height: 150px;
}
.grid-multi-item {
float: left;
width: 100px;
height: 100px;
background: transparent;
border: none;
}
.grid-multi-item[data-color="papers"] {
background: transparent;
}
.grid-multi-item[data-color="factsheets"] {
background: transparent;
}
.grid-multi-item[data-color="casestudies"] {
background: transparent;
}
.grid-multi-item[data-color="webinars"] {
background: transparent;
}
.grid-multi-item[data-color="tips"] {
background: transparent;
}
.grid-multi-item .number {
font-size: 4.0rem;
font-weight: 100;
color: white;
padding-top: 0.1em;
text-align: center;
line-height: 90px;
margin: 0;
}