runway.css

/* RUNWAY PAGE 
==================*/
.rw-global-item { position: relative; overflow: hidden; }
.user-runway { display: inline-block; padding: 0 0 0 90px; margin: 0; }
.user-icon {
display: inline-block;
margin-right: 1em;
position: absolute;
top: 0;
left: 0;
}
.user-icon::before {
content: '';
display: inline-block;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 7px solid #ccc;
border-left-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 31px;
right: -7px;
}
.user-icon::after {
content: '';
display: inline-block;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-left: 6px solid #ffffff;
position: absolute;
top: 32px;
right: -5px;
}

.rw-thumbnail-wrap { position: relative; display: inline-block; border: 1px solid #eee; vertical-align: top; background: white; }
.rw-thumbnail-wrap.liked, #page-register-interest .liked  { border-color: rgba(255, 192, 203, 0.6); }
.rw-thumbnail-wrap.liked a { color: #B50360; }
.rw-thumbnail-wrap figure { position: relative; margin: 0; padding: 0; }
.rw-thumbnail-detail { padding: 9px 0 0 9px; }
.rw-thumbnail { display: block; }
.rw-thumbnail img { margin: 0; padding: 0; display: block; }
.rw-item-title {
display: block;
font-size: 123%;
line-height: normal;
}
.rw-item-liked {
color: #999;
font-size: smaller;
}


.page-controls {
top: 1px;
right: 6px;
margin: 3px auto;
position: relative;
}
.subnav-fixed .page-controls { width: 940px; }


/* TAKE CARE OF IT OPEN SCOPE */
.page-controls .dropdown-menu::before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}
.page-controls .dropdown-menu::after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 10px;
}

/* runway page */
.user-runway.tripple .rw-thumbnail-wrap { max-width: 278px; }
.user-runway.doubleb .large { max-width: 522px; }
.user-runway.doubleb .large-side { max-width: 320px; }
.user-runway.double .rw-thumbnail-wrap { max-width: 421px; }
.user-runway.single .rw-thumbnail-wrap { max-width: 848px; }

/* rw - list (follow) */
#runway-list-follow .latest-liked img { width: 170px; }
#runway-list-follow .latest-liked li { max-width: 173px; max-height: 100%; }
#runway-list-follow .latest-liked { width: 711px; max-width: 711px; }

/* rw - columns (2 cols)*/
#runway-columns .rw-thumbnail-wrap.two-col { max-width: 466px; }


/* profile page */
.rw-thumbnail-wrap.ff-first { max-width: 698px; }
.rw-thumbnail-wrap.two-col { max-width: 346px; }
#profile-new-liked-stuff .rw-thumbnail-wrap { width: 170px; }

/* single item page */
.rw-thumbnail-wrap.related-items { max-width: 346px; }


/* brand page */
#brand-catalog .rw-thumbnail-wrap { width: 228px; }



/* Popular page */
#popular-view { margin-top: 69px; }
#popular-list .rw-thumbnail-wrap { max-height: 464px; background: transparent; border: 0; }
#magazine {
overflow: hidden;
z-index: 1;
height: 666px !important;
}
#magazine .page { background: #fff; }
#magazine .page.first { text-align: right; }
#magazine .page.right {
-webkit-box-shadow: inset 11px 0px 13px -3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 11px 0px 13px -3px rgba(0, 0, 0, 0.2);
box-shadow: inset 11px 0px 13px -3px rgba(0, 0, 0, 0.2);
text-align: right;
border-left: 1px solid rgba(0, 0, 0, 0.26);
}
#magazine .page.right aside { text-align: left; }

#magazine .page.left { 
-webkit-box-shadow: inset -11px 0px 13px -3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset -11px 0px 13px -3px rgba(0, 0, 0, 0.2);
box-shadow: inset -11px 0px 13px -3px rgba(0, 0, 0, 0.2);
text-align: left;
}
#magazine .page.left aside { text-align: right; }
#magazine .page.last { text-align: left; }

#magazine .page aside {
padding-left: 1em;
padding-right: 1em;
}

#popular-list { position: relative; }
#magazine-pre {
width: 333px;
height: 333px;
position: absolute;
top: 42px;
left: 69px;
}
#magazine-pre h1 {
font-size: 69px;
line-height: 63px;
}
#magazine-pre p {
font-size: 22px;
line-height: 22px;
margin-top: 13px;
}
#magazine-end {
width: 333px;
height: 333px;
position: absolute;
top: 111px;
right: 69px;
}
#popular-list .follow-user-link { position: static; }
#popular-view .rw-followlist-wrap { display: inline-block; vertical-align: top; width: 96px; margin-top: 1em; }
#popular-view .vcard { margin-bottom: 32px; }
#popular-view .vcard a { line-height: 12px; display: block; }
#popular-view #next, #popular-view #previous {
	opacity:0;
	position:absolute;
	height:700px;
	width:24px;
	background:#999;
	-webkit-user-select:none;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
	z-index:1000;
}

#next i, #previous i{
	background:url(../pics/sprite.png) no-repeat;
	width:32px;
	height:32px;
	display:block;
	margin-top:334px;
	margin-left:-4px;
}

#next{
	-webkit-border-radius: 0px 10px 10px 0px;
	-moz-border-radius: 0px 10px 10px 0px;
	-ms-border-radius: 0px 10px 10px 0px;
	-o-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
	right:-24px;
	top:0px;
}

#next i{
	background-position:-32px 0px;
}

#previous{
	-webkit-border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	-ms-border-radius: 10px 0px 0px 10px;
	-o-border-radius: 10px 0px 0px 10px;
	border-radius:  10px 0px 0px 10px;
	left:-24px;
	top:0px;
}

#previous i{
	background-position:0px 0px;
}

#next.visible:hover, #previous.visible:hover {
	opacity:1 !important;
}




/* SLOT MACHINE  - LANDING PAGE */
/*#slot-overview .btn-group {z-index: 1;}*/
#selecting-sex {
position: absolute;
top: 32px;
left: 132px;
}
#selecting-category {
position: absolute;
top: 32px;
right: 110px;
}
#btn-slotme {
position: absolute;
bottom: -69px;
left: 13px;
}
#slot-overview {
position: relative;
min-height: 369px;
padding: 113px 69px 3px 69px;
margin-top: 32px;
}
#item-drop-area p {
line-height: 222px;
}
#item-drop-area {
width: 222px;
height: 222px;
margin: 0 auto;
position: relative;
}

#txt-what {
position: absolute;
top: 69px;
left: -288px;
font-size: 7em;
}
#txt-does {
position: absolute;
top: 132px;
left: -252px;
font-size: 5em;
}
#txt-match {
position: absolute;
top: 162px;
right: -130px;
font-size: 4.2em;
width: 196px;
text-align: right;
line-height: 0.8;
font-weight: normal;
}
#txt-match em {
font-size: 2em;
position: absolute;
top: 35px;
right: -54px;
font-weight: bold;
}


#slot-results {
position: relative;
top: -517px;
background: rgba(255, 255, 255, 0.93);
min-height: 713px;
width: 940px;
margin-bottom: -500px;
}
#slot-results-header {
margin: 3em 0 2em 6em;
}
.slot-body { }
#slot-r-belt {
position: absolute;
left: 169px;
top: 335px;
height: 32px;
}
#slot-results figcaption { position: absolute; z-index: 999; }
#slot-r-accessories {
position: absolute;
left: 39px;
top: 250px;
height: 111px;
}

#spin-btn-group {
position: absolute;
top: 99px;
right: 350px;
}
#results-welcom {
position: absolute;
top: 22px;
left: 63px;
}
#results-det {
position: absolute;
top: 36px;
right: 222px;
width: 281px;
text-align: right;
}


#slot-r-head {
position: absolute;
left: 169px;
top: 111px;
height: 111px;
}
#slot-r-torso {
position: absolute;
left: 169px;
top: 223px;
height: 111px;
}
#slot-r-legs {
position: absolute;
left: 169px;
top: 368px;
height: 169px;
}
#slot-r-feet {
position: absolute;
left: 169px;
top: 538px;
height: 111px;
}