_details.scss

@import "icon-fonts";
.main {
    margin:2em 0 5em;
	h4 .title{
		font-size: 24px;
	}
}

.object-details {
	h4 {
        font-size: 14px;
        letter-spacing: 1px;
 	    .lt{
            float: left;
        }
        .rt {
            padding-top:5px;
            overflow: hidden;
        }
        .arrow {
		    position: relative;
            padding: 0 8px;
		    &:hover {
			    top: 2px;
			    cursor: pointer;
		    }
	    }
       .label{
            float: right;
            margin-left: 15px;
            margin-bottom: 10px;
            background: $almost-white;
            color: $total-black;
            &.important {
                font-weight: bold;
            }
            &.label-success {
                background: $good-karma-color;
                border-color: $good-karma-color;
                color: $almost-white;
            }
        }
        em {
            float: none;
            &.os-info {
                float: right;
                position: relative;
                bottom: 3px;
                img {
                    height: 26px; // *** i think that is the size of all images temp use for preview
                }
            }
	    }
	}
	h3 {
        font-size: 18px;
		margin: 0 0 2em;
        font-weight: 400;
        line-height: $details-title-height;
        em {
            margin-left: 10px;
            font-size: 14px;
        }
        span[class^="snf-details"] {
            float: left;
            margin-right: 8px;
            font-size: $details-title-height;
        }
	}
    .icon-link {
        margin-right: 10px;
    }
	p {
		margin: 10px 20px;
		font-style: italic;
	}

	.length {
		margin-left: 6px;
		border: 0 none;
		font-style: italic;
		&::before {
		    content: '( ';
		}
		&::after {
		    content: ' )';
		}
	}
	&>.object-details {
		margin-left: -20px;
		margin-right: -20px;
		padding:12px 20px;
	}
}

.object-details-content .nav-tabs>li {
	a {
		opacity: 0.7;
		color: white;
	}
	&.active>a {
		opacity: 1;
		border-color: transparent;
		background: $gray-light;
		color: white;
		border-radius: 0;
	}
	&:not(.active)>a:hover {
		opacity: 1;
		color: white;
		border-color: transparent;
		background: transparent;
	}
}

.tab-pane {
	overflow: auto;
	th {
		color: $gray-dark;
	}
}

.part-two {
	&>.object-details {
        border-top: 2px solid $gray-light-extra;		
        background: lighten($body-bg, 3%);
		padding: 20px;
		.object-details {
			padding: 5px 20px;
            &:hover {
                background: lighten($body-bg, 5%);
            }
		}
	}
}


.snf-details-volume {
    @extend .snf-volume-full;
}

.snf-details-vm {
    @extend .snf-pc-full;
}
.snf-details-project {
    @extend .snf-clipboard-h;
}
.snf-details-network {
    @extend .snf-network-full;
}
.snf-details-quota {
    @extend .snf-wallet-full;
}

.snf-details-nic {
    @extend .snf-nic-full;
}
.snf-details-user {
    @extend .snf-user-full;
}