/***********************************
STOCKHOLM _ MAIN
Group setup view
***********************************/

/* GROUP SETUP VIEW */
/*
#b9a500 yellow
#b90000 red
#5fbdfa blue
#ccc grey
#fff white
*/
/* vegas .group_setup {z-index: 400 !important;  background: #fff !important; color: #8b8b8b;} */
.group_setup {z-index: 100; }
.group_setup .headline {text-transform: uppercase; font-size: 1.2em; margin: 0 auto; }
.group_setup div.main_content p {margin-top: 0;}
.group_setup ul {list-style: disc; padding: 0 2em; margin-bottom: 1em;}
.group_setup .nav_header .ibut { right: 0; top: 0;}
.group_setup main {margin: 0 auto; max-width: 40em;}
.group_setup main > figure  {padding: 0 1em; margin: 0;}
.group_setup main > div {padding: 0 1em;}
.group_setup .page {position: absolute; width: 100%; height: 100%;}
.group_setup .but {width: 100%; max-width: 37em;}

/* figure (the image) */
.group_setup figure {text-align: center; min-height: 10.75em;}

.group_setup figure img {
	height: 9.375rem;
    width: 9.375rem;
    position: absolute; left: 0; right: 0; margin: .5em auto; opacity: 1; z-index:900;  -webkit-transform: translate3d(0,0,0);}
/* vegas .group_setup figure img {height: 10em; position: absolute; left: 0; right: 0; margin: 0 auto; opacity: 1; z-index:900; filter: invert(100%); -webkit-filter: invert(100%);} */
.group_setup figure img.selected {opacity: 0; z-index:1000;}
.group_setup figure.pending img.selected {opacity: .5;}
.group_setup figure.selected img.selected {opacity: 1;}

/* intro (and error) page */
#group_setup_intro .main_content,
#group_setup_error .main_content {padding: 0 2em;}
#group_setup_intro ul {margin-bottom: 1.5em;}
#group_setup_intro ul li {margin-bottom: .6em;}
	div#intro_message_active { display: none;}
	div#intro_message_active.active { display: block; font-weight: bold;}

/* device naming page */
.group_setup .name_input {display: table; width: 100%; padding: 0 2em;}
.group_setup input {width: 100%;}
.group_setup .input_row {display: table-row;}
.group_setup .input_cell {display: table-cell;}
.group_setup .input_suffix {text-align: center; vertical-align: middle; padding-left: .6em;}
.group_setup .input_field {width: 100%;}


/* vegas .group_setup input {width: 80%; filter: invert(100%); -webkit-filter: invert(100%);} */
.group_setup .errors {padding-top: .4em;}
.group_setup .errors > div {color: #b90000; display: none;}
.group_setup .errors > div.show {display: block;}

/* device selection pages */
.group_setup ul.device_list {border-top: 1px solid #d8d8d8; padding: 0; }
/* vegas .group_setup ul.device_list {border-top: 1px solid #252525; padding: 0; filter: invert(100%); -webkit-filter: invert(100%); } */

/* device selection transistions */

.group_setup .device_list li span.role, 
.group_setup figure img {transition: opacity 0.5s; -webkit-transition: opacity 0.5s;}
.group_setup .ani_slide_100 .device_list li span.device_name {transition: width 0.2s; -webkit-transition: width 0.2s}
.group_setup .but .but_text {transition: all 0.5s; -webkit-transition: all 0.5s;}

/* device items default */
.group_setup .device_list li {
	padding: 0 20px 0 20px;
	border-bottom: 1px solid #d8d8d8;

}
.group_setup .device_list li .nav_item_text {


}
/* hover */
.group_setup .stable .device_list li:hover,
.group_setup .stable .device_list li:hover .nav_item_text {background-color: #fff;}

/* active */
.group_setup .stable .device_list li:active,
.group_setup .stable .device_list li:active .nav_item_text { background-color: #fff;}

/* pending */
.group_setup .stable .device_list li.pending:hover,
.group_setup .stable .device_list li.pending:active,
.group_setup .stable .device_list li.pending:hover .nav_item_text,
.group_setup .stable .device_list li.pending:active .nav_item_text,
.group_setup .device_list li.pending,
.group_setup .device_list li.pending .nav_item_text { background-color: #fff;}

/* selected */
.group_setup .stable .device_list li.selected:hover,
.group_setup .stable .device_list li.selected:active,
.group_setup .stable .device_list li.selected:hover .nav_item_text,
.group_setup .stable .device_list li.selected:active .nav_item_text,
.group_setup .device_list li.selected,
.group_setup .device_list li.selected .nav_item_text { background-color: #fff;}

/* device name and role */
.group_setup .device_list li span.device_name {text-overflow: ellipsis; overflow: hidden; float: left; display: block;}
.group_setup .device_list li span.role {font-weight: bold; text-transform: uppercase; opacity: 0; position: absolute;}
.group_setup .device_list li.selected span.role {opacity: 1;}


/* END GROUP SETUP VIEW */


