/* Open cloud access page styles.

   @file            oca.en.css
   @author          marionm
   @dependencies    /development-platform/css/topnav.en.css
   ========================================================================== */

/* main
   ========================================================================== */

body {
    margin: 0 auto;
    min-width: 1200px;
    padding: 0;
}

.inner {
    color: #404040;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0 auto;
    padding: 40px 0;
    width: 1017px;
}

/* text
   ========================================================================== */

.inner h1 {
    color: #dd1100;
    font-size: 48px;
    font-weight: 300;
    margin: 0;
}

.inner h2 {
    color: #dd1100;
    font-size: 35px;
    font-weight: 300;
    margin: 0;
}

.inner h3 {
    color: #f77700;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.inner h3 + p {
    line-height: 24px;
    margin: 2px 0 40px 0;
}

.inner a {
    color: #dd1100;
    text-decoration: none;
}

.inner a:hover { color: #f77700; }

.inner li a { color: #dd1100; }

.big {
    display: inline-block;
    font-size: 21px;
    margin: 0 0 20px;
}

.large {
    color: #737373;
    font-size: 27px;
    font-weight: 300;
    line-height: 40px;
    margin: 0 0 30px 0;
}

.medium {
    color: #535353;
    font-size: 21px;
    line-height: 31px;
}

.small { font-size: 13px; }

.small strong {
    color: #404040;
    font-weight: 600;
}

.inner ul {
    margin: 0 0 0 20px;
    padding: 0;
}

.inner li {
    font-weight: 300;
    line-height: 21px;
    margin: 0 0 20px;
}

/* grid
   ========================================================================== */

.row { width: 100%; }

.row:before,
.row:after {
    clear: both;
    content: '';
    display: table;
}

.half,
.third,
.fourth,
.fifth {
    box-sizing: border-box;
    display: block;
    float: left;
}

.half { width: 50%; }

.row .half:first-child { padding-right: 25px; }

.row .half:last-child { padding-left: 25px; }

.third { width: 33.333%; }

.fourth { width: 25%; }

.fifth { width: 20%; }

/* misc
   ========================================================================== */

.divider { border-top: 1px solid #ddd; }

.chevron { color: #f86500; }

.button {
    background: #dd1100;
    border-radius: 4px;
    color: #fff !important;
    font-size: 14px;
    padding: 5px 10px;
}

.button:hover,
.big-button:hover { background: #e50000; }

#oca .big-button {
    background: #dd1100;
    border-radius: 5px;
    border: 1px solid #b00f00;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    padding: 8px 20px;
}

#oca .big-button:hover { background: #fe0000; }

.no-bottom-padding { padding-bottom: 10px; }

.hide { display: none; }

img { border: 0; }

a { text-decoration: none; }

.red { color: #dd1100; }

.align-center { text-align: center; }

/* shared
   ========================================================================== */

#oca .big-button { color: #fff; }

/* intro section
   ========================================================================== */

#oca .intro .inner {
    background: #fffae5;
    border: 1px solid #e8cda3;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 40px;
    padding: 15px 25px;
}

#oca .intro h1 {
    color: #333;
    font-size: 24px;
    font-style: italic;
    margin-bottom: 2px;
}

#oca .intro p {
    color: #555;
    font-size: 18px;
    font-weight: 300;
    line-height: 31px;
    margin: 0;
    width: 920px;
}

/* sign in section
   ========================================================================== */

#oca .sign-in p { font-size: 18px; }

#oca .three-columns { width: 100%; }

#oca .three-columns > * {
    box-sizing: border-box;
    float: left;
    font-size: 18px;
    /*width: 33%;*/
}

#oca .three-columns img {
    display: inline-block;
    float: left;
    margin-right: 11px;
    vertical-align: top;
}

#oca .three-columns span {
    display: inline-block;
    margin-right: 26px;
    max-width: 267px;
    vertical-align: top;
}

#oca .three-columns div:last-child span { margin-right: 0; }

#oca .three-columns > *:nth-child(2) img {
    position: relative;
    top: 4px;
}

/* get serious section
   ========================================================================== */

#oca .serious p { font-size: 15px; }

#oca .serious h3.platforms {
    color: #656565;
    margin: 0 0 8px 0;
    text-transform: uppercase;
}

#oca .serious p.platforms a {
    color: #656565;
    line-height: 26px;
    margin-right: 15px;
    vertical-align: top;
}

#oca .serious p.platforms a:hover { color: #f77700; }

#oca .serious p.platforms img {
    margin: 0 15px 0 0;
    vertical-align: top;
}

#oca .serious p.platforms a:hover img { opacity: .8; }

#oca .serious p.platforms a:not(:first-child) img { margin: 0 15px 0 30px; }

#oca .serious ul { margin: 2px 0 0 0; }

#oca .serious li {
    font-size: 15px;
    font-weight: 400;
    list-style: none;
    margin: 0;
    padding: 4px 0 4px 10px;
    position: relative;
}

#oca .serious li:before {
    color: #dd1100;
    content: '■';
    display: inline;
    font-size: 9px;
    left: 0;
    line-height: 21px;
    position: absolute;
    top: 3px;
}

/* get started section
   ========================================================================== */

#oca .started h2 { margin: 0 0 20px 0; }

#oca .started table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0 0 60px 0;
}

#oca .started thead th {
    background: #eee;
    border: 1px solid #bbb;
    font-size: 15px;
    font-weight: 400;
    padding: 15px 20px;
    text-align: left;
    text-transform: uppercase;
}

#oca .started th span {
    color: #777;
    font-size: 13px;
    text-transform: none;
}

#oca .started tbody td {
    border: 1px solid #bbb;
    font-size: 14px;
    padding: 15px 20px;
    text-align: left;
}

#oca .started tbody td:not(:first-child) {
    font-size: 13px;
    text-align: center;
    width: 21%;
}

#oca .started tbody td:last-child a { color: #777; }

#oca .started tbody td:last-child a:hover { color: #f77700; }

#oca .started tfoot td { text-align: left; position: relative; }

#oca .started tfoot .big-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-sizing: border-box;
    font-size: 16px;
    left: 0;
    padding: 8px;
    position: absolute;
    text-align: center;
    top: -1px;
    width: 100%;
}

#oca .started tfoot td:last-child .big-button { left: 1px; }

#oca .slideshow  { height: 383px; }

#oca .slideshow > * { position: absolute; }

#oca .slideshow figure {
    background: #efefef;
    border: 1px solid #c1c1c1;
    font-size: 0;
    margin: 0;
    padding: 0;
}

#oca .slideshow img { display: block; }

#oca .slideshow figcaption {
    font-size: 13px;
    padding: 12px 15px;
}