##########################
# ATMP Styles Guidelines #
##########################

Some notes of using stylessheets in ATMP.


=========================================================================
=== All views have to implement the main stylesheet ID's and Classes ===
=========================================================================

The main stylessheets are:
    class="ATMP <nameoftheview> <emty-marker>"
    id="ATMP-<documentid>" 

Description:
The main stylesheets are wrapper around the ATMP and useful as base of all css definitions.
You can do things like: 

.ATMP.top-right_view .documentDescription {
    margin-top: 1em;
    margin-bottom: 2.5em;
    clear: both;
}

That means that you set in all ATMP's in the top-right view the documentDescription.
If you want set this only for one ATMP. You can do it like this:

#ATMP_my-first-mediapage.ATMP.top-right_view .documentDescription {
    margin-top: 1em;
    margin-bottom: 2.5em;
    clear: both;
}

This set only the one ATMP with the id "my-first-mediapage". If you want to use this in your plonesite.
Define the that document-id only once in the plonesite! 

Example definition:    
<div tal:attributes="id python: 'ATMP_'+here.id;
                     class python: 'ATMP top-right_view' + test(results, '', ' empty');">

HTML-Source:
<div id="ATMP_my-first-mediapage" 
     class="ATMP top-right_view">



=================================================================
=== Most views has an TopImage (the default view for example) ===
=================================================================

The first Image on some views (TopImage):
    class="ATMP_TopImage"
    id="ATMP_Image-1"

Example:
<div class="ATMP_TopImage"
     id="ATMP_Image-1"


==========================================================================
=== Most views display the additional images in one or more ImageBoxes ===
==========================================================================

Other Images displayed often in an ImageBox:
    class="ATMP_ImageBox1"

Example:
<div class="ATMP_ImageBox1">



================================================
=== All images have this following structure ===
================================================

<div class="ATMP_SubImage" id="ATMP_Image-<image-number>">
    <a title="zoom" alt="" href="URLtoLargeView">
        <img src="" alt="" title="">
    </a>
</div>


