#center-container { position:relative; height:100%; width:100%; /* background-color:#031924; */ color:#444; } .showcard, #showcard { position:absolute; display:block; top:-1000px; left:-1000px; margin-top: -181px; width:226px; height:320px; color:#FFF; text-align: left; overflow: visible; z-index:14000; background: #FFF; border-radius:5px; box-shadow: 6px 6px 8px rgba(0,0,0,0.4); } #showcard .contributor { font-size:14px; } .text { margin: 7px; } #infovis { position:relative; width:100%; height:100%; margin:0; overflow:hidden; } .showcard .permission { width:100%; height:100%; } .CardOnGraph { display:block; position:relative; width:100%; height:100%; color:#000; z-index: 25; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .CardOnGraph .scroll { display:block; padding:5px 0 0 10px; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .CardOnGraph .type { position: absolute; color: white; top: -22px; right: 0; font-weight: bold; font-size: 20px; line-height: 24px; } .CardOnGraph .title { font-size:22px; line-height:25px; display:block; padding:5px; font-weight: bold; text-align: center; -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: none; /* OLD - Firefox 19- */ -webkit-flex: none; /* Chrome */ -ms-flex: none; /* IE 10 */ flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .best_in_place_name { } .best_in_place_name input{ height: 15px; padding: 5px 0; width: 100%; margin: 0; border: 0; outline: none; font-size: 22px; font-weight:bold; line-height: 25px; background: white; color: black; text-align:center; font-family: 'LatoLight'; } .desc { font-size:15px; line-height:19px; } .best_in_place_desc textarea { padding: 0; width: 100%; margin: 0; border: 0; outline: none; font-size: 15px; line-height: 19px; background: white; color: black; font-family: 'LatoLight'; } .desc h3 { font-style:normal; margin-top:5px; } .best_in_place_desc input { float: right; margin: 2px 0px 0px 2px; padding: 1px 5px; } .best_in_place_desc { display:block; margin-top:2px; } #edit_synapse .best_in_place_desc { width: auto; } .CardOnGraph .links { position:relative; border-bottom: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: none; /* OLD - Firefox 19- */ -webkit-flex: none; /* Chrome */ -ms-flex: none; /* IE 10 */ flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .linkItem { float:left; min-width:40px; height:40px; background-repeat: no-repeat; background-position: center center; background-size: 27px 27px; z-index: 2; position: relative; } .CardOnGraph .icon { position:absolute; width:100%; z-index:1; } .linkItem.contributor { background-image: url(MMCCicon_mapper_black.png); margin-left:20px; z-index:3; } .linkItem.mapCount { background-image: url(MMCCicon_map_black.png); background-size: 22px 22px; background-position: 0px center; line-height: 40px; min-width: 16px; padding-left: 24px; color:black; } .linkItem.synapseCount { background-image: url(MMCCicon_synapse_black.png); background-size: 22px 22px; background-position: 0px center; line-height: 40px; min-width: 16px; padding-left: 24px; } .linkItem.mapPerm { } .linkItem.mapPerm.co { background-image: url(MMCCicon_commons.png); } .linkItem.mapPerm.pu { background-image: url(MMCCicon_public.png); } .linkItem.mapPerm.pr { background-image: url(MMCCicon_private.png); } .showcard .yourTopic .mapPerm:hover { background-image: url(/assets/MMCCicon_maximize_arrow_black.png); background-size: 31px 25px; background-position-x: 8px; cursor:pointer; } .showcard .yourTopic .mapPerm.minimize { background-image: url(MMCCicon_minimize_arrow_black.png) !important; background-size: 31px 25px; background-position-x: 8px; cursor: pointer; } .mapPerm .permissionSelect { list-style: none; width: 40px; height: 80px; position: relative; top: 40px; } .mapPerm .permissionSelect li { width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: 27px 27px; background-color:white; } .mapPerm .permissionSelect .commons { background-image: url(MMCCicon_commons.png); } .mapPerm .permissionSelect .public { background-image: url(MMCCicon_public.png); } .mapPerm .permissionSelect .private { background-image: url(MMCCicon_private.png); } .mapPerm .permissionSelect .commons:hover { background-image: url(MMCCicon_commons_black.png); } .mapPerm .permissionSelect .public:hover { background-image: url(MMCCicon_public_black.png); } .mapPerm .permissionSelect .private:hover { background-image: url(MMCCicon_private_black.png); } .linkItem.topicPopout { background-image: url(MMCCicon_pop-out_black.png); } .CardOnGraph .metacodeTitle { font-style: italic; font-family: 'vinyl'; text-transform: uppercase; position: absolute; line-height: 36px; font-size: 20px; display: none; width: 90%; padding-left: 10%; padding-top: 4px; background-color: #64BC61; } .permission.canEdit .metacodeTitle { cursor:pointer; background-image: url(MMCCicon_maximize_arrow_black.png); background-repeat:no-repeat; background-position: right center; } .permission.canEdit .metacodeTitle.minimize { background-image: url(MMCCicon_minimize_arrow_black.png); } .CardOnGraph .metacodeImage { cursor:move; width:50px; height:50px; position:absolute; left:-25px; top:-5px; background-size:50px 50px; background-position:0 0; background-repeat:no-repeat; } #metacodeOptions { display:none; } .CardOnGraph .metacodeSelect { display:none; width:100%; z-index: 2; position: absolute; background: #EAEAEA; height: 150px; } .CardOnGraph .metacodeSelect ul { font-style: italic; font-family: 'vinyl'; text-transform: uppercase; position: absolute; line-height: 36px; font-size: 20px; display:block; width: 100%; margin:0; padding: 0; list-style:none; height:150px; overflow:hidden; } .CardOnGraph .metacodeSelect ul li { background-color: #EAEAEA; width:100%; border-bottom:1px solid #AAAAAA; cursor:pointer; } .CardOnGraph .metacodeSelect ul li:hover { background-color: #F8F8F8; } .CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName { float:left; } .CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip { display:block; } .CardOnGraph .tip, .mapCard .tip { display:none; position: absolute; background: white; width: 155px; top: 35px; left: 0; color: black; border-radius: 4px; font-size:15px !important; font-family:'LatoLight'; line-height:17px; padding: 3px 5px 2px; border: 1px solid black; z-index:100; } .CardOnGraph .link { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; border-top: 1px solid #AAAAAA; width:100%; max-height:34px; background: url(MMCCicon_link.png) no-repeat 6px 5px; background-size:24px 24px; } .CardOnGraph .best_in_place_link { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-left: 40px; padding-top:9px; font-size: 16px; line-height: 16px; } .best_in_place_link input{ height: 16px; margin: -1px 0 0 0; border: 0; outline: none; font-size: 16px; line-height: 16px; line-height: 16px; background: white; color: black; font-family: 'LatoLight'; } .CardOnGraph .go-link { max-width: 34px; height: 34px; background: url(MMCCicon_go.png) no-repeat center center; background-size: 20px 20px; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ margin-right:12px; } .cardSettings { position: absolute; left: 12px; top: 12px; } .editSettings { background: #ddd; border-radius: 10px; padding: 5px 0 5px 5px; position: relative; left: 16px; width: 175px; opacity: 0.98; box-shadow: 4px 4px 5px #888888; border: 1px solid #AAA; z-index: 5; } .editSettings span { display: inline-block; } .permActivator { width: 16px; height: 16px; background: url('settings.png') no-repeat 0 0; overflow:hidden; position: absolute; left: 0px; top: 30px; } #edit_synapse .mapPerm, #edit_synapse .permActivator { position: static; display: inline-block; color: #000; } #edit_synapse .mapPerm { width: 20px; height:20px; background-repeat: no-repeat; background-size: 20px 20px; margin: 10px 12px 0 12px; } #edit_synapse .mapPerm.co { background-image: url("/assets/MMCCicon_commons.png"); } #edit_synapse .mapPerm.pu { background-image: url("/assets/MMCCicon_public.png"); } #edit_synapse .mapPerm.pr { background-image: url("/assets/MMCCicon_private.png"); } #edit_synapse .permActivator { position: absolute; margin-top: -1.3em; } #edit_synapse { background: url("/assets/MMCCicon_synapse_black.png") no-repeat scroll 0 center / 30px 30px #FFFFFF; border-radius: 5px; padding: 5px 5px 5px 30px; color: #000; } #edit_synapse_name { margin-left: 0.4em; border-bottom: 1px solid black; text-align:center; max-width: 160px; } #edgeUser { display:inline-block; background-position: center center; background-repeat: no-repeat; background-size: 20px 20px; height: 20px; min-width: 20px; position: relative; background-image: url("MMCCicon_mapper_black.png"); margin: 10px 0 0 10px; } #edgeUser.hoverForTip:hover .tip { display:block; } #edgeUser .tip { background: none repeat scroll 0 0 #000000; border-radius: 4px; color: #FFFFFF; display: none; font-family: 'LatoRegular'; font-size: 15px !important; line-height: 17px; padding: 3px 5px 2px; position: absolute; left: 0; text-align: center; top: 23px; z-index: 100; } #edit_synapse .click-to-edit { margin-left: 0.3em; } #edit_synapse.yourEdge .mapPerm:hover { background-image: url(/assets/MMCCicon_maximize_arrow_black.png); background-size: 24px 17px; background-position: 0px 2px; cursor:pointer; } #edit_synapse.yourEdge .mapPerm.minimize { background-image: url(MMCCicon_minimize_arrow_black.png) !important; background-size: 24px 17px; background-position: 0px 2px; cursor: pointer; } #edit_synapse .mapPerm .permissionSelect { list-style: none; width: 26px; height: 52px; position: relative; top: 20px; left:-3px; } #edit_synapse .mapPerm .permissionSelect li { width: 26px; height: 26px; background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; background-color:white; } /* Map Cards */ .map { display:inline-block; width:226px; height:320px; color:#FFF; text-align: left; overflow: visible; background: #FFF; border-radius:5px; box-shadow: 6px 6px 8px rgba(0,0,0,0.4); margin:16px 16px 16px 19px; } .mapCard { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; position:relative; width:100%; height:320px; color:#000; z-index: 25; } .mapCard .metacodeImage { width: 50px; height: 50px; position: absolute; left: -25px; top: -5px; background-size: 50px 50px; background-position: 0 0; background-repeat: no-repeat; } .mapCard .scroll { display:block; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ overflow:hidden; padding:5px 0 5px 10px; } .mCS_no_scrollbar { padding-right: 5px; } .mapCard .type { position: absolute; color: white; top: -22px; right: 0; font-weight: bold; font-size: 20px; line-height: 24px; } .mapCard .title { font-size:22px; line-height:25px; display:block; padding:5px; font-weight: bold; text-align: center; -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: none; /* OLD - Firefox 19- */ -webkit-flex: none; /* Chrome */ -ms-flex: none; /* IE 10 */ flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .mapCard .links { position:relative; border-bottom: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: none; /* OLD - Firefox 19- */ -webkit-flex: none; /* Chrome */ -ms-flex: none; /* IE 10 */ flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .mapCard .icon { position:absolute; width:100%; z-index:1; } .linkItem.topicCount { background-image: url(MMCCicon_topic.png); background-size: 22px 22px; background-position: 0px center; line-height: 40px; min-width: 16px; padding-left: 24px; }